-
Notifications
You must be signed in to change notification settings - Fork 4
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
Capture browse layer state in the URL #508
Conversation
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.
Example of a nice and simple change
let show = false; | ||
let opacity = 50; | ||
let pollutant = "PM25_viridis"; | ||
type State = { |
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.
Example of a more complex change. Any layer with more controls beyond show/hide has something like this. It's verbose, but I don't think it can really be much less code than this, without trying to encode as some very awkward JSON strings.
let param = new URLSearchParams(window.location.search).get(name); | ||
let initialValue = param == null ? defaultValue : parse(param); | ||
let store = writable(initialValue); | ||
// TODO How do we avoid leaking this? |
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.
In prod, this won't be a problem -- each layer component is created only once, so there'll only be one store for the lifetime of the app. In dev mode with HMR, this will leak memory, because I couldn't figure out a clean way to call unsubscribe / teardown the stores. We could add onDestroy handlers to every single component I guess, but seems like overkill for a dev-mode mostly-invisible problem
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.
Very cool feature! I didn't fully understand the memory leak but if it only exists for dev users if you don't refresh for ages I think that's absolutely fine
Thanks for the review
|
Demo: https://acteng.github.io/atip/browse_layer_urls/browse.html?style=dataviz&crossings=1&stats19=other%2F2019%2F2022&road_noise=1#5.69/53.021/-1.825
This syncs up the state of browse layers with URL query parameters. This makes URLs much more reproducible/shareable, and is a step towards linking directly to the browse page (or embedding in an iframe?) from route check.
Note:
layers=x,y,z
) because some layers have more details