UTFGrids for Leaflet 1.0
JavaScript HTML
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
.gitignore UTFGrids, here we come... Jul 22, 2015
L.UTFGrid-min.js Bump version Jun 2, 2017
L.UTFGrid.js Update L.UTFGrid.js Jun 2, 2017
L.UTFGridCanvas.js Refactored shadow and updated example May 27, 2016
LICENSE Bump version Jun 2, 2017
README.md
gulpfile.js Upgraded Leaflet to 1.0, converted to gulp build Sep 27, 2016
index.html
package.json Bump version Jun 2, 2017

README.md

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.

See the example.

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: