Leaflet: Rotation of Markers

[crofty]

Feature request. Allow the markers to be rotated.

The markers that I am displaying on the map have an orientation and it'd be nice to have a simple way of rotating the marker to this orientation. Currently, I'm grabbing the img tag and applying a CSS3 transform with jquery whenever the orientation changes.
It works but it's hacky and there are other webkit transforms already applied the tag.

$(marker._icon).css('-webit-transform','rotate(90deg)')

It'd be nice to have this built into the framework.

[mourner]

Nice feature to have! Needs more complex handling in IE though... I'll think about this. Thanks!

[Razoralpha]

It would be nice to have that function on geoJSON generated markers as a property too, I'm having some issues on that kind of rotation with the workarounds above (or in the other thread), and it still might not be so optimized as a built in function would be.
In my case geoJSON data provides the route of GPS trackers manifested as polylines to display it's path along and markers on each tracker report event - I'm trying to rotate those markers (arrows) as the report's heading says.

[ghost]

Is there a reason not to merge https://github.com/bbecquet/Leaflet.PolylineDecorator/blob/master/src/L.RotatedMarker.js in L.Marker?

[danzel]

There is also https://github.com/jacobtoye/Leaflet.transformmarker if you don't care about old browsers

[mourner]

The PolylineDecorator marker rotation implementation by @bbecquet is actually pretty nice, so we could consider moving this to Leaflet core.

[ghost]

I'm also looking for rotatable markers. Is #2362 far away from being merged?

[wboykinm]

:+1: This. It'd be sweet.

[ccapndave]

+1

[RassaLibre]

+1

[j-r-t]

+1

[Verox-]

+1

[ManfredSchenkIOSB]

Any new information since 2013?

[hozkok]

yea.. there are some hacky workarounds but would be nice to support this feature built in.

[ryanjadhav]

+1

[DrYSG]

+1

[DrYSG]

I tried all three of the solutions below. Since I don't need compatibility with old browsers, I went with the simplest (jacobtoye). But the issue I found was that popUp comments which are located at:

            var myIcon = L.icon({
                iconUrl: 'images/carCursor.png',
                iconSize: [64, 64],
                iconAnchor: [30, 20],
                popupAnchor: [30, -32]
            });

are also being rotated, and this results in the pop-up covering my marker (the contents of the popup is about 12 lines of text.

https://github.com/bbecquet/Leaflet.PolylineDecorator/blob/master/src/L.RotatedMarker.js

https://github.com/shramov/leaflet-plugins/blob/master/layer/Marker.Rotate.js

https://github.com/jacobtoye/Leaflet.transformmarker/blob/master/Leaflet.transformmarker.js

[bbecquet]

Hi!
I just came with a simpler, more elegant implementation, separated from my old PolylineDecorator code. You may want to give it a look: https://github.com/bbecquet/Leaflet.RotatedMarker.

(@DrYSG not sure I understood your issue with the popUp, but in this code the pop-up isn't rotated).

In any case, I don't think this rotation feature could be ever done in Leaflet as long as the IE7/8 support is a requirement (the old IE workarounds are a nightmare, and IIRC they can't meet all cases).
But that's what plugins are for :)

[DrYSG]

@bbecquet
It not that the pop-up is rotated. But since the icon is rotated the anchor also seems to rotate as well as the pop-up offset. So what happens is that the pop-up is vertical, but it is longer -30 from the anchor but now lower in the screen so it covers my icon. (I don't have the actual glyph centered in the L.icon, I am going to try that next.

BTW, I often work with US government clients. They can be really slow at upgrades (policy, bureaucracy, certification processes) Stuff is really old. But even then I have only come across IE9 and no longer IE 7/8 (IE9 is also bad, it really only got better with IE10).

[DrYSG]

@bbecquet

Tried your new marker, and it works perfectly. Pop-up also works correctly. Set rotation-origin to true center of glyph in pixels. That was probably the problem.

[bbecquet]

@DrYSG Thanks for the feedback. Great to know it helped you!

[thatgirlcancode]

https://github.com/bbecquet/Leaflet.RotatedMarker plugin worked for me with beta 2 - thanks @bbecquet

[Deilan]

I wonder why this one is still not implemented.

[ghybs]

Hi @Deilan,

Thank you for your message.

It looks to me that @bbecquet's Leaflet Rotated Marker plugin does the job (demo).
You _might_ also be interested in other plugins, e.g. leaflet.orientedMarker.

IMHO Leaflet project's philosophy is to provide the most common functionality in core, and delegate more specific features to plugins.
As such, having this feature in a plugin sounds an appropriate situation.

I will add Rotated Marker to the plugins list and will mark this Feature Request as closed.

For the sake of completeness, I will mention PR #2362 as an attempt to merge this feature a while back. Unfortunately, it looks like there was some incompatibilities with old browsers and other customizations (transparency…).
It has been closed for inactivity, but feel free to revive it if you can update the code for Leaflet current version!

[Deilan]

@ghybs Thanks for a thorough explanation!