![Page 1: Productos para compartir mapas: OpenLayers, …...•Desfasados vs OpenLayers o Leaflet •Obligan a usar sus capas y requieren licencias •D3.js –Librería visualización Sin programación](https://reader033.vdocuments.co/reader033/viewer/2022041620/5e3e8b73efe79426e1251a1f/html5/thumbnails/1.jpg)
Productos para compartir mapas: OpenLayers, Leaflet, Google Maps, API
geoEuskadi, etc.
Belén Sáez
![Page 2: Productos para compartir mapas: OpenLayers, …...•Desfasados vs OpenLayers o Leaflet •Obligan a usar sus capas y requieren licencias •D3.js –Librería visualización Sin programación](https://reader033.vdocuments.co/reader033/viewer/2022041620/5e3e8b73efe79426e1251a1f/html5/thumbnails/2.jpg)
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)
![Page 3: Productos para compartir mapas: OpenLayers, …...•Desfasados vs OpenLayers o Leaflet •Obligan a usar sus capas y requieren licencias •D3.js –Librería visualización Sin programación](https://reader033.vdocuments.co/reader033/viewer/2022041620/5e3e8b73efe79426e1251a1f/html5/thumbnails/3.jpg)
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
![Page 4: Productos para compartir mapas: OpenLayers, …...•Desfasados vs OpenLayers o Leaflet •Obligan a usar sus capas y requieren licencias •D3.js –Librería visualización Sin programación](https://reader033.vdocuments.co/reader033/viewer/2022041620/5e3e8b73efe79426e1251a1f/html5/thumbnails/4.jpg)
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
![Page 5: Productos para compartir mapas: OpenLayers, …...•Desfasados vs OpenLayers o Leaflet •Obligan a usar sus capas y requieren licencias •D3.js –Librería visualización Sin programación](https://reader033.vdocuments.co/reader033/viewer/2022041620/5e3e8b73efe79426e1251a1f/html5/thumbnails/5.jpg)
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
![Page 6: Productos para compartir mapas: OpenLayers, …...•Desfasados vs OpenLayers o Leaflet •Obligan a usar sus capas y requieren licencias •D3.js –Librería visualización Sin programación](https://reader033.vdocuments.co/reader033/viewer/2022041620/5e3e8b73efe79426e1251a1f/html5/thumbnails/6.jpg)
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
![Page 7: Productos para compartir mapas: OpenLayers, …...•Desfasados vs OpenLayers o Leaflet •Obligan a usar sus capas y requieren licencias •D3.js –Librería visualización Sin programación](https://reader033.vdocuments.co/reader033/viewer/2022041620/5e3e8b73efe79426e1251a1f/html5/thumbnails/7.jpg)
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
![Page 8: Productos para compartir mapas: OpenLayers, …...•Desfasados vs OpenLayers o Leaflet •Obligan a usar sus capas y requieren licencias •D3.js –Librería visualización Sin programación](https://reader033.vdocuments.co/reader033/viewer/2022041620/5e3e8b73efe79426e1251a1f/html5/thumbnails/8.jpg)
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
![Page 9: Productos para compartir mapas: OpenLayers, …...•Desfasados vs OpenLayers o Leaflet •Obligan a usar sus capas y requieren licencias •D3.js –Librería visualización Sin programación](https://reader033.vdocuments.co/reader033/viewer/2022041620/5e3e8b73efe79426e1251a1f/html5/thumbnails/9.jpg)
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/
![Page 10: Productos para compartir mapas: OpenLayers, …...•Desfasados vs OpenLayers o Leaflet •Obligan a usar sus capas y requieren licencias •D3.js –Librería visualización Sin programación](https://reader033.vdocuments.co/reader033/viewer/2022041620/5e3e8b73efe79426e1251a1f/html5/thumbnails/10.jpg)
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
![Page 11: Productos para compartir mapas: OpenLayers, …...•Desfasados vs OpenLayers o Leaflet •Obligan a usar sus capas y requieren licencias •D3.js –Librería visualización Sin programación](https://reader033.vdocuments.co/reader033/viewer/2022041620/5e3e8b73efe79426e1251a1f/html5/thumbnails/11.jpg)
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)
![Page 12: Productos para compartir mapas: OpenLayers, …...•Desfasados vs OpenLayers o Leaflet •Obligan a usar sus capas y requieren licencias •D3.js –Librería visualización Sin programación](https://reader033.vdocuments.co/reader033/viewer/2022041620/5e3e8b73efe79426e1251a1f/html5/thumbnails/12.jpg)
EPSG:4326 = WGS 84 (elipsoide) EPSG:3857 = EPSG:900913 (esfera)
04/09/2015 12
Las más comunes (EPSG:4326 y EPSG:3857)
![Page 13: Productos para compartir mapas: OpenLayers, …...•Desfasados vs OpenLayers o Leaflet •Obligan a usar sus capas y requieren licencias •D3.js –Librería visualización Sin programación](https://reader033.vdocuments.co/reader033/viewer/2022041620/5e3e8b73efe79426e1251a1f/html5/thumbnails/13.jpg)
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
![Page 14: Productos para compartir mapas: OpenLayers, …...•Desfasados vs OpenLayers o Leaflet •Obligan a usar sus capas y requieren licencias •D3.js –Librería visualización Sin programación](https://reader033.vdocuments.co/reader033/viewer/2022041620/5e3e8b73efe79426e1251a1f/html5/thumbnails/14.jpg)
Funcionalidades sobre las capas
• Cargar
• Mostrar/Ocultar
• Cambiar trasparencia
• Eliminar
• Ver detalles al pinchar
04/09/2015 14
![Page 15: Productos para compartir mapas: OpenLayers, …...•Desfasados vs OpenLayers o Leaflet •Obligan a usar sus capas y requieren licencias •D3.js –Librería visualización Sin programación](https://reader033.vdocuments.co/reader033/viewer/2022041620/5e3e8b73efe79426e1251a1f/html5/thumbnails/15.jpg)
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
![Page 16: Productos para compartir mapas: OpenLayers, …...•Desfasados vs OpenLayers o Leaflet •Obligan a usar sus capas y requieren licencias •D3.js –Librería visualización Sin programación](https://reader033.vdocuments.co/reader033/viewer/2022041620/5e3e8b73efe79426e1251a1f/html5/thumbnails/16.jpg)
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)
![Page 17: Productos para compartir mapas: OpenLayers, …...•Desfasados vs OpenLayers o Leaflet •Obligan a usar sus capas y requieren licencias •D3.js –Librería visualización Sin programación](https://reader033.vdocuments.co/reader033/viewer/2022041620/5e3e8b73efe79426e1251a1f/html5/thumbnails/17.jpg)
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
![Page 18: Productos para compartir mapas: OpenLayers, …...•Desfasados vs OpenLayers o Leaflet •Obligan a usar sus capas y requieren licencias •D3.js –Librería visualización Sin programación](https://reader033.vdocuments.co/reader033/viewer/2022041620/5e3e8b73efe79426e1251a1f/html5/thumbnails/18.jpg)
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
![Page 19: Productos para compartir mapas: OpenLayers, …...•Desfasados vs OpenLayers o Leaflet •Obligan a usar sus capas y requieren licencias •D3.js –Librería visualización Sin programación](https://reader033.vdocuments.co/reader033/viewer/2022041620/5e3e8b73efe79426e1251a1f/html5/thumbnails/19.jpg)
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
![Page 20: Productos para compartir mapas: OpenLayers, …...•Desfasados vs OpenLayers o Leaflet •Obligan a usar sus capas y requieren licencias •D3.js –Librería visualización Sin programación](https://reader033.vdocuments.co/reader033/viewer/2022041620/5e3e8b73efe79426e1251a1f/html5/thumbnails/20.jpg)
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
![Page 21: Productos para compartir mapas: OpenLayers, …...•Desfasados vs OpenLayers o Leaflet •Obligan a usar sus capas y requieren licencias •D3.js –Librería visualización Sin programación](https://reader033.vdocuments.co/reader033/viewer/2022041620/5e3e8b73efe79426e1251a1f/html5/thumbnails/21.jpg)
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
![Page 22: Productos para compartir mapas: OpenLayers, …...•Desfasados vs OpenLayers o Leaflet •Obligan a usar sus capas y requieren licencias •D3.js –Librería visualización Sin programación](https://reader033.vdocuments.co/reader033/viewer/2022041620/5e3e8b73efe79426e1251a1f/html5/thumbnails/22.jpg)
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
![Page 23: Productos para compartir mapas: OpenLayers, …...•Desfasados vs OpenLayers o Leaflet •Obligan a usar sus capas y requieren licencias •D3.js –Librería visualización Sin programación](https://reader033.vdocuments.co/reader033/viewer/2022041620/5e3e8b73efe79426e1251a1f/html5/thumbnails/23.jpg)
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…
![Page 24: Productos para compartir mapas: OpenLayers, …...•Desfasados vs OpenLayers o Leaflet •Obligan a usar sus capas y requieren licencias •D3.js –Librería visualización Sin programación](https://reader033.vdocuments.co/reader033/viewer/2022041620/5e3e8b73efe79426e1251a1f/html5/thumbnails/24.jpg)
GraciasBelén Sáez
04/09/2015 24