CODEWITHSUNDEEP
vuejs3openlayersopenlayers-6
megaMind
megaMind

Reputation: 31

how to dynamically set styles for 'Draw' in OpenLayers + Vue3?

Expected Process: Select Icon -> Drop Pin ('Feature') -> Pin now has Icon.png on Map

Problem I am facing is setting the style of the pin dynamically (Is that even possible?)

This being the closest I found: https://openlayers.org/en/latest/examples/draw-and-modify-features.html

But I cannot set the 'icon-src' like in here: https://openlayers.org/en/latest/examples/icon-color.html

I understand in the first link that the 'Features' are being dynamically set, but in the second they are hardcoded.

Thoughts?

I have tried to set the styles already inside the VecotorLayer({}) like so:

    this.vector = new VectorLayer({
      source: this.source,
      style: {
        'fill-color': 'rgba(255, 255, 255, 0.2)',
        'stroke-color': '#ffcc33',
        'stroke-width': 2,
        'circle-radius': 7,
        'circle-fill-color': '#ffcc33',
      }

But I cannot use it to set icon-src, the 'Feature's get dropped, and I can export them (Get their lat lon to a csv), but I cannot visually see the icons

Upvotes: 0

Views: 120

Answers (0)

Related Questions