Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Fixes #197 : Improve Pin Clustering and Selection on ExploreScreen
The goal of this PR is to enhance the functionality of the map on the ExploreScreen by introducing clustering behavior for pins and improving the usability of selecting individual pins. When multiple pins overlap due to being in close proximity, they now form a cluster, which the user can click to zoom into. Once zoomed in, individual pins can be selected, and their associated notes are displayed correctly in the horizontal scrollbar.
Why Was It Changed?
Previously, users experienced confusion when trying to interact with pins that overlapped on the map. Clicking on one pin could result in navigating to a different pin or just taking it to the ocean, displaying incorrect notes in the scrollbar. This made it difficult to explore notes effectively in the map.
By implementing clustering and improving pin selection behavior, the map becomes more intuitive and user-friendly, ensuring users can focus on their ethnographic work without navigation issues.
How Was It Changed?
Clustering Behavior:
Pin Selection:
Code Updates:
haversineDistance
function to calculate proximity between pins.onMarkerPress
to handle clustering and selection logic.MapView
settings to animate zooming into clusters and ensure individual pin selection works seamlessly.Styling Enhancements:
clusterMarker
style for clustered pins.Test Cases:
While the idea and functionality seems to be able to work and theoretically works, I was able to update some of the functionality, but I added a little more and started coming across the same issues, attached below. I am creating this PR after trying 3 different methods to solve this problem and spending many hours, but I hope to show any additions and changes that I make to this code as soon as possible and can completely solve it.