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

• [ ] Ensure information is transferred to this ticket: #1793
• [ ] make a dev ticket to limit panning when selection mode is on

Resources

V1.2 Moderated Usability Test from October '23

• slide indicating users get confused when scrolling out too far while in selection mode

---

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

Iteration 4

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

Final Iteration

Link to notes: https://github.com/hackforla/311-data/issues/1700#issuecomment-2415394663 - Removed popup for disabled state - Added in hover states - Changed zoom button colors after adding in hover states for better visual design - Zoom levels to be set according to Mapbox guidelines: https://github.com/hackforla/311-data/issues/1700#issuecomment-2392515315 

---

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

```

Iteration X

Link to notes: `REPLACE WITH COMMENT URL` `REPLACE WITH SCREENSHOT UPLOAD`

```

Instructions for Engineering Hand Off

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

[Joy-Truex]

added "Research potential solutions" as an action step

[ryanfchase]

This ticket is ready for picking up @Joy-Truex @allisonjeon

[pogwon]

Iteration 1:

• 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

[ryanfchase]

@pogwon please provide Iteration 2 if available -- otherwise an ETA of when you will have it ready, thanks!

[pogwon]

Iteration 2:

• 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

[pogwon]

@ryanfchase For one of the designs for Iteration 2, we are exploring a change in cursor state to indicate that the zoom feature is disabled. Is this a realistic solution that the dev team can implement?

[ryanfchase]

@ryanfchase For one of the designs for Iteration 2, we are exploring a change in cursor state to indicate that the zoom feature is disabled. Is this a realistic solution that the dev team can implement?

@pogwon I think so, so long as we are provided the entire cursor (the pointer and the crossed out circle) as a single SVG or similar asset.

• Example in a sandbox from this SO post
• I'm going to ask for comment in our slack channel to confirm

[ryanfchase]

Adding labels and modifying board status while we wait for input @pogwon .I shall put everything back when this is addressed 😄

[aqandrew]

@pogwon I think the change in cursor state you're looking for is the CSS rule cursor: not-allowed (MDN):

https://github.com/hackforla/311-data/assets/9038965/f83360b2-04f1-400d-b6d1-6c05f4a015d8

This is a native/cross-platform solution that is a lot less work than replacing the cursor with an image asset.

I'm guessing that we would add these controls with Mapbox's NavigationControl. If that control doesn't give us the option to limit zoom + set the not-allowed cursor out of the box, then we can style the cursor with CSS based on mouseover events: https://github.com/mapbox/mapbox-gl-js/issues/1353#issuecomment-406748057

[ryanfchase]

@pogwon following up on @aqandrew's comment, I think we can move forward with cursor: not-allowed cursor state for this deliverable.

If this is sufficient, please move the ticket to "In Progress" or "In Review", thanks!

Edit: hit "comment" too fast...

[pogwon]

@ryanfchase Sounds good - thanks! Going to ask for feedback from the design team one more time at this week's meeting before deciding on the final design for handoff.

[pogwon]

ETA for Completion: Wednesday June 26, 2024.

[ryanfchase]

@pogwon I've moved this to In Progress since you've provided an ETA -- thanks!

[pogwon]

Third iteration with notes Link to Figma File

[pogwon]

Final designs with notes Link to Figma File

[pogwon]

This ticket is ready for engineering hand off. @ryanfchase

[ryanfchase]

Thank you @pogwon -- I'll get this converted to a dev ticket.

• ETA 6/30
• availability: 10-3p over the weekend

[ryanfchase]

@pogwon @annaseulgi Happy 1st day of July break! I mean to do this before break started, please review at your convenience. I'll add it to the 1st agenda of August so we don't forget.

In the PM Suggested Changes in the main issue, we noted the following...

[User] can't scroll out too far or scroll away too far while an NC is selected.

I also think that we should be establishing a minimum zoom level. Currently, regardless of NC selection, a user is allowed to scroll too far (e.g. a street corner will take up the entire screen) as well as zoom out too far (we can view the entire Earth as a globe in space).

Action Items

In order for me to fully consider this ticket closed, Designer will help confirm the following:

