MapboxGL con React-Native en pequeños pasos
A la hora de integrar mapas en nuestros proyectos con React-Native nos encontramos con varias opciones como el kit de google maps y el kit de apple Mapkit, pero para poder elegir correctamente que proveedor de mapas debemos utilizar tenemos primero que tener en cuenta varios aspectos antes del desarrollo:
- ¿A que parte del mundo estará concentrado tu app?
- ¿Quienes serán los usuarios de la app?
- ¿Que servicios y plugins adicionales tendrán la app?
“ Algunas regiones, por ejemplo, en Rusia y China, están poco representadas por Google Maps. Hay un proyecto de colaboración llamado OpenStreetMap reforzado por una comunidad de voluntarios que agregan información sobre las calles que visitaron. No les preocupa resaltar puntos comercialmente rentables en el mapa, pero están dedicados a crear el mapa más preciso posible.” — Anastasia Osypenko.
¿Que es Mapbox?
Mapbox es una plataforma de datos de localización para webs y móviles de código abierto, que provee la construcción de bloques y proporciona características especiales de localización, como navegación. Búsquedas avanzadas, estadísticas y representación de datos cartográficos .
El sdk posee una librería mantenida por la comunidad que posee componentes re utilizables para integrar mapbox maps a las plataformas IOS y Android.
Para comenzar la integración de mapbox con React-Native debemos inicializar como de costumbre un proyecto en React-Native en una versión igual o superior a la 0.59.
$ react-native init MapboxRN --version react-native@0.59.5Una vez descargado todos los paquetes y carpetas del proyecto procedemos a instalar la librería de la comunidad de Mapbox.
$ npm install @react-native-mapbox-gl/maps --save$ react-native link
Si requieres instalar la librería manualmente para Android debes asegurarte de tener esta configuración en los build.gradle de la carpeta android explicados en este link.
Luego de haber instalado correctamente la librería de mapbox para React-Native procedemos a ejecutar el proyecto y asegurarnos que tenemos instalado correctamente todo con el comando:
$ react-native run-android
Una vez verificado que la instalación de mapbox haya sido correcta debemos importar el componente MapboxGL de la librería en el App.js para implementar mapbox a nuestro proyecto:
import MapboxGL from '@react-native-mapbox-gl/maps'El siguiente paso es adquirir una Api Access tokens de la plataforma de Mapbox para seguir configurando nuestro mapa y así poder mostrarlo en nuestro dispositivo móvil, para esto tenemos que registrarnos en el portal de mapbox y entrar en la sección de nuestra cuenta y luego en la pestaña de tokens.
Una vez obtenido el token de acceso de nuestra cuenta de MapboxGL copiamos la llave y la colocamos en nuestro código con el método de MapboxGL llamado setAccessToken(‘Access tokens’).
Perfecto ya podemos continuar configurando nuestro mapa, ahora utilizaremos el componente Mapview, que es donde inicializaremos nuestro mapa visualmente, le añadiremos varios props como style para que el mapa se muestre correctamente en toda la pantalla del dispositivo, y styleURL que es donde pasaremos el template del mapa predefinido en este caso usaremos Street.
Podemos personalizar un poco la vista para que el mapa se centre y acerque hacia una coordenada en especifico, para esto usaremos el componente Camera dentro de nuestro componente de MapboxGL, a este componente añadiremos varios props para su configuración como son : zoomlevel, animationMode, animationDuration y el centerCoordinate que es donde le pasaremos las coordenadas deseadas.
¡Listo! con esos simples pasos implementamos el sdk de mapboxGL para React-Native 0.59 correctamente en nuestro proyecto y así utilizar todo el potencial de esta excelente herramienta alternativa a google-maps en nuestros dispositivos móviles.
Para mas información y documentación detallada del uso completo de esta herramienta puedes acceder a este enlace.
