Need help with Leaflet.utfgrid?
Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.

About the developer

126 Stars 55 Forks MIT License 105 Commits 14 Opened issues


A UTFGrid implementation for leaflet that is super small.

Services available


Need anything else?

Contributors list


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 (The default is 4)

var utfGrid = new L.UtfGrid('http://{s}{z}/{x}/{y}.grid.json?callback={cb}', {
    resolution: 2
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('mousemove', function (e) {
    console.log('move: ' +;
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

. To use an ajax query instead you need to 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', {
    useJsonP: false

Other options

  • pointerCursor: changes the mouse cursor to a pointer when hovering over an interactive part of the grid. (Default: true)
  • maxRequests: Maximum number of requests sent at once to the utfgrid tile server. Increasing this will get more processing done at once, however it means your utfgrid tiles will get priority over your visual tiles (as browsers tend to prioritize javascript/json requests). Increasing this will also reduce the number of requests that may get dropped early when users pan the map. There is little point to have this higher than 8. (Default: 4)
  • requestTimeout: number of milliseconds after which a request for a tile is considered to have timed out. (Default: 60000)

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


OpenLayers: * *

Wax: * (Doesn't work correctly in webkit) *

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.