Skip to content
main
Switch branches/tags
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Leaflet.UTFGrid

Provides a UTFGrid implementation for Leaflet 1.0 - 1.1.0.

L.UTFGrid provides basic UTFGrid functionality including hover and click events.

L.UTFGridCanvas provides highlighting of areas using <canvas> tiles. Optionally can highlight entire feature, not just the portion of it within a single tile.

Only supports Leaflet >= 1.0

Note: only supports browsers that provide canvas.

Install

npm install leaflet-utfgrid

Usage

Requires corslite. This is included in L.UTFGrid-min.js

Include the JavaScript:

<script src="L.UTFGrid-min.js"></script>

Example usage:

var utfgrid = L.utfGrid(url, {
    resolution: 4,
    pointerCursor: true,
    mouseInterval: 66  // Delay for mousemove events
});
utfgrid.addTo(map);

utfgrid.on("mouseover", function(e){
    // DO SOMETHING
});

utfgrid.on("mouseout", function(e){
    // DO SOMETHING
});

utfgrid.on("click", function(e){
    // DO SOMETHING
});

Using <canvas> tiles:

var utfgrid = L.utfGridCanvas(url, {
    idField: 'ID',  // Expects UTFgrid to have a property 'ID' that indicates the feature ID
    buildIndex: true,  // requires above field to be set properly
    fillColor: 'black',
    shadowBlur: 0,  // Number of pixels for blur effect
    shadowColor: null,  // Color for shadow, if present.  Defaults to fillColor.
    debug: false  // if true, show tile borders and tile keys
});

Credits:

Developed with support from the South Atlantic Landscape Conservation Cooperative

Core implementation of UTFGrid based on ideas from Leaflet.utfgrid and heavily modified to extend Leaflet's builtin L.TileLayer.

Canvas implementation inspired by Mapbox Glower.

Contributors: