maplibre / flutter-maplibre-gl

Customizable, performant and vendor-free vector and raster maps, flutter wrapper for maplibre-native and maplibre-gl-js (fork of flutter-mapbox-gl/maps)
https://pub.dev/packages/maplibre_gl
Other
215 stars 117 forks source link

How to use custom front from Flutter assets in Symbol ? #298

Closed T-moz closed 1 year ago

T-moz commented 1 year ago

I'm tying to display a Symbol on a map, with a textLabel and a custom font.

The font is part of my Flutter assets.

I looked at this exemple: https://github.com/maplibre/flutter-maplibre-gl/blob/main/example/lib/place_symbol.dart

    return iconImage == 'customFont'
        ? SymbolOptions(
            geometry: geometry,
            iconImage: 'custom-marker',
            //'airport-15',
            fontNames: ['DIN Offc Pro Bold', 'Arial Unicode MS Regular'],
            textField: 'Airport',
            textSize: 12.5,
            textOffset: const Offset(0, 0.8),
            textAnchor: 'top',
            textColor: '#000000',
            textHaloBlur: 1,
            textHaloColor: '#ffffff',
            textHaloWidth: 0.8,
          )
        : SymbolOptions(
            geometry: geometry,
            textField: 'Airport',
            textOffset: const Offset(0, 0.8),
            iconImage: iconImage,
          );

But I could not manage to display the symbol.

What is the procedure to display custom, local font within symbol ? In this exemple, how was DIN Offc Pro Bold added to the app ?

NiKoTron commented 1 year ago

Don't think that you able to use a fonts from flutter assets. maplibre/mapbox using an SDF bitmap fonts for rendering on map in case of perfomance. It's come from the glyphs parameter of map style https://docs.mapbox.com/style-spec/reference/glyphs/

you can use https://maplibre.org/font-maker/ to convert .otf and .ttf font files to .sdf and add it to your style.

m0nac0 commented 1 year ago

Closing this since the given answer is correct, thank you @NiKoTron.

The only tiny thing I would add is that MapLibre now hosts their own fork of the style spec at https://maplibre.org/maplibre-style-spec/glyphs/ that I think might diverge in the future.