Mapbox یکی از بهترین جایگزین های توصیه شده برای Google Maps است.اگر شما دنبال جایگزین برای Google Maps در پروژه react native بعدی خود هستید،نوشته درستی را می خوانید.در این نوشته قصد داریم یک پروژه ساده react native ایجاد کنیم و با استفاده از mapbox نحوه کار با نقشه را یاد بگیریم.
در Mapbox شما می توانید 25000 کاربر فعال ماهانه داشته باشید و برخلاف Google Maps نیازی به اتصال credit card برای ایجاد حساب کاربری نیست.
اولین چیزی که شما نیاز دارید، گرفتن access token از Mapbox است.کافیه که به سایت mapbox برید و یک حساب کاربری ایجاد کنید.سپس وارد Mapbox account شوید و بر روی گزینه create an access token کلیک کنید.
برای استفاده از mapbox در react native نیاز هست تا کتابخانه react native mapbox gl/maps. را با استفاده از دستور زیر نصب کنیم
yarn add @react-native-mapbox-gl/maps
یا
npm install @react-native-mapbox-gl/maps –save
اگر در حال توسعه نسخه IOS هستید،فراموش نکنید که pod install را run کنید.
کامپوننت MapboxGl را از کتابخانه react native mapbox gl/maps ایمپورت کنید
import MapboxGL from '@react-native-mapbox-gl/maps';
شما باید Mapbox را با استفاده از token که در وب سایت ایجاد کرده اید ، به صورت زیر initialize کنید.
MapboxGL.setAccessToken(
'pk.eyJ1IjoicmFzaGlkdGhlZGV2ZWxvcGVyIiwiYSI6ImNrYXBncGlwdjBjbG4yd3FqaXl2ams1NHQifQ.jvRoapH6Ae7QHb8Kx4z9F'
);
ما 3 تا کامپوننت به نام های MapboxGL.MapView, MapboxGL.Camera وMapboxGL.PointAnnotationداریم.MapboxGL.MapView برای نمایش نقشه استفاده می شود، MapboxGL.Camera به ما کمک می کنید تا یک بخش خاص را در ابتدا نمایش دهیم و MapboxGL.PointAnnotation برای annotate یک مکان با استفاده از latitude و longitude مشخص، استفاده می شود
در قطعه کد زیر نحوه نمایش نقشه به همراه marker در یک نقطه خاص پیاده سازی می شود
import React, {Component} from 'react';
import {StyleSheet, View} from 'react-native';
import MapboxGL from '@react-native-mapbox-gl/maps';
MapboxGL.setAccessToken(
'pk.eyJ1IjoicmFzaGlkdGhlZGV2ZWxvcGVyIiwiYSI6ImNrYXBncGlwdjBjbG4yd3FqaXl2ams1NHQifQ.jvRoapH6Ae7QHb8Kx4z9FQ',
);
export default class App extends Component {
constructor(props) {
super(props);
this.state = {
coordinates: [-73.99155, 40.73581],
};
}
render() {
return (
<View style={styles.page}>
<View style={styles.container}>
<MapboxGL.MapView style={styles.map}>
<MapboxGL.Camera
zoomLevel={8}
centerCoordinate={this.state.coordinates}
/>
<MapboxGL.PointAnnotation coordinate={this.state.coordinates} />
</MapboxGL.MapView>
</View>
</View>
);
}
}
const styles = StyleSheet.create({
page: {
flex: 1,
},
container: {
height: '100%',
width: '100%',
backgroundColor: 'blue',
},
map: {
flex: 1,
},
});
اگر شما از functional component استفاده می کنید، مطابق قطعه کد زیر عمل کنید
import React, {useState} from 'react';
import {StyleSheet, View} from 'react-native';
import MapboxGL from '@react-native-mapbox-gl/maps';
MapboxGL.setAccessToken(
'pk.eyJ1IjoicmFzaGlkdGhlZGV2ZWxvcGVyIiwiYSI6ImNrYXBncGlwdjBjbG4yd3FqaXl2ams1NHQifQ.jvRoapH6Ae7QHb8Kx4z9FQ',
);
const App = () => {
const [coordinates] = useState([-73.99155, 40.73581]);
return (
<View style={styles.page}>
<View style={styles.container}>
<MapboxGL.MapView style={styles.map}>
<MapboxGL.Camera zoomLevel={8} centerCoordinate={coordinates} />
<MapboxGL.PointAnnotation coordinate={coordinates} id="Test" />
</MapboxGL.MapView>
</View>
</View>
);
};
const styles = StyleSheet.create({
page: {
flex: 1,
},
container: {
height: '100%',
width: '100%',
backgroundColor: 'blue',
},
map: {
flex: 1,
},
});
export default App;
