Guía rápida

Última actualización: 15 de octubre de 2019

Descripción

Open Geodata Viewer (OGV) es el medio por el que la iniciativa GeoWE permite la publicación de mapas en la Web. Se trata de un visor sencillo y ligero con la posibilidad de ser embebido en cualquier sitio web.

Acceder al visor Construye tu URL

Acceso al Visor

OGV es accesible desde cualquier navegador a través de la url:

https://geowe.org/ogv/viewer

Accediendo a través de la url anterior se mostrará la versión más básica del visor: un mapa base de Carto con OpenStreetMap

Añadir capas vectoriales

Para poder usar la funcionalidad de añadir capas vectoriales, desde fichero, se debe acceder al visor con la url:

Vista con la herramienta de añadir capa:

https://geowe.org/ogv/viewer?add-layer

ogv-basic-addLayer

Pulsando sobre el botón + (rojo) aparecerá un diálogo para cargar un fichero GeoJSON en WGS84 [EPSG:4326]

Cambiar mapa base

OGV ofrece la posibilidad de usar diferentes mapas base. Para cambiar el mapa base es tan sencillo como acceder al visor con el parámetro basemap="id-mapa"

Mapas base disponibles
# id-mapa Proveedor Descripción
1 carto-light Carto con OSM WMS de carto imagen clara, cagando OpenStreetMap (por defecto)
2 carto-dark Carto con OSM WMS de carto imagen oscura, cagando OpenStreetMap
3 osm OpenStreetMap WMS de OpenStreetMap
4 catastro Catastro de España WMS del Catastro de España
5 ign-fondo IGN Imagen de fondo del Instituto Geográfico Nacional (España)
6 ign-raster IGN Imagen raster del Instituto Geográfico Nacional (España)
7 ign-base IGN Imagen base del Instituto Geográfico Nacional (España)
8 pnoa-ortho Sistema Cartográfico Nacional Orto del Sistema Cartográfico Nacional (PNOA España)
9 pnoa-mosaic Sistema Cartográfico Nacional Mosaico del Sistema Cartográfico Nacional (PNOA España)
10 nasa Global Imagery Browse Service (GIBS) Imágenes satélite de la NASA (al día anterior)
11 osm-grey OpenStreetMap Tema gris
12 osm-terrain OpenStreetMap Mapas del terreno
13 osm-toner OpenStreetMap Alto contraste
14 osm-watercolor OpenStreetMap Mapas dibujados a mano
15 osm-klokantech-3d OpenStreetMap 3D
16 osm-wikimedia OpenStreetMap Wikimedia
17 carto-voyager CARTO Mapa base de CARTO Builder
18 none Ninguno No carga ningún mapa base

Ejemplo cargando mapa base de la nasa:

https://geowe.org/ogv/viewer?basemap=nasa

ogv-basic-addLayer

Cargar capa desde url

OGV ofrece la posibilidad de cargar datos vectoriales desde una url. Para ello usa el parámetro geojson="url-del-fichero".

GeoJSON WGS84

Por el momento es el único formato y proyección soportadas.

Ejemplo cargando datos desde github:

https://geowe.org/ogv/viewer?geojson=https://raw.githubusercontent.com/geowe/geodata/master/general/Municipios-Cordoba-WGS84.geojson

ogv-url-layer

Carga mas de una capa

Si necesitas visualizar mas de una capa, usa el parámetro geojson=url-1,url-2,...url-n, separando por comas las urls de las capas a cargar. Para visualizarlas todas tras la carga define el zoom deseado

Zoom personalizado

Puedes personalizar el zoom de partida del mapa. Para ello usa el parámetro zoom="valor entero".

Zoom de partida

Por defecto OGV hará un zoom a todos los elementos de la capa cargada, permitiendo la visualización de todos.

Colores personalizados

Puedes personalizar los colores de los elementos del mapa. Usa los parámetros color1="valor hexadecimal" y color2="valor hexadecimal" y OGV generará automáticamente una paleta de colores partiendo de los indicados.

Colores por defecto

Si no incluyes los parámetros de colore, OGV estabelce los valores por defecto:

color1=00ff11 y color2=000000

Mapas de agrupados (cluster)

