NorfiPC
NorfiPC » Diseño y edición web » Insertar mapas de OSM

Como insertar y mostrar los mapas de OpenStreetMap en las páginas web

Códigos y ejemplos prácticos para insertar los scripts que carguen los mapas de OSM, solo copiando y pegando. Como participar y colaborar en el proyecto, editar los mapas y agregar datos de los lugares que conoces. Aportar con tus conocimientos a enriquecer el contenido de los mapas y poder compartirlo.
Como insertar y mostrar los mapas de OpenStreetMap en las páginas web
En otro artículo de este sitio, se detallan varias opciones para insertar mapas de Google Maps y Google Earth en las páginas web, para usarlos como un complemento valioso al contenido de dichas páginas.
También es posible usar mapas en otros formatos, muy valiosos y populares en la actualidad, como son los mapas de OpenStreetMap.



¿Qué es OpenStreetMap?


OpenStreetMap también conocido por sus siglas OSM, es uno de los más populares servicios de mapas online de internet y un proyecto encaminado a la creación, publicación y visualización de mapas para su uso en diferentes plataformas y dispositivos.
Accediendo al sitio, podrás cargar mapas de cualquiera región o zona geográfica.
Es un proyecto de colaboración de código abierto y libre, en el que puede participar y aportar cualquier persona.
La principal característica y lo que distingue a OSM, es que los mapas son creados y editados por los propios miembros, aportando cada uno su conocimiento.
Cualquier persona puede colaborar, siempre que cuente con una conexión a Internet con la que poder subir los mapas editados.
De hecho en la medida que mas personas aporten, mas se enriquecerá el contenido de dichos mapas.
Lee en otro artículo de nuestro sitio una guía elemental para aprender a agregar al mapa los sitios y lugares que conoces: Como editar los mapas de OpenStreetMap y agregar datos e información



¿Por qué usar los mapas de OpenStreetMap?


Los mapas de OSM son los preferidos por ciclistas, viajeros, turistas para conocer la información local detallada en una zona, es lógico ya que los datos disponibles han sido agregados por personas residentes o familiarizadas con dichas áreas y no por cartógrafos sentados a miles de kilómetros de distancia.
Si se viaja y se tiene a mano una laptop o un teléfono celular Smartphone que permita la visualización de mapas, OSM es el formato ideal, sin restarle importancia o utilidad a otros sistemas de cartografía clásica.
Además podemos editar personalmente la zona del mapa relacionada con cualquier publicación en nuestro blog o sitio web y de esa forma lograr que el mapa complemente el contenido.



¿Cómo mostrar mapas de OpenStreetMap en una página de internet?


Los que poseemos un blog o un sitio de internet, podemos de forma sencilla y rápida insertar en cualquier página mapas de OpenStreeMap, es lo que se conoce como crear un Slippy Map (un mapita).
A diferencia de los Mapas de Google que se insertan usando un script que proporciona este servicio, para insertar los mapas de OpenStreetMap en las páginas de un blog o sitio web, se necesita emplear herramientas auxiliares.
No es necesario saber de JavaScript, solo copiar y pegar y tener las nociones elementales de lo que es latitud, longitud y el nivel de zoom.
Las opciones son las siguientes:



Cargar mapas de OpenStreetMap con Leaflet


- Leafletjs es una Librería de JavaScript de Código abierto (open source), que permite crear mapas interactivos y adaptables, para mostrar en cualquier sitio web.
En su web se pueden encontrar tutoriales de como emplearla y el código fuente del proyecto está disponible en Github.
El código necesario de Leaflet es bastante sencillo con multitud de opciones disponibles para personalizar los mapas.
Los tiles (miniaturas) para representar los mapas se pueden cargar de diferentes fuentes: del propio OpenStreetMap, del servicio de MapBox o incluso desde MapQuest.
El servicio de Leaflet es gratuito, al igual que el de OpenStreetMap y el de MapQuest, pero el de MapBox es de pago.
En esta página no podemos emplear ninguno de los scripts para mostrar mapas de ejemplo, debido a que la carga de las miniaturas de hace mediante un protocolo no seguro y son bloqueados por el navegador.
La única forma de hacerlo mediante HTTPS, es usando el servicio de MapBox, que como decíamos es de pago.
No obstante compartimos ejemplos de los scripts necesarios y una captura de imagen en cada caso.
Mapa de OpenStreetMap usando la Librería de Leaflet, cargando las miniaturas desde los servidores del proyecto OSM.
Mapa de OpenStreetMap usando la Librería de Leaflet
Para insertar un mapa mediante este sistema, podemos emplear un script similar al siguiente:


Mapa de OpenStreetMap usando la Librería de Leaflet, cargando las miniaturas desde los servidores del servicio de MapQuest.
Mapa de OpenStreetMap cargando las miniaturas desde los servidores del servicio de MapQuest
Para insertar un mapa mediante este sistema, podemos emplear un script similar al siguiente:




Cargar mapas de OpenStreetMap con OpenLayers


OpenLayers es otra librería de JavaScript gratuita.
Podemos emplearla para mostrar mapas de OpenStreetMap, pero las miniaturas se cargan directamente desde este último servicio, lo que perjudica el rendimiento y no hay seguridad que en picos de mucho tráfico, no se carguen en lo absoluto.



Cargar mapas de OpenStreetMap con Google Maps


Otra opción de mostrar los mapas de OpenStreetMap, es usar el propio script de Google Maps y agregando una capa o layer.
Usando la API 3 del servicio de Google, no es necesario ninguna clave, solo insertar el código necesario en JavaScript.
Mapa de OpenStreetMap mostrado como una capa, usando Google Maps.
Mapa de OpenStreetMap mostrado como una capa, usando Google Maps
Este es el sistema recomendado para aficionados.
Para eso podemos emplear un script similar al siguiente:


La imposibilidad de insertar los mapas de OpenStreetMap en los sitios web que usamos HTTPS y que no podemos pagar a empresas auxiliares como MapBox, limita mucho la promoción y expansión de este maravilloso proyecto.
Esperamos que en el futuro OpenStreetMap disponga de más recursos, para que sus mapas se impongan sobre otros servicios, mucho menos útiles y aceptados.

Páginas relacionadas