# geotiff-layer-leaflet

> A geotiff layer generating leaflet plugin.

Latest version **1.1.0** (published 2018-07-18) · MIT license · 0 weekly downloads

## Install

```sh
npm install geotiff-layer-leaflet
pnpm add geotiff-layer-leaflet
yarn add geotiff-layer-leaflet
bun add geotiff-layer-leaflet
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; large bundle.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.1.0 |
| Published | 2018-07-18 |
| First published | 2018-07-03 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 4 |
| Unpacked size | 24.6 MB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | K.C. Jones-Evans |
| Maintainers | kcjonesevans |

## Links

- npm: https://www.npmjs.com/package/geotiff-layer-leaflet
- npm.io page: https://npm.io/package/geotiff-layer-leaflet

## Dependencies (4)

- [plotty](https://npm.io/package/plotty.md) ^0.2.0
- [geotiff](https://npm.io/package/geotiff.md) ^0.4.1
- [jasmine](https://npm.io/package/jasmine.md) ^3.1.0
- [gl-matrix](https://npm.io/package/gl-matrix.md) ^2.4.0

## Recent versions

- 1.1.0 (latest) — 2018-07-18
- 1.0.1 — 2018-07-03
- 1.0.0 — 2018-07-03

## README

# 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

```html
<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.

```typescript
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

```javascript
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);
```
![binary or clouds](examples/img/binary.png)

## Pixel Data Color

```javascript
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);
```

![color](examples/img/color.png)

## Arrows, Directional (Vector)
```javascript
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);
```
![arrows](examples/img/arrows2.png)
![arrows zoomed in](examples/img/arrows.png)
![arrows with color](examples/img/arrows_and_speed.png)		


## 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:

![](examples/img/colorscale.png)        |

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

It is also possible to define your own colorscale using the `addColorScale` function.
```javascript
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!

![](examples/img/legend.png)

```javascript
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);
```

---
_Source: https://npm.io/package/geotiff-layer-leaflet · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._