From 1685ee68d4fd179e4a1b3200d7ec7f52dd382768 Mon Sep 17 00:00:00 2001
From: Eric Brelsford <ebrelsford@stamen.com>
Date: Fri, 17 Nov 2023 15:48:17 -0500
Subject: [PATCH] Add stateful urls (#24)

---
 vacs-map-app/package-lock.json          | 257 ++++++++++++++++++++++++
 vacs-map-app/package.json               |   1 +
 vacs-map-app/src/MapExplorer.vue        |  11 +-
 vacs-map-app/src/main.js                |   4 +
 vacs-map-app/src/store-plugins/query.js |  70 +++++++
 vacs-map-app/src/stores/cropYields.js   |   2 +
 vacs-map-app/src/stores/filters.js      |   8 +-
 vacs-map-app/src/stores/mapExplore.js   |   7 +
 8 files changed, 357 insertions(+), 3 deletions(-)
 create mode 100644 vacs-map-app/src/store-plugins/query.js
 create mode 100644 vacs-map-app/src/stores/mapExplore.js

diff --git a/vacs-map-app/package-lock.json b/vacs-map-app/package-lock.json
index e7eb58d..c7093a5 100644
--- a/vacs-map-app/package-lock.json
+++ b/vacs-map-app/package-lock.json
@@ -14,6 +14,7 @@
         "d3": "^7.8.5",
         "mapbox-gl": "^2.15.0",
         "pinia": "^2.1.7",
+        "qs": "^6.11.2",
         "vue": "^3.3.4",
         "vue-router": "^4.2.5"
       },
@@ -985,6 +986,19 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/call-bind": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/call-bind/-/call-bind-1.0.5.tgz",
+      "integrity": "sha512-C3nQxfFZxFRVoJoGKKI8y3MOEo129NQ+FgQ08iye+Mk4zNZZGdjfs06bVTr+DBSlA66Q2VEcMki/cUCP4SercQ==",
+      "dependencies": {
+        "function-bind": "^1.1.2",
+        "get-intrinsic": "^1.2.1",
+        "set-function-length": "^1.1.1"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
     "node_modules/callsites": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/callsites/-/callsites-3.1.0.tgz",
@@ -1524,6 +1538,19 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/define-data-property": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/define-data-property/-/define-data-property-1.1.1.tgz",
+      "integrity": "sha512-E7uGkTzkk1d0ByLeSc6ZsFS79Axg+m1P/VsgYsxHgiuc3tFSj+MjMIwe90FC4lOAZzNBdY7kkO2P2wKdsQ1vgQ==",
+      "dependencies": {
+        "get-intrinsic": "^1.2.1",
+        "gopd": "^1.0.1",
+        "has-property-descriptors": "^1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
     "node_modules/define-lazy-prop": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/define-lazy-prop/-/define-lazy-prop-3.0.0.tgz",
@@ -2008,11 +2035,33 @@
         "node": "^8.16.0 || ^10.6.0 || >=11.0.0"
       }
     },
+    "node_modules/function-bind": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.2.tgz",
+      "integrity": "sha512-7XHNxH7qX9xG5mIwxkhumTox/MIRNcOgDrxWsMt2pAr23WHp6MrRlN7FBSFpCpr+oVO0F744iUgR82nJMfG2SA==",
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
     "node_modules/geojson-vt": {
       "version": "3.2.1",
       "resolved": "https://registry.npmjs.org/geojson-vt/-/geojson-vt-3.2.1.tgz",
       "integrity": "sha512-EvGQQi/zPrDA6zr6BnJD/YhwAkBP8nnJ9emh3EnHQKVMfg/MRVtPbMYdgVy/IaEmn4UfagD2a6fafPDL5hbtwg=="
     },
