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

• Video recording (drag in)

Device configuration

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

[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 :)

https://github.com/hackforla/food-oasis/assets/3376957/b0198e69-a47f-4c6e-a896-7d58698ad55b

[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

  • 2065

  • 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:

• 2168

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