NorfiPC
NorfiPC » Mapas » Mapa de OSM

Crear mapas de OpenStreetMap con Leaflet



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.

Copia y pega el código anterior en un archivo de texto plano y dale cualquier nombre, pero usando la extensión .HTML
Otra opción es descargar un archivo HTML con el código anterior, usando el siguiente enlace.
Descargar archivoDescargar archivo HTML



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 mucho más sencilla 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



Comparte esta página




Sígueme en las redes sociales


Sígueme en Google Plus Sígueme en Facebook Sígueme en Twitter Sígueme en Pinterest





 
Inicio | Mapa del sitio | Sobre mí | RSS | Buscar