Hello!

I am using leaflet-django with leaflet 1.6.0.

I have polylines and many markers on my map. Some markers should be visible all the time and I used z-index of markerPane for that. But after adding RotatedMarker I have styles like following:

element.style {
    margin-left: -16px;
    margin-top: -16px;
    width: 32px;
    height: 32px;
    transform: rotate(102deg);
    z-index: 324;
    transform-origin: center center;
}

And z-index forcibly changes on every zoom or update to some random value.
I want to have some control over z-index.

Hi, I've installed your extension of Leaflet. My icons appear but are not rotating. Here is the code that I am using:

this.marker = L.marker([51.505, -0.09], {rotationAngle: 120, rotationOrigin: 'center'}).addTo(this.map);

As you can see the icon is not rotated. Functions setRotationAngle and setRotationOrigin don't appear to do anything either.

I have dropped the extension .js script file in my Leaflet folder like so:

Any ideas to what I am doing wrong? @bbecquet

Thanks in advance.

I'm currently working on an ionic2 project (Typescript) that use leaflet v1.1.0 as a map. This plugin was very useful for me in previous projects (JavaScript). I'm asking how can I use it with my typescript code? Basically, How to define it in typescript? Thanks

Hi,

I want to use this plugin in angular, for that I installed it with npm and then imported it with " import 'leaflet-rotatedmarker' "
but it's not working, it doesn't recognise the new options

Can anyone help me plz

My original implementation was with Leaflet 1.0.3 and all was OK.

Now I updated to Leaflet 1.2.0 and have exception

Cannot read property 'prototype' of undefined
node_modules/leaflet-rotatedmarker/leaflet.rotatedMarker.js:5:44

Same exception happens with Leaflet 1.1.0.

Can it be updated/fixed so this plugin works with newest Leaflet 1.2.0?

when angle is set from 5 to 355 , marker moves clockwise so it performs a full circle instead it should have turned anticlockwise so that it can make small turn. how i can do this?

I was testing it and apparently it stopped working with new Leaflet versions?
Tested on 1.9.3.

I have tried as follows:

var svgairports0 = L.icon({
    iconUrl: 'markers/a18_sluis.svg',
    iconSize: [19.0, 19.0], // size of the icon
});

function doStyleairports0(feature) {
    return {
        icon: svgairports0,
        rotationAngle: 90.0,
        rotationOrigin: 'center center'
    }
}

function doPointToLayerairports0(feature, latlng) {
    return L.marker(latlng, doStyleairports0(feature))
}

var json_airports0JSON = new L.geoJson(json_airports0, {
    pointToLayer: doPointToLayerairports0
});

I get no markers at all, but no errors. Can you see what I am doing wrong?

Yesterday's update breaks the loading phase of the plugin. Upon initialization, the line:

var proto_onDrag = L.Handler.MarkerDrag.prototype._onDrag;

This call throws because L.Handler.MarkerDrag is undefined.

Reverting to 1.0.x fixes the issue.

