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.
-
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
). -
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 it’s up to you. You can start the map in a different place by modifying the
starting position
andstarting zoom
. -
Change the map style to a hybrid satellite images.
- 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 explorationMapStyle.STREETS.DARK
(variant)MapStyle.STREETS.LIGHT
(variant)MapStyle.STREETS.PASTEL
(variant)MapStyle.OUTDOOR
reference style for adventureMapStyle.WINTER
reference style for winter adventureMapStyle.SATELLITE
reference style satellite and airborne imageryMapStyle.HYBRID
reference style satellite and airborne imagery with labelsMapStyle.BASIC
reference style for minimalist design and general purposeMapStyle.BASIC.DARK
(variant)MapStyle.BASIC.LIGHT
(variant)MapStyle.DATAVIZ
the perfect style for data visualization, with very little noiseMapStyle.DATAVIZ.DARK
(variant)MapStyle.DATAVIZ.LIGHT
(variant)MapStyle.BRIGHT
reference style for high contrast navigationMapStyle.BRIGHT.DARK
(variant)MapStyle.BRIGHT.LIGHT
(variant)MapStyle.BRIGHT.PASTEL
(variant)MapStyle.TOPO
reference style for topographic studyMapStyle.TOPO.SHINY
(variant)MapStyle.TOPO.PASTEL
(variant)MapStyle.TOPO.TOPOGRAPHIQUE
(variant)MapStyle.VOYAGER
reference style for stylish yet minimalist mapsMapStyle.VOYAGER.DARK
(variant)MapStyle.VOYAGER.LIGHT
(variant)MapStyle.VOYAGER.VINTAGE
(variant)MapStyle.TONER
reference style for very high contrast stylish mapsMapStyle.TONER.BACKGROUND
(variant)MapStyle.TONER.LITE
(variant)MapStyle.TONER.LINES
(variant)MapStyle.OPENSTREETMAP
reference style for OpenStreetMap
-
Change the style when the user select one style.
- 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.