• [ ] Zoom controls when an NC is bound to the following...
  • [ ] Minimum zoom will frame the NC (e.g. the default zoom level when selecting an NC)
  • [ ] Maximum zoom will be the Site maximum zoom (see below)
• [ ] Site minimum zoom level will be at the "street-block level" (e.g. at most we can zoom in on a particular block)
• [ ] Site maximum zoom level will be the base zoom level that is present when the map is loaded

[ryanfchase]

TODO for dev lead

• [x] look at mapbox docs
  • [x] review zoom levels and convey them to design team (share links to the necessary docs)
  • [x] see if there are any more relevant docs
• [ ] maybe review material UI and make sure design and dev are on the same page

[ryanfchase]

@pogwon @Joy-Truex I'm still working on providing the Mapbox docs that will allow us to convey zoom levels and other map-styling info between design and dev team.

I did have a question about the location of the zoom controls. Typically the Privacy Policy modal takes up the bottom left corner of the screen on site-open. I notice that this is also the desired location of the zoom controls, as designed by @pogwon. While not perfect, I think this is fine -- but I just wanted to run it by you both in case you felt strongly about addressing this. I believe Bonnie says we should be encouraging users to deal with the Privacy Policy modal immediately, rather than let it remain open for the entirety of their session.

[ryanfchase]

@Joy-Truex @allisonjeon

I've been reviewing the Mapbox docs, and I just want to share a few highlights:

• the Mapbox website hosts a Glossary of map rendering terms (e.g. zoom level, zoom extent, tile pack, etc). As leads, I recommend bookmarking this page for reference in the future
• As far as zoom level, the Zoom Level glossary page on this is most useful. These are the two zoom levels I believe we should use:
  • max zoom (most granular): 18, which is a few higher than the "Buildings" visibility
  • min zoom (most zoomed out): 9, which is one less than the "Large roads" visibility
