<vl-styling-func> not working ?

[RobbieVerdurme]

Hi @ghettovoice

I recently added vuelayers to my project and It’s pretty awesome, but I have some trouble finding a solution for the following.

I made a with some points and wanted to add some styling to them. The styling I wanted to add was to add a number in the circle. The number was specific to a point so I used the as showed below but it does not give me any styling.

Did I do something wrong or is it a bug ?

HTML

      <vl-layer-vector :z-index="2">
        <vl-source-vector :features="pointsOfIntrest" />
        <vl-style-func :factory="styleFuncFactory" />
      </vl-layer-vector>

Javascript

    styleFuncFactory () {
      return (feature) => {
        return createStyle({
          radius: 5,
          fillColor: 'white',
          strokeColor: 'blue',
          text: feature.values.volgnummer.toString()
        })
      }
    },

[ghettovoice]

Hello @RobbieVerdurme , points uses so-called image styles, so to style them with createStyle helper you need to prefix keys with image. https://github.com/ghettovoice/vuelayers/blob/v0.11.x/src/ol-ext/style.js#L382

This should work

styleFuncFactory () {
      return (feature) => {
        return createStyle({
          // image* keys for ol/style/Image style to style points
          imageRadius: 5,
          imageFillColor: 'white',
          imageStrokeColor: 'blue',
          // top level fill/stroke to style lines and polygons
          fillColor: 'white',
          strokeColor: 'blue',
          text: feature.values.volgnummer.toString()
        })
      }
    },

[RobbieVerdurme]

@ghettovoice it works thx a lot