Cómo añadir un archivo GeoTiff en Leaflet


En este tutorial veremos cómo añadir un archivo .GeoTiff a nuestro mapa en Leaflet.js.


Muchas veces queremos añadir un archivo .geotiff a nuestro mapa en Leaflet.js. Para ello, (como para casi todo en leafletjs) existe un plugin. Os dejo el enlace para acceder.

Este plugin nos da la posibilidad de de contener la información nuestro archivo .geotiff en un objeto al que llama GeoRasterLayer. Esta es la forma en que se declara.

						
new GeoRasterLayer({georaster: georaster})
						
					

Un ejemplo de declaración y uso de un objeto GeoRasterLayer sería este. (Primero acuérdate de cargar la librería en tu archivo .html).

						
<script src="https://unpkg.com/georaster"></script>
<script src="https://unpkg.com/georaster-layer-for-leaflet/georaster-layer-for-leaflet.browserify.min.js"></script>

var al_to_geotiff_file = "argila.tif";
fetch(al_to_geotiff_file)
	.then(response => response.arrayBuffer())
	.then(arrayBuffer => {
		parseGeoraster(arrayBuffer).then(georaster => {
						
					

Primero guardamos la ubicación de nuestro archivo .geotiff en una variable. A continuación recuperamos la información de nuestro archivo utilizando el método fetch() que proporciona una forma fácil y lógica de obtener recursos de forma asíncrona por la red. El uso de fetch() más simple toma un argumento (la ruta del recurso que quieres obtener) y devuelve un objeto Promise conteniendo la respuesta, un objeto Response. Esto es, una respuesta HTTP no nuestro archivo. Para extraer el contenido desde la respuesta, usamos el método arrayBuffer() (el cual está implementado por los objetos Request y Response).

A continuación declaramos el archivo GeoRasterLayer. Debemos saber que el objeto GeoRasterLayer es una extensión del objeto GridLayer. Así que heredará las propiedades de GridLayer. También podemos usar la función pixelValuesToColorFn para asignar un color a cada píxel según su valor

						
var aluminio = new GeoRasterLayer({
	attribution: "Mapearte",
	georaster: georaster,
	opacity: 0.9,
	pixelValuesToColorFn: values => values[0] === -3.4028230607370965e+38? null:
		(values[0] < 65 ) ? '#ff9800' :
		(values[0] >= 65 && values[0] < 70) ? '#cddc39' :
		(values[0] >= 70 && values[0] < 75) ? '#4caf50' :
		(values[0] >= 75 && values[0] < 79) ? '#215a23' :
		(values[0] >= 79) ? '#20308a' :'rgba(255,255,255,0)',
	resolution: 350
	});
aluminio.addTo(map);
						
					

Os dejo un ejemplo completo:

						
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>

    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css">
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.6.0/dist/leaflet.css" integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ==" crossorigin=""/>
    <style>
        #map {
            height: 100vh;
        }
    </style>
</head>
<body>
    <div id="map"></div>
    <script src="https://unpkg.com/leaflet@1.6.0/dist/leaflet.js" integrity="sha512-gZwIG9x3wUXg2hdXF6+rVkLF/0Vi9U8D2Ntg4Ga5I5BZpVkVxlJWbSQtXPSiUTtC0TjtGOmxa1AJPuV0CPthew==" crossorigin=""></script>
    <script src="https://unpkg.com/proj4"></script>
    <script src="https://unpkg.com/georaster"></script>
    <script src="https://unpkg.com/georaster-layer-for-leaflet/georaster-layer-for-leaflet.browserify.min.js"></script>

    <script type="text/javascript">

    var map = L.map('map',{
        minZoom: 0,
        maxZoom: 15,
        zoom: 12
    }).setView([-24.898, -54.547]);

    var streets = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
        attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
    }).addTo(map);

    var al_to_geotiff_file = "argila.tif";
    fetch(al_to_geotiff_file)
      .then(response => response.arrayBuffer())
      .then(arrayBuffer => {
          parseGeoraster(arrayBuffer).then(georaster => {
            // console.log("georaster:", georaster);
            var aluminio = new GeoRasterLayer({
                attribution: "Planet",
                georaster: georaster,
                opacity: 0.9,
                pixelValuesToColorFn: values => values[0] === -3.4028230607370965e+38? null :
                        (values[0] <  65 )					? '#ff9800' :
                        (values[0] >= 65 && values[0] < 70) 	? '#cddc39' :
                        (values[0] >= 70 && values[0] < 75) 	? '#4caf50' :
                        (values[0] >= 75 && values[0] < 79) 	? '#215a23' :
                        (values[0] >= 79) 	? '#20308a' :
                        'rgba(255,255,255,0)',

                resolution: 350
            });
            aluminio.addTo(map);
            map.fitBounds(aluminio.getBounds());
          });
      });
    </script>
</body>
</html>
						
					



Sobre el Autor


Pedro Calás Blasco

Cartógrafo. Valenciano por el Mundo. He vivido en Mexico, Brasil y Argentina. Entusiasta de los mapas y las tecnologías Web Mapping. Fundador y coordinador de Mapearte. impulsamos y desarrollamos proyectos que contribuyan al desarrollo social a través de las tecnologías.


¿Eres desarrollador? Únete a la red