-
-
Notifications
You must be signed in to change notification settings - Fork 122
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
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.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
- 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.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
- 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.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
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.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
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 |
setInitialZoom(initialStateFromUrl.zoom) | ||
return | ||
} | ||
|
||
getVisitorLocation().then((visitorLocation) => { | ||
if (visitorLocation != null) { | ||
setInitialCenter([visitorLocation.longitude, visitorLocation.latitude]) |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
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?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Fixed ✅
@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