bbecquet / leaflet.rotatedmarker Goto Github PK
View Code? Open in Web Editor NEWLeaflet plugin to enable the rotation of map marker icons
License: MIT License
Leaflet plugin to enable the rotation of map marker icons
License: MIT License
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.
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 ?
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
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
As soon as dragging begins the icon is rendered without the set rotationAngle.
Edit: I quickly created this jsfiddle to demonstrate
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 was testing it and apparently it stopped working with new Leaflet versions?
Tested on 1.9.3.
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/
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.
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?
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).
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.
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
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?
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?
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
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
Hello, how can I use it in Vue2?
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?
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.
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.
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.
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.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.