Geolocate watch position

[andrewharvey]

Not sure if this is a feature which is wanted or not. I saw #3008 which seems to rule out adding the a dot on the map for the users location, but people still use GL JS for mobile and native support to track a location is useful.

• briefly describe the changes in this PR
  Added on option to the Geolocate control to watch the position (ie. reposition the map as the user moves) using Geolocation watchPosition.

• write tests for all new functionality

• document any changes to public APIs

• post benchmark scores

• manually test the debug page
  Tested in Chrome and Firefox on Desktop and Mobile. (ps in Chrome Dev Tools, ... -> More Tools -> Sensors comes in handy)

I based this off #3738

TODO

• use a blue for the geolocate toggle which stands out more

[lucaswoj]

Not sure if this is a feature which is wanted or not. I saw #3008 which seems to rule out adding the a dot on the map for the users location, but people still use GL JS for mobile and native support to track a location is useful.

Apologies. My language in #3008 reflects a position a little stronger than what I currently feel. While implementing this feature wasn't a priority for the GL team, we're happy to accept a PR that implements it.

[lucaswoj]

For other reviewers' reference, this is what the "watching" and "not watching" icons look like.

use a blue for the geolocate toggle which stands out more

I think the current design looks good. Any thoughts @tristen?

[lucaswoj]

Would it be possible to eliminate the _watching flag and use _geolocationWatchID as the single source of truth about which state we're in?

[andrewharvey]

Good point. I've just changed it. The only caveat was that 0 seems to be a valid id (spec doesn't rule it out and Firefox Desktop seems to start at 0) so I need to explicitly check !== undefined.

[andrewharvey]

I've just added aria-pressed support.

I think the current design looks good. Any thoughts @tristen?

I think it works well too, it was more that when I was testing on mobile with the screen brightness turned down at night it was harder to distinguish between the two states.

The icon is duplicated in the stylesheet, I originally wanted to have just the black icon and use a CSS filter like this to change the color on toggle, but IE support for filter isn't present.

[tristen]

The blue is nice ... it's a shame we can't just change the fill color as a property value and I can see how it would be harder to distinguish between the two states.

I think we should represent this as a disabled state by dropping the opacity of the icon instead? That would save us from adding an encoded string in the stylesheet and make state more evident on dimly lit screens.

[andrewharvey]

I think we should represent this as a disabled state by dropping the opacity of the icon instead? That would save us from adding an encoded string in the stylesheet and make state more evident on dimly lit screens.

So there are two modes for this control. Is this what you're suggesting @tristen ?

1. watchPosition == false
   on page load
   

user clicks the button which takes the map to their location, the button has no state.

2. watchPosition == true
   on page load
   
   default state is off, user then toggles the button on to track location so state changes to on and becomes
   

I like the blue, it indicates that the control is actively watching the position. I think the one with opacity makes it look like the control is disabled and can't be clicked.

What about a tad lighter blue?

[tristen]

@andrewharvey I didn't fully read the proposed change. Right: dropping opacity would make this look disabled which we shouldn't do. No strong opinions here - I think a tad lighter blue makes sense.

---

This might be out of the realm of this PR but we should add these icon strings as url encoded svg like the others.

[andrewharvey]

@andrewharvey I didn't fully read the proposed change. Right: An opacity change would make this look disabled which we shouldn't do. No strong opinions here - I think a tad lighter blue makes sense.

@tristen No problem. I've changed the blue to #00f. Not sure if that's too bright now though.

This might be out of the realm of this PR but we should add these icon strings as url encoded svg like the others.

I agree, I've changed it over so they are all consistent and limits this premature optimization (at least you can change fill color in place).

[lucaswoj]

This looks great! Thank you so much @andrewharvey. ⭐️⭐️⭐️⭐️⭐️