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.
npm install leaflet-utfgrid
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
});
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.