+    "node_modules/get-intrinsic": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.2.2.tgz",
+      "integrity": "sha512-0gSo4ml/0j98Y3lngkFEot/zhiCeWsbYIlZ+uZOVgzLyLaUw7wxUL+nCTP0XJvJg1AXulJRI3UJi8GsbDuxdGA==",
+      "dependencies": {
+        "function-bind": "^1.1.2",
+        "has-proto": "^1.0.1",
+        "has-symbols": "^1.0.3",
+        "hasown": "^2.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
     "node_modules/get-stream": {
       "version": "6.0.1",
       "resolved": "https://registry.npmjs.org/get-stream/-/get-stream-6.0.1.tgz",
@@ -2076,6 +2125,17 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/gopd": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/gopd/-/gopd-1.0.1.tgz",
+      "integrity": "sha512-d65bNlIadxvpb/A2abVdlqKqV563juRnZ1Wtk6s1sIR8uNsXR70xqIzVqxVf1eTqDunwT2MkczEeaezCKTZhwA==",
+      "dependencies": {
+        "get-intrinsic": "^1.1.3"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
     "node_modules/graphemer": {
       "version": "1.4.0",
       "resolved": "https://registry.npmjs.org/graphemer/-/graphemer-1.4.0.tgz",
@@ -2096,6 +2156,50 @@
         "node": ">=8"
       }
     },
+    "node_modules/has-property-descriptors": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/has-property-descriptors/-/has-property-descriptors-1.0.1.tgz",
+      "integrity": "sha512-VsX8eaIewvas0xnvinAe9bw4WfIeODpGYikiWYLH+dma0Jw6KHYqWiWfhQlgOVK8D6PvjubK5Uc4P0iIhIcNVg==",
+      "dependencies": {
+        "get-intrinsic": "^1.2.2"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/has-proto": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/has-proto/-/has-proto-1.0.1.tgz",
+      "integrity": "sha512-7qE+iP+O+bgF9clE5+UoBFzE65mlBiVj3tKCrlNQ0Ogwm0BjpT/gK4SlLYDMybDh5I3TCTKnPPa0oMG7JDYrhg==",
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/has-symbols": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/has-symbols/-/has-symbols-1.0.3.tgz",
+      "integrity": "sha512-l3LCuF6MgDNwTDKkdYGEihYjt5pRPbEg46rtlmnSPlUbgmB8LOIrKJbYYFBSbnPaJexMKtiPO8hmeRjRz2Td+A==",
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/hasown": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/hasown/-/hasown-2.0.0.tgz",
+      "integrity": "sha512-vUptKVTpIJhcczKBbgnS+RtcuYMB8+oNzPK2/Hp3hanz8JmpATdmmgLgSaadVREkDm+e2giHwY3ZRkyjSIDDFA==",
+      "dependencies": {
+        "function-bind": "^1.1.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
     "node_modules/human-signals": {
       "version": "4.3.1",
       "resolved": "https://registry.npmjs.org/human-signals/-/human-signals-4.3.1.tgz",
@@ -2592,6 +2696,14 @@
         "url": "https://github.com/fb55/nth-check?sponsor=1"
       }
     },
+    "node_modules/object-inspect": {
+      "version": "1.13.1",
+      "resolved": "https://registry.npmjs.org/object-inspect/-/object-inspect-1.13.1.tgz",
+      "integrity": "sha512-5qoj1RUiKOMsCCNLV1CBiPYE10sziTsnmNxkAI/rZhiD63CF7IqdFGC/XzjWjpSgLf0LxXX3bDFIh0E18f6UhQ==",
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
     "node_modules/once": {
       "version": "1.4.0",
       "resolved": "https://registry.npmjs.org/once/-/once-1.4.0.tgz",
@@ -2899,6 +3011,20 @@
         "node": ">=6"
       }
     },
+    "node_modules/qs": {
+      "version": "6.11.2",
+      "resolved": "https://registry.npmjs.org/qs/-/qs-6.11.2.tgz",
+      "integrity": "sha512-tDNIz22aBzCDxLtVH++VnTfzxlfeK5CbqohpSqpJgj1Wg/cQbStNAz3NuqCs5vV+pjBsK4x4pN9HlVh7rcYRiA==",
+      "dependencies": {
+        "side-channel": "^1.0.4"
+      },
+      "engines": {
+        "node": ">=0.6"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
     "node_modules/queue-microtask": {
       "version": "1.2.3",
       "resolved": "https://registry.npmjs.org/queue-microtask/-/queue-microtask-1.2.3.tgz",
@@ -3139,6 +3265,20 @@
         "node": ">=10"
       }
     },
+    "node_modules/set-function-length": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/set-function-length/-/set-function-length-1.1.1.tgz",
+      "integrity": "sha512-VoaqjbBJKiWtg4yRcKBQ7g7wnGnLV3M8oLvVWwOk2PdYY6PEFegR1vezXR0tw6fZGF9csVakIRjrJiy2veSBFQ==",
+      "dependencies": {
+        "define-data-property": "^1.1.1",
+        "get-intrinsic": "^1.2.1",
+        "gopd": "^1.0.1",
+        "has-property-descriptors": "^1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
     "node_modules/shebang-command": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz",
@@ -3160,6 +3300,19 @@
         "node": ">=8"
       }
     },
+    "node_modules/side-channel": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/side-channel/-/side-channel-1.0.4.tgz",
+      "integrity": "sha512-q5XPytqFEIKHkGdiMIrY10mvLRvnQh42/+GoBlFW3b2LXLE2xxJpZFdm94we0BaoV3RwJyGqg5wS7epxTv0Zvw==",
+      "dependencies": {
+        "call-bind": "^1.0.0",
+        "get-intrinsic": "^1.0.2",
+        "object-inspect": "^1.9.0"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
     "node_modules/signal-exit": {
       "version": "3.0.7",
       "resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-3.0.7.tgz",
@@ -4135,6 +4288,16 @@
         "run-applescript": "^5.0.0"
       }
     },
+    "call-bind": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/call-bind/-/call-bind-1.0.5.tgz",
+      "integrity": "sha512-C3nQxfFZxFRVoJoGKKI8y3MOEo129NQ+FgQ08iye+Mk4zNZZGdjfs06bVTr+DBSlA66Q2VEcMki/cUCP4SercQ==",
+      "requires": {
+        "function-bind": "^1.1.2",
+        "get-intrinsic": "^1.2.1",
+        "set-function-length": "^1.1.1"
+      }
+    },
     "callsites": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/callsites/-/callsites-3.1.0.tgz",
@@ -4509,6 +4672,16 @@
         "untildify": "^4.0.0"
       }
     },
