Awesome Open Source
Awesome Open Source

Mapbox Controls




npm install mapbox-gl-controls

Include styles

<link href="mapbox-gl-controls/theme.css" rel="stylesheet">

Ruler Control

import RulerControl from 'mapbox-gl-controls/lib/ruler';

map.addControl(new RulerControl(), 'top-right');
map.on('ruler.on', () => console.log('ruler: on'));
map.on('', () => console.log('ruler: off'));

// with miles:
map.addControl(new RulerControl({
  units: 'miles',
  labelFormat: n => `${n.toFixed(2)} ml`,
}), 'top-right');

Styles Control

import StylesControl from 'mapbox-gl-controls/lib/styles';

// with default styles:
map.addControl(new StylesControl(), 'top-left');

// with custom styles:
map.addControl(new StylesControl({
  styles: [
      label: 'Streets',
      styleName: 'Mapbox Streets',
      styleUrl: 'mapbox://styles/mapbox/streets-v9',
    }, {
      label: 'Satellite',
      styleName: 'Satellite',
      styleUrl: 'mapbox://styles/mapbox/satellite-v9',
  onChange: (style) => console.log(style),
}), 'top-left');

Compass Control

import CompassControl from 'mapbox-gl-controls/lib/compass';

map.addControl(new CompassControl(), 'top-right');

Zoom Control

import ZoomControl from 'mapbox-gl-controls/lib/zoom';

map.addControl(new ZoomControl(), 'top-right');

Language Control

import LanguageControl from 'mapbox-gl-controls/lib/language';

// with browser detect:
map.addControl(new LanguageControl());

// with custom language:
const languageControl = new LanguageControl({
  language: 'ru',

// change language to multi language after control has been added:

Inspect Control

import InspectControl from 'mapbox-gl-controls/lib/inspect';

map.addControl(new InspectControl(), 'bottom-right');

Tooltip Control

import TooltipControl from 'mapbox-gl-controls/lib/tooltip';

map.addControl(new TooltipControl({ layer: '$fill' }));



Simple compass

  • options Object (optional, default {})
    • options.instant Boolean Show compass if bearing is 0 (optional, default true)


Inspect control to debug style layers and source


Localize map. Language can be set dynamically with .setLanguage(lang) method.

  • options Object (optional, default {})
    • options.supportedLanguages Array? (Supported languages)[]
    • options.language String? One of the supported languages to apply
    • options.excludedLayerIds Array Array of layer id to exclude from localization (optional, default [])
    • options.getLanguageField Function? Accepts language and returns language field By default fields are name_LANGUAGE and name for multi language (mul)


Fires map ruler.on and ruler.offevents at the beginning and at the end of measuring.

  • options Object (optional, default {})
    • options.units String Any units @turf/distance supports (optional, default 'kilometers')
    • options.labelFormat Function? Accepts number and returns label Can be used to convert value to any measuring units
    • options.font Array Array of fonts (optional, default ['Roboto Medium'])
    • options.mainColor String Color of ruler lines (optional, default '#263238')
    • options.secondaryColor String Color of halo and inner marker background (optional, default '#fff')
    • options.fontSize Number Label font size in px (optional, default 12)
    • options.fontHalo Number Label font halo (optional, default 1)
    • options.textVariableAnchor Array Array of anchor positions (optional, default ['top'])
    • options.textAllowOverlap Boolean Is allowed to overlap labels (optional, default false)
    • options.markerNodeSize Number Width and Height of the marker in px (optional, default 12)
    • options.markerNodeBorderWidth Number Width of the marker's border in px (optional, default 2)


Adds style switcher similar to Google Maps.

  • options Object (optional, default {})
    • options.styles Array? Array of style objects:
    • options.onChange Function? Triggered on style change. Accepts style object


Shows tooltip on hover on some layer or whole map.

  • options Object (optional, default {})
    • options.layer String Layer id to show the tooltip on hover. If not specified, tooltip will be shown for whole map container
    • options.getContent Function? Triggered each time mouse moved over layer option. Accepts event object


Simple zoom control

Get A Weekly Email With Trending Projects For These Topics
No Spam. Unsubscribe easily at any time.
javascript (68,032
localization (166
zoom (69
mapbox (47
distance (31
measure (27
mapbox-gl-js (22
styles (21

Find Open Source By Browsing 7,000 Topics Across 59 Categories