Integrar mapa interactivo en tu sitio web con Leaflet y Open Street Map

Para implementar OpenStreetMap con Leaflet, primero necesitarás incluir las bibliotecas de Leaflet y OpenStreetMap en tu proyecto. Puedes hacerlo mediante CDN o descargando las bibliotecas e incluyéndolas en tu proyecto localmente.

Las bibliotecas se encuentran en https://leafletjs.com/download.html. Para este tutorial utilizaremos las bibliotecas mediante CDN. A continuación, sigue los pasos:

Creamos un documento HTML en el editor de tu preferencia, agregamos la estructura básica y lo guardamos como mapa.html

<!DOCTYPE html>
<html lang="es">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Mapa</title>
</head>

<body>

</body>

</html>

Agregamos la hoja de estilos y el javascript de leaflet antes de </head>:

<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.3/dist/leaflet.css" integrity="sha256-kLaT2GOSpHechhsozzB+flnD+zUyjE2LlfWPgU04xyI=" crossorigin="" />

<script src="https://unpkg.com/leaflet@1.9.3/dist/leaflet.js" integrity="sha256-WBkoXOwTeyKclOHuWtc+i2uENFpDZ9YPdf5Hf+D7ewM=" crossorigin=""></script>

Agrega un contenedor HTML para el mapa, en el body. Por ejemplo:

 <div id="mi_mapa" style="width: 100%; height: 600px;"></div>

Inicializa el mapa y establece su vista inicial y nivel de zoom. Puedes hacerlo de la siguiente manera dentro de un <script>:

let map = L.map('mi_mapa').setView([19.432747, -99.133179], 15)

Agrega una capa de OpenStreetMap al mapa utilizando la clase L.tileLayer. Puedes hacerlo utilizando el siguiente código:

L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
            attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
        }).addTo(map);

Agrega marcadores a tu mapa según sea necesario. Puedes hacerlo utilizando las clases L.marker. Por ejemplo:

L.marker([19.4327, -99.1331]).addTo(map)
L.marker([19.4349, -99.1313]).addTo(map)

El método bindPopup adjunta una ventana emergente con el contenido HTML especificado a su marcador, de modo que la ventana emergente aparece cuando hace clic en el objeto, y el método openPopup (solo para marcadores) abre inmediatamente la ventana emergente adjunta.

L.marker([19.4327, -99.1331]).addTo(map).bindPopup("Zócalo de la Ciudad de México")
L.marker([19.4349, -99.1313]).addTo(map).bindPopup("Templo Mayor")

Resultado:

Código completo:

¡Eso es todo! Ahora deberías tener un mapa de OpenStreetMap totalmente funcional en tu sitio web con Leaflet. Puedes personalizar aún más el mapa con las opciones disponibles en las bibliotecas de Leaflet y OpenStreetMap.

Tutorial en vídeo:

Por Favor Compártelo: