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
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 |
rioja-base |
IDE Rioja |
Mapa base de IDE Rioja |
19 |
none |
Ninguno |
No carga ningún mapa base |
Ejemplo cargando mapa base de la nasa:
https://geowe.org/ogv/viewer?basemap=nasa
Transparencia del mapa base
Puedes cambiar la transparencia del mapa base usando el parámetro
basemap-alpha=[0-1]
, indicando valores entre cero y uno, donde 0 es totalmente transparente.
Por ejemplo: basemap-alpha=0.5
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
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
Título personalizado
Puedes indicar un título personalizado para el mapa. Para ello usa el parámetro title
y escribe el texto que quieras.
Ejemplo de título personalizado
https://geowe.org/ogv/viewer?title=mi-titulo-personalizado
También puedes usar un título usando el atributo title del fichero geoJSON. Para ello
debes indicarlo en parámetro de la siguiente manera title=json.title
.
Esto hará que OGV establezca el título a partir del valor del atributo title del geoJSON.
¿Cómo indicar el título en el GeoJSON
La especificación para el formato GeoJSON permite el uso de atributos foráneos,
para ampliar o extender la información. De esta manera OGV interpretará el atributo "title" para establecerlo de título en el mapa
Ejemplo de GeoJSON con title
{"type": "Feature",
"id": "f1",
"geometry": {...},
"properties": {...},
"title": "Title Example"
}
Además del texto del título, también se pude personalizar el tamaño del texto
usando el parámetro title-size=n
(n es numérico) y el color del texto
title-color=color
, donde color puede ser en formato hexadecimal (ejemplo: #000000) o el nombre del color en inglés.
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
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
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
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
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
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
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
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
Ancho del color proporcional al valor
Si quieres obtener una leyenda con un ancho de color proporcional al valor del
atributo temático, puedes usar el parámetro legend-colorwidth-rate=X
donde X es el número por el que se divide el valor del atributo temático para calcular el ancho
de cada color 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
Bordes y líneas
Para personalizar los bordes del contorno de una geometría tipo polígono, o bien cambiar las propiedades de una geometría tipo línea, OGV provee de los siguientes parámetros:
stroke-width=valor numérico
para modificar el ancho de línea, borde o contorno y
stroke-color=valor hexadecimal
para indicar el color de línea, borde o contorno. Estos parámetros se aplican a mapas simples y temáticos.
Ejemplo que aplica color y ancho de línea:
https://geowe.org/ogv/viewer/?geojson=https://raw.githubusercontent.com/jmmluna/geodata/master/ogv/Ruta_pescaito_WGS84.geojson&load-type=all&stroke-color=ff0000&stroke-width=5
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
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.
Descarga imagen
Descarga tu mapa en una imagen JPG o PNG. Para ello usa el menú de la derecha y selecciona la opción que quieras.
Imagen con título y leyenda
OGV genera la imagen al zoom que esté el mapa, e incluye la leyenda y el título del mapa
Descarga QR
Descarga el código QR del mapa y compártelo donde quieras. Incrústalo en cualquier documento o imprímelo.
Usa el menú de la derecha y selecciona la Opción Mapa QR
Código QR
OGV genera el código QR correspodiente a la URL del mapa.
Descarga PDF
Descarga un informe en PDF con toda la información del mapa. Usa el menú de la derecha y pulsa en Mapa PDF
para descargar el informe.
Informe PDF
OGV genera un informe en formato PDF que incluye el código QR,
la representación gráfica y toda la información alfanumérica de los datos
representados en 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.
La versión de OGV incluida en el zip es la 1.0.0. Si necesitas una versión mas reciente puedes descargar el código fuente de github
y empaquetarla.
Plantilla por defecto para crear tu propio visor
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 |
basemap |
|
|
|
|
id-mapa disponible |
basemap-alpha |
|
|
|
|
1 (valores entre 0 y 1) |
title=Map-title |
|
|
|
|
json.title | texto personalizado |
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-colorwidth-rate=value |
|
|
|
|
Vacío |
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 |
stroke-color |
|
|
|
|
00ff11
|
stroke-width |
|
|
|
|
3 |