Productos para compartir mapas: OpenLayers, Leaflet, Google Maps, API

geoEuskadi, etc.

Belén Sáez

belen.saez@gamma.ie

Resumen

03/09/2015 2

HTML5

•HTML Base

•Plantilla HTML

HTML5 + CSS3

•HTML Base con CSS

•Plantilla con CSS

•Visor iframe GeoEuskadi

HTML5 + CSS3 + JS

•Visor api GeoEuskadi

HTML5 + CSS3 + JS + JQUERY

•Plantilla con controles

•(HOY) API GeoEuskadi, Open Layers, Leaflet, Google Maps…

Plantilla creada (HTML5 + CSS3 + JS+ jQuery)

Contenidos Sesión

• Objetivo: Añadir a la página base de la primera sesión los controles ofrecidos por los diversos proveedores y carga de capas de Open Data Euskadi y GeoEuskadi.

• Contenidos• Tipos de Capas• Proyecciones cartográficas• API GeoEuskadi• OPEN LAYERS (v2 y v3)• GOOGLE MAPS • LEAFLET• Otras aplicaciones para mapas web

• Web curso: http://upv.s3.amazonaws.com/GeoEuskadiDemo/Index.html

04/09/2015 3

Tipos de capas

• geoJson: publicadas en una URL

• KML: publicadas en una URL

• WMS: publicadas en un servidor GIS• ArcGIS, PB Spectrum, GeoServer,

MapServer…

• WFS vs WCS vs WMS• WFS: vector – elementos

• WCS: raster – imágenes

• WMS: TODO

04/09/2015 4

geoJson

• Variación del exitoso JSON

• Publicadas en una URL

NOTA: Añadir encabezados CORS para OL2 si en otro dominio

04/09/2015 5

KML

• Origen es Keyhole:• Adquirida por Google

2004• Previo a Google Earth• Núcleo de Google Earth y

Google Maps

• Formato XML

• Publicadas en una URL

NOTA: Añadir encabezados CORS para OL2 si en otro dominio

04/09/2015 6

WMS

• Definido por el OGC (Open Geospatial Consortium)

• Capacidades: • Devolver metadatos del nivel

de servicio: GetCapabilities

• Devolver un mapa: GetMap

• Devolver información de características (opcionales): GetFeatureInfo

04/09/2015 7

Capas demo

KML • Gazte Informazioa (© Open Data Euskadi)

