Map Styles

A map style is a JSON document that defines the visual appearance of a Vector Tiles map: colors, fonts, layer visibility, and labels. Pass a style URL to a MapLibre-compatible library, and it fetches the style and the tiles it references automatically. No API key is required.

Standard Map Styles

The default styles show place labels in the local language of the area shown. When a place name uses a non-Latin script (for example Cyrillic, Arabic, or Chinese characters), the label gets a second line with a Latin-script name, if one is available.

The map below carries the style switcher described in Style Switcher Control. Open it to compare the seven styles.

Open the full-screen demo

The community service serves the standard Maptoolkit vector basemap in several styles. Pass any of these style URLs to a MapLibre-compatible library. No API key is required.

Style Switcher Control

The switcher on the map above is @maptoolkit/maplibre-style-control, a MapLibre GL JS control that shows the available styles as thumbnails and swaps the map style when one is picked. It is BSD 3-Clause, and its built-in styles are the seven above, so it needs no configuration and no API key.

import { StyleControl } from '@maptoolkit/maplibre-style-control';
import '@maptoolkit/maplibre-style-control/style.css';

map.addControl(new StyleControl(), 'top-left');

Give it a position. The control defaults to bottom-left, where the Maptoolkit logo sits, and a panel opened in the same corner as another control will overlap it. Attribution that is covered does not count as displayed.

Switching the style discards every source and layer on the map, including any you added yourself, so re-add them on the next styledata event.

Full options, methods and events are documented on Add a Style Switcher to MapLibre GL JS.

Language Versions

A language version shows labels in one specific language instead of the local language. If a place name has no translation into that language, the label falls back to the local name.

Language versions show a single label per place, either the translation or the local name. They do not add the Latin-script subtitle used by the default styles.

Build the URL by adding a language code to the style name:

https://styles.maptoolkit.org/<style>-<language>.json

For example:

https://styles.maptoolkit.org/summer-en.json
https://styles.maptoolkit.org/hiking-ja.json

Maptoolkit supports these 13 languages:

3D Styles

Every style has a -3d variant that ships terrain already configured. See 3D Buildings and Terrain for the elevation source, the language limitation and what each library supports.

Customize a Map Style

Use MapMaker to customize a map style in your browser. Pick a style from the Current Style switcher, then edit colors, labels, terrain, and more. Changes update live on the map.

MapMaker offers three editing modes:

• Easy Mode — Sliders, color pickers, and switches for the most common changes: colors, label density, terrain, and feature groups like roads, water, buildings, and POIs. Safe defaults make this the best starting point.
• Photo-to-Map — Upload a photo or logo, and MapMaker generates a color palette from it. Use this to match a map’s colors to a brand image or mood board.
• Expert Mode — Direct access to the underlying MapLibre style.json, with live validation. Click a feature on the map to see which layer renders it and jump straight to that layer. Errors show inline and block saving until you fix them. Use the Maptoolkit Vector Tile Schema Reference and the MapLibre Style Spec to make beautiful styles.

When you are done, click “Export Style” to download the resolved style.json. This export is a static snapshot: unlike styles hosted on styles.maptoolkit.org, it does not receive future updates, and you are responsible for hosting it yourself.

Pass the URL to your custom style to MapLibre to use it:

const map = new maplibregl.Map({
  ...
  style: 'https://my-website.com/style.json', // 👈 Your downloaded style.json!
  ...
});

Minimum SDK Requirements

What a style needs depends on the layer types it uses:

Every style except Street and Light carries a color-relief layer, so in practice those need the second row. Street and Light run on the basic minimums.

MapLibre GL JS does not skip a layer type it does not know. Versions before 5.6.0 reject the whole style, so the map stays empty. Version 5.6.0 loads the style but cannot draw color-relief on devices that only support WebGL 1. If the map stays empty or elevation shading does not appear, check your MapLibre GL JS version first.