Cómo realizar cálculos de análisis espacial en Visores Web con Turf



Elaboración: Carolina Martín García
Máster Universitario en Geoinformática por la Universidade da Coruña
Graduada en el Grado Universitario de Geografía y Ordenación del Territorio por la Universidad de Valladolid

Antes de explicar este tutorial acerca de cómo realizar cálculos de análisis espacial en Visores Web, creo que es fundamental saber que es Turf.

Turf: es una librería JavaScript desarrollada por Mapbox, que nos permite realizar análisis espacial en la web, además de hacer cálculos SIG sin necesidad de recurrir a un Servicio de Procesamiento Web (WPS), en el servidor. Usa GeoJSON para trabajar con datos geográficos como puntos, líneas o polígonos usando objetos JSON. Aparte, esta librería incluye operaciones como (buffers, TIN, isolíneas...), ofrece funciones propias para crear geometrías y evitar el texto plano de un GeoJSON; así como herramientas para clasificar datos y crear estadísticas.

Una vez explicado que es Turf, se va a dar paso a explicar este tutorial.

En primer lugar, trazaremos con métodos de unión de Turf los polígonos de las Comunidades Autónoma Castilla y León, Región de Murcia, Islas Baleares e Islas Canarias para determinar las relaciones espaciales entre dichos objetos espaciales.

Después, crearemos un visor de mapas en la Web, en el que se incluye el link de estilos, la librería de Leaflet y la librería JavaScript para realizar análisis espacial en la web, el cuál, permite realizar cálculos SIG, sin necesidad de recurrir a un Servicio de Procesamiento Web (WPS) en el servidor, y añadiremos la capa de los polígonos de las Comunidades Autónomas en formato JavaScript, el título del visor y la hoja de estilos CSS.

						
<link href="https://unpkg.com/leaflet@1.4.0/dist/leaflet.css" rel="stylesheet">
<script src="https://unpkg.com/leaflet@1.4.0/dist/leaflet.js"></script>
<script src='https://npmcdn.com/@turf/turf/turf.min.js'></script>
<script src="capas_js/leaflet-color-markers.js" type="text/javascript"></script>
<script src="capas_js/comunidades.js" type="text/javascript"></script>

<title>Visor Turf</title>

<style>
	html, body {
	   height: 100%;
	   width: 100%;
	   margin: 0;
	   padding: 0;
	}
	#map {
	   width: 100%;
	   height: 98%;
	   margin-left: auto;
	   margin-right: auto;
	   display:inline-block
	}
</style>
						
					

Seguidamente, crearemos la parte de código JavaScript, en el que se añadiran las capas base, haremos las funciones getColor y style, para darle un color específico a cada área que abarca cada uno de los polígonos de las Comunidades Autónomas, y para ponerle un color concreto al contorno de cada polígono; y se añadirá la capa en formato GeoJSON de las Comunidades Autónomas. Turf emplea el formato GeoJSON para trabajar con datos geográficos, en el que sus coordenadas utilizan como referencia el Sistema de Coordenadas WGS84 (latitud, longitud).

						
function getColor(d) {
	return d > 100000 ? '#800026' : d > 60000 ? '#E31A1C' : d > 30000 ? '#FD8D3C' : '#FFEDA0';
}

function style(feature) {
	var polygon = turf.polygon(feature.geometry.coordinates);
	var area = turf.area(polygon) / 1000000;
	return {
		weight: 2,
		opacity: 1,
		color: 'white',
		dashArray: '3',
		fillOpacity: 0.7,
		fillColor: getColor(area)
	};
}

var comunidades = L.geoJSON(comunidades,{style:style});
						
					

