V-Leaflet add-on and marker z-index

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.

There doesn’t seem to be a way to set the zIndexOffset for the LMarker directly in the add-on, but I found an example (https://github.com/mstahv/v-leaflet/blob/master/src/test/java/org/vaadin/addon/leaflet/demoandtestapp/ComponentsToNewLayerGroupOrdering.java) that showed how markers could be added to LLayerGroup’s, and the order the groups were added to the map would dictate which was on top. This worked well with LCircleMarker’s, but when I tried it with LMarker’s, it did not have the same effect.

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?

Thanks,
Alana
 

Hi,

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?

cheers,
matti
 

Hi Matti,

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?

Thanks,
Alana

Hi,

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.

cheers,
matti

Hi Matti,

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.

Thanks,
Alana

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?

cheers,
matti
 

Hi Matti,

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 leafletMarker1 = new LMarker(25.0806043,-77.3202626);
leafletMarker1.setIcon(new ThemeResource("icons/16/marker_scan.png"));
leafletMarker1.setIconSize(new Point(32, 37));
leafletMarker1.setTitle("Scan1");

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

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.

Thanks,
Alana
 

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.

cheers,
matti
 

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?

Thanks,
Alana

Days or weeks more than months.

cheers,
matti

Perfect, thanks Matti!

Hi friends,
It would be greatfull if anyone can suggest is there any method to know active layers in LMap.
(or)
any method to get weather the layer is active or not ? In LLayerGroup
here i have the methos like setActive(true); to set the layer active, But i did not find any method to get the active status of the added layer.

Thank you all

Hi Matti,

Just wondering if there was any update on when a new release that includes this change might be available?

Thanks!
Alana
 

Hi,

RC2 is now out, I could try to make the new build today:
http://leafletjs.com/2016/07/16/leaflet-1.0-rc2.html

There would also be the nice new Tooltip feature available, but I guess creating wrappers for that can wait.

cheers,
matti
 

A new version is now out!

Thanks Matti, got it!