--- layout: api title: "v1.6.2 API: L.mapbox.gridLayer(id|url|tilejson, options)" categories: api version: v1.6.2 permalink: /api/v1.6.2/l-mapbox-gridlayer --- {% raw %}

L.mapbox.gridLayer(id|url|tilejson, options)

An L.mapbox.gridLayer loads UTFGrid tiles of interactivity into your map, which you can easily access with L.mapbox.gridControl.

Options Value Description
id or url or tilejson (required) string if id or url object if tilejson
  • An id string examples.map-foo
  • A URL to TileJSON, like http://a.tiles.mapbox.com/v3/examples.map-0l53fhk2.json
  • A TileJSON object, from your own Javascript code

Example:

// the second argument is optional
var layer = L.mapbox.gridLayer('examples.map-20v6611k');

Returns a L.mapbox.gridLayer object.

gridLayer.on(event, handler, context)

Bind an event handler to a given event on this L.mapbox.gridLayer instance. GridLayers expose a number of useful events that give you access to UTFGrid data as the user interacts with the map.

Options Value Description
event (required) string the event name
handler (required) function a callback function run every time that the event is fired
context (optional) object the context of the handler function: this is the value of this when that function returns

After binding an event with .on, you can unbind it with .off, with the same argument structure.

The default events are:

Example:

map.gridLayer.on('click', function(e) {
    if (e.data && e.data.url) {
        window.open(e.data.url);
    }
});

gridLayer.getTileJSON()

Returns this layer's TileJSON object which determines its tile source, zoom bounds and other metadata.

Example:

var layer = L.mapbox.gridLayer('examples.map-20v6611k')
    // since layers load asynchronously through AJAX, use the
    // `.on` function to listen for them to be loaded before
    // calling `getTileJSON()`
    .on('load', function() {
    // get TileJSON data from the loaded layer
    var TileJSON = layer.getTileJSON();
});

Returns: the TileJSON object

gridLayer.getData(latlng, callback)

Load data for a given latitude, longitude point on the map, and call the callback function with that data, if any.

Options Value Description
latlng object latlng a L.LatLng object
callback function callback a function that is called with the grid data as an argument

Returns: the L.mapbox.gridLayer object

{% endraw %}