A continuación, se creará los polígonos con Turf, utilizando una matriz de una serie de anillos lineales (rings), y un objeto con propiedades, normalmente las coordenadas de puntos, que hace que devuelva una función GeoJSON Polygon. Para cada polígono añadiremos dos marcadores al visor, uno ubicado en su centro (en color azul) y otro en el centroide (en color rojo).

						
var polygon1 = turf.polygon([ [ [ -6.85757978723405, 40.210416666666667 ], [ -6.25625, 41.571320921985816 ], [ -6.952526595744688, 41.96165780141844 ], [ -6.825930851063837, 42.868927304964544 ], [ -5.823714539007097, 42.953324468085114 ], [ -4.684352836879436, 42.995523049645392 ], [ -3.207402482269506, 43.132668439716319 ], [ -2.901462765957449, 42.636835106382982 ], [ -3.154654255319151, 42.141001773049652 ], [ -1.878147163120568, 41.90890957446809 ], [ -1.899246453900711, 41.17043439716312 ], [ -2.69046985815603, 41.286480496453905 ], [ -3.9353280141844, 40.822296099290782 ], [ -5.243484042553196, 40.189317375886525 ], [ -6.85757978723405, 40.210416666666667 ] ] ] );
var polygon2 = turf.polygon([ [ [ 1.02300531914894, 40.505806737588657 ], [ 4.609884751773057, 40.653501773049648 ], [ 4.683732269503555, 38.163785460992905 ], [ 0.643218085106385, 38.300930851063825 ], [ 1.02300531914894, 40.505806737588657 ] ] ] );
var polygon3 = turf.polygon([ [ [ -2.532225177304966, 38.965558510638296 ], [ -0.749335106382977, 38.933909574468082 ], [ -0.464494680851063, 37.594104609929076 ], [ -1.582757092198582, 37.19321808510638 ], [ -2.563874113475178, 38.100487588652484 ], [ -2.532225177304966, 38.965558510638296 ] ] ] );
var polygon4 = turf.polygon([ [ [ -13.324512411347531, 28.542508865248191 ], [ -13.53550531914895, 27.171054964538968 ], [ -19.865292553191509, 26.8334663120567 ], [ -18.747030141843993, 29.57637411347514 ], [ -12.881427304964552, 29.913962765957415 ], [ -13.324512411347531, 28.542508865248191 ] ] ]);
						
					

Para obtener los centros y centroides de los polígonos de las Comunidades Autónomas, calcularemos con Turf las coordenadas de cada uno de los puntos para cada polígono, empleando para ello los métodos de medición turf.centroid y turf.centerOfMass.

						
var centroid1 = turf.centroid(polygon1);
var centroid2 = turf.centroid(polygon2);
var centroid3 = turf.centroid(polygon3);
var centroid4 = turf.centroid(polygon4);

var centroides = L.layerGroup();

L.geoJSON(centroid1, {pointToLayer: marcadorParalosCentroides}).addTo(centroides);
L.geoJSON(centroid2, {pointToLayer: marcadorParalosCentroides}).addTo(centroides);
L.geoJSON(centroid3, {pointToLayer: marcadorParalosCentroides}).addTo(centroides);
L.geoJSON(centroid4, {pointToLayer: marcadorParalosCentroides}).addTo(centroides);
						
					
						
var center1 = turf.centerOfMass(polygon1);
var center2 = turf.centerOfMass(polygon2);
var center3 = turf.centerOfMass(polygon3);
var center4 = turf.centerOfMass(polygon4);

var centros = L.layerGroup();

L.geoJSON(center1).addTo(centros);
L.geoJSON(center2).addTo(centros);
L.geoJSON(center3).addTo(centros);
L.geoJSON(center4).addTo(centros);
						
					

Además, de añadir el bounding box de cada polígono como una nueva capa al mapa. Para ello, calcularemos el bbox de todas las características de entrada y que devuelve un cuadro delimitador cogiendo los puntos máximos y mínimos del polígono, en el siguiente orden minX, minY, maxX, maxY.

						
var bbox1 = turf.bbox(polygon1);
var bbox2 = turf.bbox(polygon2);
var bbox3 = turf.bbox(polygon3);
var bbox4 = turf.bbox(polygon4);

var bboxPolygon1 = turf.bboxPolygon(bbox1);
var bboxPolygon2 = turf.bboxPolygon(bbox2);
var bboxPolygon3 = turf.bboxPolygon(bbox3);
var bboxPolygon4 = turf.bboxPolygon(bbox4);

