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 OSM en una página de un sitio web?


El proyecto de OpenStreetMap no puede ofrecer una API para facilitar que los mapas sean mostrados en las páginas de sitios web.
Esto es asumido por varios servicios, la gran mayoría libres y algunos de pago con más recursos.
En este artículo detallamos como usar los principales de estos servicios, para mostrar cualquier mapa en las páginas de un blog o sitio web, de forma sencilla.
Por supuesto obviamos los servicios de pago.
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.
Los principales son los siguientes:
- OpenLayers.
- Leaflet.
- Google Map. Otra de las opciones es usar la API 3 de Google Map, insertando los mosaicos de OSM como una capa. La ventaja de este método es aprovecharse de los recursos de Google, aunque los mapas insertados no poseen las opciones que obtenemos usando los recursos anteriores.
Existen otros servicios, pero solo relacionamos los mas empleados en internet y factibles para los lectores.
Todos los mapas generados usando los servicios anteriores, son adaptables y se adaptan al tamaño de la pantalla de cualquier dispositivo.



Mostrar mapas de OpenStreetMap con OpenLayers


OpenLayers es una librería JavaScript gratis y de código abierto, para posibilitar integrar los mapas de OpenStreetMaps en los sitios web.
La librería es muy fácil de usar, con varias opciones.
Desde el sitio del proyecto se cargan los archivos necesarios, aunque los que poseen un servidor pueden alojarlos para mejorar el rendimiento.
Es la librería que recomiendo a los aficionados por su facilidad de uso y por la gran cantidad de ejemplos prácticos en su documentación.
Lee más información detallada: Crear mapas de OpenStreetMap con OpenLayers

Mostrar mapas de OpenStreetMap con Leaflet


Leaflet proporciona una librería en JavaScript, libre y de código abierto con muchos recursos.
Posibilita insertar mapas de OSM y de otros servicios de mapas de internet, en las páginas de un blog o sitio web.
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
El CDN de Leaflet sirve los archivos de estilo y JavaScript, aunque lo ideal es alojarlos en nuestro servicio de hosting.
Leaflet es usado por muchos sitios importantes de internet.
Lee más información detallada: Crear mapas de OpenStreetMap con Leaflet



Mostrar mapas de OpenStreetMap con Google Maps


Uno de los métodos más sencillos de insertar y generar en una página web un mapa de OpenStretMap, es usando la API de Google Map y agregando como un layer (capa) las miniaturas (tiles) de OSM.
Usando la API 3 del servicio de Google, no es necesario ninguna clave, solo insertar el código necesario en JavaScript.
Este es un método empleado en muchos sitios web, porque el mapa carga bastante rápido.
Mapa de OpenStreetMap mostrado como una capa, usando Google Maps.
Mapa de OpenStreetMap mostrado como una capa, usando Google Maps
Un mapa completamente funcional que usa este método se puede probar en la siguiente página de este sitio: Mapa mixto de Google Maps y OpenStreetMaps
A continuación compartimos el código necesario para crear un mapa que usa este método y ofrecemos un enlace para descargar un archivo HTML de ejemplo.




Descargar archivo HTML de ejemplo

Mediante el siguiente enlace se puede descargar un archivo HTML de ejemplo con el código anterior, que puede ser ejecutado desde la computadora para cargar el mapa.
Descargar archivoDescargar archivo HTML

Al ejecutarlo en el navegador se muestra el mapa de OpenStreetMap del área que se especifique en las coordenadas y con el zoom deseado.
En la parte superior del mapa se muestran dos controles: "Mapa" y "Satélite", que de usarlos reemplazan el mapa por el tradicional de Google.

Páginas relacionadas