Switch MapStyle with MapTiler SDK
MapTiler SDKDynamically change between MapTiler map styles using the MapStyle constants and the setStyle method.
maptilersdk.config.apiKey = 'YOUR_MAPTILER_KEY';
const map = new maptilersdk.Map({
container: 'map',
style: maptilersdk.MapStyle.STREETS,
center: [2.3522, 48.8566],
zoom: 12
});How it works
The SDK provides MapStyle constants like STREETS, SATELLITE, OUTDOOR, and TOPO. Pass one to the constructor or call map.setStyle() at runtime to switch.
The SDK resolves these values to full MapTiler Cloud URLs automatically. You never need to construct a style URL manually.
Buttons in extra_body call map.setStyle() with different style values.
Key APIs
| API | Description | Docs |
|---|---|---|
maptilersdk.MapStyle |
Built-in style constants | docs.maptiler.com/sdk-js/api/ |
map.setStyle() |
Switch map style at runtime | docs.maptiler.com/sdk-js/api/ |
FAQ
Does setStyle remove my custom layers?
Yes. Switching styles replaces the entire style document. Re-add custom sources and layers in the style.load event handler after calling setStyle().
Can I use a custom style URL instead of the built-in constants?
Yes. Pass any valid MapTiler Cloud style URL or a MapLibre style JSON object to setStyle().
Common mistakes
- Using deprecated style names like
streets-v2: use theMapStyleconstants, which always resolve to the latest version - Forgetting that
setStyle()is asynchronous: wait for thestyle.loadevent before adding layers - Using raw URL strings when a
MapStyleconstant is available: constants are shorter and auto-versioned
Build maps using MapTiler SDK with AI
Generate code like this switch mapstyle with maptiler sdk example using the MapTiler SDK skill in your IDE.
Related Examples
- Initialize a Map with MapTiler SDK
- Satellite Basemap with MapTiler SDK
- See how to do this in Leaflet, MapLibre GL JS or OpenLayers