Missing PBF font?

[edent]

trafficstars

This is a brilliant service - thank you so much for providing it.

I'm trying to add clusters to a map, following this tutorial - https://maplibre.org/maplibre-gl-js/docs/examples/cluster/

If I replace https://api.maptiler.com/maps/streets/style.json?key=... with https://tiles.openfreemap.org/styles/liberty the tiles display, but no clusters appear.

I can see a 404 from a request to https://tiles.openfreemap.org/fonts/Open%20Sans%20Regular,Arial%20Unicode%20MS%20Regular/0-255.pbf

Looking through the source of https://unpkg.com/maplibre-gl/dist/maplibre-gl.js, it appears there's a hard-coded requirement for those fonts:

"text-font": {
    type: "array",
    value: "string",
    default: ["Open Sans Regular", "Arial Unicode MS Regular"],
    requires: ["text-field"],
    expression: {
        interpolated: !1,
        parameters: ["zoom", "feature"]
    },
    "property-type": "data-driven"
},

Within the HTML, I can set 'text-font': ['Whatever'] but it seems to require them to be hosted on the same environment as the tiles.

Would you consider adding these default fonts? Or tell me what obvious thing I'm missing 😆

Thanks

[hyperknot]

Hi @edent,

I never used clusters, I think it'd be great to ask the Maplibre GL JS devs about this particular limitation. I'd guess we should be able to specify the font being used.

Technically we can add Open Sans, but Arial Unicode MS Regular is a proprietary Microsoft font, we cannot host it here.

[edent]

(Ignore my previous comment - too many tabs open!)

Open Sans would be great! I understand completely about the proprietary font issue.

[hyperknot]

We can add a nginx regex location to serve Noto Regular for all missing fonts though. I have to look into the nginx specifics for that.

But let's ask the Maplibre GL JS guys first.

[pandeiro]

Is this conversation with Maplibre trackable somewhere? Or is there any other possible workaround besides not rendering clusters?

Would love to switch a project I have over to openfreemap, but clusters are required for it.

[hyperknot]

I believe the font wasn't specified in the original example, but I'll have a look at the actual example code.

[avaryx]

In the meantime, is there an easy way for us to bypass this requirement and supply our own font for these objects? I cannot find a way to do that successfully at this time.

To elaborate, if I attempt to supply a value as below, I still receive a 404. "text-font": ["Teko"],

404 when attempting to resolve: https://tiles.openfreemap.org/fonts/Teko/0-255.pbf

[pandeiro]

It appears that specifying text-field in a layer definition's layout object also triggers this error and prevents the layer from rendering at all. Eg

export const pointsLayer = {
  id: 'points-layer',
  type: 'symbol',
  source: LAYER_SOURCE,
  filter: ['==', '$type', 'Point'],
  layout: {
    'icon-image': ['concat', ['get', 'type'], '-icon'],
    'text-field': ['get', 'name'],
    'icon-size': 0.15,
    'icon-offset': [0, -15],
  },
}

[hyperknot]

OK, I added the official cluster example. Only two differences I made was:

• use OpenFreeMap sources
• specify font as Noto Sans Regular

It's here: https://github.com/hyperknot/openfreemap/blob/main/website/src/examples/cluster.html

Is there anything broken on this version for you?

[hyperknot]

In the meantime, is there an easy way for us to bypass this requirement and supply our own font for these objects? I cannot find a way to do that successfully at this time.

To elaborate, if I attempt to supply a value as below, I still receive a 404. "text-font": ["Teko"],

404 when attempting to resolve: https://tiles.openfreemap.org/fonts/Teko/0-255.pbf

You can specify your own font, but you need to generate these PBF files first.

[hyperknot]

I'll be closing this issue as there are no errors or bugs. Simply the font needed to be specified as the MapLibre example used ['DIN Offc Pro Medium', 'Arial Unicode MS Bold'], both of which are non-open source fonts.

[hyperknot]

It appears that specifying text-field in a layer definition's layout object also triggers this error and prevents the layer from rendering at all. Eg

export const pointsLayer = {
  id: 'points-layer',
  type: 'symbol',
  source: LAYER_SOURCE,
  filter: ['==', '$type', 'Point'],
  layout: {
    'icon-image': ['concat', ['get', 'type'], '-icon'],
    'text-field': ['get', 'name'],
    'icon-size': 0.15,
    'icon-offset': [0, -15],
  },
}

Please always specify Noto Sans like in the example I've just pushed. I've opened an issue in MapLibre that they really shouldn't be defaulting to non-open source fonts, but until that gets resolved we have to specify Noto Sans for each text-field we use.

// Well, I'll implement the nginx hack soon, but the proper solution is to specify Noto Sans.

[pandeiro]

Thanks a lot for your attention to this and for the documentation example. Works great.

[theperiscope]

@hyperknot I also ran into this issue trying to add labels and the Noto Sans Regular comment here definitely helped resolve it.

During my earlier troubleshooting, I came across Font Maker tool on the MapLibre website as a way to convert any otf/ttf font to the PBF format, which can help expand the list of supported font options.

Openfreemap has been wonderful since I started using it about 6 months ago - thank you for all the work, and I hope this is a useful small contribution to it.

[stychu]

@hyperknot I also hit this issue and could not understand why something is broken. But after 2hr found this post. Good to see its quite simple fix. Would you consider adding a note to the quick start guide on the website for maplibre section about this?? Probably can save others running into the problem.