Un mapa de agrupados (o cluster map) es una representación de los elementos del mapa agrupados por cercanía. OGV permite la posibilidad de mostrar mapas agrupados usando el parámetro "cluster".

Puntos, polígonos y líneas

OGV agrupará los elementos de estos tipos de geometría, representandolos siempre como puntos. para el caso de polígonos y líneas usará el interior point.

Ejemplo cargando datos desde github en cluster:

https://geowe.org/ogv/viewer?geojson=https://raw.githubusercontent.com/geowe/geodata/master/general/Municipios-Cordoba-WGS84.geojson&cluster

ogv-cluster-map

Modificando la distancia de agrupado

Para modificar la distancia de agrupación de los elmentos se debe usar el parámetro distance=x, donde x es la distancia a tomar y cuyo valor por defecto es 20

Mapas de calor

Un mapa de calor (o heatmap) es una representación de los elementos del mapa utilizando un rango de colores asignados a los valores de un atributo. OGV permite la posibilidad de mostrar mapas de calor usando el parámetro heatmap=atributo

Atributo de calor

Este es el atributo en el que OGV se basará para representar el mapa de calor. Debe ser un valor numérico. Cuanto mas anaranjado sea el color mayor es el valor del atributo de calor

Ejemplo cargando datos desde url, cambiando mapa base y como mapa de calor:

https://geowe.org/ogv/viewer?geojson=http://repo.geowe.org/es/home/casos-violencia-genero/Casos-violencia-genero-Andalucia_WGS84-05-2018.geojson&heatmap=V%C3%ADctimas&basemap=carto-dark

ogv-heat-map

Modificando el radio y el difuminado

Puedes personalizar el radio y difuminado de los puntos en el mapa de calor. Para ello usa los parámetros radius=x y blur=x, donde x es un número entero.

Mapas temáticos

Un mapa temático es aquél que está diseñado para mostrar características o conceptos particulares de los elementos del mapa. OGV permite la posibilidad de mostrar mapas temáticos usando el parámetro thematic=atributo.

Atributo temático

Los valores de este atributo son en los que OGV se basará para representar el mapa temático.

Atributo rate

Cuando se especifica el atributo rate en la url de un mapa temática, se aplicará el valor para calcular la proporción en función del atributo temático y se establecerá como radio en las geometrías tipo punto.

Ejemplo de mapa temático cargando datos desde url:

http://geowe.org/ogv/viewer?thematic=Rango&label&geojson=http://repo.geowe.org/es/home/accidentes-trafico-esp/accidentes-trafico-esp-ccaa-2016.geojson

ogv-thematic-map

Mostrando el valor temático

Es posible mostrar en el mapa el valor del atributo temático usando el parámetro label

Si quiere que la etiqueta sea de otro atributo solo tienes que indicarlo así label=attr-name

Mapas coropléticos

Un mapa de coropletas es un mapa temático en el que las regiones se colorean de un motivo que muestra una medida estadística. Este tipo de mapa facilita la comparación de una medida estadística de una región con la de otra o muestra la variabilidad de esta para una región dada. OGV permite la posibilidad de mostrar mapas coropléticos usando el parámetro thematic=atributo e indicando los colores a usar con los parámetros color1 y opcionalmente color2.

Atributo temático

Al igual que en los mapas temáticos, OGV se basará en los valores de este atributo para representar el mapa de coropletas.

Automáticamente ordenará los valores para el atributo indicado. Si es alfanumérico el orden será alfabético. Si es numérico el orden será de menor a mayor.

Ejemplo de mapa coroplético cargando datos desde url:

http://geowe.org/ogv/viewer/?geojson=http://repo.geowe.org/es/home/accidentes-trafico-esp/accidentes-trafico-esp-ccaa-2016.geojson&thematic=FALLECIDOS&label&color1=0000FF

ogv-thematic-map

Creando la coropleta

Convertir un mapa temático en un mapa coroplético es tan simple como indicar el color a usar, con el parámetro color1=valor hexadecimal. Opcionalmente se puede indicar también el color2=valor hexadecimal para determinar la variación de valores.

Por ejemplo: color1=FF0000 usará el valor rojo para los valores menores y el negro (por defecto color2) para los mayores.

