Settings

Changes theme, style, engine, and API keys.

type: settingstoolbarstable

What it does

Settings contains map-level choices: theme, interface style, map engine, and API keys.

Appearance has two independent choices:

Every style works in both themes.

Map engine switches the renderer: MapLibre GL, OpenLayers, Leaflet or Cesium. The map is rebuilt with the same config. Use this to check engine support: Cesium gives you a globe. OpenLayers gives you view projections other than Web Mercator.

API key is where a key some layers need is entered, kept in this browser.

Choices are remembered in the browser. Engine choice is remembered per map.

Using it

Open settings, choose, and the map changes at once. Nothing needs saving, and the choices survive a reload.

Switching engines reloads the map, so it takes a moment and briefly clears the view.

In your own map

Add settings to a toolbar.

Think before letting readers choose the engine. On a map built around a globe or an equal-area projection, switching engines can remove the feature the map was made for.

Extending it

A saved engine preference outranks the config. The preference is scoped per page and per map id, so it does not leak between maps on the same host.

Style and theme are data-style and data-theme on the root element. Anything consuming the tokens follows automatically, including your own components.

Config typesettings
Element<webmapx-settings>
Placementtoolbar
Sourcesrc/components/webmapx-settings.ts
src/theme/webmapx-style-core.css
Teststests/tool-registration.test.ts
RelatedactiveAdapter, layerOverview, import-layer