Creating map style

You can change the look of the map and its objects by applying styles. The style is a document that defines the visual appearance of the map: what data to draw, in what order, how to style the data when drawing it, what icons to draw, and more.

Create your map style using one of the following tools:
- Styles Editor, which allows you to configure the display of any map components in details. You can create your own style from scratch or use one of prepared templates. You can also edit the currently used style in the Editor.
  
  You can get all instructions on creating a style in the Style Editor documentation.
- Style specification, which provides a reduced set (compared to the Styles Editor) of configurations. Use the specification if you want to change your map style in runtime (for example, add a new layer).

Pass the ID of a created style via the style option:

const map = new mapgl.Map('container', {
    center: [55.31878, 25.23584],
    styleZoom: 13,
    key: 'Your API access key',
    style: 'Your map style identifier',
});

In the example above, the styleZoom option is used instead of zoom. Use it, if you want to set the same zoom that is used in the style settings. For details, see the Style zoom chapter.

Also, there is a convenient option defaultBackgroundColor with which you can set the background color while your style is loading. This can be really helpful when the new style has a different base color theme from the default style. For example, you can set the dark default background color for the dark style:

Switching styles

If you need to change the map style in runtime, you can use setStyleById method:

const map = new mapgl.Map('container', {
    center: [37.616723, 55.751],
    styleZoom: 13,
    key: 'Your API access key',
});

map.setStyleById('Your map style identifier');

This is about changing the map style as a whole, for example when switching between a light and dark theme:

Switching styles​

Switching styles