+    "define-data-property": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/define-data-property/-/define-data-property-1.1.1.tgz",
+      "integrity": "sha512-E7uGkTzkk1d0ByLeSc6ZsFS79Axg+m1P/VsgYsxHgiuc3tFSj+MjMIwe90FC4lOAZzNBdY7kkO2P2wKdsQ1vgQ==",
+      "requires": {
+        "get-intrinsic": "^1.2.1",
+        "gopd": "^1.0.1",
+        "has-property-descriptors": "^1.0.0"
+      }
+    },
     "define-lazy-prop": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/define-lazy-prop/-/define-lazy-prop-3.0.0.tgz",
@@ -4860,11 +5033,27 @@
       "dev": true,
       "optional": true
     },
+    "function-bind": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.2.tgz",
+      "integrity": "sha512-7XHNxH7qX9xG5mIwxkhumTox/MIRNcOgDrxWsMt2pAr23WHp6MrRlN7FBSFpCpr+oVO0F744iUgR82nJMfG2SA=="
+    },
     "geojson-vt": {
       "version": "3.2.1",
       "resolved": "https://registry.npmjs.org/geojson-vt/-/geojson-vt-3.2.1.tgz",
       "integrity": "sha512-EvGQQi/zPrDA6zr6BnJD/YhwAkBP8nnJ9emh3EnHQKVMfg/MRVtPbMYdgVy/IaEmn4UfagD2a6fafPDL5hbtwg=="
     },
+    "get-intrinsic": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.2.2.tgz",
+      "integrity": "sha512-0gSo4ml/0j98Y3lngkFEot/zhiCeWsbYIlZ+uZOVgzLyLaUw7wxUL+nCTP0XJvJg1AXulJRI3UJi8GsbDuxdGA==",
+      "requires": {
+        "function-bind": "^1.1.2",
+        "has-proto": "^1.0.1",
+        "has-symbols": "^1.0.3",
+        "hasown": "^2.0.0"
+      }
+    },
     "get-stream": {
       "version": "6.0.1",
       "resolved": "https://registry.npmjs.org/get-stream/-/get-stream-6.0.1.tgz",
@@ -4907,6 +5096,14 @@
         "type-fest": "^0.20.2"
       }
     },
