Show circle of accuracy uncertainty on map (live location)

[bengtan]

From https://github.com/hippware/collaboration/issues/16#issuecomment-600237334 and various other comments in the same thread:

Here are the mocks for this:
https://zpl.io/258reNn
https://zpl.io/aRdPomg
I think the accuracy bubble should only appear when the user is zoomed in close enough to see it (similar to Google Maps)

There are also a few other minor tweaks (See https://zpl.io/Vk0nrWW for reference):

Remove the ring and bottom arrow on the avatar
Center the avatar instead of on the bottom point of the arrow
Reduce the size of the avatar
Remove the bottom arrow for user portraits on the header

I would also like to add:

• The shaded circle is not shown if accuracy range <= 30m.

(Does anyone want to suggest a different value?)

Also ... the mocks are currently work-in-progress. There may be some more changes to the mocks before implementation of this ticket can proceed.

[bengtan]

@irfirl:

Center the avatar instead of on the bottom point of the arrow

I'm not entirely convinced about this.

Having a 'bottom point' allows the user to see the exact location of the pin on the map.

Whereas ... centering the avatar prevents the users from seeing the exact location precisely.

For example, if a (watched) user was at a crossroads intersection ... having a 'bottom point' allows the (watching) user to see which corner of the intersection, whereas a centered avatar does not.

[aksonov]

For example, if a (watched) user was at a crossroads intersection ... having a 'bottom point' allows the (watching) user to see which corner of the intersection, whereas a centered avatar does not.

I agree

[irfirl]

The problem with the bottom point is that it would look odd because it is centered on the bottom if we are to have the accuracy bubble under it. (See https://zpl.io/bWEgqjk) Google maps also have it as a circle instead of a point so that it's centered in the middle. You can also argue that if you just zoom in a bit you could see the exact location as well with the circle.

cc @thescurry

[bengtan]

For example, if a (watched) user was at a crossroads intersection ... having a 'bottom point' allows the (watching) user to see which corner of the intersection, whereas a centered avatar does not.

I said this.

The problem with the bottom point is that it would look odd because it is centered on the bottom if we are to have the accuracy bubble under it.

This has merit too.

So ... thinking about it a bit more ...

Presuming this ...

• The shaded circle is not shown if accuracy range <= N. (Suggest N=30m)
  • (This is not a new thing. I previously suggested it above.)

How about this as a compromise?

• If accuracy range <= N, then:
  • Show a 'bottom point'
  • Don't show circle
• If accuracy range > N, then:
  • Don't show a 'bottom point'
  • Show a circle. Avatar is centered in circle

Rationale:

Ideally, we want to show with a bottom point all the time. Ideally, the data points are always accurate. Data points which are accurate should be shown with a bottom point.

However, things are not ideal. Sometimes the data points are not accurate. In this case, showing a bottom point is less useful, and possibly even misleading. Hence, for inaccurate data points, let's just center the avatar in the circle because, well, the bottom point is not accurate anyway so let's omit it.

(How this interacts with: 'I think the accuracy bubble should only appear when the user is zoomed in close enough to see it (similar to Google Maps)' ... is something to think about afterwards.)

This proposition would reconcile both arguments for/against a bottom point. Sometimes the avatar is shown with a bottom point. Sometimes it's shown with a shaded circle. Never both.

And now ... I hope the developers don't mind me for complicating the requirements :)

[bengtan]

OTOH ...

You can also argue that if you just zoom in a bit you could see the exact location as well with the circle.

I just tested how far I can zoom in and ... Yeah, it is possible to zoom in far enough that a (small-ish) circle can indicate exact location just as well as a 'bottom point'.