L.geoJSON(bboxPolygon1).addTo(bbox);
L.geoJSON(bboxPolygon2).addTo(bbox);
L.geoJSON(bboxPolygon3).addTo(bbox);
L.geoJSON(bboxPolygon4).addTo(bbox);
						
					

El color que le daremos a cada polígono dependerá de si el área del polígono es más grande o más pequeño. Si es más grande le daremos un color más intenso y si es más pequeño lo visualizaremos con un color más claro.

Por último, vamos a crear un selector de capas para que se puedan mostrar en el visor tanto las capas base, como los polígonos de las Comunidades Autónomas, los centros, los centroides y los bounding boxes.

						
var osmLayer = new L.TileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png');
var ESRIDeLormeLayer = new L.TileLayer('https://server.arcgisonline.com/ArcGIS/rest/services/Specialty/DeLorme_World_Base_Map/MapServer/tile/{z}/{y}/{x}');
var ESRIWorldShadedReliefLayer = new L.TileLayer('https://server.arcgisonline.com/ArcGIS/rest/services/World_Shaded_Relief/MapServer/tile/{z}/{y}/{x}');
var stamenWatercolorLayer = new L.TileLayer('https://stamen-tiles-{s}.a.ssl.fastly.net/watercolor/{z}/{x}/{y}.png');
var stamenTonerLiteLayer = new L.TileLayer('https://stamen-tiles-{s}.a.ssl.fastly.net/toner-lite/{z}/{x}/{y}.png');
var baseMaps = {
	'OpenStreetMap': osmLayer,
	'ESRI DeLorme': ESRIDeLormeLayer,
	'ESRI World Shaded Relief': ESRIWorldShadedReliefLayer,
	'Stamen Water Color': stamenWatercolorLayer,
	'Stamen Toner Lite': stamenTonerLiteLayer
};

map.addLayer(osmLayer);
map.addLayer(ESRIDeLormeLayer);
map.addLayer(ESRIWorldShadedReliefLayer);
map.addLayer(stamenWatercolorLayer);
map.addLayer(stamenTonerLiteLayer); 
						
					

El código del ejercicio es el siguiente:

Visor Web con Turf: Cálculo del área de polígonos, centros, centroides y bounding box

visor_turf.html

						
<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<link href="https://unpkg.com/leaflet@1.4.0/dist/leaflet.css" rel="stylesheet">
	<script src="https://unpkg.com/leaflet@1.4.0/dist/leaflet.js"></script>
	<script src='https://npmcdn.com/@turf/turf/turf.min.js'></script>
	<script src="capas_js/leaflet-color-markers.js" type="text/javascript"></script>
	<script src="capas_js/comunidades.js" type="text/javascript"></script>
	<title>Visor Turf</title>
	<style>
	     html, body {
	       height: 100%;
	       width: 100%;
	       margin: 0;
	       padding: 0;
	     }
	     #map {
	       width: 100%;
	       height: 98%;
	       margin-left: auto;
	       margin-right: auto;
	       display:inline-block
	     }
	      
	</style>
