hackforla
Improve Zoom Behavior on Map
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
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
<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...
- Ensure all Hand Off Materials are filled in
- Add the "ready for dev lead" label
- Leave a comment saying "This ticket is ready for engineering hand off."
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
@pogwon please provide Iteration 2 if available -- otherwise an ETA of when you will have it ready, thanks!
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
@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 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.
Adding labels and modifying board status while we wait for input @pogwon .I shall put everything back when this is addressed 😄
@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
@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...
@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 I've moved this to In Progress since you've provided an ETA -- thanks!
Thank you @pogwon -- I'll get this converted to a dev ticket.
- ETA 6/30
- availability: 10-3p over the weekend
@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
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
@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.
@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
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 @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.
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.
@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.