search

acteng / atip

Active Travel Infrastructure Platform
https://acteng.github.io/atip/
Apache License 2.0
22 stars 4 forks source link

Change basemap style without reloading the page. Closes #300 #351

Closed dabreegster closed 1 year ago

dabreegster commented 1 year ago

This adapts the work @stuartlynn recently added to svelte-maplibre to let us change MapLibre basemap without reloading the entire page. This is a much better UX to not lose current page state, and made even nicer with the new basemaps added or coming soon.

Demos: https://acteng.github.io/atip/swap_basemap/browse.html

https://github.com/acteng/atip/assets/1664407/14dafc4a-d9f0-4968-b157-831d7ee52470

https://github.com/acteng/atip/assets/1664407/5b401dca-b46b-4ba6-9140-bb2783a84245

CC @mem48 in case this helps with NPT

robinlovelace-ate commented 1 year ago

Looks good to me, but other layers still 'flicker', right?

stuartlynn commented 1 year ago

Looks good to me, but other layers still 'flicker', right?

Yeah not sure if there is a good way around this. The only way I think to prevent that is to not use maplibres setStyle method and instead fetch the style ourselves, remove the previous style layers and sources and then add the new styles while leaving the user defined ones intact. Though I am not even 100% that would fix the flicker.

Might be woth investigating though

robinlovelace-ate commented 1 year ago

Might be woth investigating though

Maybe although if you guys cannot fix it I have no idea who can. Core MapLibre.js developers? I know this issue has appeared in their issue tracker. However, could it be worth opening a new and more specific question with a reproducible example that shows the partial fix that flickers, pointing out that other basemap implementations, e.g. Leaflet and OpenLayers don't, as far as I'm aware.

Many thanks for great work on this, huge progress in load times and the layers flicker so fast that it's barely visible now so not super important just a niggle IMO. Interesting stuff and way above my head in terms of the programming behind it which seems magic to me!