{message: 'Unimplemented type: 4'}

[viacheslav-zyrianov-civilian]

Prerequisites

• I have vue 3 composition api project
• Change in style.json, used for map, line "glyphs": "http://localhost:5173/api/font/{fontstack}/{range}.pbf" to get glyphs from local files

How to reproduce

1. Go to https://maplibre.org/font-maker/
2. Select your custom .ttf font or select any of presented
3. Convert
4. Download .zip
5. Add downloaded files to folder public/maplibre/font/Ubuntu
6. Add layer via map.addLayer

        map.addLayer({
          id: `${layerId}-label`,
          type: 'symbol',
          source: layerId,
          layout: {
            'text-field': ['get', 'name'],
            'text-font': ['Ubuntu'],
            'text-size': 12,
            'text-offset': [-1, 0],
            'text-anchor': 'right',
            'text-allow-overlap': false,
            visibility: mapFiltersStore.layersCheckboxValue[layerId] ? 'visible' : 'none',
          },
          paint: {
            'text-color': '#000000',
            'text-halo-color': '#ffffff',
            'text-halo-width': 2,
          },
        })

Then in console i see:

Attachments

Tried to add font to this issue but got an error - File type .ttf not supported.
Basically, any .ttf font available on Google fonts, i use Ubuntu Regular.

[kajkal]

1. Make sure you extracted font files from the downloaded .zip file; in your case the directory public/maplibre/font/Ubuntu should contain 256 .pbf files
2. Make sure that your font files are accessible; check if the first Ubuntu font file (0-255.pbf) is available at http://localhost:5173/maplibre/font/Ubuntu/0-255.pbf
3. You put your font files in public/maplibre/font directory so the glyphs URL should look like this:
   "glyphs": "http://localhost:5173/maplibre/font/{fontstack}/{range}.pbf"

If these steps do not help, please create a minimal reproducible example app

[viacheslav-zyrianov-civilian]

@kajkal Hi! This is minimal reproducible example app - https://github.com/ViacheslavZyrianov/maplibre-fonts
Tried in it also - still doesn't work :(

[kajkal]

In your example Ubuntu Regular is in public/api/maplibre/font directory.
You should use this path in the glyphs URL:

-  "glyphs": "http://localhost:5173/maplibre/font/{fontstack}/{range}.pbf",
+  "glyphs": "http://localhost:5173/api/maplibre/font/{fontstack}/{range}.pbf",

https://github.com/ViacheslavZyrianov/maplibre-fonts/blob/ea186f05e5e67fbaffd9f39703a23e5e1c862a0a/public/api/maplibre/style.json#L10

[viacheslav-zyrianov-civilian]

@kajkal Thanks for noticing! I've updated it, but error remains

[kajkal]

It remains because in style.json you are using a font that you do not provide:
https://github.com/ViacheslavZyrianov/maplibre-fonts/blob/ea186f05e5e67fbaffd9f39703a23e5e1c862a0a/public/api/maplibre/style.json#L419
Add Open Sans Semibold .pbf files to public/api/maplibre/font/Open Sans Semibold directory or change all "text-font" to Ubuntu Regular in style.json.

You got this cryptic error message because vite request to http://localhost:5173/api/maplibre/font/Open%20Sans%20Semibold/0-255.pbf returns some html not 404 error or sth like this.
There is an open PR regarding this error.

---

For dev you could serve your font files from a dedicated server.
For example use http-server package (command: http-server ./public/api/maplibre/ --port=8080 --cors=\\*) then when you update glyphs URL to this new server 'http://localhost:8080/font/{fontstack}/{range}.pbf' and try to use a non-supported font you will get a proper 404 Not Found error.

[viacheslav-zyrianov-civilian]

@kajkal What eventually helped me:

1. Store both "Open Sans Semibold" and "Ubuntu Regular" in public/api/maplibre/fonts
2. Change all occurrences of "Open Sans Semibold" to "Ubuntu Regular" in my style.json file
3. Use "Ubuntu Regular" when adding layer and setting font 'text-font': ['Ubuntu Regular']

So even if you don't use "Open Sans Semibold", it has to be presented in files. As soon as i delete folder with this .pbf files – no error, but no labels are being displayed either.

[kajkal]

I just verified your example app locally.
All I had to do was replace ALL occurrences of "Open Sans Semibold" with "Ubuntu Regular" in the style.json file to get rid of the "Unimplemented type: 4" error.
There is no need to provide a font that is not used.

[viacheslav-zyrianov-civilian]

@kajkal In my main project I add layer like I've described above. In this case it doesn't show layer with labels unless I have Open Sans Semibold presented. But it works for base map layer.

[kajkal]

In that case provide a minimal reproducible example app with this problem.