class: center, middle, inverse, title-slide .title[ # Generación de visores de datos espaciales con R ] .subtitle[ ## Seminarios de Ecoinformática ] .author[ ### Antonio J. Pérez-Luque ] .date[ ### 2022-05-05 ] --- class: inverse, middle, center
# ¿Cómo generar <br>visores de datos espaciales con
? --- class: middle, left ###
Repo con material [ajpelu/visores_geograficos_r](https://github.com/ajpelu/visores_geograficos_r) ###
Slides [https://ajpelu.github.io/visores_geograficos_r/slides.html](https://ajpelu.github.io/visores_geograficos_r/slides.html) ###
Mapa de ejemplo [https://ajpelu.github.io/visores_geograficos_r_ejemplo/](https://ajpelu.github.io/visores_geograficos_r_ejemplo/) --- ## ... para este .red[brico-Seminario] vamos a necesitar > ###
<br> **Información** para mostrar (espacial) <br> > ###
<br> **Herramienta** para crear el `mapa` que queremos mostrar <br> > ###
<br> Un **lugar** donde mostrar/alojar el mapa que hemos creado --- class: middle, center <img src="img/esquema_pub.png" width="758" height="80%" style="display: block; margin: auto;" /> --- class: middle, center
# Información Espacial --- # Tipos de datos # Proyección # Datum --- ###
Modelo vectorial <img src="img/vectors.png" width="70%" style="display: block; margin: auto;" /> --- ###
Modelo raster <img src="img/raster_concept.png" width="70%" style="display: block; margin: auto;" /> --- ## Sitema de Referencia de Coordenadas - Datos espaciales = datos + CRS - Modelo matemático que conecta los datos con la superficie de la Tierra - CRS le dice al software (QGIS, R, ...) en que **espacio geográfico** está la información, y qué **metodo** usar **para proyectar** la información sobre el espacio geográfico ### "Estándares" para compartir la información CRS - [proj](http://proj4.org/): ``` # [1] "+proj=longlat +datum=WGS84 +no_defs" ``` ``` # [1] "+proj=longlat +ellps=intl +towgs84=-87,-98,-121,0,0,0,0 +no_defs" ``` - [EPSG](https://spatialreference.org/ref/epsg/): ``` # CRS arguments: +proj=longlat +datum=WGS84 +no_defs ``` ??? Una estructura de datos no puede considerarse geoespacial si no va acompañada de información del sistema de referencia de coordenadas (CRS), en un formato que las aplicaciones geoespaciales puedan utilizar para mostrar y manipular los datos correctamente. La información CRS conecta los datos con la superficie de la Tierra mediante un modelo matemático. https://mappinggis.com/2016/04/los-codigos-epsg-srid-vinculacion-postgis/ --- class:center, middle ### The peel analogy > #### CRS = `Datum` + `Proyección` + `parámetros adicionales` .pull-left[ ![](img/orange_lemon.jpeg) [Fuente](https://github.com/MicheleTobias/R-Projections-Workshop) ] .pull-right[ ![](img/orange_flatten.jpeg) [Fuente](http://blogs.lincoln.ac.nz/gis/2017/03/29/where-on-earth-are-we/) ] ??? - Imagina que la tierra es una naranja. La forma en la que la pelamos y la aplanamos es similar a lo que hace una proyección. - El datum se refiere a la elección de la fruta: ¿es la tierra una naranja, un limón, una lima? - La proyección es la forma de pelar la cáscara y luego aplanar la piel - Otros parámetros adicionales pueden referirse a la ubicación del tallo de la naranja --- ## Recursos sobre Información espacial +
- [Análisis espacial con R: Usa R como un Sistema de Información Geográfica](https://eujournal.org/files/journals/1/books/JeanFrancoisMas.pdf). J.F. Mas. - [GIS with R](https://pakillo.github.io/GISwithR/GISwithR.html). F. Rodríguez-Sánchez - [Geocomputation with R](https://geocompr.robinlovelace.net/). R. Lovelace et *al.* (2022) - Varios tutoriales de [NEON](https://jsta.github.io/r-spatial-data-management-intro/spatial-data-gis/) - [r-spatial](https://r-spatial.org/about/). Pebesma et *al.* - [Spatial Data Science with R](https://rspatial.org/) -
[Cran Task View](https://cran.r-project.org/web/views/Spatial.html) - [R Projections Workshop](https://github.com/MicheleTobias/R-Projections-Workshop) - [World Map Projections](https://michaelminn.net/tutorials/gis-projections-world/index.html) - [Cheatseet de CRS in R](https://www.nceas.ucsb.edu/sites/default/files/2020-04/OverviewCoordinateReferenceSystems.pdf). NCEAS --- ### Información a mostrar ```r library(sf) *sn <- st_read(here::here("data/sn_enp.shp"), quiet = TRUE) plot(st_geometry(sn)) ``` <img src="slides_files/figure-html/unnamed-chunk-8-1.png" style="display: block; margin: auto;" /> --- ¿Qué proyección tiene nuestra capa? ```r projection(sn) ``` [1] "+proj=utm +zone=30 +ellps=intl +units=m +no_defs" ```r sn <- st_transform(sn, 4326) projection(sn) ``` [1] "+proj=longlat +datum=WGS84 +no_defs" --- class: middle, center
# **Herramienta** para crear el `mapa` --- class: middle <img src="img/Leaflet_logo.png" width="70%" style="display: block; margin: auto;" /> <br> <br> - Librería JavaScript de código abierto para generar mapas interactivos - Sencilla, simple y ligera - Gran cantidad de [**plugins**](https://leafletjs.com/plugins.html) que permiten incorporar nuevas características a los mapas - proyecciones<sup>1</sup>: `epsg:3857`, `epsg:4326`. [Proj4Leaflet](http://kartena.github.io/Proj4Leaflet/) .footnote[ [1] [mappingGIS](https://mappinggis.com/2017/02/personalizando-los-sistemas-de-coordenadas-en-leaflet/) ] --- class: inverse, middle, center <img src="img/Leaflet_logo.png" width="70%" style="display: block; margin: auto;" /> # + #
https://rstudio.github.io/leaflet/ --- ### Uso básico ```r library(leaflet) mapita <- leaflet() %>% # Añadir capas addTiles() %>% # Open Street map # Añadir otras capas addMarkers(lng=-3.311572, lat=37.053434, popup="Mulhacen") mapita ```
--- ### Añadir otras capas ```r mapita %>% addPolygons(data = sn, group= 'Natural Park', fillOpacity = 0, color = "blue") ```
--- ### Añadir control de capas ```r mapita %>% addLayersControl(position = 'bottomright', baseGroups = c('Open Street Map'), overlayGroups = c('Natural Park')) ```
--- ### Capas base - Otros [proveedores](https://leaflet-extras.github.io/leaflet-providers/preview/) de mapas base ```r mapita %>% addProviderTiles("Esri.WorldImagery", group = "Satellite (ESRI)") %>% addLayersControl(position = 'bottomright', baseGroups = c('Open Street Map', 'Satellite (ESRI)'), overlayGroups = c('Natural Park')) ```
--- ### Capas base (WMS) - **W**eb **M**ap **S**ervices protocolo estándar (Open Geospatial Consortium) que sirve imágenes de mapas a partir de información geográfica. - Fuentes de WMS: - [IDE España](https://www.idee.es/segun-tipo-de-servicio) - [IGN España](https://www.ign.es/web/ign/portal/ide-area-nodo-ide-ign) - [Biodiversidad y Bosques](https://www.miteco.gob.es/es/cartografia-y-sig/ide/directorio_datos_servicios/biodiversidad/wms_bdn.aspx) (MITECO) - [REDIAM - Andalucía](https://portalrediam.cica.es/geonetwork/static/search?serviceType=OGC:WMS) - Predicciones del tiempo: [OpenWeatherMaps](https://openweathermap.org/api/weather-map-2) --- #### ¿Qué capa utilizar de un servicio WMS?<sup>1</sup> `URL WMS` + petición de metadatos ```java http://www.ign.es/wms-inspire/pnoa-ma ``` + ```java ?=request=GetCapabilities&service=WMS ``` [Ejemplo](http://www.ign.es/wms-inspire/pnoa-ma?=request=GetCapabilities&service=WMS) - Layer: `OI.OrthoimageCoverage` .footnote[ [1] [Comunicación con un servidor WMS](https://enterprise.arcgis.com/es/server/latest/publish-services/windows/communicating-with-a-wms-service-in-a-web-browser.htm) ] --- ```r mapita %>% addProviderTiles("Esri.WorldImagery", group = "Satellite (ESRI)") %>% * addWMSTiles("http://www.ign.es/wms-inspire/pnoa-ma?", * layers = 'OI.OrthoimageCoverage', * options = WMSTileOptions(format = "image/png", transparent = TRUE), * group = "PNOA") %>% addLayersControl(position = 'bottomright', * baseGroups = c('Open Street Map','Satellite (ESRI)','PNOA'), overlayGroups = c('Natural Park')) ```
--- class: middle, center
# Un **lugar** donde mostrar/alojar el mapa que hemos creado --- class: middle, center <img src="img/esquema_pub.png" width="758" height="80%" style="display: block; margin: auto;" /> --- ### 1. Generar html ```r mapita_final <- mapita %>% addProviderTiles("Esri.WorldImagery", group = "Satellite (ESRI)") %>% addWMSTiles("http://www.ign.es/wms-inspire/pnoa-ma?", layers = 'OI.OrthoimageCoverage', options = WMSTileOptions(format = "image/png", transparent = TRUE), group = "PNOA") %>% addLayersControl(position = 'bottomright', baseGroups = c('Open Street Map','Satellite (ESRI)','PNOA'), overlayGroups = c('Natural Park')) ``` ```r *library(htmlwidgets) # HTML Widgets for R *saveWidget(mapita_final, "index.html") ``` --- ## Otras opciones ### [`flexdashboard`](https://pkgs.rstudio.com/flexdashboard/) - Crear archivo `index.Rmd` - Escribir tu código con tu mapa - Crear carpeta vacía `/docs` - Crear un archivo [YAML](https://yaml.org/) llamado `_site.yml` que contenga el código: ``` output_dir: docs ``` - Renderizar tu `.Rmd`. Todos los archivos necesarios se generarán en la carpeta `/docs`. Ejemplos: - Transectos + parcelas *Q. pyrenaica* Sierra Nevada [https://ajpelu.github.io/qpyr_sp_coloniza/](https://ajpelu.github.io/qpyr_sp_coloniza/) - Visualización cambio climático enebrales de Sierra Nevada [https://ajpelu.github.io/life_enebrando](https://ajpelu.github.io/life_enebrando) --- ## 2. Publicar tu visor ### a. Alojar el visor en tu web - Alojar tu archivo `index.html` o tu carpeta `/docs` a tu propio servidor (!Ojo con el nombre del archivo index!) ### b. Alojar el visor en Github - Desplegar desde tu repositorio. - Introducción a Git + Github + Repositorios - [¡Se puede entender cómo funcionan Git y GitHub!](https://www.revistaecosistemas.net/index.php/ecosistemas/article/view/2332) Astigarraga & Cruz-Alonso (2022) - [¿Por qué usar GitHub? Diez pasos para disfrutar de GitHub y no morir en el intento](https://www.revistaecosistemas.net/index.php/ecosistemas/article/view/1604) Galeano (2018) --- ### ¿Cómo desplegar el visor usando
? - Ir a **settings** de tu repositorio - Ir a la pestaña **`Pages`** - Establecer `Source`: **`main`** - Guardar El visor se desplegará en ``` usuario.github.io/repositorio ``` Ejemplo: https://ajpelu.github.io/visores_geograficos_r/ Otro ejemplo: https://ajpelu.github.io/qpyr_spatial_es/ --- class: inverse, middle, center
# Live demo --- class: middle, center
# Live demo ###
[ajpelu/qpyr_spatial_es/](https://github.com/ajpelu/qpyr_spatial_es) https://ajpelu.github.io/qpyr_spatial_es/ ###
[ajpelu/visores_geograficos_r](https://github.com/ajpelu/visores_geograficos_r_ejemplo) https://ajpelu.github.io/visores_geograficos_r_ejemplo --- class: inverse, middle, center # Muchas gracias <img style="border-radius: 50%;" src="https://avatars.githubusercontent.com/u/6410962?v=4" width="150px"/> ## Antonio J. Pérez-Luque ### Material en
[ajpelu/visores_geograficos_r](https://github.com/ajpelu/visores_geograficos_r) .fade[SERPAM<br>EEZ-CSIC] [
ajperezluque.com/](https://ajperezluque.com/) [
@ajpelu](https://twitter.com/ajpelu) [
@ajpelu](https://github.com/ajpelu)