Serious Bug: Map - Mobile map pans incorrectly when viewing an organization

[fancyham]

VERY HIGH PRIORITY -- HOT FIX REQUESTED.

Progress

• Create partial-solution to get it mostly working again Reset zoom when flying to a new location #2229
• Push hot fix to public
• Create solution where map pans to new location without resetting zoom level (please assign @fancyham and @Shienny1 to PR to review)
• Push to public

(~Sept 15, 2024)
Re-creating this as a new issue per @hanapotski because the solution for

• Serious Bug: Map - Mobile map doesn’t update when viewing an organization #2028
  didn't seem to work -- the issue with the map panning to the wrong location still exists.

A hint for this: Part of the issue seems to be the map's zoom level. At default zoom, it's not a problem. Changing the zoom causes the problem.

Describe the bug

Serious bug:

When viewing a list of organizations, and tapping one to get details about it, the map does not update show or highlight the organization’s pin. Often the pin is way off-screen.

The map should re-center (ideally with a smooth scroll/pan) on the highlighted pin automatically, ideally showing both the user’s current location and the pin so that they can determine the relative location.

Steps to reproduce the issue

(if applicable, please specify platform (iOS, Android, Windows, Mac version) and brower)

1. Go to foodoasis.net
2. Enter a location to get a list of organizations
3. Scroll around the map, zoom in or zoom out
4. Tap an organization to view the organization detail page
5. Map does not update to show the organization’s pin.

See more videos at
-#2028

What's the expected result?

Map should re-center on the organization’s pin automatically, each time a new organization is viewed.

Ideally, the map smoothly pans to the new location, and ideally, the user’s current location / entered address is also visible on the map (though this may be difficult if the user has panned the map manually)

See Apple or Google maps or Yelp on mobile phones for example.

What's the actual result?

The organization’s pin may be highlighted, but is often off-screen with no indication for how to find the pin itself.

This is a regression — the previous version centered on highlighted pins properly.

Additional details / screenshot

A similar problem appears when searching from the map screen.

1. From landing page, enter an address. On desktop, map Pin appears in the wrong place but map pans correct place at first.
   

2. Do a search again from the map page and the map now re-centers in the wrong place, and the pin doesn’t move to the correct place.
   

ScreenRecording_07-19-2024.17-15-01_1.mp4

To it might have something to do with loading the page for the first time vs going to a new location

Device configuration

• Device: iPhone 13 mini
• OS version: 17.4
• Browser: Safari

Related issues

• Text panel obscures map and pin on mobile, off-center on desktop #2168
• Serious Bug: Map - Mobile map doesn’t update when viewing an organization #2028

When making your PR

Please assign @fancyham and @Shienny1 to PRs so we can review

[fancyham]

Hi - this is a clever fix for now and if we can push this as a hot-fix, that would be terrific!
@John Darragh That would help all of our users immediately.

Long-term, we should still figure it out a solution such that the zoom stays the same so that weird/frustrating things don't happen (for example, if you look at 0:16 on the video, clicking on a cluster of locations starts an unintended zoom, which prevents the user from clicking on other items in the cluster, because they've disappeared at the default zoom level). We should keep the map's zoom state what the user last chose when zipping between locations for this reason.

Also, side note: I noticed in the video that the first autocomplete entry is 90045 (when you typed 9... the first item was 90045)... I think that's a hint at why we keep jumping to 90045 if the user types in an address and hits return quickly (before autocomplete finishes) 🙂

• Bug: Sometimes the map shows incorrect area after typing a zipcode into search bar on landing page. #2186

What should I do since this is a partial solution? Re-open&put-back-in-queue? or recreate? (We shouldn't reset the zoom level when switching between locations - leads to issues with accessing close pins).

If I don't hear back in a few days, I'll re-open, re-tag with 'ready for dev lead' and put it in the prioritized backlog (as there may be other higher priority items)

[fancyham]

hanapotski: ” I guess in this case, it’s fine to re-open 👌👀”

Reopening! Please do push the interim fix to public as hot-fix ASAP, and next step get it to work while keeping the zoom level.

[fancyham]

In #2236, we were discussing how we might zoom the map as the viewport expanded or shrunk (because the text layer size was being adjusted).

I found an example of the ‘automatically zoom to keep what you were looking at on-screen even as you change the viewport’ idea we were discussing above inside Uber’s app.

Putting it here for future reference

It looks tricky to implement but quite useful — in this case, a trip to an airport — so it keeps that full route on-screen by shrinking or expanding it as needed, meaning that I’m comforted in knowing that Uber hasn’t forgotten the route I’ve been working on.

(imagine what it’d fee like if the map didn’t zoom… people trust what they can see, so if something important goes off-screen, that can be a problem):

RPReplay_Final1728934051.mov