• Alojamientos Rurales (© http://turismo.euskadi.eus/)

• Oficinas Turismo (© http://turismo.euskadi.eus/)

04/09/2015 8

WMS• Ortofotos (© GeoEuskadi)

• Cartografía Raster (© GeoEuskadi)

• Municipios (© GeoEuskadi)

• Población (© GeoEuskadi)

• Renta Familiar Media (© GeoEuskadi)

• Renta Personal Media (© GeoEuskadi)

geoJSON• Centros Docentes (© GeoEuskadi)

• Restaurantes (© GeoEuskadi API)

FUENTES• GeoEuskadi

• Open Data Euskadi

• Turismo Euskadi

Proyecciones

• Definición de datos de posición en los SIG• Esfera al plano

• Veremos: EPSG:25830, EPSG:4326 y EPSG:3857• Origen: European Petroleum Survey Group

• Ahora: International Association of Oil and Gas Producers (OGP)

• Mayoría de los controles “reproyectan”• Herramientas para transformar proyecciones

04/09/2015 9

Imagen de http://resources.arcgis.com/

Las más comunes (EPSG:4326 y EPSG:3857)

EPSG:4326 = WGS 84 (elipsoide)

• Referencia: https://epsg.io/4326

• Rango: -180.0000, -90.0000, 180.0000,

90.0000

• Usado por los GPS muchos conjuntos de datos

EPSG:3857 = EPSG:900913 (esfera)

• Referencia: https://epsg.io/3857

Rango: 20026376.39 -20048966.10

20026376.39 20048966.10

• Usado por los proveedores de controles: Google, Bing, OL

04/09/2015 10

Basadas en Mercator:

• 1569

• CilíndricaImagen del ITE

EPSG:4326 = WGS 84 (elipsoide) EPSG:3857 = EPSG:900913 (esfera)

04/09/2015 11

Imagen de http://mapserver.org/ Imagen de http://mapserver.org/

Las más comunes (EPSG:4326 y EPSG:3857)

EPSG:4326 = WGS 84 (elipsoide) EPSG:3857 = EPSG:900913 (esfera)

04/09/2015 12

Las más comunes (EPSG:4326 y EPSG:3857)

EPSG:25830

• ETRS89 / UTM zone 30N

• Referencia: https://epsg.io/25830

• Rango-729785.83 3715125.82

940929.67 9518470.69

• Usada por la API de GeoEuskadi

04/09/2015 13

Funcionalidades sobre las capas

• Cargar

• Mostrar/Ocultar

• Cambiar trasparencia

• Eliminar

• Ver detalles al pinchar

04/09/2015 14

GeoEuskadi API

• Control ofrecido por GeoEuskadi

• Construido sobre Open Layers 3

• Perfecto para Euskadi

• Limitación:• Iconos en el KML no

modificables

• geoJson: debemos usar archivos en EPSG:25830.

04/09/2015 15

EPSG:25830

Open Layers 3 (OL3)

04/09/2015 16

EPSG:4362

• Control ofrecido por Open Source Geospatial Foundation

• Licencia BSD: uso del código fuente en software no libre

• Limitación:• Proyecciones base vs WMS –

no permite reproyectarimágenes por ahora.

Si cargamos una capa base

(EPSG:3857) No podremos

cargar las capas WMS de

GeoEuskadi (EPSG:25830)

Open Layers 3 (OL3 + OSM)

Ejemplo con una capa base • Open Street Maps

• Google Maps

• Bing Maps

• …

NOTA: No se cargarán las capas WMS GeoEuskadi por estar en otra proyección

04/09/2015 17

EPSG:3857

Open Layers 2

• Mucha documentación/foros

• Limitación: • Eventos añadidos a la capa

• Reproyectamos WMS (wmsLayer.getURL)

• Detalles WMS: Proxy (Servidor Web) o “parche” (getFeatureInfoUrl)

04/09/2015 18

Leaflet

• Control ofrecido por Vladimir Agafonkin

• Licencia BSD: uso del código fuente en software no libre

• Ligero – bueno en smartphones

• Limitaciones:• Documetación escasa y

necesidad de plugins• Los eventos

• KML/geoJson: se añaden a los elementos (pins) del mapa, no a la capa

• WMS: se añaden al mapa

• <section> de detalles fuera del mapa

04/09/2015 19

EPSG:3857

Google Maps

• Control ofrecido por Google

• Para el uso de sus capas base (licencias uso comercial)

• Limitación:• Algo "desfasado“ vs OL o Leaflet

• Iconos en el KML no modificables

• Eventos añadidos a la capa

• <section> de detalles fuera del mapa

04/09/2015 20

EPSG:3857

Comparativa

API GeoEuskadi

Contexto geográfico Euskadi

Open LayersDiferentes capas base pero:

• OL3 no proyecta imágenes (WMS)

• OL2 podemos “parchear”

04/09/2015 21

LeafletDiferentes capas base, más ligera que OL3 (buena para móviles) pero:

• plugins

• menos documentación que OL3

Google Maps

Tenemos licencia Google y buscamos integración con por ejemplo Fusion Tables

Otras aplicaciones

Con programación

• Bing Maps y Yahoo Maps• Desfasados vs OpenLayers o

Leaflet

• Obligan a usar sus capas y requieren licencias

• D3.js – Librería visualización

Sin programación

Para crear mapas de una manera sencilla y compartirlos después:

• CartoDB

• GIS Cloud

• GeoCommons

• Google Fusion Tables

04/09/2015 22

Resumen

03/09/2015 23

HTML5

•HTML Base

•Plantilla HTML

HTML5 + CSS3

•HTML Base con CSS

•Plantilla con CSS

•Visor iframe GeoEuskadi

HTML5 + CSS3 + JS

•Visor api GeoEuskadi

HTML5 + CSS3 + JS + JQUERY

•Plantilla con controles

•API GeoEuskadi, Open Layers, Leaflet, Google Maps…

GraciasBelén Sáez

04/09/2015 24