versatiles-org / versatiles-style

create map styles

VersaTiles Style

Programatically generates StyleJSON for MapLibre.

Styles

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

Download styles for versatiles.org

You can download the latest StyleJSONs from the latest release. We provide each style with and without labels, and also in multiple languages.

Be aware that styles already include tiles.versatiles.org as source for tiles, fonts (glyphs) and icons (sprites). So you might want to update the URLs in the JSON.

Create styles in the frontend (web browser)

Download latest release:

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

Use it in:

<div id="map"></div>
<script src="maplibre-gl.js"></script>
<script src="versatiles-style.js"></script>
<script>
	const styleBuilder = new VersaTilesStyle.Colorful();
  styleBuilder.tilesUrl = ['tiles/{z}/{x}/{y}'];

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

Create styles in the backend (Node.js)

Install versatiles-style via NPM:

npm install versatiles-style

Use it in Node.js:

import { Colorful } from 'versatiles-style';
let style = new Colorful();
style.language = 'de';
writeFileSync('style.json', JSON.stringify(style.build()));

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[];
}

Type Aliases

Type: TileJSONSpecification

Type: TileJSONSpecificationRaster | TileJSONSpecificationVector

Functions

Method: colorful(options)

^[src]

Parameters:

• options: StylemakerOptions (optional)

Returns: MaplibreStyle

Method: graybeard(options)

^[src]

Parameters:

• options: StylemakerOptions (optional)

Returns: MaplibreStyle

Method: guessStyle(opt)

^[src]

Parameters:

• opt: TileJSONOption

Returns: MaplibreStyle

Method: neutrino(options)

^[src]

Parameters:

• options: StylemakerOptions (optional)

Returns: MaplibreStyle