search

pinballmap / pbm-react

PBM React Native: iOS & Android Apps
https://pinballmap.com/app
GNU General Public License v3.0
33 stars 9 forks source link

Z-Index of map markers #515

Closed RyanTG closed 10 months ago

RyanTG commented 1 year ago

This gets asked sorta often: "can the places with more machines be on top of the places with fewer". I don't know what determines the z-indexes of the markers, but I assume it's related to the location IDs or something.

Not sure if it's possible to manage this. Or even if we want to! But noting it here as a thing to consider and look into.

RyanTG commented 1 year ago

This seems to be achievable using symbol-z-order but only when using "layers" for the symbols. Since we aren't using layers, we can't manage this.

Closing for now.

RyanTG commented 1 year ago

Re-opening since I think we should not give up so easily. People keep asking for it.

Notes: There is a symbolSortKey prop, and it apparently does work for PointAnnotation. However, it's only listed in the mapbox ios and android-specific docs. I can't get it to work.

I also tried using numMachines as a PointAnnotation ID and as the key. And also tried adding zIndex to the IosMarker.

Not saying I did all that right. But so far no success. I'm not sure what is currently determining the order of these markers. I read in one place that it might simply be a "top left to bottom right" strategy.

ErikGraciosa commented 11 months ago

Hello! Another weird thing that happens at more zoomed out levels is that the selected location will sometimes go to the back and hide. It gets more weird when there is a location with double digit machines and a bigger marker. The bigger marker will entirely hide the selected location when the selected location goes to the back. If the bigger markers are brought to the front they could entirely hide the smaller ones. Zooming in does make the problem go away but at initial zoom big locations could obscure the smaller ones entirely. Android screen shot(showing selected sent to back) image Android screenshot (showing ship ahoy 4, cbar 15, cbar would hide ship ahoy entirely at default zoom) image

ErikGraciosa commented 11 months ago

Maybe a clustering approach? https://ux.stackexchange.com/questions/112280/how-to-deal-when-two-or-more-markers-in-a-map-are-super-close

RyanTG commented 11 months ago

I agree that there is a UX risk in moving the "bigger" marks to always be above smaller ones (though we did implement this on the website recently since it was a trivial change and we wanted to try it out). People keep asking for this, but that doesn't mean it's clear that it's a good idea.

After creating a simple reproducible example map and testing to see what property will manage the order of Point Annotations (such as id, key, zIndex, symbolSortKey) it became clear that none of them work. It looks like symbolSortKey is in the mapbox API for Point Annotations, but it hasn't been exposed in the rnmapbox library that we use. I created a bug/feature request here.

So yeah, it would be nice if the selected marker was on top, but that isn't currently possible. The solutions are to either await a fix in rnmapbox, or switch from displaying markers using Point Annotation (which is a simpler yet somewhat deprecated method) to using the new symbol layer method (which in our case seems quite a bit more involved, since - for one - it needs geojson as an input, so we would have to convert our API outputs from json to geojson.

Regarding clusters. We have thought about clusters, but personally I'm far from convinced that this is a good solution. I have yet to encounter a map that uses clusters and isn't a UX nightmare. Open to it - but not convinced yet. I think it might be especially confusing in our case because we are already showing numbers on our markers, and clustered markers also have numbers. So we would have to make it really clear which markers are clusters and which are regular markers, and - this is the big one - make it so that it's not a huge hassle/mystery to "expand" the clustered markers.

RyanTG commented 11 months ago

While working on another issue, we made a branch that uses shapesource/circlelayer/symbollayer to render markers rather than PointAnnotations. https://github.com/pinballmap/pbm-react/tree/symbol

With this method, it is possible to control the order of markers (not enacted yet on that branch, but I did so on a standalone simple app).

Will likely eventually move to this method, though it will take some work.