1. No category

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
• <section> 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
• <section> 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