Skip to content
A UTFGrid implementation for leaflet that is smaller than wax
Find file
Pull request Compare This branch is 74 commits behind danzel:master.
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Failed to load latest commit information.


A UTFGrid interaction implementation for leaflet that is super small.


Using the plugin

See the included example for the plugin in action.


Create a new L.UtfGrid, optionally specifying the resolution

var utfGrid = new L.UtfGrid('http://{s}{z}/{x}/{y}.grid.json?callback={cb}', {
    resolution: 4

?callback={cb} is required when using utfgrids in JSONP mode.

Add event listeners to it

utfGrid.on('click', function (e) {
    //click events are fired with if an area with no hit is clicked
    if ( {
        alert('click: ' +;
    } else {
        alert('click: nothing');
utfGrid.on('mouseover', function (e) {
    console.log('hover: ' +;
utfGrid.on('mouseout', function (e) {
    console.log('unhover: ' +;

The callback object in all cases is:

    latlng: L.LatLng
    data: Data object for the grid (whatever you are returning in the grid json)

We use JSONP by default which requires the query string part of the url to contain callback={cb}. To use an ajax query instead you need to include jquery (TODO: Remove this reliance!) and set useJsonP:false in the L.UtfGrid options. Your grid json provider must return raw json to support this functionality.

var utfGrid = new L.UtfGrid('http://myserver/amazingness/{z}/{x}/{y}.grid.json', {
    resolution: 4,
    useJsonP: false

Turning interaction on and off

You can add and remove the UtfGrid layer from your map as per normal, even within a layers control.


Other examples of UTFGrid




Something went wrong with that request. Please try again.