search

maptiler / tileserver-gl

Vector and raster maps with GL styles. Server side rendering by MapLibre GL Native. Map tile server for MapLibre GL JS, Android, iOS, Leaflet, OpenLayers, GIS via WMTS, etc.
https://tileserver.readthedocs.io/en/latest/
Other
2.17k stars 629 forks source link

OpenLayers Vector Tiles need Web font instead of PBF glyphs #641

Open karussell opened 1 year ago

karussell commented 1 year ago

When using vector tiles from tileserver-gl with OpenLayers it currently falls back to downloading fonts from Google font servers. See https://github.com/openlayers/ol-mapbox-style/issues/698

Fixing this would be easier if the fonts are not only defined via the glyphs (for maplibre) but also as normal Web fonts and make them available in a css ala https://mytileservergl.com/fonts/{fontstack}/{range}.css.

Currently one either has to accept that fonts are downloaded from Google servers. Or you add every single font used in the vector tiles to your application. And every client has to repeat this work again.

ahocevar commented 1 year ago

Or rather, publish the used fonts as web fonts with urls like https://mytileservergl.com/fonts/{fontname}/{fontweight}/{fontstyle}.css. Then the mechanism for obtaining the fonts in a way that makes sense for browsers would be similar to the Google Fonts API.

acalcutt commented 1 year ago

Do you have any open examples of fonts in this css format I could download and look at?

If someone were to work with this I think you would start with either modifying this endpoint https://github.com/maptiler/tileserver-gl/blob/master/src/serve_font.js#L41

Or, in the case of the second post, probably making a new similar endpoint.

ahocevar commented 1 year ago

@acalcutt The Google Fonts API delivers fonts like this, e.g. https://fonts.googleapis.com/css?family=Noto+Sans:400italic. Or Fontsource, e.g. https://cdn.jsdelivr.net/npm/@fontsource/noto-sans/400-italic.css.

ahocevar commented 1 year ago

See https://github.com/openlayers/ol-mapbox-style/issues/698#issuecomment-1473903973 for my proposal for a metadata extension to the GL Style documents.

To provide fonts like that, it should be enough to expose the directory structure of the respective @fontsource npm packages on the server.

Let me know if there are any questions or comments.