+    "gopd": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/gopd/-/gopd-1.0.1.tgz",
+      "integrity": "sha512-d65bNlIadxvpb/A2abVdlqKqV563juRnZ1Wtk6s1sIR8uNsXR70xqIzVqxVf1eTqDunwT2MkczEeaezCKTZhwA==",
+      "requires": {
+        "get-intrinsic": "^1.1.3"
+      }
+    },
     "graphemer": {
       "version": "1.4.0",
       "resolved": "https://registry.npmjs.org/graphemer/-/graphemer-1.4.0.tgz",
@@ -4924,6 +5121,32 @@
       "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
       "dev": true
     },
+    "has-property-descriptors": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/has-property-descriptors/-/has-property-descriptors-1.0.1.tgz",
+      "integrity": "sha512-VsX8eaIewvas0xnvinAe9bw4WfIeODpGYikiWYLH+dma0Jw6KHYqWiWfhQlgOVK8D6PvjubK5Uc4P0iIhIcNVg==",
+      "requires": {
+        "get-intrinsic": "^1.2.2"
+      }
+    },
+    "has-proto": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/has-proto/-/has-proto-1.0.1.tgz",
+      "integrity": "sha512-7qE+iP+O+bgF9clE5+UoBFzE65mlBiVj3tKCrlNQ0Ogwm0BjpT/gK4SlLYDMybDh5I3TCTKnPPa0oMG7JDYrhg=="
+    },
+    "has-symbols": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/has-symbols/-/has-symbols-1.0.3.tgz",
+      "integrity": "sha512-l3LCuF6MgDNwTDKkdYGEihYjt5pRPbEg46rtlmnSPlUbgmB8LOIrKJbYYFBSbnPaJexMKtiPO8hmeRjRz2Td+A=="
+    },
+    "hasown": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/hasown/-/hasown-2.0.0.tgz",
+      "integrity": "sha512-vUptKVTpIJhcczKBbgnS+RtcuYMB8+oNzPK2/Hp3hanz8JmpATdmmgLgSaadVREkDm+e2giHwY3ZRkyjSIDDFA==",
+      "requires": {
+        "function-bind": "^1.1.2"
+      }
+    },
     "human-signals": {
       "version": "4.3.1",
       "resolved": "https://registry.npmjs.org/human-signals/-/human-signals-4.3.1.tgz",
@@ -5275,6 +5498,11 @@
         "boolbase": "^1.0.0"
       }
     },
+    "object-inspect": {
+      "version": "1.13.1",
+      "resolved": "https://registry.npmjs.org/object-inspect/-/object-inspect-1.13.1.tgz",
+      "integrity": "sha512-5qoj1RUiKOMsCCNLV1CBiPYE10sziTsnmNxkAI/rZhiD63CF7IqdFGC/XzjWjpSgLf0LxXX3bDFIh0E18f6UhQ=="
+    },
     "once": {
       "version": "1.4.0",
       "resolved": "https://registry.npmjs.org/once/-/once-1.4.0.tgz",
@@ -5463,6 +5691,14 @@
       "integrity": "sha512-rRV+zQD8tVFys26lAGR9WUuS4iUAngJScM+ZRSKtvl5tKeZ2t5bvdNFdNHBW9FWR4guGHlgmsZ1G7BSm2wTbuA==",
       "dev": true
     },
+    "qs": {
+      "version": "6.11.2",
+      "resolved": "https://registry.npmjs.org/qs/-/qs-6.11.2.tgz",
+      "integrity": "sha512-tDNIz22aBzCDxLtVH++VnTfzxlfeK5CbqohpSqpJgj1Wg/cQbStNAz3NuqCs5vV+pjBsK4x4pN9HlVh7rcYRiA==",
+      "requires": {
+        "side-channel": "^1.0.4"
+      }
+    },
     "queue-microtask": {
       "version": "1.2.3",
       "resolved": "https://registry.npmjs.org/queue-microtask/-/queue-microtask-1.2.3.tgz",
@@ -5615,6 +5851,17 @@
         "lru-cache": "^6.0.0"
       }
     },
+    "set-function-length": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/set-function-length/-/set-function-length-1.1.1.tgz",
+      "integrity": "sha512-VoaqjbBJKiWtg4yRcKBQ7g7wnGnLV3M8oLvVWwOk2PdYY6PEFegR1vezXR0tw6fZGF9csVakIRjrJiy2veSBFQ==",
+      "requires": {
+        "define-data-property": "^1.1.1",
+        "get-intrinsic": "^1.2.1",
+        "gopd": "^1.0.1",
+        "has-property-descriptors": "^1.0.0"
+      }
+    },
     "shebang-command": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz",