</head>
<body>
	<div id="map"></div>
	<script type = "text/javascript" > 
		function getColor(d) {
			return d > 100000 ? '#800026' : d > 60000 ? '#E31A1C' : d > 30000 ? '#FD8D3C' : '#FFEDA0';
		}

		function style(feature) {
			var polygon = turf.polygon(feature.geometry.coordinates);
			var area = turf.area(polygon) / 1000000;
			return {
				weight: 2,
				opacity: 1,
				color: 'white',
				dashArray: '3',
				fillOpacity: 0.7,
				fillColor: getColor(area)
			};
		}
		var osmLayer = new L.TileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png');
		var ESRIDeLormeLayer = new L.TileLayer('https://server.arcgisonline.com/ArcGIS/rest/services/Specialty/DeLorme_World_Base_Map/MapServer/tile/{z}/{y}/{x}');
		var ESRIWorldShadedReliefLayer = new L.TileLayer('https://server.arcgisonline.com/ArcGIS/rest/services/World_Shaded_Relief/MapServer/tile/{z}/{y}/{x}');
		var stamenWatercolorLayer = new L.TileLayer('https://stamen-tiles-{s}.a.ssl.fastly.net/watercolor/{z}/{x}/{y}.png');
		var stamenTonerLiteLayer = new L.TileLayer('https://stamen-tiles-{s}.a.ssl.fastly.net/toner-lite/{z}/{x}/{y}.png');
		var baseMaps = {
			'OpenStreetMap': osmLayer,
			'ESRI DeLorme': ESRIDeLormeLayer,
			'ESRI World Shaded Relief': ESRIWorldShadedReliefLayer,
			'Stamen Water Color': stamenWatercolorLayer,
			'Stamen Toner Lite': stamenTonerLiteLayer
		};
		var comunidades = L.geoJSON(comunidades, {
			style: style
		});
		var polygon1 = turf.polygon([
			[
				[-6.85757978723405, 40.210416666666667],
				[-6.25625, 41.571320921985816],
				[-6.952526595744688, 41.96165780141844],
				[-6.825930851063837, 42.868927304964544],
				[-5.823714539007097, 42.953324468085114],
				[-4.684352836879436, 42.995523049645392],
				[-3.207402482269506, 43.132668439716319],
				[-2.901462765957449, 42.636835106382982],
				[-3.154654255319151, 42.141001773049652],
				[-1.878147163120568, 41.90890957446809],
				[-1.899246453900711, 41.17043439716312],
				[-2.69046985815603, 41.286480496453905],
				[-3.9353280141844, 40.822296099290782],
				[-5.243484042553196, 40.189317375886525],
				[-6.85757978723405, 40.210416666666667]
			]
		]);
		var polygon2 = turf.polygon([
			[
				[1.02300531914894, 40.505806737588657],
				[4.609884751773057, 40.653501773049648],
				[4.683732269503555, 38.163785460992905],
				[0.643218085106385, 38.300930851063825],
				[1.02300531914894, 40.505806737588657]
			]
		]);
		var polygon3 = turf.polygon([
			[
				[-2.532225177304966, 38.965558510638296],
				[-0.749335106382977, 38.933909574468082],
				[-0.464494680851063, 37.594104609929076],
				[-1.582757092198582, 37.19321808510638],
				[-2.563874113475178, 38.100487588652484],
				[-2.532225177304966, 38.965558510638296]
			]
		]);
		var polygon4 = turf.polygon([
			[
				[-13.324512411347531, 28.542508865248191],
				[-13.53550531914895, 27.171054964538968],
				[-19.865292553191509, 26.8334663120567],
				[-18.747030141843993, 29.57637411347514],
				[-12.881427304964552, 29.913962765957415],
				[-13.324512411347531, 28.542508865248191]
			]
		]);
		var centroid1 = turf.centroid(polygon1);
		var centroid2 = turf.centroid(polygon2);
		var centroid3 = turf.centroid(polygon3);
		var centroid4 = turf.centroid(polygon4);

		var center1 = turf.centerOfMass(polygon1);
		var center2 = turf.centerOfMass(polygon2);
		var center3 = turf.centerOfMass(polygon3);
		var center4 = turf.centerOfMass(polygon4);

		var bbox1 = turf.bbox(polygon1);
		var bbox2 = turf.bbox(polygon2);
		var bbox3 = turf.bbox(polygon3);
		var bbox4 = turf.bbox(polygon4);

		var bboxPolygon1 = turf.bboxPolygon(bbox1);
		var bboxPolygon2 = turf.bboxPolygon(bbox2);
		var bboxPolygon3 = turf.bboxPolygon(bbox3);
		var bboxPolygon4 = turf.bboxPolygon(bbox4);

		var centroides = L.layerGroup();
		var centros = L.layerGroup();
		var bbox = L.layerGroup();

		L.geoJSON(centroid1, {pointToLayer: marcadorParalosCentroides}).addTo(centroides);
		L.geoJSON(centroid2, {pointToLayer: marcadorParalosCentroides}).addTo(centroides);
		L.geoJSON(centroid3, {pointToLayer: marcadorParalosCentroides}).addTo(centroides);
		L.geoJSON(centroid4, {pointToLayer: marcadorParalosCentroides}).addTo(centroides);

		L.geoJSON(center1).addTo(centros);
		L.geoJSON(center2).addTo(centros);
		L.geoJSON(center3).addTo(centros);
		L.geoJSON(center4).addTo(centros);

		L.geoJSON(bboxPolygon1).addTo(bbox);
		L.geoJSON(bboxPolygon2).addTo(bbox);
		L.geoJSON(bboxPolygon3).addTo(bbox);
		L.geoJSON(bboxPolygon4).addTo(bbox);

		var overlayMaps = {
			'Comunidades': comunidades,
			'Centroides': centroides,
			'Centros': centros,
			'Bbox': bbox,
		}

		function marcadorParalosCentroides(feature, latlng) {
			return L.marker(latlng, {
				icon: redIcon
			})
		}

		function marcadorParalosCentros(feature, latlng) {
			return L.marker(latlng, {
				icon: blueIcon
			})
		}

		var layerControl = new L.control.layers(baseMaps, overlayMaps);
		var scaleControl = new L.control.scale({
			'imperial': false
		});

		var map = new L.Map('map');

		map.setView(new L.LatLng(40.4167, -3.70325), 5);
		map.addControl(layerControl);
		map.addControl(scaleControl);
		map.addLayer(osmLayer);
		map.addLayer(ESRIDeLormeLayer);
		map.addLayer(ESRIWorldShadedReliefLayer);
		map.addLayer(stamenWatercolorLayer);
		map.addLayer(stamenTonerLiteLayer); 
	</script>
