Added code version (huge payload, needs api)

src/stores/cir.ts

@@ -0,0 +1,31 @@
+import { useAsyncState } from "@vueuse/core";
+import { defineStore } from "pinia";
+
+import * as GeoJsonGeometriesLookup from "geojson-geometries-lookup";
+
+export const useCirStore = defineStore("cirStore", () => {
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  let gl: any = null;
+
+  const geoData = useAsyncState(
+    fetch("/data/circonscriptions-legislatives.json.gz").then((t) => t.json()),
+    {},
+    {
+      onSuccess(data) {
+        gl = new GeoJsonGeometriesLookup(data);
+      },
+    }
+  );
+
+  function getCounty(lon: number, lat: number): string | null {
+    const pos = {
+      type: "Point",
+      coordinates: [lon, lat],
+    };
+    return gl.getContainers(pos).features[0]?.properties["REF"] as
+      | string
+      | null;
+  }
+
+  return { geoData, getCounty };
+});

src/views/HomeView.vue

@@ -1,7 +1,32 @@
-<script lang="ts" setup></script>
+<script lang="ts" setup>
+import { useCirStore } from "@/stores/cir";
+import { useGeolocation } from "@vueuse/core";
+import { ref } from "vue";
+
+const { coords } = useGeolocation();
+const { geoData, getCounty } = useCirStore();
+
+const currentCountyCode = ref<string | null>("");
+
+function handleGeolocClick() {
+  currentCountyCode.value = getCounty(
+    coords.value.longitude,
+    coords.value.latitude
+  );
+}
+</script>
 
 <template>
   <div>
-    <main class="container py-4">Main</main>
+    <main class="container py-4">
+      <button
+        v-if="geoData.isReady"
+        class="py-2 px-4 rounded-sm bg-white text-sm text-slate-950"
+        @click="handleGeolocClick"
+      >
+        Get Code
+      </button>
+      {{ currentCountyCode }}
+    </main>
   </div>
 </template>