• as far as "framing the NC when selected", I believe these behaviors are useful:
  • prevent user from zooming out beyond framed NC (e.g. zoom out button is disabled)
  • prevent user from panning the map beyond the framed NC (note: I actually don't think there is any useful UI feedback for this, input welcome).

Resources

Some links I used to compile these notes:

• dev example of setting zoom levels: https://docs.mapbox.com/mapbox-gl-js/example/navigation/
• dev example of limiting pan area: https://docs.mapbox.com/mapbox-gl-js/example/restrict-bounds/
• some example code I used in a codebox:

Mapbox JS for setting max/min zoom level

```js mapboxgl.accessToken = 'pk.eyJ1IjoicnlhbmNoYXNlIiwiYSI6ImNsN2pvbG8wMTAwOHczeHFuYWNqbDJhaG4ifQ.BEyTQiMJSHPJX7uHLAGzCg'; const map = new mapboxgl.Map({ container: 'map', // container ID // Choose from Mapbox's core styles, or make your own style with Mapbox Studio style: 'mapbox://styles/mapbox/streets-v12', // style URL // center: [-74.5, 40], // starting position center: [-118, 34], zoom: 9, // starting zoom, maxZoom: 15, minZoom: 9 }); // Add zoom and rotation controls to the map. map.addControl(new mapboxgl.NavigationControl()); ```

[pogwon]

@pogwon @Joy-Truex I'm still working on providing the Mapbox docs that will allow us to convey zoom levels and other map-styling info between design and dev team.

I did have a question about the location of the zoom controls. Typically the Privacy Policy modal takes up the bottom left corner of the screen on site-open. I notice that this is also the desired location of the zoom controls, as designed by @pogwon. While not perfect, I think this is fine -- but I just wanted to run it by you both in case you felt strongly about addressing this. I believe Bonnie says we should be encouraging users to deal with the Privacy Policy modal immediately, rather than let it remain open for the entirety of their session.

@ryanfchase Thanks for letting me know - I'm personally leaning towards keeping it as is, since you mentioned Bonnie's thoughts about dealing with the privacy policy modal. But I'll ask the design team this week what they think about "locking" a control behind the modal and provide updates.

[ryanfchase]

Just wanted to share the conversation from Wednesday (8/28/2024). It sounds like we are moving forward with leaving the navigation controls in the bottom left corner as per the spec. We are fine with it being obscured by the Privacy Policy modal since it will be dismissed by the user.

I still think I want to review the mapbox documentation and styling capabilities with dev + design teams (I have outlined above). We can make time for that at an upcoming meeting.

[ryanfchase]

@Joy-Truex @pogwon I actually think we can nearly sign off on this ticket -- I do have one feedback request. In the final frame on @pogwon's hand off screenshot, the pop-up says:

Zoom features are disabled while locked into a neighborhood council.

To enable zoom features, please exit by clicking out of the selected area.

Requested Changes

• I actually do not want to completely limit zoom controls. I think we should simply limit zooming-out (which may require an alteration of the design to only disable half the zoom control)

Any thoughts on removing the pop-up text completely? Especially if we are planning on a "reset all" button in the search & filters modal? I'll add this to our upcoming Wednesday agenda to ensure there is time to discuss this.

[pogwon]

Sorry, I was out sick for last week's meeting. I don't have a problem with removing the pop-up text completely. But a potential issue that may arise is displaying only one available option within our current designs could be confusing for users (SS shows how it would look if Zoom in is available but Zoom out is disabled)

This probably won't be an issue if users mainly use the scroll wheel or pinching to zoom but it could be confusing if they rely on the zoom buttons. There are some new potential button designs I am considering that I can have ready by the end of this week (Friday, September 20) that may look clearer when only one option is enabled.

[pogwon]

@ryanfchase @Joy-Truex Here are two potential updated designs for the zoom buttons, along with disabled states (for zoom-in and out):

I am leaning towards the above design as it is more consistent with other maps' designs (Google, Yelp, Airbnb, etc.) but will also ask for feedback in our UI/UX Slack channel.

[ryanfchase]

@pogwon thank you! Yeah I think upper design is what I'm leaning towards as well. I think it's easier to distinguish the disabled state. But interested to hear what the others think.

[pogwon]

Looking at feedback, the general consensus was that the top (lighter) design would fit better. There was one suggestion that maybe it can switch back and forth depending on if the map changes from dark to light. I'm not sure if this can be implemented but I think we can discuss it at this week's meeting and make a final decision to move forward.

[pogwon]

After some research into other map behaviors, there are very few examples where zoom buttons change as the map color changes. I think it would be best to move forward with just the lighter designs. I can prepare those for handoff along with different states (disabled, active, hover) and link the Figma file here.

@ryanfchase Should the zoom levels we reviewed from the MapBox docs be included in there as well?

[ryanfchase]

After some research into other map behaviors, there are very few examples where zoom buttons change as the map color changes. I think it would be best to move forward with just the lighter designs. I can prepare those for handoff along with different states (disabled, active, hover) and link the Figma file here.

@ryanfchase Should the zoom levels we reviewed from the MapBox docs be included in there as well?

Let's just focus on the lighter design, the different states, and any on-hover info boxes that pop up. I have been able to communicate the zoom levels to the devs -- unless you're comfortable identifying and demonstrating zoom levels with the map.

Otherwise, we can stick to communicating it as the following:

• Max zoom when NC is selected
• Min zoom when NC is selected
• Min zoom when no NC is selected
• (there is no max zoom when no NC is selected... I don't see a need for this, but open to discussion)

If anything is still unclear, please reach out on Slack and we can come to an agreement.

cc @DrAcula27

[pogwon]

After designing the hover states, there are a few different options. I just want to get some feedback from the design team at tonight's meeting and will post/submit final designs for handoff afterwards.

[pogwon]

Finalized zoom icons are in the handoff section of the Figma file. As noted, hover states only apply when zoom function is enabled.

[ryanfchase]

Hi @Joy-Truex @allisonjeon, has this work been reviewed and approved? Please leave a comment if so, PMs will have a brief look before officially handing this off to dev.

[Joy-Truex]

Hi @Joy-Truex @allisonjeon, has this work been reviewed and approved? Please leave a comment if so, PMs will have a brief look before officially handing this off to dev.

Reviewed and approved. TY!!