Add Mapbox Zoom Controls to Map Page

[ryanfchase]

Overview

We need to add zoom controls to our map page to improve accessibility and make it clear when user has an NC selected.

Overview

• Add zoom controls that modify Mapbox zoom level (see R1.1, R1.2)
  • implement enabled zoom controls (no NC selected)
  • implement disabled zoom control (NC is selected)
    • implement disabled mouse control
    • implement information popver: "Zoom features are disabled while locked into a neighborhood council..." (see figma)
• Establish hard stops on zoom levels for NC selected
  • Minimum zoom level: 9
  • Maximum zoom level: 15

Resources (R)

1. Design Hand-Off Materials
   1.1 design ticket: Improve Zoom Behavior on Map #1700
   1.2 comment with screenshot of figma notes
   1.3 Comment with screenshot of zoom controls (final)
   1.4 Figma Link
2. Mapbox Docs links
   2.1 Docs example of setting zoom levels
   2.2 Navigation Control Docs
   2.3 Custom styles for mapbox controls
3. UX Research's October '23 usability test
   3.1 Slide indicating users required a zoom in/out feature

PM Review Section

Screenshot before proposed changes

TODO: Screenshot after proposed changes

[insert screenshot here]

Resolved Dependency Info

Dependency (Resolved)

• Need to confirm with design team NC selected zoom behavior
  • don't disable zoom controls when NC is selected
  • prevent users from zooming too far out when NC is selected
• Need to establish zoom levels for NC selected
  • Minimum zoom level
  • Maximum zoom level

[ryanfchase]

This ticket is ready to be picked up

[ryanfchase]

Assigning this to @DrAcula27 based on conversation from earlier in the day.

@DrAcula27 please provide the following information:

• ETA
• availability for communications while working on the ticket.

Thank you!

[DrAcula27]

ETA: 10 September
Availability: weekdays after 2pm Pacific time

[DrAcula27]

Updated ETA: 17 September

• due to working on large issue for website team

Availability: weekdays after 2pm Pacific time

[DrAcula27]

Finally finished the large issue for the website team 🚀

• new ETA: end of the week

[DrAcula27]

@ryanfchase
As mentioned in the meeting tonight, I'd like to schedule a quick meetup with someone to walk through the codebase, so I can more easily tackle this issue.

Availability:

• Tomorrow (26 September 2024) from 0900 to 1200 Pacific Time
• Friday (27 September 2024) from 0900 to 1600 Pacific Time
• Next week:
  • Weekdays from 1400 to 1900 Pacific Time

[DrAcula27]

ETA: October 11 with a check-in on the 2nd via either GitHub or Slack.