Capture browse layer state in the URL #508
Conversation
There was a problem hiding this comment.
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.
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.
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
|
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