Actualizada entrada

Author: sigdeletras

sprint.md

@@ -1,8 +1,20 @@
-# Sprint 3
-
-Vamos con el tercer *sprint* de este [**proyecto para crear una aplicación de mapas con la librería React**](http://www.sigdeletras.com/2020/side-project-desarrollo-de-aplicacion-web-con-react-y-leaflet-i/). Como vamos comentando desde la primera entrada definimos un conjunto de "tareas" cerradas que definirían el alcance la aplicación. En esta ocasión, le he dado un buen impulso a nuestra *backlog*.
-
-![react.png](img/react.png)
+---
+title:  "Side Project: Desarrollo de aplicación web con React y Leaflet (III). Datos desde WFS"
+excerpt_separator: "<!--more-->"
+comments: true
+related: true
+header:
+  teaser: "/img/react.png" 
+categories: 
+  - 2020
+tags:
+  - react
+  - leaflet
+---
+
+Vamos con el tercer *sprint* de este [**proyecto para crear una aplicación de mapas con la librería React**](http://www.sigdeletras.com/2020/side-project-desarrollo-de-aplicacion-web-con-react-y-leaflet-i/). Como voy comentando desde la primera entrada se definieron un conjunto de "tareas" cerradas que establecerían el alcance de la aplicación. En esta ocasión, le he dado un buen impulso al *backlog*.
+
+![react.png](/img/react.png)
 
 Las tareas finalizadas son las siguientes
 
@@ -12,7 +24,7 @@ Las tareas finalizadas son las siguientes
 - 15 Consulta datos en mapa (popup).
 - 23 Añadir capas WMS y gestión con LayerControl.
 
-Centrándome en los temas aprendidos sobre React a partir del desarrollo de estas tareas, he tratado los siguientes aspectos:
+Los temas aprendidos sobre React a partir del desarrollo de estas tareas son los siguientes:
 
 - La gestión de forma asíncrona de peticiones/respuestas a servicios WFS usando [fetch](https://developer.mozilla.org/es/docs/Web/API/Fetch_API/Utilizando_Fetch).
 - El uso de referencias y métodos de cliclo de vida en React.
@@ -21,10 +33,12 @@ Centrándome en los temas aprendidos sobre React a partir del desarrollo de esta
 ## Petición de datos a un servicio WFS
 
 El consumo de datos geográficos mediante [servicios OGC](https://es.wikipedia.org/wiki/Open_Geospatial_Consortium) se encuentra extendido en proyectos de estas características. Dentro de estos servicios estándar, el conocido como **Web Feature Service (WFS)** ofrece una interfaz de comunicación que permite consultar o descargar objetos geográficos. En la la entrada titulada ["Acceso a servicios OGC (WMS,WFS..) con Postman"](http://www.sigdeletras.com/2019/acceso-a-servicios-ogc-con-postman/) tengo desarrollado algunos de estos aspectos.
-Hay una gran cantidad de datos que pueden consumirse no solo con un SIG de escritorio, sino también mediante una aplicación web. Sirva come ejemplo la [recopilación de servicios de descargas en la web de la IDE España](https://www.idee.es/es_ES/web/guest/directorio-de-servicios?p_p_id=DIRSRVIDEE_WAR_DIRSRVIDEEportlet_INSTANCE_KXnVu4qMJc1J&p_p_lifecycle=1&p_p_state=normal&p_p_mode=view&p_p_col_id=column-1&p_p_col_count=1&_DIRSRVIDEE_WAR_DIRSRVIDEEportlet_INSTANCE_KXnVu4qMJc1J_descSrv=DESCARGA).
+Hay una gran cantidad de datos que pueden consumirse no solo con un SIG de escritorio, sino también mediante una aplicación web. Sirva come ejemplo la [recopilación de servicios de descargas en la web de la IDE España](https://www.idee.es/es_ES/web/guest/directorio-de-servicios?p_p_id=DIRSRVIDEE_WAR_DIRSRVIDEEportlet_INSTANCE_KXnVu4qMJc1J&p_p_lifecycle=1&p_p_state=normal&p_p_mode=view&p_p_col_id=column-1&p_p_col_count=1&_DIRSRVIDEE_WAR_DIRSRVIDEEportlet_INSTANCE_KXnVu4qMJc1J_descSrv=DESCARGA). Al ser un recurso muy especializado técnicamente, pienso que se encuentra realmente poco explotado tanto por parte de los profesionales "geo" como desde del desarrollo web en general.
 
 Para el proyecto voy a usar los datos de Servicios de Salud del [WFS de los Datos Espaciales de Rerencia de Andalucía (DERA)](http://www.juntadeandalucia.es/institutodeestadisticaycartografia/DERA/servicios.htm).  En esta capa se encuentran la *"distribución de los equipamientos sanitarios públicos y privados integrados en el Sistema Sanitario Público de Andalucía."*
 
+![03_dera.png](/img/03_dera.png)
+
 ## Petición de datos con API fetch
 
 En primer lugar han sido añadidos dos nuevos valores en *state* para el componente *App*
@@ -50,7 +64,7 @@ export default class App extends React.Component {
 - *geodata*: Será usado para guardar los datos que obtengamos tras realizar la petición al servicio WFS.
 - *code*: En este calor se almacenará el código INE del municipio y que permitirá realizar la consulta filtrada el servicio WFS. El código INE ha sido añadido al json que almacena los datos que aparecen en el listado y también se ha actualizado la información almacena en el valor del elemento *select* dentro de *SelectList* para que puede ser usado.
 
-![03_add_codeine.png](img/03_add_codeine.png)
+![03_add_codeine.png](/img/03_add_codeine.png)
 
 Para la obtención de los datos desde el WFS de la Junta de Andalucía, creamos una función *getWFSData(code)*. En esta función se realizará la petición de datos a la URL del servicio usando [API fetch](https://developer.mozilla.org/es/docs/Web/API/Fetch_API) y pasando el código INE como filtro. La asincronía de la función será manejada con [*async*](https://developer.mozilla.org/es/docs/Web/JavaScript/Referencia/Sentencias/funcion_asincrona)
 
@@ -88,7 +102,7 @@ La funcionalidad está desarrollada dentro de un nuevo componente llamado *Mapla
 
 Para poder usar el icono que viene por defecto en Leaflet se ha tenido que incorporar el siguiente código.
 
-![03_icon_lealfet.png][img/03_icon_lealfet.png]
+![03_icon_lealfet.png](/img/03_icon_lealfet.png)
 
 Este componente será añadido en *MapView* y consumirá los datos que le pasamos en sus propiedades
 
@@ -99,8 +113,8 @@ Despúes de alguna que otra búsqueda [aquí](https://github.com/LiveBy/react-le
 Según la documentación de la librería, alguno de los componentes no se actualizan cuando cambian después de que el componente es montado. Este el el caso del componente GeoJSON. Para que esta opción funciones debemos acceder directamente al elemento Leaflet usado *this.leafletElement* y usando las [referencias de React](https://es.reactjs.org/docs/refs-and-the-dom.html) y desde ahí manejar el DOM de Leaflet.
 
 Hecha la referencia, ahora debemos usar las funciones de la librería de mapa en los **métodos del ciclo de vida del componente React**:
-- componentWillReceiveProps(). Este método no se ejecutará una vez se monte el componente, si no que se esperará a recibir nuevas props de un componente padre para ejecutarse. Lo usaremos para limpiar las capas con *clearLayers()* si los datos recibidos son distintos.
-- componentDidUpdate(). Es invocado inmediatamente después de que el componente se haya actualizado. Dentro se añadirán los datos para el GeoJSON que obtenemos al realizar la consulta a la API.
+- *componentWillReceiveProps()*. Este método no se ejecutará una vez se monte el componente, si no que se esperará a recibir nuevas props de un componente padre para ejecutarse. Lo usaremos para limpiar las capas con *clearLayers()* si los datos recibidos son distintos.
+- *componentDidUpdate()*. Es invocado inmediatamente después de que el componente se haya actualizado. Dentro se añadirán los datos para el GeoJSON que obtenemos al realizar la consulta a la API.
 
 ```javascript
 //MapLayer.js
@@ -122,7 +136,7 @@ export default class MapLayer extends Component {
     }
 ...
 ```
-Para terminar tenemos que pasar como propiedad la referencia creada.
+Para poder usar las referencias tenemos que pasarsela como propiedad al compontente.
 
 ```javascript
 //MapLayer.js
@@ -139,15 +153,17 @@ render() {
 
 ### Popups
 
-Terminamos el componente incorporando la función *onEachFeature()* que permite ofrecer información del punto en un *popup*.
+Terminamos el componente incorporando la función *onEachFeature()* que permite ofrecer información de los servicios saniarios en un *popup*.
 
-![03_popup.png](img/03_popup.png)
+![03_popup.png](/img/03_popup.png)
 
 ## LayerControl
 
 Vamos a darle más **funcionalidades geo** a nuestra aplicación de mapas. Para poder ver los datos sobre distintos mapas base, he incorporado el compomente de control de capas *LayersControl* en *MapView*. Dentro del mismo seguimos manteniendo la base de OpenStreetMap y añadimos la **ortofotografía del PNOA** como capa WMS.
 
 ```javascript
+//MapView.js
+...
     return (
       <div>
         <Map
@@ -187,11 +203,11 @@ Vamos a darle más **funcionalidades geo** a nuestra aplicación de mapas. Para
 
 Tras el desarrollo de las nuevas tareas esta es nuetra aplición web hasta el momento.
 
-![03_sprint3.gif](img/03_sprint3.gif)
+![03_sprint3.gif](/img/03_sprint3.gif)
 
 ## Resumen de  tareas realizadas en el Sprint #3
 
-![03_trello.png](img/03_trello.png)
+![03_trello.png](/img/03_trello.png)
 
 ## Hilo de entradas