Creando un mapa web de Leaflet partiendo de una capa Shapefile.

En muchas ocasiones, la necesidad de un proyecto GIS puede ir más allá de ofrecer un resultado final en formato analógico. Pensar en darle salida mediante un formato estándar que te permitiera interactuar con el mapa sin la necesidad de aprender a utilizar los mencionados clientes SIG.

En la siguiente publicación explicaremos paso a paso como crear un sencillo mapa web con Leaflet y compartirlo con otros usuarios.

Convertir nuestro Shapefile a GeoJSON.

Una vez trabajada la capa Shapefile en un proyecto GIS y habiendo creado los campos con la información necesaria para hacerla pública, tendremos que migrar a formato GeoJSON. Para convertir nuestro shp a GeoJSON tenemos varias opciones, desde utilizar conversores online a exportar el resultado desde nuestro proyecto. En esta última opción, y escogiendo software QGIS, clicaremos con el botón derecho sobre la capa y pincharemos sobre la opción “Guardar como” …

Guardaremos nuestro archivo .geojson en el directorio de trabajo en el que aglutinaremos los diferentes archivos de trabajo (HTML). Una vez hemos guardado cambiaremos la extensión a nuestro archivo .geojson a .js (Ejemplo: provincias.js).

Visualizando nuestra capa GeoJSON en Leaflet.

Una vez convertido nuestro Shapefile a JavaScript tendremos que dotar al archivo de la estructura necesaria para Leaflet sea capaz de importar y reconocer los datos. Abrimos nuestro archivo con un editor de texto (os aconsejo utilizar Notepad ++) y agregamos la siguiente sentencia al principio del código reconociendo que el contenido del dicho archivo es igual a la variable provincias:

var provincias = {

 El siguiente paso será trasladar el archivo GeoJSON a nuestro documento HTML, incorporando en la cabecera la siguiente sentencia:

<script type="text/javascript" src="provincias.js"></script>

 Mediante el siguiente código importaremos nuestra capa GeoJSON al mapa, utilizando la llamada objeto GeoJSON:

L.geoJson(provincias).addTo(map);

Mejorando la apariencia del mapa.

En este paso mejoraremos la apariencia del mapa estableciendo una categorización de valores de acuerdo con la TASA DE PARO a nivel provincial en el año 2018.  Con la siguiente función llamamos a una serie de umbrales asignando un color para dichos valores:

function getColor(d) {												
         return d > 50? '#800026' :									
        d > 23 ? '#C70039' :										
        d > 15 ? '#EE4F4F' :										
        d > 12 ? '#EEAD4F' :										
        '#EBCE17';												
         }

Posteriormente, emplearemos la función fillColor sobre la propiedad feature.properties.TASAPARO en la que ajustaremos la transparencia, ancho y color de borde, etc.

function style(feature) {											
          return {
          fillColor: getColor(feature.properties.TASAPARO),
	  weight: 2,
	  opacity: 1,
	  color: 'white',
	  dashArray: '3',
	  fillOpacity: 0.7
	       };

 Añadimos el estilo en la capa;

L.geoJson(provincias, {style: style}).addTo(map);

 Por último, vamos a mejorar la visualización del mapa añadiendo la funcionalidad Popup para crear ventanas emergentes con el nombre de la provincia.

function popup(feature, layer) {										
       if (feature.properties && feature.properties.ROTULO) {					
       layer.bindPopup(feature.properties.ROTULO);
	      }												
              }

 Añadimos la función que te permite relacionar la geometría con el campo ROTULO que contiene el nombre de cada provincia.

geojson = L.geoJson(provincias, {							
style: style,onEachFeature: popup
}).addTo(map);

Este sería el resultado final del trabajo que hemos ido programando en un documento HTML sirviéndonos como base de una capa Shapefile convertida a GeoJSON e incorporada a nuestro proyecto.