@@ -5630,6 +5877,16 @@
       "integrity": "sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==",
       "dev": true
     },
+    "side-channel": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/side-channel/-/side-channel-1.0.4.tgz",
+      "integrity": "sha512-q5XPytqFEIKHkGdiMIrY10mvLRvnQh42/+GoBlFW3b2LXLE2xxJpZFdm94we0BaoV3RwJyGqg5wS7epxTv0Zvw==",
+      "requires": {
+        "call-bind": "^1.0.0",
+        "get-intrinsic": "^1.0.2",
+        "object-inspect": "^1.9.0"
+      }
+    },
     "signal-exit": {
       "version": "3.0.7",
       "resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-3.0.7.tgz",
diff --git a/vacs-map-app/package.json b/vacs-map-app/package.json
index 1a3ff3d..5f8d72b 100644
--- a/vacs-map-app/package.json
+++ b/vacs-map-app/package.json
@@ -17,6 +17,7 @@
     "d3": "^7.8.5",
     "mapbox-gl": "^2.15.0",
     "pinia": "^2.1.7",
+    "qs": "^6.11.2",
     "vue": "^3.3.4",
     "vue-router": "^4.2.5"
   },
diff --git a/vacs-map-app/src/MapExplorer.vue b/vacs-map-app/src/MapExplorer.vue
index 9ae714c..778b530 100644
--- a/vacs-map-app/src/MapExplorer.vue
+++ b/vacs-map-app/src/MapExplorer.vue
@@ -12,12 +12,14 @@
 
 <script setup>
 import { computed, ref } from 'vue';
+import { storeToRefs } from 'pinia';
 import MapContainerColor from '@/components/MapContainerColor.vue';
 import MapContainerColorRadius from '@/components/MapContainerColorRadius.vue';
 import MapContainerNotFilled from '@/components/MapContainerNotFilled.vue';
 import MapContainerNotFilledTwoLayers from '@/components/MapContainerNotFilledTwoLayers.vue';
 import MapContainerColorAfricanUnion from '@/components/MapContainerColorAfricanUnion.vue';
 import Filters from '@/components/Filters.vue';
