<< all controls

💅 @mapbox-controls/styles

Control to change map style among provided.

npm i @mapbox-controls/styles

import StylesControl from '@mapbox-controls/styles';
import '@mapbox-controls/styles/src/index.css';

map.addControl(new StylesControl(styles: {
  label: 'Streets',
  styleName: 'Mapbox Streets',
  styleUrl: 'mapbox://styles/mapbox/streets-v12',
}, {
  label: 'Satellite',
  styleName: 'Mapbox Satellite Streets',
  styleUrl: 'mapbox://sprites/mapbox/satellite-streets-v12',
}), 'top-left');

// or with compact view and default styles (streets and satellite)
map.addControl(new StylesControl({ compact: true }), 'top-left');

Use mapbox style.load event to redraw layers.

Options

styleName - is the root value of style's name property according to the specification.

export type Style = {
    label: string;
    styleName: string;
    styleUrl: string;
};

export type ControlOptions = {
    styles?: Style[];
    onChange?: (style: Style) => void;
    compact?: boolean;
};