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. Check out the list of built-in styles

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 style URL. No more putting the API key in every URL.
• Code completion: reducing typos and other common mistakes.

The built-in styles generaly defines 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 has the same purpose but using different colors 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 it’s 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.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.

View complete source code on GitHub

Learn more

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