NorfiPC
NorfiPC » Mapas » Mapa de OSM

Crear mapas de OpenStreetMap con OpenLayers



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.
Crear mapas de OpenStreetMap con OpenLayers
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.



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.

Descarga usando el siguiente enlace un archivo HTML con el código anterior, listo para usar offline.
Descargar archivoDescargar archivo HTML

¿Cómo usar el código en un mapa offline?
Copia y pega el código anterior en un archivo de texto 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.





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:

Otra alternativa para insertar mapas de OpenStreetMap es Leaflet, una librería Javascript. 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