Description:
In the ExploreScreen of the LRDA Mobile app, a map displays pins that represent different notes. Currently, when multiple pins are located near the same area, clicking on one pin can unexpectedly navigate to other nearby pins and display different notes in the horizontal scrollbar below, resulting in a confusing user experience.

To enhance usability, update the map behavior as follows:

• When there are multiple overlapping pins in a zoomed-out view, clicking on one should automatically zoom into that cluster of pins.
• After zooming in, users should be able to select a specific pin, which will then fetch and display the note associated with that pin.

Tasks:

• Review the current map behavior in ExploreScreen.
• Implement clustering for pins that are close together when in a zoomed-out view:
  • When a cluster of pins is clicked, the map should zoom into the region to display the individual pins.
  • Ensure individual pins are selectable once zoomed in.
• Update the functionality so that clicking on a specific pin fetches and displays the correct note in the horizontal scrollbar.
• Write test cases to validate that:
  • Clusters zoom in correctly when clicked.
  • Each pin, when selected, retrieves and displays the correct note information.
• Test across different screen sizes and device orientations to confirm expected behavior.

Acceptance Criteria:

• When multiple pins are close together in a zoomed-out view, clicking on the cluster zooms into that region, revealing individual pins.
• Selecting a specific pin fetches and displays the correct note in the horizontal scrollbar.
• The changes do not interfere with other map functionalities on ExploreScreen.
• The experience is consistent across both iOS and Android devices.
• All test cases pass, and the app runs smoothly post-modification.