search

yagajs / leaflet-ng2

Angular.io integration of Leaflet
https://leaflet-ng2.yagajs.org
ISC License
66 stars 26 forks source link

Placing a marker in the highest visible position. #320

Closed Prashanth-Thomas closed 6 years ago

Prashanth-Thomas commented 6 years ago

This is again a question.

Lets say i have a cluster of markers. With zoom level of about 16 these markers look separated. But with a zoom level of 10 the markers seem to overlap. I have a selected marker in another color which should be shown above all the other markers in the map.

How would i go about doing this?

Any help would be great. Thanks in advance :)

atd-schubert commented 6 years ago

I think you can realize it with a zIndexOffset option. This is not implemented into leaflet-ng2, now. I will create an issue for that...

Prashanth-Thomas commented 6 years ago

@atd-schubert so has this been added in the latest build?

atd-schubert commented 6 years ago

It is included into the "develop" branch, but it has not been released on NPM so far.

Prashanth-Thomas commented 6 years ago

A quick question, consider i have 10 markers placed exactly on top of each other and i want one of them(may be in a more prominent color) to be placed on the top, with the highest zIndex value. Would zIndexOffeset be the solution?? As far as what i read there is a difference between setting the css zIndex and the zIndexOffset.

atd-schubert commented 6 years ago

You do not set the actual zIndex in the classical CSS way of a marker. Leaflet calculates a value for the zIndex according to the pixels on the y-axis on your map. So all markers with the same latitude will have the same zIndex (as long as they have no zIndexOffset, of course).

For example you have a map with a height of 100px. If you have 100 markers (one on every pixel on the y-axis) every marker will get another zIndex automatically. Note that it will not depend on the latitude directly, but the y-axis will depends from the latitude! If you now want a marker to be always on top, you can give it a zIndexOffset of at least 101. If you take a zIndexOffset of 10 your marker will be on top of markers that are 10px more in the north, but when the marker is 11px more in the north, this marker will be on top. In real life it also depends on the height of your marker. Of course a marker with a height of 20px can not be (visual) on top to a marker that is 21px in the north. They will not intersect!

The Idea is that a marker in the north will be on top of a marker in the south. For that Leaflet always recalculates the zIndex value for every marker while you zoom-in and -out or pan the map. A fixed value will not make so much sense, because when you pan you map to the south or drag a marker to the north the zIndex value will raise for the marker.

If you want to have a marker always on top and you do not know the height of your makers and map you can give the marker a "much to heigh" value for the zIndexOffset. For example 100000, because your map will not have a height of 100000px.

In my opinion the zIndexOffset value is the best possible way to apply the change you want, because you can not determine easily the resulting zIndex of a marker, but you can determine a value you have to add on the zIndex to be on top in comparison to the others. You should take the height of the tallest icon as zIndexOffset. Otherwise the map-height, otherwise a "much to heigh" value...