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

[Shienny1]

severity 5/5
Near impossible to see location on map on mobile devices
Maps are centered as if text panel doesn’t exist leading to obscured or weird alignments. Map should center using its visible area, not the entire screen.

Problem:

On mobile, tapping a result to get details loads org detail view, but layout of split screen obscures map and pin, and pin is off-screen.

Desktop has a similar problem.

To reproduce the desktop version of this bug:

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

2. Do a search again from the map page and the map now re-centers in the wrong place.
   

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

User goal:

to get see the cross streets of the location indicated on the map so i tap on the icon

my expectation:

To zoom in to that specific location and see more information of the name and hours of operation (maybe covering maximum bottom half, and leave the upper half of the screen on the map showing the selected location zoomed in.

actual result:

80% screen covered by TEXT on location's information etc. Covering the map.
So I swipe down to open the window to map again.
BUT the map window has migrated to a different location, no where close to the selected location.

screenshots and video

Devlasite_Textpanel.on.Map.mov

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

possible solutions

make map larger - see figma designs - I believe it’s supposed to be 50% text at first? — Bryan

Ensure that with new split-screen view that pin is centered in map viewport at first load. This might mean calculating visible map and centering it as text panel is resized.

for example if text is 80% of screen, map is remaining 20% and pin should be at approx 10%.

Ideally the selected pin and the user’s location are both visible on the map at the same time. This will give them a sense of location relative to where they are now.

Stretch goal: if pin is centered, then keep it centered as user resizes text panel.

related issues

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

[fancyham]

Changed title, added some text, added formatting (using markdown https://github.com/adam-p/markdown-here/wiki/Markdown-Cheatsheet) and inserted the screenshot and video into the issue itself (better for easy reference - drag and drop or attach those media files). Also tagged it for devs to look at.

[fancyham]

Related issue

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

[fancyham]

The map seems to center itself as if the text panel is at its smallest size — and with the current public and dev versions, the text panel is maximized, completely covering the highlighted pins.

The map it seems to ignore the text panel’s existence — the map should instead calculate its visible area and center itself using that.

[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 the clip attached

FOLA-BUG_.PIN.issue.mp4

[fancyham]

@Shienny1 could you please add that comment to

• Serious Bug: Map - Mobile map doesn’t update when viewing an organization #2028
• I think they’re still working on the weird map centering issue there.

I’ve reopened this issue so we don’t lose track of it but I believe it’s the same problem as that one.