Use of font awesome in vl-style-text about vuelayers HOT 3 CLOSED

Hi!
vl-style-text has font property where you can set any available font, font size and other text style options. Value format of the font like in CSS https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/font.
Example for your case with default FontAwsome stylesheet:

<vl-style-box>
  <vl-style-text font="16px FontAwesome" text="\uf041">
    <vl-style-fill color="#2355af" />
    <vl-style-stroke color="white" />
  </vl-style-text>
</vl-style-box>

from vuelayers.

Hi,

Thank you for your quick answer.
In fact when using a syntax that the one you gave me the rendering is this one:

https://i.imgur.com/tpI1cvP.png

But when I use a computed value for the text :

...
markerIcon : function() {
return '\uf041'
}

In this case this works perfectly:

https://i.imgur.com/FZKmgIH.png

My knowledge of Vue.js is too limited to see exactly the difference but I suppose that using a computed value prevent the unicode character to be interpreted as a string.

Your work is really interesting and it shows me how a real quality vue.js code should look like.

Thanks

François

from vuelayers.

You are right, it's Vue template compiling issue (https://vuejs.org/v2/guide/components.html#Literal-vs-Dynamic)..
In my example, the text property should be added through Vue bind syntax, then it will be handled as raw js string.

<vl-style-box>
  <vl-style-text font="16px FontAwesome" :text="'\uf041'">
    <vl-style-fill color="#2355af" />
    <vl-style-stroke color="white" />
  </vl-style-text>
</vl-style-box>

from vuelayers.