How to display a style switcher control
This tutorial demonstrates the process of showcasing a control for switching styles on the map.
-
Replace
YOUR_MAPTILER_API_KEY_HERE
with your actual MapTiler API key. -
The next is up to you. You can center your map wherever you desire (modifying the
starting position
) and set an appropriate zoom level (modifying thestarting zoom
) to match your users’ needs. Additionally, you can change the map’s look (by updating thesource URL
); choose from a range of visually appealing map styles from our extensive MapTiler standard maps, or create your own to truly differentiate your application.
-
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.