Mapbox Controls

Usage

Install

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('ruler.off', () => 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',
});
map.addControl(languageControl);

// change language to multi language after control has been added:
languageControl.setLanguage('mul');

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' }));

API

CompassControl

Simple compass

Parameters

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

InspectControl

Inspect control to debug style layers and source

LanguageControl

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

Parameters

• options Object (optional, default {})
  • options.supportedLanguages Array? (Supported languages)[https://docs.mapbox.com/help/troubleshooting/change-language/]
  • 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)

RulerControl

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

Parameters

• 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)

StylesControl

Adds style switcher similar to Google Maps.

Parameters

• options Object (optional, default {})
  • options.styles Array? Array of style objects:
    • options.styles.label String Style label to display on switcher
    • options.styles.styleName String Style name from spec
    • options.styles.styleUrl String Style url
  • options.onChange Function? Triggered on style change. Accepts style object

TooltipControl

Shows tooltip on hover on some layer or whole map.

Parameters

• 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

ZoomControl

Simple zoom control