Para compartir una ubicación rápida con OpenStreetMap puedes ir directamente a OpenStreetMap.org y localizar el lugar que deseas compartir, ya sea indicando una dirección exacta o unas coordenadas:
En el menú derecho utiliza la opción «Compartir», selecciona HTML y copia el código HTML que tendrás que incrustar en tu página.
Ejemplo de mapa incrustado:
Ver mapa más grande
Pero si necesitas crear un mapa personalizado, con varios marcadores, con la posibilidad de insertar áreas, personalizar la imagen del marcador, podemos integrar OpenStreetMap en nuestro proyecto web gracias a las librerías de Leaflet y a los fondos de MapBox.
Para dar nuestros primeros pasos vamos a ejecutar un ejercicio sencillo. Crea un nuevo directorio con los siguientes archivos:
- index.html
- estilos.css
En el archivo index.html añade las librerías de LeafLet:
Archivo CSS:
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.6.0/dist/leaflet.css"
integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ=="
crossorigin=""/>Enlaza también tu archivo de estilos.css:
<link rel="stylesheet" href="estilos.css"/>Archivo JS:
<script src="https://unpkg.com/leaflet@1.6.0/dist/leaflet.js"
integrity="sha512-gZwIG9x3wUXg2hdXF6+rVkLF/0Vi9U8D2Ntg4Ga5I5BZpVkVxlJWbSQtXPSiUTtC0TjtGOmxa1AJPuV0CPthew=="
crossorigin="">
</script>Y crea un DIV con un identificador, por ejemplo:
<div id="mimapa"></div>Ajusta con CSS el alto que desees para el mapa:
#mimapa {height: 600px;}De forma que tu index.html quede más o menos así:
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.6.0/dist/leaflet.css"
integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ=="
crossorigin=""/>
<link rel="stylesheet" href="estilos.css"/>
<script src="https://unpkg.com/leaflet@1.6.0/dist/leaflet.js"
integrity="sha512-gZwIG9x3wUXg2hdXF6+rVkLF/0Vi9U8D2Ntg4Ga5I5BZpVkVxlJWbSQtXPSiUTtC0TjtGOmxa1AJPuV0CPthew=="
crossorigin=""></script>
<title>Mapa con Open Street Map</title>
</head>
<body>
<div id="mimapa"></div>
</body>
</html>A continuación vamos a añadir un poco de JavaScript para inicializar el mapa en una ubicación predefinida. Este código podemos insertarlo en el archivo index.html a continuación del DIV o en un archivo de funciones JavaScript externo.
<script>
var mymap = L.map('mimapa').setView([37.1698, -3.965], 18);
</script>Utiliza las coordenadas con las que quieras inicializar el mapa, el segundo parámetro «18» corresponde al ZOOM inicial.
Ahora tenemos que llamar a las librerías de MapBox para dibujar el mapa:
L.tileLayer('https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw', {
maxZoom: 25,
attribution: 'Datos del mapa de © <a href="https://www.openstreetmap.org/">OpenStreetMap</a>, ' + '<a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, ' + 'Imágenes © <a href="https://www.mapbox.com/">Mapbox</a>',
id: 'mapbox/streets-v11'
}).addTo(mymap);No olvides especificar las atribuciones tal y como se exige en las condiciones y términos de uso.
attribution: 'Datos del mapa de © <a href="https://www.openstreetmap.org/">OpenStreetMap</a>, ' + '<a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, ' + 'Imágenes © <a href="https://www.mapbox.com/">Mapbox</a>Existen varios tipos de mapa en MapBox, puedes consultar en su documentación y utilizar el que prefieras, para el ejemplo hemos utilizado «streets-v11».
Con este código ya tenemos inicializado un mapa con una ubicación y zoom predefinidos.
Añadir un marcador
Vamos a añadir nuestro primer marcador:
var marker = L.marker([37.1698, -3.965]).addTo(mymap);Especifica las coordenadas del marcador.
Popups en marcadores
Podemos activar un popup utilizando el método bindPopup, con información al hacer clic en el marcador. La información podemos generarla en HTML con todas las ventajas que conlleva (insertar links, imágenes…):
marker.bindPopup("<b>Mi ubicación</b><br><a href='#'>Solicita más información</a>");
Personalizar el marcador
Incluso podemos personalizar el tipo de marcador por defecto agregando una imagen.
var marcador = L.icon({
iconUrl:'images/marcador.png',
iconSize: [60, 85]
});Y asignarlo a un marcador:
var marker = L.marker([37.1698, -3.965], {icon: marcador}).addTo(mymap);
Y recuerda que puedes agregar todos los marcadores que necesites (por ejemplo, extraídos de una base de datos):
var marker2 = L.marker([37.1699, -3.968], {icon: marcador}).addTo(mymap);
var marker3 = L.marker([37.1697, -3.966], {icon: marcador}).addTo(mymap);
Añadir un área (círculo)
Hay casos en los que no nos interesa especificar la ubicación exacta del marcador, si no una zona aproximada (muy habitual por ejemplo en webs inmobiliarias, donde no queremos indicar dónde hay inmuebles vacíos…).
var circle = L.circle([37.1697, -3.964], {
color: 'red',
fillColor: '#f03',
fillOpacity: 0.5,
radius: 40
}).addTo(mymap);Entre los parámetros que podemos ajustar al area tenemos: las coordenadas, el color principal, el color del borde, la opacidad y el radio del area establecido en metros.
Añadir polígonos
Asímismo tenemos la posibilidad de crear polígonos para deliminar zonas específicas en el mapa, también muy útil para webs inmobiliarias donde podemos delimitar fincas y parcelas.
var polygon = L.polygon([
[37.168474, -3.966202],
[37.167482, -3.966827],
[37.167602, -3.964477]
]).addTo(mymap);Solo tenemos que especificar las coordenadas de cada punto del polígono.
Con esto ya tenemos para empezar a jugar con los mapas de OpenStreetMap.
Todos estos códigos y más los puedes consultar en la documentación de LeafLet y sacarle todo el partido a la API.
https://leafletjs.com/examples.html
Si te ha gustado, por favor, compártelo en tus redes. Nos vemos en el siguiente post 😉
