feat: (#1113) save map view state #1125
Conversation
|
@svkorepanov is attempting to deploy a commit to the openbeta-dev Team on Vercel. A member of the Team first needs to authorize it. |
|
Would it be possible to format the coordinates in the URL similar to the OSM example? Just so it's easier to read and to copy and paste. I think it's just the "/" vs "%2F" that is different. A comma might be even better. |
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
| } | ||
|
|
||
| const cameraInfoToQuery = ({ zoom, center }: CameraInfo): string => { | ||
| return `${Math.ceil(zoom)}/${center.lat.toPrecision(3)}/${center.lng.toPrecision(3)}` |
There was a problem hiding this comment.
- For latitude/longitude can you preserve at least 5 decimal places?
https://en.wikipedia.org/wiki/Decimal_degrees#Precision - is it possible to keep the
/in the url?
There was a problem hiding this comment.
- Done
- It is not possible to do that using URLSearchParams, as it automaticaly encodes special characters.
I probably can prevent that by manually construction the parameter. However, it takes off any benefits that URLSearchParams gives.
Therefore, I believe it will be more beneficial to use URLSearchParams and put up with percent encoded (%2f) symbols in the url.
But if you're ok with keeping '/' slash in the url, you can check out the changes that I made
src/components/maps/GlobalMap.tsx
Outdated
| @@ -121,6 +144,7 @@ export const GlobalMap: React.FC<GlobalMapProps> = ({ | |||
| onDragStart={() => { | |||
| setCursor('move') | |||
| }} | |||
| onRender={onRender} | |||
There was a problem hiding this comment.
I often see onMove() (instead of onRender) used to track current view state. Would it work here?
https://visgl.github.io/react-map-gl/docs/get-started/state-management#controlled-map
There was a problem hiding this comment.
Oh, thank you. I was incorrectly reading documentation for mapbox and missed the fact that you're using maplibre.
Fixed ✅
@musoke Thank you for the comment. I managed to format slash "/" without being percent encoded. Also gave my opinion on that here |
|
Updated footage
|
| setInitialZoom(initialStateFromUrl.zoom) | ||
| return | ||
| } | ||
|
|
||
| getVisitorLocation().then((visitorLocation) => { | ||
| if (visitorLocation != null) { | ||
| setInitialCenter([visitorLocation.longitude, visitorLocation.latitude]) |
There was a problem hiding this comment.
Preview build: https://open-tacos-git-fork-d-k-lippert-feat-save-map-url-openbeta-dev.vercel.app/maps
In the preview build deployed on Vercel.com, visitorLocation will be non-null. I'm getting 'camera=1/0.00000/0.00000' and the map is no longer initialized to my approximate location. Perhaps adding a check 'when initialStateFromUrl == null and visitorLocation != null then set URL param to visitorLocation?
|
@all-contributors add @svkorepanov for code |
|
I've put up a pull request to add @svkorepanov! 🎉 |
name: Pull request
about: Create a pull request
title: ''
labels: ''
assignees: ''
What type of PR is this?(check all applicable)
Description
This pull request addresses #1113, where we want to create a shareable link that we can communicate zoom level and lat long center values.
Related Issues
Issue #1113
What this PR achieves
Screenshots, recordings
Notes