Legacy

Mapbox.js is no longer in active development. To learn more about our newer mapping tools see Mapbox GL JS.

You are viewing an older version of Mapbox.js. Check out v3.3.1 for the latest.

L.mapbox.gridControl(layer, options)

Extends: L.Control

Interaction is what we call interactive parts of maps that are created with the powerful tooltips & regions system in TileMill. Under the hood, it's powered by the open UTFGrid specification.

Options Value Description
layer L.mapbox.gridLayer The first argument must be a layer created with L.mapbox.gridLayer()
options object Valid options are:
  • sanitizer: A function that accepts a string containing interactivity data, and returns a sanitized result for HTML display. The default will remove dangerous script content, and is recommended.
  • template: A string in the Mustache template language that will be evaluated with data from the grid to produce HTML for the interaction.
  • follow: Whether the tooltip should follow the mouse in a constant relative position, or should be fixed in the top-right side of the map. By default, this is false and the tooltip is stationary.
  • pinnable: Whether clicking will 'pin' the tooltip open and expose a 'close' button for the user to close the tooltip. By default, this is true.
  • touchTeaser: On touch devices, show the teaser formatter if there is no output from the full formatter. By default, this is true.
  • location: Evaluate the location formatter on click events, and if it provides output, navigate to that location. By default, this is true.

Example:

var map = L.mapbox.map('map').setView([38, -77], 5);
var gridLayer = L.mapbox.gridLayer('mapbox.light');
map.addLayer(L.mapbox.tileLayer('mapbox.outdoors'));
map.addLayer(gridLayer);
map.addControl(L.mapbox.gridControl(gridLayer));

Returns: a L.mapbox.gridControl object.

Class: L.mapbox.GridControl

gridControl.hide()

If a tooltip is currently shown by the gridControl, hide and close it.

Returns: the L.mapbox.gridControl object.

gridControl.setTemplate(template)

Change the Mustache template used to transform the UTFGrid data in the map's interactivity into HTML for display.

Options Value Description
template string A string of Mustache template code for popups.

Returns: the L.mapbox.gridControl object.