@mapbox-controls/styles v1.2.0

<< 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 StylesControlOptions = {
  styles?: Style[] | undefined;
  onChange?: ((style: Style) => void) | undefined;
  compact?: boolean | undefined;
};