SESIÓN 2 Productos para compartir mapas: OpenLayers, Leaflet, Google Maps, API geoEuskadi, etc.

Belén Sáez [email protected]

Resumen HTML5

HTML5 + CSS3

HTML5 + CSS3 + JS

HTML5 + CSS3 + JS + JQUERY

03/09/2015

•HTML Base •Plantilla HTML

•HTML Base con CSS •Plantilla con CSS •Visor iframe GeoEuskadi

•Visor api GeoEuskadi

Plantilla creada (HTML5 + CSS3 + JS+ jQuery)

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

2

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 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)

KML • Gazte Informazioa (© Open Data Euskadi) • Alojamientos Rurales (© http://turismo.euskadi.eus/) • Oficinas Turismo (© http://turismo.euskadi.eus/) 04/09/2015

FUENTES • GeoEuskadi • Open Data Euskadi • Turismo Euskadi

8

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)

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

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

04/09/2015

9

Las más comunes (EPSG:4326 y EPSG:3857) Basadas en Mercator: • 1569 • Cilíndrica Imagen del ITE

EPSG:4326 = WGS 84 (elipsoide)

EPSG:3857 = EPSG:900913 (esfera)

• Referencia: https://epsg.io/4326 • Rango: -180.0000, -90.0000, 180.0000,

• Referencia: https://epsg.io/3857 Rango: 20026376.39 -20048966.10

• Usado por los GPS  muchos conjuntos de datos

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

90.0000

04/09/2015

20026376.39 20048966.10

10

Las más comunes (EPSG:4326 y EPSG:3857) EPSG:4326 = WGS 84 (elipsoide)

Imagen de http://mapserver.org/

04/09/2015

EPSG:3857 = EPSG:900913 (esfera)

Imagen de http://mapserver.org/

11

Las más comunes (EPSG:4326 y EPSG:3857) EPSG:4326 = WGS 84 (elipsoide)

04/09/2015

EPSG:3857 = EPSG:900913 (esfera)

12

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

EPSG:25830

15

Open Layers 3 (OL3) • 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 reproyectar imágenes por ahora. 04/09/2015

Si cargamos una capa base (EPSG:3857)  No podremos cargar las capas WMS de GeoEuskadi (EPSG:25830)

EPSG:4362

16

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

EPSG:3857

17

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

EPSG:3857

•

de detalles fuera del mapa 04/09/2015

19

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 •

de detalles fuera del mapa

04/09/2015

EPSG:3857

20

Comparativa API GeoEuskadi

Open Layers

Contexto geográfico Euskadi

Diferentes capas base pero: • OL3 no proyecta imágenes (WMS) • OL2 podemos “parchear”

Leaflet

Google Maps

Diferentes capas base, más ligera que OL3 (buena para móviles) pero: • plugins • menos documentación que OL3 04/09/2015

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

Otras aplicaciones Con programación

Sin programación

• Bing Maps y Yahoo Maps

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

• Desfasados vs OpenLayers o Leaflet • Obligan a usar sus capas y requieren licencias

• D3.js – Librería visualización

04/09/2015

• • • •

CartoDB GIS Cloud GeoCommons Google Fusion Tables

22

Resumen HTML5

HTML5 + CSS3

HTML5 + CSS3 + JS

HTML5 + CSS3 + JS + JQUERY

03/09/2015

•HTML Base •Plantilla HTML

•HTML Base con CSS •Plantilla con CSS •Visor iframe GeoEuskadi

•Visor api GeoEuskadi

•Plantilla con controles •API GeoEuskadi, Open Layers, Leaflet, Google Maps…

23

Gracias Belén Sáez

04/09/2015

24