VersaTiles Style

VersaTiles Style generates styles and sprites for MapLibre.

Styles Overview

| Style Name | Preview | | ------------- | ----------------------------------------------------------------------------------------------------- | | colorful | | | graybeard | | | eclipse | | | neutrino | | | shadow | |

Using VersaTiles Styles

Prebuilt Styles and Sprites

Download the assets from the latest release:

• styles.tar.gz: Contains all styles in multiple languages.
  • Note: These styles use tiles.versatiles.org as the source for tiles, fonts (glyphs), and icons (sprites).
• sprites.tar.gz: Includes map icons and other sprites.
• versatiles-style.tar.gz: Contains a JavaScript file to generate styles dynamically in the browser.

Generating Styles On-the-Fly

Frontend Usage (Web Browser)

Download the latest release:

curl -Ls "https://github.com/versatiles-org/versatiles-style/releases/latest/download/versatiles-style.tar.gz" | gzip -d | tar -xf -

Integrate it into your HTML application:

<div id="map"></div>
<script src="maplibre-gl.js"></script>
<script src="versatiles-style.js"></script>
<script>
	const style = VersaTilesStyle.graybeard({
		language: 'de',
		colors: { label: '#222' },
		recolor: { gamma: 0.5 },
	});

	const map = new maplibregl.Map({
		container: 'map',
		style,
	});
</script>

Backend Usage (Node.js)

Install the library via NPM:

npm install @versatiles/style

Generate styles programmatically:

import { colorful } from '@versatiles/style';
import { writeFileSync } from 'node:fs';

const style = colorful({
	language: 'en',
});
writeFileSync('style.json', JSON.stringify(style));

Style Generation Methods

The library offers the following style generation methods:

• colorful(options) - Documentation
• eclipse(options) - Documentation
• graybeard(options) - Documentation
• neutrino(options) - Documentation
• shadow(options) - Documentation

options: An optional object to customize the styles. Learn more

Guess Style Method

const style = guessStyle(options);

Documentation

Build Instructions

Prerequisites

To build new sprites, ensure optipng is installed.

SVG Source Requirements

• SVGs must consist only of paths and should not contain any transform() attributes.
• Styles and colors within the SVG are ignored.
• All length values must be specified in pixels without units.

Configuration

Define icon sets in the configuration file: scripts/config-sprites.ts

Development

Run the project in development mode:

npm run dev

A local server will be available at http://localhost:8080. Use it to select a style, edit definitions in src/styles/..., and reload the page to view the changes.

Dependency Graph

3-->4 3-->7 3-->6 4-->2 4-->3 4-->5 4-->7 4-->6 5-->4 5-->6 7-->2 7-->3 7-->4 7-->6 8-->2 8-->3 8-->4 8-->7 A-->5 A-->C A-->E A-->W A-->X C-->8 E-->F E-->Q E-->R E-->S E-->T E-->U F-->H H-->8 H-->C H-->J H-->M H-->O H-->P J-->K J-->L M-->8 M-->C M-->N O-->8 Q-->F R-->F S-->F T-->F U-->F W-->X W-->Y Z-->A 10-->8 10-->Z 10-->E

class 0,1,9,B,D,G,I,V subgraphs; classDef subgraphs fill-opacity:0.1, fill:#888, color:#888, stroke:#888;

## Licenses

- **Source Code:** [Unlicense](./LICENSE.md)
- **Iconsets and Rendered Spritemaps:** [CC0 1.0 Universal](./icons/LICENSE.md)