El Mapa Negro — Por Qué Leaflet
La historia del mapa negro
Section titled “La historia del mapa negro”Durante el desarrollo de este módulo, el primer intento fue usar react-native-maps con tiles de OpenStreetMap. El código era correcto. La instalación era correcta. Pero al abrir la app en Expo Go… mapa negro. Completamente negro.
¿Por qué? Aquí es donde entra nuestro trabajo de investigación.
🔍 Anatomía del Bug
La librería estándar parece ser la opción correcta.
Expo Go ya tiene Google Maps precompilado.
Sin API key, Google Maps bloquea el renderizado por seguridad.
Tus tiles de OSM quedan ocultos detrás de una capa de error.
La Solución: Leaflet + WebView
Section titled “La Solución: Leaflet + WebView”Para romper el bloqueo nativo de Google Maps en Expo Go, utilizaremos Leaflet.js corriendo dentro de un WebView.
| Librería | Expo Go | API Key | Costo | Nivel |
|---|---|---|---|---|
| Google Maps SDK | ❌ | ✅ | 💰 | Producción |
| react-native-maps | ❌ | ❌ | Gratis | Producción |
| react-native-leaflet-view | ✅ | ❌ | Gratis | Educativo |
Un WebView es como poner un televisor dentro de tu app. Tu app React Native es la habitación; el televisor (WebView) muestra una página web. Leaflet.js es la página web que se reproduce en ese televisor.
¿Qué es un tile?
Section titled “¿Qué es un tile?”Los mapas no son una foto gigante. Se dividen en mosaicos llamados Tiles.
Mosaico de 256x256 píxeles que forman la imagen global.
Cada vez que te mueves, la app descarga los cuadrados necesarios. Este sistema {z}/{x}/{y} permite que el mapa cargue rápido incluso con conexiones lentas.