I have started using the V-Leaflet add-on in my project and am having trouble figuring out how to control which markers are on top when there is an overlap. I was hoping someone with a bit more experience might be able to suggest possible solutions or workarounds.
My setup is fairly basic – a single LTileLayer (OSM) with LMarker markers added to the map. I would like to be able to have 2 priorities for the markers, such that if the markers are overlapping, the one with higher priority is on top.
From what I can tell in leaflet.js, the marker zIndex is based on the marker’s latitude plus zIndexOffset, which has a default of 0.
Failing any easier obvious solutions that I am mising, is there some way I can modify a local copy of leaflet.js (to not use the latitude) and have the add-on use that version of the script?
Or, is it possible that the add-on will be updated at some point to make use of the L.Marker options “zIndexOffset”? I’m a little unsure how I would approach making this change myself – I gather it would also require editing the g-leaflet add-on?
The
zIndexOffset is indeed what you’d need. I guess both g-leaflet and v-leaflet needs to be changed a bit, but the changes should be quite simple. Whether you decided to try this your self or not, would you create an enhancement issue to the github project?
Thanks for the information. I haven’t worked with add-ons before, but if you think it’s a simple change, perhaps it would be worth giving it a try. I assume github requires a separate account from this one?
Yes, you’ll need an account to github. Then you can for the projects and play around with the changes. When ready, you can make a pull request for me to review.
Sounds good. I forked both g-leaflet and v-leaflet repositories and made the changes. They are quite small. I think I used the “New pull request” buttons properly to request a review, but please let me know if I haven’t done this correctly.
Big thanks Alana! The changes looked perfect to me. I’ll test them and build a new release at some point. I assue you verified the changes in your own project?
Great! Just curious, do you have a rough idea when a new release would be available?
Yes, I tested the changes in my own project. Here is a little code snippet that shows 2 markers that overlap at a particular zoom. Without the zIndexOffset, Scan1 is on top of Alert1.
LMarker leafletMarker2 = new LMarker(25.080986,-77.320837);
leafletMarker2.setIcon(new ThemeResource(“icons/16/marker_alert.png”));
leafletMarker2.setIconSize(new Point(32, 37));
leafletMarker2.setTitle(“Alert1”);
leafletMarker2.setZIndexOffset(1000); // ‘Alert1’ marker now on top of the ‘Scan1’ marker when overlapped
[/code]Should I have included something like this in one of the existing test classes? I ran my builds with the “-DskipTests” so didn’t actually make use of these.
Something like that could be helpful, but I can do that myself as well. The build and release takes about 10 minutes, it is more about testing stuff a bit. I’ll probably also update the LeafletJS library bundled with g-leaflet.
Sounds good! In the meantime I will keep my project pointing at the latest release version as I would prefer not to push my locally built version to our repository here. Do you think something might be available within a few weeks, or is it more in the months timeframe?