vue-leaflet/Vue2Leaflet

Suggestion for icon rotate / rotation / rotating - easy solution

kps1ny opened this issue · 2 comments

kps1ny commented

Hi -

After spending a number of frustrating hours trying to figure out how to rotate icons, I finally found a plug-in that worked... but it also rotated the labels!

Going back to basics, I found a solution that is extremely simple, and does not rotate the label along with the marker. I hope this solution might be put into the docs somewhere so that others are saved this effort.

Example:

<l-icon :icon-size="Icon.size" :icon-anchor="Icon.anchor">
      <img :src="Icon.url" :style="'transform: rotate(' + angle + 'deg)'"/>
      <div>{{ label }}</div>
</l-icon>

This relies on CSS transform rotate, no plug-in needed, and can be used within a Vue template rather than via JavaScript to affect the marker.

-Ken

stale commented

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.

kps1ny commented

This was closed automatically by a bot. The requested feature/functionality was not implemented.