VersaTiles Style

VersaTiles Style generates styles and sprites for MapLibre.

Styles Overview

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

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
• satellite(options) - Documentation

options: An optional object to customize the styles. Learn more satellite uses a different options type: SatelliteStyleOptions

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.

Recommended icon sources

When adding new icons, Pinhead Map Icons (source) is a useful starting point — a CC0-licensed collection of 1000+ cartographic SVGs designed to be legible at pin-marker scale, unifying icons from Maki, Temaki, OSM Carto, and NPMap.

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 C-->8 E-->F E-->G E-->R E-->S E-->T E-->U E-->V E-->W E-->X F-->C G-->I I-->8 I-->C I-->K I-->N I-->P I-->Q K-->L K-->M M-->C N-->8 N-->C N-->O P-->8 R-->G S-->G T-->G U-->G V-->F V-->C V-->T W-->G X-->E X-->V Y-->A Z-->8 Z-->Y Z-->E 11-->12 11-->13

class 0,1,9,B,D,H,J,10 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)