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.
example
src
.gitignore
MIT-LICENCE.txt
README.md

README.md

Leaflet.utfgrid

A UTFGrid interaction implementation for leaflet that is super small.

Example: http://danzel.github.com/Leaflet.utfgrid/example/map.html

Using the plugin

See the included example for the plugin in action.

Usage

Create a new L.UtfGrid, optionally specifying the resolution

var utfGrid = new L.UtfGrid('http://{s}.tiles.mapbox.com/v3/mapbox.geography-class/{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 e.data==null if an area with no hit is clicked
    if (e.data) {
        alert('click: ' + e.data.admin);
    } else {
        alert('click: nothing');
    }
});
utfGrid.on('mouseover', function (e) {
    console.log('hover: ' + e.data.admin);
});
utfGrid.on('mouseout', function (e) {
    console.log('unhover: ' + e.data.admin);
});

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.

Example: http://danzel.github.com/Leaflet.utfgrid/example/layers.html

Other examples of UTFGrid

Spec: https://github.com/mapbox/utfgrid-spec

OpenLayers:

Wax:

Something went wrong with that request. Please try again.