Basemap Flavors

These examples use the preferred MapLibre GL JS library.

The Flavor TypeScript interface is the preferred way to customize the basemap style. See the shape of the interface at the @protomaps/basemaps TypeScript docs.

A Flavor is a plain object of color definitions and optional properties such as font names, landcover shades and POI properties. You can define a Flavor yourself for a custom style, similar to a text editor color scheme, or use one of the default named flavors as a base.

Default Flavors

These flavors are included as part of the @protomaps/basemaps package.

light

A general-purpose basemap with icons.

dark

A general-purpose basemap with icons.

white

A flavor for data visualization.

grayscale

A flavor for data visualization.

black

A flavor for data visualization.

Overriding Defaults

Use ES6 spread syntax to override any part of the Flavor object. For example, to color buildings red:

import { namedFlavor } from "@protomaps/basemaps"
let flavor = {...namedFlavor("light"),buildings:"red"}