Change map styles

This tutorial demonstrates the process of altering map styles, allowing users to seamlessly transition between the built-in maps and their customized maps. Explore the selection of pre-designed styles available in MapTiler’s library by referring to the list of built-in styles.

MapTiler provides a wide range of predefined styles, enabling users to customize their maps to suit their specific preferences. Additionally, you have the option to create a completely 100% customized map using MapTiler’s Customize tool.

Using the built-in styles and their variants defined in the SDK (maptilersdk.MapStyle) has several advantages such as:

• If we make an update to a style, you won’t have to modify your codebase. Always use the latest version of styles.
• They are easier to remember, no need to type along the style URL. No more putting the API key in every URL.
• Code completion: reducing typos and other common mistakes.

The built-in styles generally define a purpose for which this style is the most relevant: street navigation, outdoor adventure, minimalist dashboard, etc. Then, each style offers a range of variants that contain the same level of information and have the same purpose but use different color schemes like dark, light, etc.

1. Create a map with the default style. If no style is specified when instantiating the map, the SDK by default loads the streets style (maptilersdk.MapStyle.STREETS).

2. Install the npm package.

3. 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

4. Include the following code in your JavaScript file (Example: app.js).

5. Replace YOUR_MAPTILER_API_KEY_HERE with your actual MapTiler API key.

6. The next is up to you. You can start the map in a different place by modifying the starting position and starting zoom.

7. Change the map style to a hybrid satellite images.

8. Create a selector to change the map style. In this example we will use some of the build-in styles. See the full list of styles. Copy the following code into your HTML file.
   • MapStyle.STREETS, reference style for navigation and city exploration
   • MapStyle.STREETS.DARK (variant)
   • MapStyle.STREETS.LIGHT (variant)
   • MapStyle.STREETS.PASTEL (variant)
   • MapStyle.OUTDOOR reference style for adventure
   • MapStyle.WINTER reference style for winter adventure
   • MapStyle.SATELLITE reference style satellite and airborne imagery
   • MapStyle.HYBRID reference style satellite and airborne imagery with labels
   • MapStyle.BASIC reference style for minimalist design and general purpose
   • MapStyle.BASIC.DARK (variant)
   • MapStyle.BASIC.LIGHT (variant)
   • MapStyle.DATAVIZ the perfect style for data visualization, with very little noise
   • MapStyle.DATAVIZ.DARK (variant)
   • MapStyle.DATAVIZ.LIGHT (variant)
   • MapStyle.BRIGHT reference style for high contrast navigation
   • MapStyle.BRIGHT.DARK (variant)
   • MapStyle.BRIGHT.LIGHT (variant)
   • MapStyle.BRIGHT.PASTEL (variant)
   • MapStyle.TOPO reference style for topographic study
   • MapStyle.TOPO.SHINY (variant)
   • MapStyle.TOPO.PASTEL (variant)
   • MapStyle.TOPO.TOPOGRAPHIQUE (variant)
   • MapStyle.VOYAGER reference style for stylish yet minimalist maps
   • MapStyle.VOYAGER.DARK (variant)
   • MapStyle.VOYAGER.LIGHT (variant)
   • MapStyle.VOYAGER.VINTAGE (variant)
   • MapStyle.TONER reference style for very high contrast stylish maps
   • MapStyle.TONER.BACKGROUND (variant)
   • MapStyle.TONER.LITE (variant)
   • MapStyle.TONER.LINES (variant)
   • MapStyle.BACKDROP neutral greyscale style with hillshading
   • MapStyle.BACKDROP.DARK (variant)
   • MapStyle.BACKDROP.LIGHT (variant)
   • MapStyle.OPENSTREETMAP reference style for OpenStreetMap

9. Change the style when the user select one style.

10. Create the layer selector style. Add the selector style to your stylesheet.

Learn more

If you want to switch between built-in styles see this example Built-in map styles.

Check out this tutorial How to display a style switcher control to learn how to create a visual style switcher control.

Related examples

Set dark mode based on system settings

Example

This example shows how to change the map mode (light/dark) based on system settings.

Built-in map styles

Example

Our built-in styles are designed to make it easier for you to create beautiful maps, without the need for extra coding or worrying about outdated versions.

Set map language

Example

This tutorial shows how to change the default map labels language.

Style switcher

Example

This tutorial shows how to add and display a style switcher control on the map.