Map Styles

The built-in map styles defined in the Client JS library are exposed by the SDK so that they can easily be used.

MapTiler teams maintains a few styles that we have decided to expose as style shorthand from the SDK. 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. This has several advantages:

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

ReferenceMapStyle

A reference syle sets some guidelines about what kind of information is displayed, the granularity of the information, and more generaly defines a purpose for which this style is the most relevant: street navigation, outdoor adventure, minimalist dashboard, etc.

The MapStyle.REFERENCE_MAP_STYLE is an instance of the class ReferenceMapStyle (with a proxy layer).

Example

MapStyle.STREETS		The classic default style, perfect for urban areas.
MapStyle.SATELLITE		High resolution satellite images.
MapStyle.HYBRID		High resolution satellite with labels, landmarks, roads ways and political borders.
MapStyle.OUTDOOR		A solid hiking companion, with peaks, parks, isolines and more.
MapStyle.WINTER		A map for developing skiing, snowboarding and other winter activities and adventures.
MapStyle.BASIC		A minimalist alternative to STREETS, with a touch of flat design.

MapStyleVariant

Each reference style offers a range of variants that contain the same level of information and has the same purpose but using different colors schemes.

The MapStyle.REFERENCE_MAP_STYLE.MAP_STYLE_VARIANT is an instance of the class MapStyleVariant. The proxy layer on top of each ReferenceMapStyle instance is useful to catch any inexistant variant and still fallback on the default one.

For example, MapStyle.STREETS is an proxied instance of ReferenceMapStyle and if we look for the DARK variant (instance of the class MapStyleVariant), we need to type MapStyle.STREETS.DARK but if we were looking for an inexisting variant, such as MapStyle.STREETS.INDIGO then MapStyle.STREETS will fallback on MapStyle.STREETS.DEFAULT (the advantage of a proxy compared to a classic getter is the dynamic resolution of the property)

Example

MapStyle.DATAVIZ.DARK		A minimalist style for data visualization. Also available in color and light mode
MapStyle.DATAVIZ.LIGHT		A minimalist style for data visualization. Also available in color and dark mode
MapStyle.BRIGHT.PASTEL		A minimalist style for high contrast navigation. Also available in color, dark and light mode

Map Styles list

MapTiler provides some reference styles as well as some variants for each. Here is the full list:

• MapStyle.STREETS, reference style for navigation and city exploration
  • MapStyle.STREETS.DARK (variant)
  • MapStyle.STREETS.LIGHT (variant)
  • MapStyle.STREETS.PASTEL (variant)
  • MapStyle.STREETS.NIGHT (variant)
• MapStyle.SATELLITE reference style satellite and airborne imagery (no variants)
• MapStyle.HYBRID reference style satellite and airborne imagery with labels (no variants)
• MapStyle.OUTDOOR reference style for adventure
  • MapStyle.OUTDOOR.DARK (variant)
• MapStyle.WINTER reference style for winter adventures
  • MapStyle.WINTER.DARK (variant)
• MapStyle.DATAVIZ, the perfect style for data visualization, with very little noise
  • MapStyle.DATAVIZ.DARK (variant)
  • MapStyle.DATAVIZ.LIGHT (variant)
• MapStyle.BASIC reference style for minimalist design and general purpose
  • MapStyle.BASIC.DARK (variant)
  • MapStyle.BASIC.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 suitable for colorful terrain-aware visualization
  • MapStyle.BACKDROP.DARK (variant)
  • MapStyle.BACKDROP.LIGHT (variant)
• MapStyle.OPENSTREETMAP reference style, this one does not have any variants

Related examples

• Built-in map styles
• How to display a style switcher control
• How to display your custom map on the web page