[CWM] Centre map position to marker on click (marker or result)

DigitalCommons / mykomap-monolith

A web application for mapping initiatives in the Solidarity Economy

0 stars 0 forks source link

Open lin-d-hop opened 2 days ago

lin-d-hop commented 2 days ago

There is currently no animation that moves the centre of the map to last point the user has clicked on.

This results in some odd behaviour:

When you click on a search result, the map does not move to centre there. The pop up does open, but if it is off screen you dont see it
When the marker you click on is toward the edge of the screen the popup appears partially off screen and you have to navigate to it.

From Marcel in Element: This is the flyTo capability we need when a result is clicked. https://maplibre.org/maplibre-gl-js/docs/examples/flyto/

[x] Clicking on a search result centres the map around the marker for that result.
[x] Clicking on a marker centres the map around that marker

ColmDC commented 1 day ago

Sounds right. @ms0ur1s Is the default Flyto behaviour to end up at the same zoom depth as at the start? Seems appropriate.

rogup commented 1 day ago

This is almost ready for QA, just need to fix for mobile tomorrow morning

ms0ur1s commented 1 day ago

This is almost ready for QA, just need to fix for mobile tomorrow morning

💪

lin-d-hop commented 1 day ago

@rogup This is looking amazing!! It makes such a big difference to the usability of the map. Amazing work!!!

ColmDC commented 1 day ago

Works nicely for me on deploy-2024-11-19-19-g90507c4, Firefox, Desktop, and my old Android, Firefox again.

lin-d-hop commented 1 day ago

Some issues on mobile - Fairphone 3 on Android/Chrome:

Centring is off centre. It aligns with the top. Happy to live with this.
When I move around the screen the popup jumps and makes navigating difficult. Not caused by this issue but mentioning for the first time here. @rogup have you experienced this? Shall I create a bug? In the image I simply moved the map a little and the popup jumped from image above to image below.

rogup commented 23 hours ago

@lin-d-hop

I made a rough algorithm using chatgpt to calculate the marker offset from the centre in order to display the popup fully on the screen, but it isn't perfect (since difference in latitude has a different translation to absolute distance depending on where in the world you are). I think this issue is due to this. We could improve this algorithm in the future though, by feeding in more points to fit the curve.
When you move the map, MapLibre automatically moves the popup to try to keep it on-screen. To solve this issue, we could close popups when the user moves the map?

lin-d-hop commented 22 hours ago

Thanks @rogup

Happy to leave 1 as is. Nice use of chatgpt 💪
How hard would this be on mobile only? Its fine on desktop but space is so tight on mobile.

lin-d-hop commented 22 hours ago

How hard would this be on mobile only? Its fine on desktop but space is so tight on mobile.

Actually I think this would make sense on mobile and desktop. I'll make an issue