Mapbox Controls
Usage
npm install mapbox-gl-controls
Include styles from package: mapbox-gl-controls/lib/controls.css
Ruler Control [options]
import { RulerControl } from 'mapbox-gl-controls';
map.addControl(new RulerControl(), 'top-right');
map.on('ruler.on', () => console.log('ruler: on'));
map.on('ruler.off', () => console.log('ruler: off'));
map.addControl(new RulerControl({
units: 'miles',
labelFormat: n => `${n.toFixed(2)} ml`,
}), 'top-right');
Styles Control [options]
Adds style switcher similar to Google Maps.
import { StylesControl } from 'mapbox-gl-controls';
map.addControl(new StylesControl(), 'top-left');
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 [options]
import { CompassControl } from 'mapbox-gl-controls';
map.addControl(new CompassControl(), 'top-right');
Zoom Control
import { ZoomControl } from 'mapbox-gl-controls';
map.addControl(new ZoomControl(), 'top-right');
Language Control [options]
Localize map. Language can be set dynamically with .setLanguage(lang)
method.
import { LanguageControl } from 'mapbox-gl-controls';
map.addControl(new LanguageControl());
const languageControl = new LanguageControl({
language: 'ru',
});
map.addControl(languageControl);
languageControl.setLanguage('mul');
Inspect Control
Inspect control to debug style layers and source
import { InspectControl } from 'mapbox-gl-controls';
map.addControl(new InspectControl(), 'bottom-right');
Tooltip Control [options]
Shows tooltip on hover on some layer or whole map.
import { TooltipControl } from 'mapbox-gl-controls';
map.addLayer({
id: '$fill',
type: 'fill',
source: { type: 'geojson', data: polygon },
paint: { 'fill-opacity': 0.3, 'fill-color': '#4264fb' },
});
map.addControl(new TooltipControl({ layer: '$fill' }));