Rotate marker in angular-leaflet-directive

Question

EDIT: I don't care on how to fix my code/why it's behaving like that, I just want to rotate a marker in angular-leaflet-directive, around its center.

I'm aware of the question here but I have no idea on how to get the DOM element of every marker. The way that I'm creating markers, is

$rootScope.markers.push(
            {
                lng : 23.8404236,
                lat : 38.04595,
                icon: {
                    iconUrl : url,
                    iconSize: [30, 30]
                }
            }
        );

I also want to rotate them around the coordinates that they correspond to, not their tip (the top left most corner in Leaflet's terms).

I'm currently using Marker.Rotate.js but they are rotated around some arbitrary point as you can see here:

Their code is:

$rootScope.markers.push(
            {
                lng      : 23.8404236,
                lat      : 38.04595,
                icon     : {
                    iconUrl : 'misc/images/debug3.png',
                    iconSize: [30, 30]
                },
                iconAngle: 30
            }
        );
        $rootScope.markers.push(
            {
                lng : 23.8404236,
                lat : 38.04595,
                icon: {
                    iconUrl : url,
                    iconSize: [30, 30]
                }
            }
        );
        $rootScope.markers.push(
            {
                lng      : 23.8404236,
                lat      : 38.04595,
            }
        );

The original pic's size is 120x120 so it can be downscaled to 30x30. Also I'm not setting the anchor, because given size, it is automatically set to the middle ([15,15] I'm guessing) - even if I do set the anchor the result is the same.

I want the markers to rotate around their [15,15], not their bottom left corner or whatever other point.

Reinstate Monica Reinstate Monica · Accepted Answer · 2015-10-30T11:59:29

I hacked the answer like so:

$rootScope.markers.push(
{
    icon   : {
        type      : 'div',
        className : 'marker-default',
        html      : '<img style="transform-origin: center 20px; transform: rotate('+rotation+'deg)" src="'+url+'">',
        iconAnchor: [12, 20]
    },
    lat      : parseFloat(DeviceData[i].Position.Y),
    lng      : parseFloat(DeviceData[i].Position.X),
    message  : "<div ng-include src=\"'templates/markerTemplate.html'\" ng-controller=\"markerBaseController\" data-deviceiterator=" + i.toString() + "></div>",
});

it's not pretty, but it works.

Rotate marker in angular-leaflet-directive

1 Answers