Search code examples
javascriptopenlayersopenlayers-6

OpenLayers Extension ol:ext FontSymbol how to add multiple chars into glyph?

I'm using OpenLayers 6 and ol:ext FontSymbol & free FontAwesome for creating the marker. I need to put number char into the center of the marker, It's working fine for 0-9 char only but for more than 1 chars it's not working and showing only "1" like the glyph only accept 1 char.

first

This is my style :

var styles = new ol.style.Style({
        image: new ol.style.FontSymbol({
            glyph: number.toString(),
            form: 'marker',
            radius: 20,
            fontSize: 0.2,
            fontStyle: 'sans-serif',
            rotation: 0,
            rotateWithView: false,
            color: 'white',
            fill: new ol.style.Fill({
                color: colorparam.toString(),
            })
        }),
    });

Am I doing it wrong ? or is there any better way to do it ? I tried to add original style - text after image but the char for all markers shown above all of the marker itself.

var styles = new ol.style.Style({
        image: new ol.style.FontSymbol({
            glyph: '',
            form: 'marker',
            radius: 20,
            fontSize: 0.2,
            fontStyle: 'sans-serif',
            rotation: 0,
            rotateWithView: false,
            color: 'white',
            fill: new ol.style.Fill({
                color: colorparam.toString(),
            })
        }),
        text: new ol.style.Text({
            text: number.toString(),
            scale: 1.2,
            fill: new ol.style.Fill({
                color: "#fff"
            }),
        }),
    });

second

I choose to use font instead render image / icon file since I think font source will be loaded once and lighter than image.

Solution

  • ol-ext FontSymbol is designed to display font icon and only draw the first char of he string your are giving to it... The symbol itself is displayed as an image and thus is drawn under ol text style.
    You can ask for a new feature at ol-ext (https://github.com/Viglino/ol-ext/issues) to display full text string instead of char in the symbol.