Rotate icon in rotated view

[matko9]

Hi, I would like to rotate icon on the map which is already rotated. When I set rotation on icon, it is not pointed on the right coordinates and as the map is panned or zoomed, it also changes its position.

<template>
  <div>
    <vl-map :load-tiles-while-animating="true" :load-tiles-while-interacting="true" data-projection="EPSG:4326" style="height: 400px">
      <vl-view :zoom.sync="zoom" :center.sync="center" :rotation.sync="rotation"></vl-view>

      <vl-layer-tile>
        <vl-source-osm></vl-source-osm>
      </vl-layer-tile>

      <vl-layer-vector>
        <vl-source-vector>
          <vl-feature>
            <vl-geom-point :coordinates="[12.492442,41.890170]"></vl-geom-point>

            <vl-style-box>
              <vl-style-icon src="/_media/marker.png" :anchor="[.5, 1]" :scale=".3"></vl-style-icon>
        </vl-style-box>
      </vl-feature>

          <vl-feature>
            <vl-geom-point :coordinates="[12.482442,41.890170]"></vl-geom-point>

            <vl-style-box>
              <vl-style-icon src="/_media/marker.png" :anchor="[.5, 1]" :scale=".3" :rotation="1" :rotateWithView="true"></vl-style-icon>
        </vl-style-box>
      </vl-feature>
        </vl-source-vector>
      </vl-layer-vector>
    </vl-map>
  </div>
</template>

<script>
  export default {
    data () {
      return {
        zoom: 15,
        center: [12.492442,41.890170],
        rotation: 1
      }
    },
  }
</script>

If I remove rotation or set it to 0 on vl-style-icon, it is shown correctly.

I want to have one icon which doesn't have rotation because the view will rotate so that it is always pointed on north, but other icons should rotate based on their direction. Can you help me to rotate the icon and keep it on the correct coordinates?

[ghettovoice]

Hello @matko9 , sorry for the late response.

I have found strange behaviour of vector layer when it has render event listener. Here is a demo that reproduces this bug with native OpenLayers v5.x.x. https://jsfiddle.net/ghettovoice/sdx98e2f/9/. It looks very strange for me how the event listener can affect rendering process, I didn't dig into this so much... VueLayers vl-layer-vector subscribes to all possible OpenLayers vector layer events to pass them up through Vue events, so I can't just disable this listener on the lib level.

I can only suggest you to try next VueLayers version based OpenLayers v6. With it I don't experience this issue. Here is a demo VueLayers v0.12 and OpenLayers v6 https://jsfiddle.net/ghettovoice/jvcgp43m/

[matko9]

Thank you for the reply. I tried VueLayers v0.12 and rotating of icon in rotated view works if I use it.

I tested out if everything else works the same on this version, but I can't make that the style of the icon is kept when it is clicked with vl-interaction-select. I found your fiddle https://jsfiddle.net/ghettovoice/e51btof3/ from issue https://github.com/ghettovoice/vuelayers/issues/251. If I remove new style and add vl-overlay you can see my problem with the new version: https://jsfiddle.net/a8ht5sv1/3/. It didn't work that way on v0.11, style was kept on click. Can you help me how to solve this issue and use v0.12?

[ghettovoice]

I update you fiddle with v0.12 https://jsfiddle.net/ghettovoice/95e7Locs/. Only remove inner template tag and add missed vl-style-func inside vl-interaction-select.

[ghettovoice]

And also upgrade to v0.12.0-rc.2, in rc.1 was a bug endless reactive update of object properties.

[matko9]

So there isn't a way that I don't have vl-style-func in vl-interaction-select? In the previous version I didn't have to add it, it would keep the current style. I don't want to change style of the icon on click, just show the popup.

[matko9]

I don't have the situation like in fiddle, I have multiple icons and each of them change src and rotation based on the live data so it is better that I don't duplicate that.

[ghettovoice]

In the previous version I didn't have to add it, it would keep the current style

Hmm, that's interesting. Normally vl-interaction-select always uses it's own style, because it internally appends selected feature to its internal overlay layer. And in my old jsfiddle https://jsfiddle.net/ghettovoice/e51btof3/ that you mention above this can be viewed if remove vl-style-func from vl-interaction-select.

Can you show me source code of your component with v0.11.x, where vl-interaction-select didn't change style of selected features?

[matko9]

This is fiddle of the old version where vl-interaction-select didn't change style of selected features: https://jsfiddle.net/4wnfLgby/9/. I was using v0.11.27.

You can see example of my use case in this fiddle: https://jsfiddle.net/fxstLuz0/120/. There is also one additional problem which I have. Now when I can change rotation of icon, there is flickering of icon each second when the rotation changes. Do you maybe have an idea if it can be implemented without flickering? I suppose that this happens because one of the option changes, but since the icon is the same and we change the rotation each second, then it looks bad with this flickering.

[ghettovoice]

This is fiddle of the old version where vl-interaction-select didn't change style of selected features: https://jsfiddle.net/4wnfLgby/9/. I was using v0.11.27.

Now I see. In case when vl-feature are used, each can have own vl-style-box, so style is defined on the per feature level. And that is vl-interaction-select can't redefine style, because it defines select style at the layer level. Anyway per feature styling show work in v0.12 too. In my demos I use features as array, so I need to overwrite select interaction styles.

[ghettovoice]

As for icon flickering, let me some time to check what's going on...

[matko9]

This is fiddle of the old version where vl-interaction-select didn't change style of selected features: https://jsfiddle.net/4wnfLgby/9/. I was using v0.11.27.

Now I see. In case when vl-feature are used, each can have own vl-style-box, so style is defined on the per feature level. And that is vl-interaction-select can't redefine style, because it defines select style at the layer level. Anyway per feature styling show work in v0.12 too. In my demos I use features as array, so I need to overwrite select interaction styles.

When I use the same example, but with v0.12 and OpenLayers v6.4.3, it resets icon style: https://jsfiddle.net/4wnfLgby/18/.

[matko9]

Hi @ghettovoice, I saw that you fixed icon flickering. It works great now, thanks! Did you check the problem with icon reset? As you can see, it was working on v0.11.27, but it doesn't work on v0.12.

[ghettovoice]

Hi @ghettovoice, I saw that you fixed icon flickering. It works great now, thanks!

Yeh, I forget to ping you.

Did you check the problem with icon reset?

I found that select interaction in openlayers v6 now always replaces feature style https://github.com/openlayers/openlayers/blob/main/src/ol/interaction/Select.js#L352. So the only way now is redefine vl-interaction-select style with vl-style-func or vl-style-* components.

[matko9]

Ok, thanks for your help!

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.