norfipc.com
Mapas   Mapa del sitio   Reciente
NorfiPC » Mapas » Mapa de OSM

Crear mapas de OpenStreetMap con Leaflet


Actualizado: 17 de noviembre del 2022
Por: Norfi Carrodeguas
Como generar y mostrar mapas de OSM en las páginas de un sitio web, usando la librería gratis y de código abierto Leaflet. Códigos de ejemplo para copiar y pegar.
Crear mapas de OpenStreetMap con Leaflet
En este artículo abordamos uno de los métodos existentes para poder generar los mapas del servicio libre de creación de mapas OpenStreetMap, en las páginas de un blog o sitio web.
Existen otras alternativas, pero Leaflet es el preferido y más empleado por los desarrolladores en la mayoría de los sitios, debido a la gran cantidad de opciones que facilita.
Leaflet es una librería de JavaScript, gratis y de código abierto.
Es ligera, fácil de usar y los mapas generados son adaptables.


Como generar un mapa de OSM usando Leaflet


Con Leaflet podemos generar y mostrar en una página uno o varios mapas de cualquier área geográfica.
Solo basta con insertar una pequeña porción de código Javascript.
A continuación de puede ver un mapa elemental de un área de la Habana Vieja, Cuba, con un marcador indicando la ubicación de la Catedral de la Habana.
Este mapa básico incluye los controles del zoom (aunque se puede usar la rueda del mouse para ampliar y reducir) y los créditos de Leaflet y OSM.
Es adaptable o sea se ajusta automáticamente al tamaño de la pantalla de los teléfonos celulares y tabletas.


Código para crear un mapa de OSM con Leaflet


Para insertar un mapa de cualquier área geográfica usando el servicio de OpenStreetMap y la librería de Leaflet, haz lo siguiente:
1- Carga en la página la hoja de estilo "leaflet.css".
2- Carga el archivo JS "leaflet.js".
3- Crea un contenedor DIV en el lugar exacto de la página donde se desea mostrar el mapa.
4- Inserta el script que carga las miniaturas del mapa, establece donde centrarlo, el nivel de zoom y los elementos que se desean agregarle.
A continuación se muestra el código para crear un archivo HTML, que incluso se puede ejecutar desde la computadora, para cargar un mapa básico, como el que se muestra más arriba en esta página.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Mapa simple de OpenStreetMap con Leaflet</title>
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.0.3/dist/leaflet.css">
</head>
<body>
<h1>Mapa simple de OpenStreetMap con Leaflet</h1>  
<script src="https://unpkg.com/leaflet@1.0.3/dist/leaflet.js"></script>	  
<div id="map" class="map map-home" style="margin:12px 0 12px 0;height:400px;"></div>
<script>
	var osmUrl = 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
		osmAttrib = '&copy; <a href="http://openstreetmap.org/copyright">OpenStreetMap</a> contributors',
		osm = L.tileLayer(osmUrl, {maxZoom: 18, attribution: osmAttrib});
	var map = L.map('map').setView([23.140445, -82.351644], 17).addLayer(osm);
	L.marker([23.141165, -82.351834])
		.addTo(map)
		.bindPopup('La Catedral de la Habana.')
		.openPopup();
</script>
  </body>
</html>
¿Cómo usar el código en un mapa offline?
Copia y pega el código anterior en un archivo de texto plano (creado con el Bloc de Notas) y dale cualquier nombre, pero con la extensión HTML.
Cambia el valor del "zoom" y especifica en "center" las coordenadas donde se centrará el mapa.
Guarda los cambios y da dos clics en el archivo HTML para abrirlo con el navegador predeterminado y cargar los elementos del mapa.


Modificar y agregarle elementos al mapa de OSM


El archivo para descargar al igual que el código, representan un área de la Ciudad de la Habana, pero se puede modificar la ubicación de centrarlo y el nivel del zoom.
Para eso sustituye las coordenadas especificadas en "setView" y el zoom.
Usa coordenadas decimales, como las de Google Maps.
Para convertir a este formato del sistema tradicional de grados usado en mapas analógicos, se puede emplear la siguiente herramienta: Convertir grados geográficos, minutos y segundos a decimales
En el mapa de ejemplo solo se muestran las opciones básicas, pero la librería Leaflet facilita agregar varios elementos que facilitan la interacción con el mapa y lo hace más atractivo y útil.
Podemos agregar marcadores, imágenes, una escala y muchas otras opciones.
Los que se animen a usar este método, pueden descargar toda la documentación disponible en Github
El servicio de Leaflet es libre y de código abierto.
Para usar la librería no es necesario registrarse, ni usar ninguna API o clave.


Mejorar la carga del mapa alojando Leaflet


El código que mostramos, así como el archivo HTML para descargar, cargan los archivos de estilo CSS y JavaScript desde el CDN de Leadflet.
Los que deseen pueden hostearlos (alojarlos) en su propio servicio de hosting, para asegurarse que siempre estén disponibles y así evitar que pueda producirse un bloqueo en la página, en caso de cualquier interrupción.
La última versión de la librería de Leaflet se puede descargar en un archivo ZIP desde: http://leafletjs.com/
El archivo contiene el CSS (leaflet.css) JS (leaflet.js) y una carpeta con imágenes de los elementos que se representan en el mapa.

Otra alternativa para generar y mostrar mapas de OpenStreetMap en un blog o sitio web, es la librería de OpenLayers. En otro artículo explicamos cómo usarla.

Páginas relacionadas



Sobre el autor:

Norfi Carrodeguas es el fundador y webmaster del sitio web Norfipc, creado en el año 2010. Norfi es un ingeniero informático y desarrollador web cubano. Con más de 14 años de experiencia en la publicación en internet, comparte su tiempo con su consultoría SEO. Más información sobre el autor.

Comparta esta página
Facebook
Twitter

Sígueme en las redes sociales


Norfipc en Facebook Norfipc en Twitter Canales RSS con las últimas publicaciones

 
Inicio | Mapa del sitio | Buscar | Sobre mí