geotiff-layer-leaflet

GeoTIFF Layer Leaflet Plugin

This plugin takes in pixel data or raster geoTiffs and generates an image layer

Dependencies:

• Leaflet >= 1.0.3
• geotiff.js
• plotty.js

Demo

Install the http-server package from npm

Install the http-server globally on your machine using the node package manager (npm) command line tool, this will allow you to run a web server from anywhere on your computer.

Open a command prompt / command line window and enter the following:

npm install -g http-server

Once http-server is installed navigate to the project folder and run the following command:

npm start

This will start a simple http server on http://127.0.0.1:8080

Importing

Using script tags

<script src="https://unpkg.com/leaflet@1.0.3/dist/leaflet.js"></script>
    <script src="https://unpkg.com/geotiff@0.4.1/dist/geotiff.browserify.js"></script> 
    <script src="https://unpkg.com/plotty@0.2.0/src/plotty.js"></script> 
    <script src="dist/geotiff-layer-leaflet.js"></script> 
    <!-- Load any renderer you need -->
    <script src="dist/geotiff-layer-leaflet-plotty.js"></script> 
    <script src="src/geotiff-layer-leaflet-vector-arrows.js"></script> 

In Angular 5

npm install url.git should install leaflet, plotty, and geotiff, along with the javascript files needed.

import 'leaflet';
import 'plotty';
import GeoTIFF from 'geotiff';
import 'geotiff-layer-leaflet/dist/geotiff-layer-leaflet';
import 'geotiff-layer-leaflet/src/geotiff-layer-leaflet-plotty';
import 'geotiff-layer-leaflet/src/geotiff-layer-leaflet-vector-arrows';

Pixel Data Binary

const cloudmask = new L.LeafletGeotiff(
      './assets/data/test_wind_and_clouds/cloud_mask_2017036_2245.tif',
      {band: 0,
      name: 'Cloud Mask',
      opacity: .1,
      renderer: new L.LeafletGeotiff.Plotty({
        colorScale: 'greys'
      })
    }
).addTo(this.map);

Pixel Data Color

const windspeed = new L.LeafletGeotiff(
      './assets/data/test_wind_and_clouds/wind_speed_20170205_2000.tif',
      {band: 0,
      name: 'Wind speed',
      opacity: .1,
      renderer: new L.LeafletGeotiff.Plotty({
        colorScale: 'rdbu',
        clampLow: false,
        clampHigh: true,
        displayMin: 50,
        displayMax: 57,
      })
    }
    ).addTo(this.map);

Arrows, Directional (Vector)

let windDirection = new L.LeafletGeotiff('./examples/data/test_wind_and_clouds/wind_direction_20170205_0200.tif',
{
    band: 0,
    name: 'Wind speed',  		
    renderer: new L.LeafletGeotiff.VectorArrows(options={
        arrowSize: 20
    })
}).addTo(this.map);

Options

• band : sets the rastor band to read (typically 0 or 1)
• bounds : optional, array of the bounds if ommited will be read from the file
• image : optional, set image to be read from tiff (if multiple images in tiff)
• clip : optional set a clipping polygon in Leaflet.LatLon
• displayMin and displayMax : set the min and max for the color scales
• name : name of the layer
• colorScale : uses plotty for colors (see below)
• opacity: percent in decimal form of alpha of layer (1 being opaque)
• vector: boolean, true if you want to draw or have directional data
• arrowSize : int, sets the scale for arrow size, smaller means more arrows shown
• clampLow and clampHigh : booleans, optional, default = true. If true values outside displayMin to displayMax will be rendered as if they were valid values.

Color Scales

There is a list of predefined colorscales:

|

Note: Added 'whbl' color (not pictured above)

It is also possible to define your own colorscale using the addColorScale function.

plotty.addColorScale("mycolorscale", ["#00ff00", "#0000ff", "#ff0000"], [0, 0.5, 1]);
//                  ( identifier   ,  color_steps,                    , percentage_steps) 

Create a Legend

Using the options set in the new geotiff-leaflet object to make a legend!

const color = windspeed.options.renderer.getColorScale();
const legend = L.control({position: 'bottomright'});
legend.onAdd = function (map) {
    const div = L.DomUtil.create('div', 'info legend');
    div.innerHTML += '<h5>'+windspeed.options.name+'</h5>';
    
    // loop through our density intervals and generate a label with a colored square for each interval
    for (let i = 0; i < color.colors.length; i+=1) {
        div.innerHTML += '<i style="background:' + color.colors[i] + '"></i>';
        if(i === 0 ){div.innerHTML += windspeed.options.renderer.options.displayMin;}
        if(i === color.colors.length-1){ div.innerHTML += windspeed.options.renderer.options.displayMax; }
        div.innerHTML += ' <br>';
    }
 
    return div;
};
legend.onRemove = function (map){
    let div = L.DomUtil.remove('info legend');
    
    return ;
};
legend.addTo(this.map);