Documentation
Reyhane Masumi edited this page May 2, 2020
·
2 revisions
Here’s the complete code to display a map with static and dynamic marker:
import React, {Component} from 'react';
import {Platform, StyleSheet, Text, View, Image} from 'react-native';
import Mapir from 'mapir-react-native-sdk'
type Props = {};
export default class App extends Component<{}> {
constructor(props) {
super(props);
this.state = {
markers: [
{ latitude: 51.422548, longitude: 35.732573},
],
};
}
addMarker(coordinates) {
this.setState({
markers: [...this.state.markers ,{ latitude: coordinates[0], longitude: coordinates[1]}]
});
}
componentDidMount() {
{
PermissionsAndroid.requestMultiple(
[PermissionsAndroid.PERMISSIONS.ACCESS_FINE_LOCATION,
PermissionsAndroid.PERMISSIONS.ACCESS_COARSE_LOCATION],
{
title: 'Give Location Permission',
message: 'App needs location permission to find your position.'
}
).then(granted => {
console.log(granted);
resolve();
}).catch(err => {
console.warn(err);
reject(err);
});
}
}
render() {
return (
<View style={styles.container}>
<Mapir
apiKey={'YOUR API KEY'}
zoomLevel={13}
centerCoordinate={[51.422548, 35.732573]}
showUserLocation={true}
onLongPress={e => this.addMarker(e.geometry.coordinates)}
style={styles.container}>
<Mapir.Marker
id={'1'}
coordinate={[51.422548, 35.732573]}
/>
{this.state.markers.map(markers =>
(<Mapir.Marker
id={'2'}
key={markers.latitude}
coordinate={[markers.latitude, markers.longitude ]}
/>)
)}
</Mapir>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
}
});Here’s the complete code to display a map with line:
import React, {Component} from 'react';
import {Platform, StyleSheet, Text, View, Image} from 'react-native';
import Mapir from 'mapir-react-native-sdk'
type Props = {};
export default class App extends Component<{}> {
constructor(props) {
super(props);
this.state = {
route:
{
"type": "FeatureCollection",
"features": [
{
"type": "Feature",
"properties": {},
"geometry": {
"type": "LineString",
"coordinates": [
[
51.422587,
35.732549
],
[
51.442226,
35.695909
]
]
}
}
]
},
};
}
componentDidMount() {
{
PermissionsAndroid.requestMultiple(
[PermissionsAndroid.PERMISSIONS.ACCESS_FINE_LOCATION,
PermissionsAndroid.PERMISSIONS.ACCESS_COARSE_LOCATION],
{
title: 'Give Location Permission',
message: 'App needs location permission to find your position.'
}
).then(granted => {
console.log(granted);
resolve();
}).catch(err => {
console.warn(err);
reject(err);
});
}
}
render() {
return (
<View style={styles.container}>
<Mapir
apiKey={'YOUR_API_KEY'}
zoomLevel={13}
centerCoordinate={[51.422548, 35.732573]}
showUserLocation={true}
style={styles.container}>
<Mapir.Marker
id={'1'}
coordinate={[51.422548, 35.732573]}
/>
<Mapir.ShapeSource id='line1' shape={this.state.route}>
<Mapir.LineLayer id='linelayer1' style={{lineColor:'red'}} />
</Mapir.ShapeSource>
</Mapir>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
}
});Here’s the complete code to display a map with Raster:
import React, {Component} from 'react';
import {Platform, StyleSheet, Text, View, Image} from 'react-native';
import Mapir from 'mapir-react-native-sdk'
type Props = {};
export default class App extends Component<{}> {
constructor(props) {
super(props);
this.state = {
route:
{
"type": "FeatureCollection",
"features": [
{
"type": "Feature",
"properties": {},
"geometry": {
"type": "LineString",
"coordinates": [
[
51.422587,
35.732549
],
[
51.442226,
35.695909
]
]
}
}
]
},
};
}
componentDidMount() {
{
PermissionsAndroid.requestMultiple(
[PermissionsAndroid.PERMISSIONS.ACCESS_FINE_LOCATION,
PermissionsAndroid.PERMISSIONS.ACCESS_COARSE_LOCATION],
{
title: 'Give Location Permission',
message: 'App needs location permission to find your position.'
}
).then(granted => {
console.log(granted);
resolve();
}).catch(err => {
console.warn(err);
reject(err);
});
}
}
render() {
return (
<View style={styles.container}>
<Mapir
apiKey={'YOUR_API_Key'}
zoomLevel={13}
centerCoordinate={[51.422548, 35.732573]}
showUserLocation={true}
style={styles.container}>
<Mapir.RasterSource
apiKey={'YOUR_API_KEY'}>
<Mapir.RasterLayer id="shiveh-layer"/>
</Mapir.RasterSource>
<Mapir.Marker
id={'1'}
coordinate={[51.422548, 35.732573]}
/>
<Mapir.ShapeSource id='line1' shape={this.state.route}>
<Mapir.LineLayer id='linelayer1' style={{lineColor:'red'}} />
</Mapir.ShapeSource>
</Mapir>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
}
});Mapir SDK is based on Mapbox Maps SDK for React Native v7.0.0 and provides extra API methods over Mapbox.