Mapas con imágenes

En ocasiones existe la necesidad de presentar la información de una capa con puntos mostrando imágenes o fotografías. OGV permite la posibilidad de mostrar mapas con imágenes automáticamente. Para ello el geojson con la información debe contener una propiedad llamada url-img=url.

url-img

El valor de este atributo debe ser una url correcta donde se acceda a la imagen. OGV renderizará en el mapa cada imagen a un tamaño pequeño. Cuando se seleccione se mostrará la información en el panel de la izquierda a mayor tamaño.

Ejemplo de mapa con imágenes:

https://geowe.org/ogv/viewer?geojson=http://repo.geowe.org/es/home/yacimientos-arqueologicos-cordoba/yacimientos-arqueologicos-cordoba_WGS84.geojson

ogv-image-map

img:url

Si el atributo url-img comienza con img: la imagen solo en el panel lateral, mostrando en el mapa solo puntos.

Estrategia de Carga

OGV define las estrategias de carga, como la forma en que los elementos se van representando en el mapa. La estrategia por defecto es incremental, dibujando los elementos en el mapa de manera gradual. También se puede elegir la estrategia de cargar todos los elementos de una vez, para ello se usa el parámetroload-type=all.

Consulta elementos durante la carga

El tipo de carga incremental permite la consulta de información de un elemento cargado, mientras se siguen cargando los demás.

Ejemplo de cargar todos los elementos de una vez:

https://geowe.org/ogv/viewer?https://raw.githubusercontent.com/i62lotor/geodata/master/general/provincias-peninsula-iberica.geojson&load-type=all

Carga incremental por bloques

Por defecto la estrategia de carga incremental dibuja los elementos en el mapa de uno en uno. Si queremos que se representen en bloque (por ejemplo de 10 en 10), usaremos el parámetro inc=X, donde X es el número de elementos a cargar a la vez. Esta opción es útil en el caso de tener cientos o miles de elementos.

Ejemplo de cargar incremental de 10 en 10:

https://geowe.org/ogv/viewer?geojson=https://raw.githubusercontent.com/i62lotor/geodata/master/general/provincias-peninsula-iberica.geojson&inc=10

Soporte SLD

OGV soporta la caga de estilos a partir del estándar SLD (Style Layer Descriptor). Para cargar los estilos se usara el parámetrosld=url para acceder a la url donde está el fichero sld y sld-layer=layer-nama indicando el nombre de la capa en el fichero SLD.

Ejemplo de cargar estilos usando SLD:

https://geowe.org/ogv/viewer?geojson=https://raw.githubusercontent.com/jmmluna/geodata/master/ogv/2019_Elecc_municp_25830.geojson&sld=https://raw.githubusercontent.com/jmmluna/geodata/master/ogv/PODEMOS.sld&sld-layer=PODEMOS&load-type=all

ogv-sld-map

Leyenda

Aunque en GeoWE pensamos que los mapas deben comunicar por si mismos, entendemos que en ciertas ocasiones una leyenda ayuda a comprender lo representado en el mapa. Por ello se ha habilitado la opción de integrar una leyenda en tu mapa. Para visualizar la leyenda usa el parámetro legend=h | v y OGV automáticamente creará una leyenda acorde con el mapa que estás mostrando.

Ejemplo: Mostrando la leyenda

https://geowe.org/ogv/viewer?basemap=osm-grey&geojson=https://raw.githubusercontent.com/i62lotor/geodata/master/general/Rios_ES_WSG84.geojson&thematic=Longitud&label=Texto&legend=h&color1=73b8ef&color2=2605f7&alpha=1&title=Longitud(Km)%20de%20R%C3%ADos%20de%20Espa%C3%B1a

ogv-legend-map

Personaliza el ancho del color

Por defecto el ancho del color de la leyenda es de 10px, puedes personalizar el ancho usando el parámetro legend-color-width=X, donde X es tamaño en px que quieras configurar.

También puedes especificar un texto descriptivo en la cabecera y pie de la leyenda a través de los parámetros legend-header=Título de la leyenda y legend-footer=Pie en la leyenda

Ejemplo: Mostrando cabecera y pie en la leyenda

