productos para compartir mapas: openlayers, leaflet, google … · 2015-09-09 · contenidos...
TRANSCRIPT
Productos para compartir mapas: OpenLayers, Leaflet, Google Maps, API
geoEuskadi, etc.
Belén Sáez
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