Layer switcher

[cubecleveland]

Is there any demo for a simple layer switcher that can toggle map styles ?

[acalcutt]

I do it like this in my map.

HTML

<select id="styles" class="dropdownSelect">
  <option value="WDB_OSM">3D</option>
  <option value="WDB_BASIC">Basic</option>
  <option value="WDB_DARK_MATTER">Dark</option>
</select>

Javascript

var styleList = document.getElementById('styles');
styleList.addEventListener('change', function(e) {
	//set style
	var styleId = e.target.value;
	map.setStyle('https://tileservergl.foo.lan/styles/' + styleId + '/style.json');
	//append style to url (not needed)
	var url = new URL(window.location.href);
	url.searchParams.set('style', styleId);
	window.history.replaceState(null, null, url); // or pushState
});

Basically, the value of the dropdown is the style of the map. then in the javascript there is an Event listener that uses that values

you can see it here (https://wifidb.net/wifidb/opt/map.php?func=wifidbmap). I'd post a stackblitz for you but I don't think the demo site has multiple styles

[astridx]

I had the same question and share my solution here.
Demo:
https://github.com/astridx/maplibreexamples/blob/main/plugins/maplibre-style-switcher.html
Code:
https://astridx.github.io/maplibreexamples/plugins/maplibre-style-switcher.html

[animaux]

Brilliant, thanks Astrid!