</body>
</html>
						
					

comunidades.js

						
var comunidades ={
	"type": "FeatureCollection",
	"name": "comunidades",
	"crs": { "type": "name", "properties": { "name": "urn:ogc:def:crs:OGC:1.3:CRS84" } },
	"features": [
	{ "type": "Feature", "properties": { "id": 1, "CCAA": "Castilla y León", "Descripc": "Esta comunidad autónoma de tanta solera, integrada por nueve provincias, es la más extensa de cuantas integran la Península Ibérica, e incluso de las regiones de la Comunidad Europea.Esta enclavada en la submeseta norte, teniendo por limites principales el Sistema Ibérico, a oriente, la Cordillera Central, al sur y la Cordillera Cantábrica, al norte. Al occidente, está separada de Portugal por el río Duero.Con respecto a su gastronomía, encontramos carnes selectas, como la ternera lechal o el cordero, una de las más utilizadas en su cocina, así como de exquisitas legumbres, ejemplo de ello las alubias de El Barco de Ávila, de una cremosidad extraordinaria. Todo ello sin olvidar los famosos dulces tradicionales con que cada provincia nos brinda. ", "url": "imagenes/Castilla_Leon.jpg"  }, "geometry": { "type": "Polygon", "coordinates":  [ [ [ -6.85757978723405, 40.210416666666667 ], [ -6.25625, 41.571320921985816 ], [ -6.952526595744688, 41.96165780141844 ], [ -6.825930851063837, 42.868927304964544 ], [ -5.823714539007097, 42.953324468085114 ], [ -4.684352836879436, 42.995523049645392 ], [ -3.207402482269506, 43.132668439716319 ], [ -2.901462765957449, 42.636835106382982 ], [ -3.154654255319151, 42.141001773049652 ], [ -1.878147163120568, 41.90890957446809 ], [ -1.899246453900711, 41.17043439716312 ], [ -2.69046985815603, 41.286480496453905 ], [ -3.9353280141844, 40.822296099290782 ], [ -5.243484042553196, 40.189317375886525 ], [ -6.85757978723405, 40.210416666666667 ] ] ]  } },
	{ "type": "Feature", "properties": { "id": 2, "CCAA": "Islas Baleares", "Descripc": "Este precioso enclave del antiguo Mare Nostrum es un archipiélago compuesto por 5 islas y varios islotes. Está dividido en dos grupos de islas, al Nordeste las Gimnesias (Mallorca, Menorca y Cabrera) y al Suroeste las Pitiusas (Ibiza y Formentera).Su clima suave con más de 300 días de sol al año, sus bellísimos paisajes y playas, su amplísima oferta cultural, sus posibilidades de ocio o relax y la hospitalidad de sus habitantes las han convertido en un lugar cosmopolita visitado desde todos los lugares del planeta\n\n", "url": "imagenes/Islas_Baleares.jpg"  }, "geometry": { "type": "Polygon", "coordinates":  [ [ [ 1.02300531914894, 40.505806737588657 ], [ 4.609884751773057, 40.653501773049648 ], [ 4.683732269503555, 38.163785460992905 ], [ 0.643218085106385, 38.300930851063825 ], [ 1.02300531914894, 40.505806737588657 ] ] ]  } },
	{ "type": "Feature", "properties": { "id": 3, "CCAA": "Región de Murcia", "Descripc": "La Región de Murcia es una comunidad autónoma uniprovincial española, situada en el sudeste de la península ibérica, entre Andalucía (provincias de Granada y Almería) y la Comunidad Valenciana (provincia de Alicante). La región es una de las mayores productoras de frutas, verduras y flores de Europa, contando con viñedos importantes en los municipios de Jumilla, Bullas y Yecla, que producen vinos con Denominación de Origen. Cuenta así mismo con un importante sector turístico, concentrado en una costa con numerosos espacios vírgenes (muchos de ellos amenazados) y que posee la laguna salada del Mar Menor. Su industria destaca por el sector petro-químico y energético (centrado en Cartagena) y la industria alimentaria.", "url":"imagenes/Murcia.jpg"  }, "geometry": { "type": "Polygon", "coordinates":  [ [ [ -2.532225177304966, 38.965558510638296 ], [ -0.749335106382977, 38.933909574468082 ], [ -0.464494680851063, 37.594104609929076 ], [ -1.582757092198582, 37.19321808510638 ], [ -2.563874113475178, 38.100487588652484 ], [ -2.532225177304966, 38.965558510638296 ] ] ]  } },
	{ "type": "Feature", "properties": { "id": 4, "CCAA": "Islas Canarias", "Descripc": "Las islas paradisiacas de sol y playas de fina arena, que gozan de una temperatura primaveral durante todo el año son un archipiélago de 7 islas (Gran Canaria, Fuerteventura, Lanzarote, Tenerife, La Palma, La Gomera y el El Hierro)y unos cuantos islotes (Alegranza, Graciosa, Montaña Clara, Roque del Este, Roque del Oeste y Lobos).Cada isla es diametralmente diversa a las otras y sus paisajes evocan rincones de todas las regiones del planeta.\n", "url": "imagenes/Islas_Canarias.png"  }, "geometry": { "type": "Polygon", "coordinates":  [ [ [ -13.324512411347531, 28.542508865248191 ], [ -13.53550531914895, 27.171054964538968 ], [ -19.865292553191509, 26.8334663120567 ], [ -18.747030141843993, 29.57637411347514 ], [ -12.881427304964552, 29.913962765957415 ], [ -13.324512411347531, 28.542508865248191 ] ] ]  } }
	]
}
						
					

