georaster-layer-for-leaflet
    TypeScript icon, indicating that this package has built-in type declarations

    2.0.0 • Public • Published

    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/dist/georaster-layer-for-leaflet.min.js">

    Usage

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

    Demos

    Why

    • Support for nearly all projections, thanks to proj4-fully-loaded and epsg.io
    • 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, directional arrows, and context drawing
    • Doesn't depend on WebGL

    The GeoRasterLayer Class

    A custom class for rendering GeoTIFF's (including COG's) on a leaflet map. The layer extends L.GridLayer, see the docs for inherited options and methods.

    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());
    
      });
    });

    Methods

    Method Returns Description
    updateColors(pixelValuesToColorFn, options) this Causes the tiles to redraw without clearing them first. It uses the updated pixelValuesToColorFn function. You can set a debugLevel specific to this function by passing in an options object with a debugLevel property. For example, you can turn on the console debugs for this method by setting debugLevel = 1 in the options (even if you created the layer with debugLevel = 0).

    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

    Install

    npm i georaster-layer-for-leaflet

    DownloadsWeekly Downloads

    672

    Version

    2.0.0

    License

    Apache-2.0

    Unpacked Size

    2.44 MB

    Total Files

    27

    Last publish

    Collaborators

    • avatar