¿Cómo incrustar un mapa en tu web?

En los últimos tiempos vemos mapas miremos donde miremos, algo no tan raro, si somos conscientes de que un alto porcentaje de los elementos del mundo real se pueden georreferenciar. La web, ha impulsado la moda de los mapas, y raro es el sitio que no dispone de un pequeño (o no tan pequeño) mapa donde muestra su ubicación. Atrás están quedando esas imágenes estáticas y de poca utilidad.

Existen multitud de alternativas para mostrar mapas en tu web, la mas conocida y sencilla seguramente Google Maps. En este artículo voy a explicar como incrustar (o embeber) un mapa en tu sitio web, usando Open Geodata Viewer (OGV) de GeoWE, de una manera sencilla, sin necesidad de registrarse en ningún servicio, obtener KEY de uso, o cualquier otra complicación; ¡y sin la necesidad de saber programar!

Para el ejemplo voy a incrustar un mapa de la localización de un edificio, en este caso   mostraré dónde está la unidad de estancia diurna de AFADEMON. Uno de los casos más típicos que nos encontramos en las páginas web, el típico ¿Dónde estamos?

Los pasos a seguir serían:

  • Paso 1: Necesito los datos espaciales en formato GeoJSON (WGS84). Para ello podemos usar RTCMapping.  (conoce RTCMapping en 5 minutos)
    • Escribimos la dirección en la barra de geolocalizar (abajo a la izquierda): por ejemplo: calle de la amargura 19 , montalbán de córdoba
    • Cuando el mapa se posicione dibujamos el punto exacto donde está el edificio. usa las herramientas de dibujar punto.
    • Ve al menú (las tres rayitas de arriba a la izquierda),  y descarga el fichero geoJSON.
  • Paso 2:  Guarda el fichero descargado en tu sitio web o en cualquier otro sitio accesible en internet: github, google Drive, dropbox,...
  • Paso 3: Incrusta tu mapa
    • En la documentación de OGV viene explicado como se hace, además de los diversos tipos de mapas y opciones disponibles. En este caso basta con añadir este código en la zona de tu págian web donde quieras mostrar el mapa. 
<script src="https://geowe.org/ogv/embed?basemap=ign-base&geojson=https://raw.githubusercontent.com/i62lotor/geodata/master/AFA/donde-esta-afademon_WGS84.geojson"</script>



El resultado en vivo se puede ver en la sección contacto de la web de AFADEMON.

Quizá pueda resultar un poco tedioso, sobre todo comparado con Google Maps, y para mostrar un mapa de "dónde estamos". Sin embargo las posibilidades que ofrece OGV se amplian, permitiendo visualizar información geográfica de diversas formas como son: mapas de calor, mapas de agrupados, mapas temáticos o  mapas con imágenes, y con la posibilidad de cambiar el mapa base.

Algunos ejemplos de mapa son:

Mapa temático


Mapa de agrupados o cluster

Mapa de calor


Podeis ver mas ejemplos en el repositorio de datos abiertos de GeoWE.

¿Cuál es tu excusa para no poner un mapa en tu web?

Comentarios