leaflet-color-markers.js

						
var blueIcon = new L.Icon({
	iconUrl: 'https://cdn.rawgit.com/pointhi/leaflet-color-markers/master/img/marker-icon-2x-blue.png',
	shadowUrl: 'https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.7/images/marker-shadow.png',
	iconSize: [25, 41],
	iconAnchor: [12, 41],
	popupAnchor: [1, -34],
	shadowSize: [41, 41]
});

var redIcon = new L.Icon({
	iconUrl: 'https://cdn.rawgit.com/pointhi/leaflet-color-markers/master/img/marker-icon-2x-red.png',
	shadowUrl: 'https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.7/images/marker-shadow.png',
	iconSize: [25, 41],
	iconAnchor: [12, 41],
	popupAnchor: [1, -34],
	shadowSize: [41, 41]
});

var greenIcon = new L.Icon({
	iconUrl: 'https://cdn.rawgit.com/pointhi/leaflet-color-markers/master/img/marker-icon-2x-green.png',
	shadowUrl: 'https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.7/images/marker-shadow.png',
	iconSize: [25, 41],
	iconAnchor: [12, 41],
	popupAnchor: [1, -34],
	shadowSize: [41, 41]
});

var orangeIcon = new L.Icon({
	iconUrl: 'https://cdn.rawgit.com/pointhi/leaflet-color-markers/master/img/marker-icon-2x-orange.png',
	shadowUrl: 'https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.7/images/marker-shadow.png',
	iconSize: [25, 41],
	iconAnchor: [12, 41],
	popupAnchor: [1, -34],
	shadowSize: [41, 41]
});

