How to display a style switcher control
This tutorial shows how to display a style switcher control on the map.
-
Copy the following code, paste it into your favorite text editor, and save it as a
.html
file. -
Install the npm package.
-
Include the CSS file.
If you have a bundler that can handle CSS, you can
import
the CSS or include it with a<link>
in the head of the document via the CDN -
Include the following code in your JavaScript file (Example: app.js).
-
Replace
YOUR_MAPTILER_API_KEY_HERE
with your actual MapTiler API key. -
The next is up to you. You can start the map in a different place by modifying the
starting position
andstarting zoom
, and you can change the look of the map to any of our styles, or yours, by updating thestyle
. See what’s available here. -
Create the list of styles. In the list of styles use as key the ID of the map in MapTiler Cloud.
-
Select the initial style from the list and update the map style URL.
-
Create the
styleSwitcherControl
and add it to the map. This code is an adaptation of the maplibre-gl-basemaps plugins. -
Create the
styleSwitcherControl
css style. Add the SwitcherControl style to your stylesheet.
Learn more
You can also use your custom maps in the styleSwitcherControl
. Check out the How to display your custom map on the web page tutorial to learn how to get your map ID.