CODEWITHSUNDEEP
mapbox
Georg
Georg

Reputation: 3930

Create custom glyphs and sprites to use with mapbox

I would like to self-host my vector maps. I am using some custom fonts and also some custom icons.

When I create a style in Mapbox Studio and export it later I will have the following two lines inside my styles file:

"sprite": "mapbox://sprites/<user>/<token>/<token>",
"glyphs": "mapbox://fonts/<user>/{fontstack}/{range}.pbf",

My question now is how do I create those files myself? I have a folder containing my .svg and my .ttf files. But how do I now get them into the format I need?

I tried https://github.com/openmaptiles/fonts for the glyphs part, but can't get that running. And then I found https://github.com/mapbox/glyph-pbf-composite but don't understand how it should work.

Upvotes: 7

Views: 4381

Answers (2)

Barrett
Barrett

Reputation: 157

A super simple way for Glyph file generation is to go here: https://maplibre.org/font-maker/ and upload your font, then download the zip.

It uses https://github.com/maplibre/font-maker.

Upvotes: 4

Jeff S
Jeff S

Reputation: 553

The easy method is to:

  1. add the svgs and fonts into a MapBox style
  2. open a test map in a browser
  3. inspect the Network calls with the browser's dev tools. Find the calls to get the sprite and glyph files
  4. open those URLs in a new browser tab and save the files that are downloaded

Otherwise if you want to generate the files without using MapBox Studio:

You'll use two utilities as outline in the instructions from https://openmaptiles.org/docs/style/mapbox-gl-style-spec/

Sprite file generation: SpriteZero CLI - https://github.com/mapbox/spritezero-cli

Glyph file generation: genfontgl - https://github.com/openmaptiles/genfontgl

Finally, when defining the path to the files you do still need the tokens in the glyphs path even though you aren't using them. So something like

"glyphs": "/data/myfonts.pbf?{fontstack}{range}",

Upvotes: 5

Related Questions