@mapbox-controls/styles

<< 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://styles/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 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;
};