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="https://github.com/versatiles-org/versatiles-style/raw/main/maplibre-gl.js"></script>
<script src="https://github.com/versatiles-org/versatiles-style/raw/main/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[];
}

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

Build

Please note that for building new sprites you need optipng.

SVG Sources

• SVG sources should consist only of paths and not contain any transform()s.
• Colors and styles are ignored.
• All lengths must be in pixels without unit.

Configuration

Iconsets can be defined in scripts/config-sprites.ts;

• colors are applied to each path in the order they appear in the source SVG.
• size applies to the height

Licenses

• Sourcecode: Unlicense
• Iconsets and rendered Spritemaps: CC0 1.0 Universal