@basemaps/sprites

@basemaps/sprites

Generate a sprite sheet from a list of sprites

Using the API

import { Sprites, SvgId } from '@basemaps/sprites';
import { fsa } from '@chunkd/fs';
import { basename } from 'path';

const sprites: SvgId[] = [];
for await (const spritePath of fsa.list('./config/sprites')) {
  if (!spritePath.endsWith('.svg')) continue;
  sprites.push({ id: basename(spritePath).replace('.svg', ''), buffer: await fsa.read(spritePath) });
}

const generated = await Sprites.generate(sprites, [1, 2, 4]);
for (const res of generated) {
  const scaleText = res.pixelRatio === 1 ? '' : `@${res.pixelRatio}x`;
  const outputPng = `./sprites${scaleText}.png`;
  const outputJson = `./sprites${scaleText}.json`;

  await fsa.write(outputPng, res.buffer);
  await fsa.write(outputJson, JSON.stringify(res.layout, null, 2));
}

From the command line

npm install -g @basemaps/sprites

basemaps-sprites --ratio 1 --ratio 2 --retina ./config/sprites/topographic

Outputs:

topographic.json topographic.png

[e-mail] [e-mail]

Sprites can also be in other formats such as PNG or WebP

# Load only png sprites
basemaps-sprites --extension .png ./config/sprites/topographic

# Load png, webp and svg sprites
basemaps-sprites --extension .png --extension .svg --extension .webp ./config/sprites/topographic

Refference of the test sprites in the unit tests.

The following test sprites come from openstreetmap-americana

• ./static/sprites/openstreetmap_poi_bus.svg
• ./static/sprites/openstreetmap_poi_plane.svg
• ./static/sprites/openstreetmap_shield_ca_qc_a_2.svg
• ./static/sprites/openstreetmap_shield_kr_expressway_2.svg

Changelog

8.0.0 (2025-05-11)

Bug Fixes

• cli: update landing deploy script with new cli-config package BM-1260 (#3431) (4d7e86d), closes /github.com/linz/basemaps/blob/e527a04fec65c82f8577642493e8fcb475762243/packages/landing/scripts/deploy.mjs#L1
• ensure all linzjs packages are correctly labeled as deps (#3439) (de9df87), closes #3438
• ensure api key blocks are set in ci/cd (#3442) (28f6403)

Features

• cli-vector: Extract cli to load schema json and prepare jobs to process vector mbtiles. BM-1267 (#3429) (db113e2)
• cli: add cli-config package BM-1260 (#3428) (4ca5a47)
• cli: move cogify create-config into cli-config package BM-1261 (#3432) (5f72430)
• cli: rename cogify package to cli-raster BM-1262 (#3433) (36d4449)
• cli: update cli-package commands to cmd-ts BM-1259 (#3427) (46cc342)