VersaTiles Style

VersaTiles Style generates styles and sprites for MapLibre.

---

Styles Overview

Style Name	Preview
colorful
graybeard
eclipse
neutrino

---

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

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.

---

Licenses

• Source Code: Unlicense
• Iconsets and Rendered Spritemaps: CC0 1.0 Universal