VersaTiles Style

Generates styles and sprites for MapLibre.

Styles

• Colorful - colorful, full featured map
• Graybeard - gray, full featured map
• Neutrino - light basemap

Use styles for versatiles.org

You in the the latest release you can find:

• styles.tar.gz containing all styles, each in multiple languages.
  Be aware that these styles use tiles.versatiles.org as source for tiles, fonts (glyphs) and icons (sprites).
• sprites.tar.gz containing sprites, used e.g. for map icons
• versatiles-style.tar.gz containing a JavaScript file to generate your own style in the browser.

Create styles in the frontend (web browser)

Download latest release:

wget "https://github.com/versatiles-org/versatiles-style/releases/latest/download/versatiles-style.tar.gz"

Use it in:

<div id="map"></div>
<script src="maplibre-gl.js"></script>
<script src="versatiles-style.js"></script>
<script>
   const style = VersaTilesStyle.styles.graybeard({
      tiles: ['/tiles/osm/{z}/{x}/{y}'],
      sprite: '/assets/styles/swr-bright/sprite',
      glyphs: '/assets/fonts/{fontstack}/{range}.pbf',
      baseUrl: 'https://example.org/',
      languageSuffix: '_de',
      colors: { label: '#222' },
      recolor: { gamma: 0.5 }
   });
 
	 const map = new maplibregl.Map({
	 	 container: 'map',
	 	 style
	 });
<script>

Create styles in the backend (Node.js)

Install @versatiles/style via NPM:

npm install @versatiles/style

Use it in Node.js:

import { styles } from '@versatiles/style';
let style = styles.colorful({
  languageSuffix: '_en',
});
writeFileSync('style.json', JSON.stringify(style));

API