Built-in map styles

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. To explore the full range of available built-in styles and their variants, please refer to the list of built-in styles

This tutorial provides an overview of the built-in styles available and their implementation in map customization. To illustrate this, we have developed a selector tool that allows effortless modification of the map’s style.

By utilizing the pre-existing styles available in our SDK (maptilersdk.MapStyle), you can benefit from numerous advantages:

• Updates to styles: With our built-in styles, any updates made to a particular style will not require you to modify your existing codebase. This ensures that you always have access to the latest version of styles without any hassle.
• Simplified usage: Our built-in styles are designed to be easily memorable, eliminating the need for manually typing style URLs. Additionally, you no longer have to include the API key in every URL, streamlining the process even further.
• Enhanced code completion: By utilizing the built-in styles, you can leverage code completion features that significantly reduce typos and other common mistakes. This ensures a smoother and more efficient mapping experience.

Each of our built-in styles is specifically tailored for a particular purpose, such as street navigation, outdoor adventure, minimalist dashboards, etc. Furthermore, each style offers a variety of variants* that maintain the same level of information and purpose but differ in terms of color schemes. This allows you to choose the variant that best suits your needs, whether it be a dark or light color scheme, among others.

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 add a custom map style to the list of styles see this example Change 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.

Change map styles

Example

This tutorial shows how to change the map styles, you can switch between the built-in maps and your own custom maps.

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.