matrix rotation feature request
bluelemonade opened this issue · 10 comments
Hi,
I am using the vue-leaflet implementationfor a few month, and I love it!
I got one problem with the vue map when I rotate a div which hold the map.
example: https://codepen.io/fillthegap/pen/XWNQPOM
is there a way to transform the event data before the map is moved? would be great to have a plugin for this problem.
Hi @bluelemonade , thanks for the feedback! I take it based on your question that the problem is that when you drag the mouse, the map moves in the opposite direction, is that correct?
The vue-leaflet libraries provide very little of their own mapping functionality, as they are intended to be wrappers that allow the underlying Leaflet map to work easily in a Vue application. Unfortunately, it looks as if the Leaflet team have officially said that working with a rotated map is beyond the scope of the library: Leaflet/Leaflet#268.
That doesn't mean that there isn't or can't be a Leaflet plugin to accomplish this, though I couldn't find one with a cursory search. If you do find or build a plugin that accomplishes this, then we'd be happy to accept a PR to add it to the official list, but it is safe to say that this is likely also out of scope for vue-leaflet as well.
hi, thank you very much for your quick reply.
are there other engines that have this feature integrated? for me this feature is essential. ok I can put some arraw buttons on the map an move the map with this simple work around, but that's not intuitiv like it should be.
i'm not a js guru now but i thought it wouldn't be a problem to put a transformation in between before moving the map. the problem does not occur when zooming into the map.
A quick search returned this stackoverflow answer, which recommends Mapbox and OpenLayers, but I've never used the first and haven't worked with the second in three major versions so can't help much more than that with them here, sorry.
As for adding a matrix transformation into Leaflet's event handlers, you'll have to see what comes of your discussion with them. The good news is, if they do add that feature (or accept a PR implementing it) then it should simply automatically start working in Vue2Leaflet as soon as the Leaflet peer dependency is updated. The bad news is, they seem to have shot down the idea several times over the last decade...
I think openlayer allows to rotate the map, but not to rotate a parent element. therefore the API should have an external rotation parameter. perhaps I have a look on the mapbox.
on the other side I looked into the map class, and I think it‘s should be easy to pass the rotation to the map an do the transformation in the panTo method.
thanks for your information.
Ah I see, so having all of the map controls rotate is also part of your use case. That seems like even more of an edge case to me than wanting to point north somewhere other than up, but I agree that it sounds as if it should also be simpler to accomplish. Good luck with getting it into Leaflet, or a plugin!
I have no experience in programming node_modules, I come from a completely different direction.
if i make a copy of the leaflet project in github and enter the changes there, how can i link it in the vue leaflet? do I have to create a branch for this?
or should I move the leaflet module into my src folder and make the changes there, how does vue-leaflet find out about it?
The quick and dirty approach is to edit the files in your project's node_modules/leaflet/src, however this has significant disadvantages if you're looking to do more than just play around locally. Specifically, it means updating to any future versions of Leaflet will overwrite your changes, and those changes won't be shared with anywhere else that your project repo exists.
I think—without having tested this myself—what you may want to do instead would be something along the lines of forking both Leaflet and Vue2Leaflet. Then clone your own fork of Leaflet locally, make any changes you want, and push them. At that point in your own cloned fork of Vue2Leaflet, you should be able to
npm uninstall --save-dev leaflet
npm install --save-dev https://github.com/bluelemonade/leafletand push those changes. Finally, in your own project, similarly run
npm un -D vue2-leaflet
npm i -D https://github.com/bluelemonade/Vue2LeafletAt that point, your project will hopefully be working correctly with your custom versions, which you can keep up to date going forward by pulling changes from upstream, and which will install for anyone/anywhere else working with your repo.
I tried patch-package to make a patch file from my edits in the dist folder. works great to patch the leaflet module after installing. for this project it should work. single installation in an exhibition.
That looks like a great utility, that I wasn't aware of. It doesn't come up all that often, but when it does I'll try to keep patch-package in mind. Thanks for reporting back with what worked!
nothing to thanks for, I owe you for your great work!
, I have discovered the tool these days, I have not been developing with javascript frameworks for that long, so far more in as3 / vvvv/ c # / directx , but I am totally flashed by the possibilities with html / css / js.
I canceled the leaflet map movement transformation, could get really dirty to transform these events, just inserted a few buttons.