Crear mapas de OpenStreetMap con OpenLayers
Actualizado: 21 de febrero del 2023
Por: Norfi Carrodeguas
Por: Norfi Carrodeguas
Como generar e insertar mapas en las páginas de un sitio web, de un área geográfica o de una ciudad, usando la librería OpenLayers. Código para copiar y archivo HTML para descargar y usar offline.
Los que desean usar el servicio de OpenStreetMap en su blog o sitio web, para referenciar a sus lectores algún lugar en específico o para ellos mismos navegar por el mundo, pueden insertar y mostrar cualquiera de estos mapas, copiando y pegando una porción de código en una página.
En otro artículo mencionamos los principales métodos disponibles.
Una de las formas más sencillas de generar un mapa de OpenStreetMap en una página de internet, es usando la librería de OpenLayers.
OpenLayers es una biblioteca de JavaScript de código abierto, para mostrar mapas interactivos en los navegadores web.
El desarrollo y el soporte del proyecto, está a cargo de la comunidad de colaboradores.
Como hemos explicado OSM (OpenStreetMap) no puede suministrar una API del servicio para generar los mapas, la que es ofrecida por otros servicios, como este que recomendamos.
Para generar un mapa simple de OpenStreetMap de cualquier región del mundo o de una ciudad, como el que se muestra a continuación, solo basta con insertar una porción de código JavaScript en un archivo HTML.
Puede ser una página de un servidor de internet o un archivo para usarlo de forma local en la computadora, cargándolo con el navegador web.
El mapa creado se puede aumentar con el mouse en una computadora o usando los controles en los dispositivos móviles y muestra en su parte inferior el aviso de atribución de OSM.
Es adaptable o sea se ajusta automáticamente al tamaño de la pantalla de los teléfonos celulares y tabletas.
Para insertar un mapa de OSM usando este método, sigue los siguientes pasos:
En el código de ejemplo anterior, solo es necesario sustituir las coordenadas por otras en formato decimal.
Primero especifica la longitud y después la latitud, separadas por una coma.
En OpenLayers de forma predeterminada se usa la proyección EPSG:3857, que usa como unidad de medida metros.
En este caso se ha especificado la proyección EPSG:4326, para poder usar los grados decimales.
No obstante los que necesiten obtener una localización usando las coordenadas EPSG:3857, pueden usar la siguiente herramienta: Convertir grados coordenadas decimales a Google Mercator
Los que necesiten convertir de grados geográficos (grados, minutos, segundos) al sistema decimal, pueden hacerlo con otra herramienta: Convertir grados geográficos, minutos y segundos a decimales
La librería de OpenLayers ofrece gran cantidad de opciones, las que se pueden emplear para agregar elementos como controles, marcadores, imágenes, globos con información, escalas, etc.
Con la librería de OpenLayers también se pueden mostrar e insertar mapas de los servicios Bing, MapBox, Here Maps, ESRI, WMS y otros.
Además mapas temáticos como de zonas horarias, terremotos, nivel del mar, etc.
Los que estén interesados en crear mapas más profesionales e interactivos, pueden consultar la documentación incluida en la librería, que se puede descargar en un archivo ZIP, desde https://openlayers.org/
El código usa la versión 4, la más reciente del proyecto y carga el archivo de estilo CSS y el JS desde el sitio de OpenLayer.
Para mejorar la carga de ellos y prevenir el bloqueo de la página ante cualquier irrupción del servicio, se pueden descargar los dos archivos anteriores incluidos en la libreria y subirlos a nuestro servidor.
Debemos de aclarar que con este método las miniaturas (tiles) del mapa se cargan directamente de los servidores de OpenStreetMap.
Este servicio no ofrece garantía sobre la disponibilidad y el rendimiento no es el mejor.
Si se necesita generar mapas con mayor rendimiento, se pueden evaluar otras opciones para cargar las miniaturas desde otros servicios o generarlas dinámicamente.
En otras páginas de este sitio web hemos insertado varios tipos de mapas usando la librería de OpenLayers.
Los que deseen comprobar las posibilidades de este servicio, pueden consultarlas y ver su código fuente.
Son las siguientes:
En otro artículo mencionamos los principales métodos disponibles.
Una de las formas más sencillas de generar un mapa de OpenStreetMap en una página de internet, es usando la librería de OpenLayers.
OpenLayers es una biblioteca de JavaScript de código abierto, para mostrar mapas interactivos en los navegadores web.
El desarrollo y el soporte del proyecto, está a cargo de la comunidad de colaboradores.
Como hemos explicado OSM (OpenStreetMap) no puede suministrar una API del servicio para generar los mapas, la que es ofrecida por otros servicios, como este que recomendamos.
Como generar un mapa de OSM usando OpenLayers
Para generar un mapa simple de OpenStreetMap de cualquier región del mundo o de una ciudad, como el que se muestra a continuación, solo basta con insertar una porción de código JavaScript en un archivo HTML.
Puede ser una página de un servidor de internet o un archivo para usarlo de forma local en la computadora, cargándolo con el navegador web.
El mapa creado se puede aumentar con el mouse en una computadora o usando los controles en los dispositivos móviles y muestra en su parte inferior el aviso de atribución de 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 insertar el mapa de OpenStreetMap
Para insertar un mapa de OSM usando este método, sigue los siguientes pasos:
1- Carga en el archivo HTML la hoja de estilo CSS y el archivo JavaScript desde el sitio de OpenLayers.
2- A continuación crea un contenedor DIV donde se mostrará el mapa, en el lugar exacto de la página donde deseas mostrarlo.
3- Seguidamente usa el script para especificar el área geográfica que se desea mostrar en el mapa y el nivel de zoom.
El código completo de una página con un mapa de OpenStreetMap insertado, usando la librería de OpenLayers, como el que se muestra en esta página se puede ver a continuación.2- A continuación crea un contenedor DIV donde se mostrará el mapa, en el lugar exacto de la página donde deseas mostrarlo.
3- Seguidamente usa el script para especificar el área geográfica que se desea mostrar en el mapa y el nivel de zoom.
<!DOCTYPE html>
<html>
<head>
<title>Mapa simple de OpenStreetMap con Open Layers</title>
<link rel="stylesheet" href="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.3.0/css/ol.css">
</head>
<body>
<h1>Mapa simple de OpenStreetMap con Open Layers</h1>
<script src="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.3.0/build/ol.js"></script>
<div id="map" class="map"></div>
<script>
var map = new ol.Map({
layers: [new ol.layer.Tile({source: new ol.source.OSM()})],
target: 'map',
view: new ol.View({
projection: 'EPSG:4326',
center: [-82.362777, 23.092234],
zoom: 11})});
</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.
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.
¿Cómo centrar el mapa de OpenLayers usando coordenadas?
En el código de ejemplo anterior, solo es necesario sustituir las coordenadas por otras en formato decimal.
Primero especifica la longitud y después la latitud, separadas por una coma.
En OpenLayers de forma predeterminada se usa la proyección EPSG:3857, que usa como unidad de medida metros.
En este caso se ha especificado la proyección EPSG:4326, para poder usar los grados decimales.
No obstante los que necesiten obtener una localización usando las coordenadas EPSG:3857, pueden usar la siguiente herramienta: Convertir grados coordenadas decimales a Google Mercator
Los que necesiten convertir de grados geográficos (grados, minutos, segundos) al sistema decimal, pueden hacerlo con otra herramienta: Convertir grados geográficos, minutos y segundos a decimales
Agregar elementos a un mapa de OpenLayers
La librería de OpenLayers ofrece gran cantidad de opciones, las que se pueden emplear para agregar elementos como controles, marcadores, imágenes, globos con información, escalas, etc.
Con la librería de OpenLayers también se pueden mostrar e insertar mapas de los servicios Bing, MapBox, Here Maps, ESRI, WMS y otros.
Además mapas temáticos como de zonas horarias, terremotos, nivel del mar, etc.
Los que estén interesados en crear mapas más profesionales e interactivos, pueden consultar la documentación incluida en la librería, que se puede descargar en un archivo ZIP, desde https://openlayers.org/
El servicio de OpenLayers es libre y de código abierto.
Para usar la librería no es necesario registrarse, ni usar ninguna API o clave.
Para usar la librería no es necesario registrarse, ni usar ninguna API o clave.
Mejorar el rendimiento del mapa en un sitio web
El código usa la versión 4, la más reciente del proyecto y carga el archivo de estilo CSS y el JS desde el sitio de OpenLayer.
Para mejorar la carga de ellos y prevenir el bloqueo de la página ante cualquier irrupción del servicio, se pueden descargar los dos archivos anteriores incluidos en la libreria y subirlos a nuestro servidor.
Debemos de aclarar que con este método las miniaturas (tiles) del mapa se cargan directamente de los servidores de OpenStreetMap.
Este servicio no ofrece garantía sobre la disponibilidad y el rendimiento no es el mejor.
Si se necesita generar mapas con mayor rendimiento, se pueden evaluar otras opciones para cargar las miniaturas desde otros servicios o generarlas dinámicamente.
Otros tipos de mapas creados con OpenLayers
En otras páginas de este sitio web hemos insertado varios tipos de mapas usando la librería de OpenLayers.
Los que deseen comprobar las posibilidades de este servicio, pueden consultarlas y ver su código fuente.
Son las siguientes:
✓ Mapa de países del mundo usando vectores
✓ Mapa de husos y zonas horarias del mundo
✓ Mapa de Melena del Sur, sus pueblos y localidades
✓ Mapa de husos y zonas horarias del mundo
✓ Mapa de Melena del Sur, sus pueblos y localidades
Otra alternativa para insertar mapas de OpenStreetMap es Leaflet, una librería Javascript. En otro artículo explicamos cómo usarla.
Páginas relacionadas
✓ Guardar o descargar un mapa como una imagen con OpenLayers
✓ Crear mapas de OpenStreetMap con Leaflet
✓ Códigos para crear y mostrar mapas de Google Maps
✓ Como insertar y mostrar los mapas de OpenStreetMap
✓ Como editar los mapas de OpenStreetMap
✓ Los mejores servicios de mapas de internet
✓ Crear mapas de OpenStreetMap con Leaflet
✓ Códigos para crear y mostrar mapas de Google Maps
✓ Como insertar y mostrar los mapas de OpenStreetMap
✓ Como editar los mapas de OpenStreetMap
✓ Los mejores servicios de mapas de internet
Comparta esta página
Facebook
Twitter