When bundling with Vite in a SvelteKit application, I get the following warning:
leaflet-rotatedmarker doesn't appear to be written in CJS, but also doesn't appear to be a valid ES module (i.e. it doesn't have "type": "module" or an .mjs extension for the entry point). Please contact the package author to fix.

If possible I would like to see this fixed, as it is kinda annoying to see pop up in my terminal.

Right now, the plugin is extending L.Marker implicitly and this is not a very modular approach. That may cause ambiguity on importing/exporting ES6 modules.
Would be better to be able to import {RotatedMarker} from 'leaflet-rotatedmarker' explicitly.

A better idea might be to add a separate L.RotatedMarker plugin which extends L.Marker.

with this way, that would also be possible to add some typed library support as well (e.g. TypeScript d.ts file).

I cannot get the layer search to display in either the preview or the browser once exported.

Sorry if this is a slightly weird question. Is the rotation from Magnetic North or True North?

I want to draw an icon showing which direction a photo was taken. Some manufacturers record the data as:

    'GPSImgDirectionRef' => 'T',

Others record as:

    'GPSImgDirectionRef' => 'M',

When using your plugin, is rotationAngle: 0 true or magnetic north?

I just wanted to confirm that the rotation is positive clock-wise relative to the +Y axis of the map-image, not relative to True North.

For a Mercator projection these axes are the same, but for others (like Lambert, Polar Stereographic) they are not the same.

When I loop through my markers (from a GeoJSON file) and apply marker.setRotationOrigin() and marker.setRotationAngle(), the transformations work correctly in with Leaflet 0.7.7, but not when I upgrade to Leaflet 1.0. The markers are shifted in Leaflet 1.0. Note that the shift is different if I do not set the rotation origin, but if I set the rotation origin, the (different) shift is the same no matter what I choose the origin to be.

Could this be related to this issue with shifted markers on Leaflet.PolylineDecorator?

I'm a little new at this, but I don't seem to find your project on bower even though you've got a bower.js. Did you not register it or something? How would I refer to your project to find it on bower? I'm using brunchJS as my build chain if it matters, and when I use

"leaflet-rotatedmarker": "~0.1.0"

As a dependency in my bower.json I get the error ENOTFOUND Package leaflet-rotatedmarker not found. It also doesn't appear in the package search on bower.io
https://bower.io/search/

The demo located here:
http://bbecquet.github.io/Leaflet.RotatedMarker/example.html

Is currently not working because of a broken CDN:

ERR_CERT_COMMON_NAME_INVALID

Hello, how can I use it in Vue2?

With the following code everything appears to work correctly:
var You = L.latLng([500, 500]);
L.marker(You, {rotationAngle: 25}, {rotationOrigin: [32, 33]}).addTo(map);

Now, by adding an icon and passing it as second argument, the rotationAngle appears to have no effect:
var You = L.latLng([500, 500]);
var greenIcon = L.icon({iconUrl: 'favicons/tarkov/Legend/green-icon.png'});
L.marker(You, {icon: greenIcon}, {rotationAngle: 25}, {rotationOrigin: [32, 33]}).addTo(map);

btw the green icon looks that way by default as png. it didnt rotate at all.

Hello!

I am using react-leaflet maps here are my marker code.

<Marker key={1} position={{ lat: position.latitude, lng: position.longitude }} rotationAngle={position.course} rotationOrigin="center" icon={L.icon({iconUrl: "xyz.svg", iconSize: [50,50], iconAnchor: [25, 25]})} />

position data update frequently but marker rotation didn't update after loading of map.

I don't know how to use setRotationAngle here.

please give me any example for way in react-leaflet

Thanks

Hi,

I've been using your plugin for some time and it worked perfectly. Now, I moved to the new Leaflet (and some other libraries) and here is a problem I see:

When the marker is at the 0 angle, everything is Ok.

When it points to another direction, I see the offset from there it supposed to be.

Changing rotationOrigin has no effect...
Am I missing something?

Thanks for your help,

Alex

Hi, I am using this library to rotate my custom marker. But I have a label for the marker, which also rotates with the marker. I wanted to rotate only my icon (which I add throught the L.divIcon). Is there a way for it ?

leaflet.rotatedMarker.js:9
Uncaught TypeError: Cannot read property 'iconAnchor' of undefined
(anonymous function) @ leaflet.rotatedMarker.js:9
proto.callInitHooks @ leaflet.js:365
proto.callInitHooks @ leaflet.js:359
NewClass @ leaflet.js:314
onAdd @ leaflet-search.js:137
addTo @ leaflet.js:11610
addTo @ leaflet-search.js:160
addControl @ leaflet.js:11674
(anonymous function) @ index.html:121

See stefanocudini/leaflet-search#139

Hi,

I have set the default iconAnchor and rotate my marker, but the rotatedMarker plugin, didn't take my iconAnchor, it took the default one defined by the Leaflet.

As soon as dragging begins the icon is rendered without the set rotationAngle.

Edit: I quickly created this jsfiddle to demonstrate