https://geowe.org/ogv/viewer/?geojson=https://raw.githubusercontent.com/i62lotor/geodata/master/general/europa-renta-x-capita_WGS84.geojson&load-type=all&alpha=1&thematic=rango-renta-x-capita&color1=FF0000&color2=000000&legend=v&legend-color-width=30&legend-header=Informaci%C3%B3n%20del%20mapa&legend-footer=Datos%20de%20renta&basemap=osm

ogv-legend-map

Vista general

Si usamos el parámetro overview tenemos la posibilidad de visualizar una vista general del mapa miniaturizada. En este mapa general se puede usar el mismo mapa base del principal, o usar cualquier otra disponible del listado de mapas base, para lo cual usaremos el parámetro overview=id-mapa-

Ejemplo: Mostrando el mapa en miniatura

https://geowe.org/ogv/viewer/?basemap=osm&overview=carto-dark&overview-width=50&overview-height=50&geojson=https://raw.githubusercontent.com/i62lotor/geodata/master/general/Rios_ES_WSG84.geojson&thematic=Categoria&label=Texto&legend=h&color1=FF0000&alpha=1

ogv-overview-map

Personalización tamaño de la vista miniaturizada

Por defecto el tamaño del mapa para la vista general es de 20x20 (% del tamaño de la ventana). Si queremos personaliar el tamaño podemos usar los parámetrosoverview-height=X y overview-width=X donde X es un valor entre 1 y 100 que indica el tamaño en porcentaje para el mapa.

Cómo Incrustar un mapa

OGV permite incrustar (embeber) un mapa en tu página web. Para ello solo hay que usar el siguiente código JavaScript en la parte donde quieras que se muestre el mapa.

Ejemplo:
<script src="https://geowe.org/ogv/embed?geojson=url-geojson"></script>
    									

Incrusta el mapa personalizado

Utiliza los parámetros en la url, de las secciones anteriores, para mostrar el mapa a tu gusto.

Crea tu propio visor

Si no te vale con incrustar un mapa en tu web, y quieres crearlo e incluirlo en tu sitio, puedes crear tu propio visor. Para ello descarga la librería y modifica la plantilla que te proporcionamos de ejemplo según tus necesidades.

Plantilla por defecto para crear tu propio visor
ogv-mi-map

Resumen

Con OGV puedes visualizar información geográfica fácil y rápidamente, así como incrustarla en tu página web. Podrás presentar la información en mapas de calor, temáticos, agrupados o como mejor se ajuste a tu necesidad.

Tabla resumen
Parámetro Visor Cluster Calor Temático Valor por defecto
add-layer Habilita funcionalidad
title=Map-title Vacío
title-size=Map-title-size 3
title-color=Map-title-color black
alpha=value 0.5 (valores entre 0 y 1)
geojson=url Vacío
zoom=value Extent
attribute-no-null Vacío (Propiedades nulas no visualizadas )
cluster=attr-name Vacío
distance=value 10
heatmap=attr-name Vacío
radius=value 35
blur=value 15
thematic=attr-name Vacío
rate=value Vacío
label atributo temático
label=attr-name Vacío
color1=rgb

00ff11

color2=rgb

000000

load-type=all | inc inc
inc=value 1
sld=url Vacío
sld-layer=layer-name Vacío
legend=h | v h: horizontal. v: vertical
legend-color-width=value 10
legend-header=value Vacío
legend-footer=value Vacío
legend-item-count Vacío
legend-layer-zoom Vacío
legend-layer-visibility Vacío
overview id-mapa base principal
overview-height valores entre 1 y 100
overview-width valores entre 1 y 100

¿Necesitas mostrar un mapa en tu sitio web?

Instance Theme

OGV - Open Geodata Viewer

Visualiza tus mapas fácil, ligero y libre. ¡Sin programar!

Visor

GeoWE - SIG Web

SIG Web orientado a la edición, con características avanzadas.

SIG Web

RTCMapping - Real Time Collaborative Mapping

Crea mapas colaborativamente y en tiempo real

RTCMapping

GeoWE OpenData - Repositorio de datos abiertos

Consulta y publica datos abiertos

OpenData