# @mapbox-controls/styles

> Change map style

Latest version **5.0.0** (published 2026-09-30) · MIT license · 0 weekly downloads

## Install

```sh
npm install @mapbox-controls/styles
pnpm add @mapbox-controls/styles
yarn add @mapbox-controls/styles
bun add @mapbox-controls/styles
```

## Health

**Score 70/100 (B)** — status: active.

Positive: has types; esm support; no vulnerabilities; has provenance; recently updated; high maintenance score.

Warnings: low downloads.

## Facts

| | |
|---|---|
| Version | 5.0.0 |
| Published | 2026-09-30 |
| First published | 2023-10-03 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 1 |
| Unpacked size | 12.6 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Provenance | attested (GitHub Actions) |
| Maintainers | korywka |

## Links

- npm: https://www.npmjs.com/package/@mapbox-controls/styles
- Repository: korywka/mapbox-controls
- npm.io page: https://npm.io/package/@mapbox-controls/styles

## Dependencies (1)

- [@mapbox-controls/helpers](https://npm.io/package/@mapbox-controls/helpers.md) 5.0.0

## Recent versions

- 5.0.0 (latest) — 2026-09-30
- 4.1.0 — 2026-06-28
- 4.0.0 — 2026-06-28
- 3.0.0 — 2024-08-29
- 2.1.0 — 2024-06-25
- 2.0.0 — 2024-06-02
- 1.2.0 — 2024-04-19
- 1.1.0 — 2023-12-21
- 1.0.1 — 2023-10-04
- 1.0.0 — 2023-10-03

## README

[<< all controls](/README.md)

# 💅 @mapbox-controls/styles

![](https://github.com/korywka/mapbox-controls/assets/988471/18ac929f-06ff-4043-8b4b-258b876b9585)

Control to change map style among provided.

```
npm i @mapbox-controls/styles
```

```js
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`](https://docs.mapbox.com/mapbox-gl-js/api/map/#map.event:style.load) event to redraw layers.

## Options

`styleName` - is the root value of style's `name` property according to [the specification](https://docs.mapbox.com/style-spec/reference/root/#name).

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

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

---
_Source: https://npm.io/package/@mapbox-controls/styles · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._