Map: Move GPS button from top rows onto map for better usability

[fancyham]

Overview

Currently, the GPS button is next to the address field which is a pretty non-standard place nowadays, and we suspect users don't know it’s there. Let's move the button onto the map itself, similar to Apple Maps and Google Maps.

Something like this:

Action Items

• Devs investigate if we can move button onto map, let designers know
• Designers specify both location and icon for GPS button, and what to do with the address bar row once the existing button goes away.
• Devs implement

Resources/Instructions

• I noticed that MapBox's sample maps has this — hopefully it's easy for us to do.

[fancyham]

Being addressed in UI refresh

• Visual refresh/redesign of public Food Oasis UI #1874

[fancyham]

Related to this issue:

• Add missing 'use my current location'/GPS button on mobile screen #2187

This option is preferred so if the GPS button can be moved onto the map (beware mobile's resizable text field!) do so.

But if this will take a while, do #2187 ASAP since it's completely missing right now from the live site.

[whitneywind]

@fancyham Right now the new geolocate button isn't visible on mobile, because the top row filter buttons take up too much space. This causes the map to be too large, so the geolocate button is off-screen. Since the top row filter buttons' size are an issue on mobile, how does design propose we solve it? By making them smaller? Changing the text displayed on them? Once I know how to approach that problem, it will solve this issue too!

[fancyham]

Thanks -- sounds like you're confirming we can probably do it :)

Hmmm… the location on mobile… that's a good question.

Thinking out loud here: Could to at the top of the map instead, on a row below the filters and at the top-right… getting kinda crowded though. Maybe better to leave it where it is...

And on desktop, we could put it under the zoom buttons

[whitneywind]

@fancyham Yes, we can definitely do it! :) I actually already did it, but there are some kinks to iron out. We need to fix the map's mobile sizing problem first if we want the button to be anywhere on the right side. There doesn't seem to be an issue for that yet. For now, I can leave it at the top where it was in mobile if that works.
And for desktop, should it go under the zoom buttons or in the button right?

[whitneywind]

@fancyham Should the tooltip be the same even if it's on the map?

[fancyham]

It'd be nice if the tooltip were a little less tall than what you shared at the last meeting, but I think it's a good idea to have one, especially as people may not understand that icon.

Could you post a screenshot of the tooltip?

I recall an old issue where we wanted to add one, so curious what text we have now:

• Usability: change tooltip for GPS button to better describe its function #1206

[fancyham]

Also, please check how the tooltip works in mobile mode — iPads using mouse/trackpad will be using that soon — so we want to make sure tooltip still works

[whitneywind]

@fancyham Sure, I'll update the tooltip. The mobile version of the button isn't changing with the relocate, so on mobile sizes the tooltip is the same as it is was.

This is the current tooltip size before I make adjustments to it:

[fancyham]

Thank you. If tooltip can be less tall (on both or either mobile or desktop), that'd be great — it's looking a bit 'horsey' (big) — but can launch as-is it not easy to do. 👍

[whitneywind]

Sure, that's no problem. I'll push the edits up tonight.

[fancyham]

oh, I was working on a different issue and noticed a different style tool-tip… not sure if that’s useful for you but try hovering over the ‘tab’ that I’m talking about here:

• Bug: show/hide button for desktop text search results has unexpected behavior #2366