setStyle(
style:string|StyleSpecification,options?:StyleSwapOptions&StyleOptions):this
Defined in: ui/map.ts:2715
Updates the map's MapLibre style object with a new value.
If a style is already set when this is used and options.diff is set to true, the map renderer will attempt to compare the given style against the map's current state and perform only the changes necessary to make the map style match the desired state. Changes in sprites (images used for icons and patterns) and glyphs (fonts for label text) cannot be diffed. If the sprites or fonts used in the current style and the given style are different in any way, the map renderer will force a full update, removing the current style and building the given one from scratch.
Parameters
| Parameter | Type | Description |
|---|---|---|
style |
string | StyleSpecification |
A JSON object conforming to the schema described in the MapLibre Style Specification, or a URL to such JSON. |
options? |
StyleSwapOptions & StyleOptions |
The options object. |
Returns
this
Example
map.setStyle("https://demotiles.maplibre.org/style.json");
map.setStyle('https://demotiles.maplibre.org/style.json', {
transformStyle: (previousStyle, nextStyle) => ({
...nextStyle,
sources: {
...nextStyle.sources,
// copy a source from previous style
'osm': previousStyle.sources.osm
},
layers: [
// background layer
nextStyle.layers[0],
// copy a layer from previous style
previousStyle.layers[0],
// other layers from the next style
...nextStyle.layers.slice(1).map(layer => {
// hide the layers we don't need from demotiles style
if (layer.id.startsWith('geolines')) {
layer.layout = {...layer.layout || {}, visibility: 'none'};
// filter out US polygons
} else if (layer.id.startsWith('coastline') || layer.id.startsWith('countries')) {
layer.filter = ['!=', ['get', 'ADM0_A3'], 'USA'];
}
return layer;
})
]
})
});
map.setStyle('https://demotiles.maplibre.org/style.json', {
globalState: {
showCircles: true,
}
});