sdf-manager

Load, parse, and cache MapLibre glyph SDFs, and construct glyph atlases

The code follows the same strategy as the glyph management in MapLibre-GL. sdf-manager simply pulls out this part of the code and modularizes it.

Installation

vector-map is provided as an ESM import

import * as sdfManager from 'sdf-manager';

Syntax

const getGlyphs = sdfManager.initGetter(urlTemplate, key);

The urlTemplate must follow the pattern described in the MapLibre documentation. The key is your API key to access the SDF server.

The returned getGlyphs function has the following syntax:

const atlas = getGlyphs(fonts);

where fonts is a dictionary of fonts and associated character codes, with the following structure:

const fonts = { font1: [code1, code2, ...], font2: [...], ... };

Examples of the returned atlas, and how it can be used, can be found in this Observable notebook

References

• Valve's paper on SDF for text rendering
• Konstantin Käfer's application to map labels
• mapbox-gl-native text rendering documentation