¿Leaflet map – Cómo crearlo?

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.

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 .

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.

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.

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.

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