Folleto: Mapas interactivos con JavaScript y OpenStreetMap

¿Qué es lo primero que se te pasa por la cabeza cuando piensas en incrustar mapas en un sitio web? Estoy bastante seguro de que la respuesta es: Google Maps. Y esto es perfectamente comprensible ya que la API de JavaScript fácil de usar permite la adición simple y flexible de contenido personalizado, como marcadores y superposiciones a los mapas. La alternativa gratuita OpenStreetMap no tiene nada similar que ofrecer y, por lo tanto, a menudo se rechaza como la opción válida que de otro modo podría ser. Sin embargo, hay esperanza. El folleto de la biblioteca de JavaScript permite agregar muchas funciones de Google Maps a los mapas basados ​​en el proyecto de código abierto OpenStreetMap.

Folleto

Folleto de OpenStreetMap plus: Primeros pasos

Para comenzar con OpenStreetMap y Leaflet, querrá incrustar el JavaScript junto con la hoja de estilo que lo acompaña en su documento. Entonces necesitas crear un contenedor. div que luego se usará para mostrar el mapa:

<div id="MyMap"></div>

Usando CSS se definen las dimensiones del mapa y el contenedor que lo rodea. El siguiente fragmento se preocupa por la visualización de un área de mapa definida dentro de su contenedor:

var MyMap = L.map("MyMap").setView([51.387, 7.664], 13);

Los valores dentro setView() representan las coordenadas (entre corchetes) así como el factor de zoom. Los botones para acercar y alejar se muestran de forma predeterminada.

Colocación de marcadores y ventanas emergentes en el mapa

Ejemplo de superposiciones con folleto

Para agregar información personalizada al mapa, puede colocar diferentes tipos de superposiciones en él. El marcador clásico de Google Maps está disponible de esta manera:

var marker = L.marker([51.387, 7.664]).addTo(MyMap);

Notarás que el marcador se parece bastante al de Google Maps. Además del marcador, puede colocar una ventana emergente para contenido de texto justo encima del marcador:

marker.bindPopup("This is Berlin.").openPopup();

Además, puede colocar rectángulos, círculos o tipos de polígonos en el mapa. Desde el aspecto visual no encontrarás demasiadas diferencias con Google Maps, lo que hace que Leaflet se convierta en una muy buena alternativa.

Geolocalización y Soporte para Dispositivos Táctiles

Leaflet no solo es adecuado para dispositivos de escritorio, sino que también es compatible con clientes móviles y su funcionalidad especial. En clientes móviles, Leaflet puede leer la posición actual a través de Geolocalización y mostrarla en el mapa:

MyMap.locate({setView: true, maxZoom: 13});

En los dispositivos móviles, puede navegar por el mapa usando gestos de deslizamiento, como el zoom multitáctil.

Conclusión: Leaflet es una alternativa válida para todos aquellos que no quieren usar Google Maps por una u otra razón, pero que no quieren aceptar un conjunto de funciones limitadas o un aspecto subprime. Sin embargo, Leaflet no es capaz de igualar los puntos ásperos que tiene OpenStreetMap cuando se trata de atención al detalle o precisión. Si el área de su mapa no está en una de las regiones desatendidas, Leaflet definitivamente es para usted.

Enlace relacionado

• Una biblioteca de JavaScript para mapas compatibles con dispositivos móviles | Folleto

(dpe)