Serious Bug: Map - Mobile map doesn’t update when viewing an organization

[fancyham]

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, zoom out
4. Tap an organization to view the organization detail page
5. Map does not update to show the organization’s pin.

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

[fancyham]

Hi @hanapotski , just checked out the devla site today and there's something weird happening:

When I tap on an org pin, the pin smooth-scrolls off the screen! Very smooth, but kinda weird :)

Screen.Recording.2024-04-03.at.3.13.18.PM.mov

[hanapotski]

Thanks 🙏 This is a known bug. Qiqi's looking into it 👌

[danvgar]

Still working on this, but adding notes here for future me and future team:

• I suspect related to
  • Serious Bug: GPS button doesn’t re-center on current location #2065
  • Fix flyTo on mobile #2110
• Issue seems to reproduce after adjusting map scale (aka zooming in/out). Locations are centered at first, but changing scale adds offsets to lat-long coordinates each time. Similar for clicking locations from side panel vs from map itself (Desktop)
• Issue only shows up when side panel is open. (Desktop)

[danvgar]

I believe issue is at L119 of ResultsMap.js and L96 of Desktop.js

In Desktop.js, the width of the Mapbox viewport is always 100% of the device width. Opening or closing the List Panel does not affect this, as the List Panel is in the z-index above the Mapbox viewport. (See images above)

In ResultsMap.js, the center is offset by a constant lat/long value based on whether the List Panel is open. However, these constants are only accurate for the default zoom, and won't be entirely accurate if the zoom level is changed.

  const onClick = (e) => {
    mapRef.current?.flyTo({
      center: [
        isListPanelOpen && !isMobile ? e.lngLat.lng - 0.08 : e.lngLat.lng,
        isMobile ? e.lngLat.lat - 0.03 : e.lngLat.lat,
      ],
      duration: 2000,
    });
    // . . .
  };

Two potential solutions:

1. Adjust the Desktop.js layout so that the mapbox width is adjusted when the List Panel is open, and remove the long/lat offsets.
2. Change the offsets from a constant to a linear equation, so that the offsets adjust based on the zoom level. This would take some experimenting or research to figure out the exact equation. (e.g. lat = lat - 0.08 * zoom / 11)

[fancyham]

The same issue appears on mobile - and it’s trickier since the map viewport can change when the text panel resizes:

• Text panel obscures map and pin on mobile, off-center on desktop #2168

the above issue is very serious as it makes the mobile site very unusable

[hanapotski]

closing this as this was fixed in this PR

[fancyham]

Hi folks -- thanks for tackling this!

I just QAed at devla.foodoasis.net -- could you check on these two issues? (I'm reopening this so it grabs your attention but let me know if there's something else we should do for QA stuff)

• On screens 500-800px wide, the map pin isn't centered properly -- it's off to the right
• On mobile screens, the pin still gets cut off? Seems like it's not recalculating the visible map size, but is expecting the text panel to be at 50% -- but that's not always the case and I think the org details appear at about ~75% of the screen, so map pin is obscured.

Screen.Recording.2024-08-05.at.7.22.20.PM.720p.mov

[hanapotski]

Not sure if it's a normal behavior for a user to resize the window 🤔

[fancyham]

It doesn’t require resizing - that’s just to show the issues at different sizes, and the working one at desktop size. Try it out with browsers at those sizes - iPad portrait and a smartphone

[Shienny1]

Hi Guys. I checked the devla.foodoasis.net site : this is what I am experiencing still: The icons are nonresponsive at times. And they are still NOT CENTERED in the selected location in the mobile version. Please see the clip attached:

FOLA-BUG_.PIN.issue.mp4

[fancyham]

This issue seems like a subset of

• Text panel obscures map and pin on mobile, off-center on desktop #2168

Please look at both — it’s likely the solution fixes both bugs.

This is high priority because the site is very unusable and buggy when the map goes off in unexpected directions! Hot-fix asap, please!

[hanapotski]

Hi 👋 we are aware of the unresponsive icons bug, we have a ticket for it. Someone's already taking a look at it 👍

[hanapotski]

Still working on this, but adding notes here for future me and future team:

• I suspect related to

  • Serious Bug: GPS button doesn’t re-center on current location #2065
  • Fix flyTo on mobile #2110

• Issue seems to reproduce after adjusting map scale (aka zooming in/out). Locations are centered at first, but changing scale adds offsets to lat-long coordinates each time. Similar for clicking locations from side panel vs from map itself (Desktop)

• Issue only shows up when side panel is open. (Desktop)

just saw this. I think we should add a separate ticket for this as this needs more research/experimenting