Add style URL to the hash

src/App.svelte

@@ -5,7 +5,6 @@
     validate,
   } from '@mapbox/mapbox-gl-style-spec';
   import { migrate as migrateMaplibre } from '@maplibre/maplibre-gl-style-spec';
-  import { onMount } from 'svelte';
   import Fa from 'svelte-fa/src/fa.svelte';
   import { faTrash, faDownload } from '@fortawesome/free-solid-svg-icons';
   import { Circle } from 'svelte-loading-spinners';
@@ -32,6 +31,8 @@
   export let style;
   export let loadDefaultStyle = false;
 
+  let url;
+
   let isLoading;
   let loadingProgress;
   loadingStore.subscribe(value => {
@@ -44,18 +45,26 @@
     expandedLayers = value.layers;
   });
 
-  onMount(() => {
+  const initializeVarsFromHash = () => {
     const query = readQuery();
     if (query.selectedTab) {
       selectedTab = query.selectedTab;
     } else {
       selectedTab = 'fill';
     }
 
+    if (query.url) {
+      url = decodeURIComponent(query.url);
+    }
+
     if (loadDefaultStyle) {
       loadStyleUrl('./style.json');
     }
-  });
+  };
+
+  // Update variables before mount from hash so
+  // onMount works as expected in downstream components
+  initializeVarsFromHash();
 
   const setExpandedLayers = style => {
     const { layers } = style;
@@ -77,6 +86,7 @@
   function getState() {
     let state = {};
     if (selectedTab) state.selectedTab = selectedTab;
+    if (url) state.url = url;
     return state;
   }
 
@@ -106,7 +116,7 @@
     e.preventDefault();
   }
 
-  function setStyle(nextStyle) {
+  function setStyle(nextStyle, nextUrl) {
     // try to migrate w/ Mapbox, then try with MapLibre if that fails
     try {
       style = migrateMapbox(nextStyle);
@@ -120,6 +130,8 @@
     }
 
     style = convertStylesheetToRgb(style);
+    url = nextUrl;
+
     // On dropping in a style, switch to the fill tab to refresh background layer state
     handleTabChange({ detail: { tab: 'fill' } });
   }
@@ -134,6 +146,7 @@
 
   function clearStyle() {
     style = undefined;
+    url = undefined;
     displayLayersStore.set(displayLayersStoreInitialState);
     svgStore.set(svgStoreInitialState);
   }
@@ -171,12 +184,16 @@
   }
 
   const handleCustomUrl = e => {
-    let { style: nextStyle } = e.detail;
+    let { style: nextStyle, url: nextUrl } = e.detail;
     if (stylesEqual(style, nextStyle)) return;
-    setStyle(nextStyle);
+    setStyle(nextStyle, nextUrl);
   };
 
-  $: styleStore.set(style);
+  $: styleStore.set({ url, style });
+
+  $: if (url) {
+    updateQuery();
+  }
 </script>
 
 <main
@@ -208,6 +225,7 @@
         <CustomUrlInput
           on:styleload={handleCustomUrl}
           activeStyle={style}
+          activeUrl={url}
           disabled={isLoading && loadingProgress !== null}
         />
       </div>

src/CustomUrlInput.svelte

@@ -1,13 +1,14 @@
 <script>
-  import { onDestroy, onMount, createEventDispatcher } from 'svelte';
+  import { onDestroy, createEventDispatcher, onMount } from 'svelte';
   import { fetchUrl } from './fetch-url';
   import { shortcut } from './shortcut';
   import { stylesEqual } from './styles/styles-equal';
-  import { mapboxGlAccessTokenStore } from './stores';
+  import { mapboxGlAccessTokenStore, styleStore } from './stores';
 
   const dispatch = createEventDispatcher();
 
   export let activeStyle;
+  export let activeUrl;
   export let disabled = false;
 
   let currentStyle;
@@ -26,6 +27,13 @@
     allowPolling = false;
   });
 
+  onMount(() => {
+    if (activeUrl) {
+      selectedUrl = activeUrl;
+      fetchStyle(activeUrl);
+    }
+  });
+
   // This will continue to poll/fetch the style at a local URL to allow live changes to be picked up
   const poll = url => {
     const pollCondition = str => {
@@ -52,9 +60,10 @@
       if (data && typeof data === 'object') {
         // TODO create checks by type for non-mapbox maps
         style = data;
+
         poll(url);
         currentStyle = style;
-        dispatch('styleload', { style });
+        dispatch('styleload', { style, url });
         return { status: '200' };
       }
     } catch (err) {
@@ -66,7 +75,7 @@
   const setMapboxToken = url => {
     const tokenRegex = /pk.([\w.]+)/g;
     let nextToken = url.split('access_token').pop();
-    nextToken = nextToken.match(tokenRegex)[0];
+    nextToken = nextToken.match(tokenRegex)?.[0];
     if ($mapboxGlAccessTokenStore === nextToken) return;
     mapboxGlAccessTokenStore.set(nextToken);
   };
@@ -77,7 +86,6 @@
     if (status === '200') {
       selectedUrl = url;
       setMapboxToken(url);
-      // Call poll after setting selectedUrl on success
       poll(url);
     }
   };

src/RendererSelect.svelte

@@ -12,7 +12,7 @@
   let style;
   let errors = [];
 
-  styleStore.subscribe(value => (style = value));
+  styleStore.subscribe(value => ({ style } = value));
 
   const getBetterErrorMessages = errors => {
     return errors.map(error => {

src/stores.js

@@ -1,6 +1,6 @@
 import { writable } from 'svelte/store';
 
-export const styleStore = writable(null);
+export const styleStore = writable({ style: null, url: null });
 
 export const propertyValueComboLimitStore = writable(10);