var yellowIcon = new L.Icon({
	iconUrl: 'https://cdn.rawgit.com/pointhi/leaflet-color-markers/master/img/marker-icon-2x-yellow.png',
	shadowUrl: 'https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.7/images/marker-shadow.png',
	iconSize: [25, 41],
	iconAnchor: [12, 41],
	popupAnchor: [1, -34],
	shadowSize: [41, 41]
});

var violetIcon = new L.Icon({
	iconUrl: 'https://cdn.rawgit.com/pointhi/leaflet-color-markers/master/img/marker-icon-2x-violet.png',
	shadowUrl: 'https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.7/images/marker-shadow.png',
	iconSize: [25, 41],
	iconAnchor: [12, 41],
	popupAnchor: [1, -34],
	shadowSize: [41, 41]
});

var greyIcon = new L.Icon({
	iconUrl: 'https://cdn.rawgit.com/pointhi/leaflet-color-markers/master/img/marker-icon-2x-grey.png',
	shadowUrl: 'https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.7/images/marker-shadow.png',
	iconSize: [25, 41],
	iconAnchor: [12, 41],
	popupAnchor: [1, -34],
	shadowSize: [41, 41]
});

var blackIcon = new L.Icon({
	iconUrl: 'https://cdn.rawgit.com/pointhi/leaflet-color-markers/master/img/marker-icon-2x-black.png',
	shadowUrl: 'https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.7/images/marker-shadow.png',
	iconSize: [25, 41],
	iconAnchor: [12, 41],
	popupAnchor: [1, -34],
	shadowSize: [41, 41]
});
						
					


Sobre el Autor


Carolina Martín García

Mi nombre es Carolina Martín García, soy Graduada en el Grado Universitario de Geografía y Ordenación del Territorio por la Universidad de Valladolid y tengo el Máster Universitario en Geoinformática por la Universidade da Coruña. Estoy especializada en las Tecnologías GIS, Desarrollo de Aplicaciones SIG en la Web, Creación de Visores y Páginas Web GIS, y en las ramas de Cartografía, Catastro, Urbanismo, Población, Medio Ambiente,Territorio y Teledetección.

Se trabajar con Leaflet, HTML, CSS, JavaScript, Turf y API de Google Maps, también con los programas PosgreSQL, Geoserver, Mapbox, OpenStreetMaps, PgAdmind, Asccess SQL, hacer estilos de SLD en Geoserver, trabajar con tablas CSV, WMS, capas en formatos JSON, GeoJSON, KMZ.

A parte, soy una persona muy trabajadora, siempre dispuesta a colaborar en los proyectos y trabajos que se me presenten, soy muy buena a la hora de organizarme en equipos de trabajo, activa y siempre con ganas de aprender y mejorar en temas laborales.

También se trabajar con programas como ArcGIS, QGIS, GVSIG, con herramientas de datos cartográficos en Google Maps y Google Earth, elaboración de fórmulas económicas en Excell, entre otras cosas.


¿Eres desarrollador? Únete a la red