Generates styles and sprites for MapLibre.
You in the the latest release you can find:
styles.tar.gz
containing all styles, each in multiple languages.tiles.versatiles.org
as source for tiles, fonts (glyphs) and icons (sprites). sprites.tar.gz
containing sprites, used e.g. for map iconsversatiles-style.tar.gz
containing a JavaScript file to generate your own style in the 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>
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));
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";
}
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[];
}
TileJSONSpecification
Type: TileJSONSpecificationRaster | TileJSONSpecificationVector
colorful(options)
Parameters:
options: StylemakerOptions
(optional)Returns: MaplibreStyle
graybeard(options)
Parameters:
options: StylemakerOptions
(optional)Returns: MaplibreStyle
guessStyle(opt)
Parameters:
opt: TileJSONOption
Returns: MaplibreStyle
neutrino(options)
Parameters:
options: StylemakerOptions
(optional)Returns: MaplibreStyle
Please note that for building new sprites you need optipng
.
transform()
s.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