GIS

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” …

GeoJSON es la opción adecuada para trabajar nuestra capa desde la web. Se trata de un formato simple y ligero, capaz de obtener datos directos de servidores o guardar la información asociada para crear mapas

 

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.

Add Comment

Click here to post a comment

Curso en gestión catastral con GIS (Enero 2019)

Sígueme en Twitter

X

Pin It on Pinterest

X

Si continuas utilizando este sitio aceptas el uso de cookies. Más Info

Los ajustes de cookies de esta web están configurados para "permitir cookies" y así ofrecerte la mejor experiencia de navegación posible. Si sigues utilizando esta web sin cambiar tus ajustes de cookies o haces clic en "Aceptar" estarás dando tu consentimiento a esto.

Cerrar