---
title: "Map styles | JavaScript maps SDK"
description: "Reference guide for built-in map styles and variants."
---

> For AI agents: a documentation index is available at [/llms.txt](https://docs.maptiler.com/llms.txt). Markdown versions of all pages are available by appending .md to any URL.

# Map styles ![MapTiler logo](https://docs.maptiler.com/favicon.ico)

The built-in map styles defined in the [Client JS library](https://docs.maptiler.com/client-js/#map-styles) are exposed by the SDK so that they can easily be used.

MapTiler maintains built-in styles exposed as shorthand from the SDK. These styles simplify map creation by eliminating extra code and ensuring you always use the latest versions.

This has several advantages:

-   **Automatic updates:** Style updates apply automatically without requiring code changes.
-   **Shorter syntax:** Shorthands are easier to remember than full style URLs, and the SDK automatically handles your API key.
-   **Code completion:** Autocomplete reduces typos and configuration errors.

Each built-in style serves a specific purpose (such as street navigation, outdoor adventures, or minimalist dashboards) and includes variants with different color schemes (such as light or dark) that maintain the same layer structure and detail.

## ReferenceMapStyle ![MapTiler logo](https://docs.maptiler.com/favicon.ico)

A reference style defines the purpose, information density, and guidelines for a map’s design, such as street navigation or outdoor adventures.

The `MapStyle.REFERENCE_MAP_STYLE` is an instance of the [`ReferenceMapStyle`](https://github.com/maptiler/maptiler-client-js/blob/main/src/mapstyle.ts) class (with a proxy layer).

### Example

<table class="table table-sm parameters-table"><colgroup><col width="20%"> <col width="50%"> <col width="30%"></colgroup><tbody><tr><td class="text-break"><code class="language-plaintext">MapStyle.STREETS</code></td><td><div><img src="./img/style-streets.webp" alt="MapStyle.STREETS" class="rounded mx-auto d-block" width="370" height="370" data-aspect-ratio="1.00"></div></td><td style="word-break: break-word;">The classic default style, perfect for urban areas.</td></tr><tr><td class="text-break"><code class="language-plaintext">MapStyle.SATELLITE</code></td><td><div><img src="./img/style-satellite.webp" alt="MapStyle.SATELLITE" class="rounded mx-auto d-block" width="370" height="370" data-aspect-ratio="1.00"></div></td><td style="word-break: break-word;">High resolution satellite images.</td></tr><tr><td class="text-break"><code class="language-plaintext">MapStyle.HYBRID</code></td><td><div><img src="./img/style-hybrid.webp" alt="MapStyle.HYBRID" class="rounded mx-auto d-block" width="370" height="370" data-aspect-ratio="1.00"></div></td><td style="word-break: break-word;">High resolution satellite with labels, landmarks, roads ways and political borders.</td></tr><tr><td class="text-break"><code class="language-plaintext">MapStyle.OUTDOOR</code></td><td><div><img src="./img/style-outdoor.webp" alt="MapStyle.OUTDOORS" class="rounded mx-auto d-block" width="370" height="370" data-aspect-ratio="1.00"></div></td><td style="word-break: break-word;">A solid hiking companion, with peaks, parks, isolines and more.</td></tr><tr><td class="text-break"><code class="language-plaintext">MapStyle.WINTER</code></td><td><div><img src="./img/style-winter.webp" alt="MapStyle.WINTER" class="rounded mx-auto d-block" width="370" height="370" data-aspect-ratio="1.00"></div></td><td style="word-break: break-word;">A map for developing skiing, snowboarding and other winter activities and adventures.</td></tr><tr><td class="text-break"><code class="language-plaintext">MapStyle.BASE</code></td><td><div><img src="./img/style-base.webp" alt="MapStyle.BASE" class="rounded mx-auto d-block" width="370" height="370" data-aspect-ratio="1.00"></div></td><td style="word-break: break-word;">A minimalist alternative to STREETS, with a touch of flat design.</td></tr></tbody></table>

### API reference

[Class ReferenceMapStyle](https://docs.maptiler.com/sdk-js/api-reference/classes/ReferenceMapStyle/)

## MapStyleVariant ![MapTiler logo](https://docs.maptiler.com/favicon.ico)

Each reference style offers a range of variants that contain the same level of information and serve the same purpose, but use different color schemes.

The `MapStyle.REFERENCE_MAP_STYLE.MAP_STYLE_VARIANT` is an instance of the [`MapStyleVariant`](https://github.com/maptiler/maptiler-client-js/blob/main/src/mapstyle.ts) class.

The proxy layer on top of each `ReferenceMapStyle` instance catches nonexistent variants and falls back to the default style.

For example, `MapStyle.STREETS` is a proxied instance of `ReferenceMapStyle`. To use the dark variant (an instance of `MapStyleVariant`), use `MapStyle.STREETS.DARK`. If you request a nonexistent variant, such as `MapStyle.STREETS.INDIGO`, it falls back to `MapStyle.STREETS.DEFAULT`. The benefit of using a proxy instead of a standard getter is this dynamic property resolution.

### Example

<table class="table table-sm parameters-table"><colgroup><col width="20%"> <col width="50%"> <col width="30%"></colgroup><tbody><tr><td class="text-break"><code class="language-plaintext">MapStyle.DATAVIZ.DARK</code></td><td><div><img src="./img/style-dataviz-dark.webp" alt="MapStyle.DATAVIZ.DARK" class="rounded mx-auto d-block" width="370" height="370" data-aspect-ratio="1.00"></div></td><td style="word-break: break-word;">A minimalist style for data visualization. Also available in color and light mode.</td></tr><tr><td class="text-break"><code class="language-plaintext">MapStyle.DATAVIZ.LIGHT</code></td><td><div><img src="./img/style-dataviz-light.webp" alt="MapStyle.DATAVIZ.LIGHT" class="rounded mx-auto d-block" width="370" height="370" data-aspect-ratio="1.00"></div></td><td style="word-break: break-word;">A minimalist style for data visualization. Also available in color and dark mode.</td></tr><tr><td class="text-break"><code class="language-plaintext">MapStyle.BRIGHT.PASTEL</code></td><td><div><img src="./img/style-bright-v2-pastel.webp" alt="MapStyle.BRIGHT.PASTEL" class="rounded mx-auto d-block" width="370" height="370" data-aspect-ratio="1.00"></div></td><td style="word-break: break-word;">A minimalist style for high contrast navigation. Also available in color, dark and light mode.</td></tr></tbody></table>

### API reference

[Class MapStyleVariant](https://docs.maptiler.com/sdk-js/api-reference/classes/MapStyleVariant/)

## Map styles list ![MapTiler logo](https://docs.maptiler.com/favicon.ico)

MapTiler provides reference styles as well as variants for each. Here is the full list:

## Related examples

-   [Built-in map styles](https://docs.maptiler.com/sdk-js/examples/built-in-styles/)
-   [How to display a style switcher control](https://docs.maptiler.com/sdk-js/examples/control-style-switcher/)
-   [How to display your custom map on the web page](https://docs.maptiler.com/sdk-js/examples/custom-map/)