¿Leaflet map – Cómo crearlo?


Leaflet Map

En este artículo veremos Cómo crear un map con Leaflet / OpenStreetMap , algo similar a Google Maps , Leaflet es una biblioteca JavaScript de código abierto para crear mapas interactivos en la web o dispositivos móviles, que se pueden combinar con extensiones como postgis para crear mapas dinámicos con datos de bases de datos como postgresql / mysql entre otras.

¿Leaflet map – Cómo agregar leaflet js en Symfony PHP?

Primero agregamos el cdn en el bloque de estilo con el uso de plantillas twig , si no sabes como funciona este sistema de plantillas, revisa este artículo Plantillas Twig , este paso es necesario para crear el map con leaflet.

Leaflet Js

Agregaremos algunas etiquetas para el contenedor , usaremos Bootstrap 4 para que cubra 6 columnas en la cuadrícula, la cuadrícula funciona con 12 columnas, ahora apuntará al ID del mapa llamado mapid .

Grid

Como vemos la librería tiene varios métodos, tenemos el método map (‘mapid’) donde apuntaremos al id, setView () colocaremos algunas coordenadas aquí, podemos combinarlo con postgis para crear mapas con datos de base de datos o apis, pero esa es otra historia, nos interesa el método openPopup () si lo ponemos después de addTo (map) cargará la ventana emergente en el mapa de una vez.

  
     var map = L.map('mapid').
     setView([40.6643, -73.9385],
     15);

     L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
    attribution: 'Map data © OpenStreetMap contributors, CC-BY-SA, Imagery © CloudMade',
    maxZoom: 18
    }).addTo(map);

     L.control.scale().addTo(map);

     L.marker([40.6643, -73.9385],{draggable: true}).bindPopup("OpenGisCRM
contacto@opengiscrm.com").addTo(map).openPopup();

Resultado de la carga de la ventana emergente.


Leaflet Map - Script

Si ponemos el método openPopup () antes de agregarlo al mapa addTo (map) , solo se mostrará al hacer clic con el mouse.


     var map = L.map('mapid').
     setView([40.6643, -73.9385],
     15);

     L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
    attribution: 'Map data © OpenStreetMap contributors, CC-BY-SA, Imagery © CloudMade',
    maxZoom: 18
    }).addTo(map);

     L.control.scale().addTo(map);

      L.marker([40.6643, -73.9385],{draggable: true}).bindPopup("OpenGisCRM
contacto@opengiscrm.com").openPopup().addTo(map);

Resultado de cargar el mapa, solo aparece la ventana emergente al hacer clic.

Leaflet Map - Ejemplo 1

Si queremos agregar un círculo usaremos el método circle () con sus coordenadas.


     var map = L.map('mapid').
     setView([40.6643, -73.9385],
     15);

     L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
    attribution: 'Map data © OpenStreetMap contributors, CC-BY-SA, Imagery © CloudMade',
    maxZoom: 18
    }).addTo(map);

     L.control.scale().addTo(map);


     L.marker([40.6643, -73.9385],{draggable: true}).bindPopup("OpenGisCRM
contacto@opengiscrm.com").addTo(map).openPopup(); var circle = L.circle([40.6643, -73.9385], { color: 'red', fillColor: '#f03', fillOpacity: 0.5, radius: 500 }).addTo(map);

Resultado cargando el mapa.

Leaflet Map - Ejemplo 2

Si quieres aprender mas sobre leaflet, aprende como crear aplicaciones con este curso