Style state management in local storage

[JinIgarashi]

Currently, GeoHub uses svelte store to save LayerList and maplibre map object in the memory. If user move to another page from the map, their working data will be destroyed. It would be nice if we can store those states in local storage and restore them when they come back to map editor.

local storage keys

• layer-list-{host name}
  • The key to store $layerList variable
• map-style-{host name}
  • The key to store style.json ($map.getStyle())
• map-style-id-{host name}
  • The key to store style ID from style query param

In map editor

• at LayerList.svelte

Store every change on $layerList and maplibre style to local storage

	const layerListStorageKey = `layer-list-${$page.url.host}`
	const mapStyleStorageKey = `map-style-${$page.url.host}`
	const initialLayerList: Layer[] | null = fromLocalStorage(layerListStorageKey, null);
	const initiaMapStyle: StyleSpecification | null = fromLocalStorage(mapStyleStorageKey, null)
	
	$: if ($map) {		
		layerList.subscribe((value) => {
			let storageValue = value ? value:initialLayerList && initialLayerList.length > 0 ? initialLayerList: null
			toLocalStorage(layerListStorageKey, storageValue)
		});

		$map?.on('styledata',() => {
			let storageValue = $map ? $map.getStyle(): initiaMapStyle??null
			toLocalStorage(mapStyleStorageKey, storageValue)
		});
	}

When the page is mounted

• there is style query param in URL
  • If style id in local storage is the same with style query param
    • If style.json on local storage is the same with style.json from database
      • restore map style from style.json from database
    • If style.json on local storage is different from style.json from database
      • Restore map style from style.json from local storage
  • if style id in local storage is different from query param, or no style id stored in local storage
    • restore styles from style.json saved in the database
    • save style id in local storage from query param
• no style query param in URL
  • always restore layer list and style from local storage if the variables are in local storage
  • delete style id from local storage
  • reset $layerList and map style if no layer list data in local storage

When user is leaving from map

Nothing to do?

When user share map

• Save new style id in local storage