Playground: Map Style

How to generate a style with versatiles-style and adjust its colors and labels.

MapLibre GL JS uses style objects to define the appearance of a map. These objects describe data sources, layers, colors, fonts, symbols, etc. (If you want to fine-tune a map down to individual layers, see the complete MapLibre Style Spec.)

To make it easier to work with map styles, we've developed the JavaScript library "versatiles-style" to generate styles efficiently in the frontend or the backend.

We host versatiles-style at a predictable path on tiles.versatiles.org (see our frontend specification):

• /assets/lib/versatiles-style/versatiles-style.js

Loading the library adds the global VersaTilesStyle to the JavaScript environment. To generate a style:

const style = VersaTilesStyle.osm({
	urls: { base: 'https://tiles.versatiles.org' }, // <- where tiles, sprites and fonts come from
});

new maplibregl.Map({
	container: 'map',
	style: await VersaTilesStyle.inlineSources(style), // <- use the style
})

In this example we additionally use German labels (text.language), render labels in black (colors.label), and reduce the overall saturation (recolor.saturate).

Themes

osm() renders OpenStreetMap vector tiles in one of five palettes, each also available as a dark theme with a -dark suffix (colorful-dark, …):

• colorful — the default, rich colors
• natural — muted greens and browns
• muted — minimal, low-contrast
• gray — grayscale
• toner — black and white

See the API documentation, in particular:

• OsmOptions — all options osm() accepts.
• RecolorOptions — change brightness, contrast, saturation, gamma, etc.
• ColorsOptions — change individual colors.

Going further: the "Matrix" effect

Combining layers.labels and recolor produces stylized variants. The following gives you a green-tinted, label-free map that 90s movie fans will recognize:

const style = VersaTilesStyle.osm({
	layers: { labels: false },
	recolor: {
		invertBrightness: true,
		tint: { color: '#0A0', amount: 1 },
	},
});