georaster-layer-for-leaflet
Display GeoTIFFs and soon other types of raster on your Leaflet Map
Last updated 3 months ago by danieljdufour .
Apache-2.0 · Repository · Bugs · Original npm · Tarball · package.json
$ cnpm install georaster-layer-for-leaflet 
SYNC missed versions from official npm registry.

georaster-layer-for-leaflet

Display GeoTIFFs and soon other types of rasters on your Leaflet Map

Install

npm install georaster-layer-for-leaflet

GeoRaster Prerequisite

GeoRasterLayer requires that input be first converted into GeoRaster format. You can install GeoRaster with the following command:

npm install georaster

Load Package via Script Tag

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

Usage

new GeoRasterLayer({georaster: georaster}).addTo(map);

Demos

Why

  • Super faster rendering thanks to a simple nearest neighbor interpolation
  • Use of web workers means seamless integration that doesn't block main thread
  • Loads large geotiffs greater than a hundred megabytes
  • Supports custom rendering including custom colors and context drawing
  • Doesn't depend on WebGL

Longer Usage Example

Source Code: https://github.com/GeoTIFF/georaster-layer-for-leaflet-example/blob/master/main.js

var parse_georaster = require("georaster");

var GeoRasterLayer = require("georaster-layer-for-leaflet");

// initalize leaflet map
var map = L.map('map').setView([0, 0], 5);

// add OpenStreetMap basemap
L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
    attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);

var url_to_geotiff_file = "example_4326.tif";

fetch(url_to_geotiff_file)
  .then(response => response.arrayBuffer())
  .then(arrayBuffer => {
    parse_georaster(arrayBuffer).then(georaster => {
      console.log("georaster:", georaster);

      /*
          GeoRasterLayer is an extension of GridLayer,
          which means can use GridLayer options like opacity.

          Just make sure to include the georaster option!

          Optionally set the pixelValuesToColorFn function option to customize
          how values for a pixel are translated to a color.

          http://leafletjs.com/reference-1.2.0.html#gridlayer
      */
      var layer = new GeoRasterLayer({
          georaster: georaster,
          opacity: 0.7,
          pixelValuesToColorFn: values => values[0] === 42 ? '#ffffff' : '#000000',
          resolution: 64 // optional parameter for adjusting display resolution
      });
      layer.addTo(map);

      map.fitBounds(layer.getBounds());

  });
});

Advanced Capabilities

Please read about our advanced capabilities including custom context drawing functions and displaying directional arrows in ADVANCED.md.

More Questions

Check out our Frequently Asked Questions

Support

Contact the package author, Daniel J. Dufour, at daniel.j.dufour@gmail.com

Current Tags

  • 0.7.1                                ...           latest (3 months ago)

27 Versions

  • 0.7.1                                ...           3 months ago
  • 0.7.0                                ...           3 months ago
  • 0.6.8                                ...           6 months ago
  • 0.6.5                                ...           6 months ago
  • 0.6.4                                ...           6 months ago
  • 0.6.3                                ...           6 months ago
  • 0.6.1                                ...           6 months ago
  • 0.6.0                                ...           7 months ago
  • 0.5.0                                ...           7 months ago
  • 0.4.2                                ...           10 months ago
  • 0.4.1                                ...           a year ago
  • 0.4.0                                ...           a year ago
  • 0.3.0                                ...           a year ago
  • 0.2.5                                ...           a year ago
  • 0.2.4                                ...           a year ago
  • 0.2.3                                ...           2 years ago
  • 0.2.2                                ...           2 years ago
  • 0.2.1                                ...           2 years ago
  • 0.1.3                                ...           2 years ago
  • 0.1.2                                ...           2 years ago
  • 0.1.1                                ...           2 years ago
  • 0.1.0                                ...           2 years ago
  • 0.0.6                                ...           3 years ago
  • 0.0.5                                ...           3 years ago
  • 0.0.4                                ...           3 years ago
  • 0.0.3                                ...           3 years ago
  • 0.0.2                                ...           3 years ago
Maintainers (1)
Downloads
Today 1
This Week 1
This Month 6
Last Day 0
Last Week 3
Last Month 13
Dependencies (3)
Dev Dependencies (12)
Dependents (1)

Copyright 2014 - 2016 © taobao.org |