Improve Zoom Behavior on Map

[ryanfchase]

Overview

We need to clarify the user's zoom controls, esp when selecting an NC so that they don't get confused when zooming in/out.

Suggested Change from PMs

• We want to add a zoom control so that users can click on (+) to zoom in, and (-) to zoom out. Zooming in and out via scrolling should keep the same behavior (this is possibly just a note for dev).
• We want to "lock-in" the zoom level when user selects an NC, so that they can't scroll out too far or scroll away too far while an NC is selected. We can emphasize the "lock-in" by disabling the zoom-out control when an NC is selected

Action Items

• [x] Address the problem overview with possible design solution(s) in a comment
• [x] Research potential solutions
• [x] Complete Design Iterations section below
• [x] Document user interaction in Figma

PM Action Item

• [ ] #1793

---

Design Iterations

Please move ticket between In Progress and In Review to assist PM team

Iteration 1

Link to notes: https://github.com/hackforla/311-data/issues/1700#issuecomment-2138382290

• Added zoom in & out controls
• Suggested a "locked in" zoom level when a NC is selected
• Added indication that zooming is disabled by making the controls disappear when NC is selected
• Received feedback from design team for iteration 2

Iteration 2

Link to notes: https://github.com/hackforla/311-data/issues/1700#issuecomment-2168920133

• Changed colors of the zoom buttons for better accessibility
• Explored a popover feature that explicitly describes disabled status and how to enable zooming
• Exploring a change in the cursor to indicate a disabled status

Iteration 3

Link to notes: https://github.com/hackforla/311-data/issues/1700#issuecomment-2192835113

• Finalized cursor states after feedback
• Changed colors of popover for better consistency with design system

Final Iteration

Link to notes: https://github.com/hackforla/311-data/issues/1700#issuecomment-2193702141

• Modified design to make it a tooltip instead of popover
• Changed the position where tooltip would appear

---

Hand Off Materials

Figma Section Name: ⭐⭐⭐ Handoff

Before Screenshot

No NC Selected (no zoom controls present)

With NC Selected (no zoom controls present)

After Screenshot (Finalized)

Designer Resources

Iteration Dropdown Copy/Paste

<details><summary>Iteration X</summary>
<p>

Link to notes: `REPLACE WITH COMMENT URL`

`REPLACE WITH SCREENSHOT UPLOAD`

</p>
</details> 

Instructions for Engineering Hand Off

To Start Engineering Hand Off...

1. Ensure all Hand Off Materials are filled in
2. Add the "ready for dev lead" label
3. Leave a comment saying "This ticket is ready for engineering hand off."