+import { useMapExploreStore } from '@/stores/mapExplore';
 
 const availableMaps = [
   {
@@ -46,7 +48,14 @@ const availableMaps = [
     component: MapContainerColorAfricanUnion,
   },
 ];
-const selectedMap = ref(availableMaps[0].id);
+
+const mapExploreStore = useMapExploreStore();
+const { selectedMap } = storeToRefs(mapExploreStore);
+
+if (!selectedMap.value) {
+  selectedMap.value = availableMaps[0].id;
+}
+
 const selectedMapComponent = computed(() => {
   return availableMaps.find(({ id }) => id === selectedMap.value).component;
 });
diff --git a/vacs-map-app/src/main.js b/vacs-map-app/src/main.js
index b1e056f..77e935c 100644
--- a/vacs-map-app/src/main.js
+++ b/vacs-map-app/src/main.js
@@ -9,6 +9,8 @@ import MapExplorer from './MapExplorer.vue';
 import ClimateChangeOverview from '@/components/pages/ClimateChangeOverview.vue';
 import CropTypeOverview from '@/components/pages/CropTypeOverview.vue';
 import GeographyOverview from '@/components/pages/GeographyOverview.vue';
+import QueryPlugin from '@/store-plugins/query';
+import { getActivePinia } from 'pinia';
 
 const app = createApp(App)
 
@@ -29,3 +31,5 @@ const router = VueRouter.createRouter({
 app.use(createPinia());
 app.use(router);
 app.mount('#app');
+
+getActivePinia().use(QueryPlugin);
diff --git a/vacs-map-app/src/store-plugins/query.js b/vacs-map-app/src/store-plugins/query.js
new file mode 100644
index 0000000..42afc02
--- /dev/null
+++ b/vacs-map-app/src/store-plugins/query.js
@@ -0,0 +1,70 @@
+import qs from 'qs';
+
+const toPersist = [
+  {
+    store: 'filters',
+    key: 'selectedCrop',
+    outputKey: 'crop'
+  },
+  {
+    store: 'filters',
+    key: 'selectedMetric',
+    outputKey: 'metric'
+  },
+  {
+    store: 'filters',
+    key: 'selectedModel',
+    outputKey: 'model'
+  },
+  {
+    store: 'mapExplore',
+    key: 'selectedMap',
+    outputKey: 'map'
+  },
+];
+
+const getParams = (pinia) => {
+  return Object.fromEntries(
+    toPersist
+      .map(({ store, key, outputKey }) => {
+        const value = pinia[store][key];
+        if (!value) return;
+        return [outputKey, value];
+      })
+      .filter((v) => !!v)
+  );
+};
+
+const setParams = (store, params) => {
+  Object.entries(params).forEach(([k, v]) => {
+    const matchingEntries = toPersist.filter(
+      (entry) => entry.store === store.$id && entry.outputKey === k
+    );
+    if (matchingEntries.length !== 1) return;
+    store[matchingEntries[0].key] = v;
+  });
+};
+
+export default ({ pinia, store }) => {
+  // On load, parse params and set
+  try {
+    if (window) {
+      const params = qs.parse(window.location.hash.split('?')[1]);
+      if (Object.keys(params).length > 0) {
+        setParams(store, params);
+      }
+    }
+  } catch (e) {
+    //
+  }
+
+  store.$subscribe(() => {
+    const params = getParams(pinia.state.value);
+    if (Object.keys(params).length > 0) {
+      if (window) {
+        const newUrl = location.hash.split('?')[0] + `?${qs.stringify(params)}`;
+        window.history.replaceState(null, '', newUrl);
+      }
+    }
+  });
+};
diff --git a/vacs-map-app/src/stores/cropYields.js b/vacs-map-app/src/stores/cropYields.js
index c349ff5..86286d4 100644
--- a/vacs-map-app/src/stores/cropYields.js
+++ b/vacs-map-app/src/stores/cropYields.js
@@ -65,6 +65,7 @@ export const useCropYieldsStore = defineStore('cropYields', () => {
    */
   const getExtent = columnName => {
     const values = getColumnValues(columnName);
+    if (!values) return null;
     return [
       values[0],
       d3.quantileSorted(values, 0.98),
@@ -73,6 +74,7 @@ export const useCropYieldsStore = defineStore('cropYields', () => {
 
   const getQuintiles = columnName => {
     const values = getColumnValues(columnName);
+    if (!values) return null;
     return [
       ...d3.range(0, 1, 0.2).map(d => ({
         value: d3.quantileSorted(values, d),
diff --git a/vacs-map-app/src/stores/filters.js b/vacs-map-app/src/stores/filters.js
index 8cccc2b..bbc3ee5 100644
--- a/vacs-map-app/src/stores/filters.js
+++ b/vacs-map-app/src/stores/filters.js
@@ -23,14 +23,18 @@ export const useFiltersStore = defineStore('filters', () => {
         .filter(k => k !== 'id')
         .map(k => k.split('_')[0])
     )).sort();
-    selectedMetric.value = availableMetrics.value[0];
+    if (!selectedMetric.value) {
+      selectedMetric.value = availableMetrics.value[0];
+    }
 
     availableCrops.value = Array.from(new Set(
       Object.keys(firstRow)
         .filter(k => k.startsWith('yield'))
         .map(k => k.split('_')[1])
     )).sort();
-    selectedCrop.value = availableCrops.value[0];
+    if (!selectedCrop.value) {
+      selectedCrop.value = availableCrops.value[0];
+    }
 
     availableModels.value = Array.from(new Set(
       Object.keys(firstRow)
diff --git a/vacs-map-app/src/stores/mapExplore.js b/vacs-map-app/src/stores/mapExplore.js
new file mode 100644
index 0000000..6711fd0
--- /dev/null
+++ b/vacs-map-app/src/stores/mapExplore.js
@@ -0,0 +1,7 @@
+import { ref } from 'vue';
+import { defineStore } from 'pinia';
+
+export const useMapExploreStore = defineStore('mapExplore', () => {
+  const selectedMap = ref('');
+  return { selectedMap };
+});