@versatiles/style NPM

VersaTiles Style

Generates styles and sprites for MapLibre.

Example: Colorful Style

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

Interfaces

Interface: `TileJSONSpecificationRaster`

interface {
  attribution?: string;
  bounds?: [number, number, number, number];
  center?: [number, number];
  description?: string;
  fillzoom?: number;
  format: "avif" | "jpg" | "png" | "webp";
  grids?: string[];
  legend?: string;
  maxzoom?: number;
  minzoom?: number;
  name?: string;
  scheme?: "xyz" | "tms";
  template?: string;
  tilejson?: "3.0.0";
  tiles: string[];
  type: "raster";
}

Interface: `TileJSONSpecificationVector`

interface {
  attribution?: string;
  bounds?: [number, number, number, number];
  center?: [number, number];
  description?: string;
  fillzoom?: number;
  format: "pbf";
  grids?: string[];
  legend?: string;
  maxzoom?: number;
  minzoom?: number;
  name?: string;
  scheme?: "xyz" | "tms";
  template?: string;
  tilejson?: "3.0.0";
  tiles: string[];
  type: "vector";
  vector_layers: VectorLayer[];
}