Added code version (huge payload, needs api)

env.d.ts

@@ -1 +1,3 @@
 /// <reference types="vite/client" />
+declare module "geojson-geometries-lookup";
+declare module "pako";

package-lock.json

@@ -1,15 +1,16 @@
 {
-  "name": "maple",
-  "version": "0.0.0",
+  "name": "rep-lookup-fr",
+  "version": "0.1.0",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
-      "name": "maple",
-      "version": "0.0.0",
+      "name": "rep-lookup-fr",
+      "version": "0.1.0",
       "dependencies": {
         "@tailwindcss/typography": "^0.5.4",
         "@vueuse/core": "^10.1.0",
+        "geojson-geometries-lookup": "^0.5.0",
         "pinia": "^2.0.35",
         "vue": "^3.2.47",
         "vue-router": "^4.1.6"
@@ -586,6 +587,87 @@
         "tailwindcss": ">=3.0.0 || insiders"
       }
     },
+    "node_modules/@turf/bbox": {
+      "version": "6.5.0",
+      "resolved": "https://registry.npmjs.org/@turf/bbox/-/bbox-6.5.0.tgz",
+      "integrity": "sha512-RBbLaao5hXTYyyg577iuMtDB8ehxMlUqHEJiMs8jT1GHkFhr6sYre3lmLsPeYEi/ZKj5TP5tt7fkzNdJ4GIVyw==",
+      "dependencies": {
+        "@turf/helpers": "^6.5.0",
+        "@turf/meta": "^6.5.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/turf"
+      }
+    },
+    "node_modules/@turf/boolean-contains": {
+      "version": "6.5.0",
+      "resolved": "https://registry.npmjs.org/@turf/boolean-contains/-/boolean-contains-6.5.0.tgz",
+      "integrity": "sha512-4m8cJpbw+YQcKVGi8y0cHhBUnYT+QRfx6wzM4GI1IdtYH3p4oh/DOBJKrepQyiDzFDaNIjxuWXBh0ai1zVwOQQ==",
+      "dependencies": {
+        "@turf/bbox": "^6.5.0",
+        "@turf/boolean-point-in-polygon": "^6.5.0",
+        "@turf/boolean-point-on-line": "^6.5.0",
+        "@turf/helpers": "^6.5.0",
+        "@turf/invariant": "^6.5.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/turf"
+      }
+    },
+    "node_modules/@turf/boolean-point-in-polygon": {
+      "version": "6.5.0",
+      "resolved": "https://registry.npmjs.org/@turf/boolean-point-in-polygon/-/boolean-point-in-polygon-6.5.0.tgz",
+      "integrity": "sha512-DtSuVFB26SI+hj0SjrvXowGTUCHlgevPAIsukssW6BG5MlNSBQAo70wpICBNJL6RjukXg8d2eXaAWuD/CqL00A==",
+      "dependencies": {
+        "@turf/helpers": "^6.5.0",
+        "@turf/invariant": "^6.5.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/turf"
+      }
+    },
+    "node_modules/@turf/boolean-point-on-line": {
+      "version": "6.5.0",
+      "resolved": "https://registry.npmjs.org/@turf/boolean-point-on-line/-/boolean-point-on-line-6.5.0.tgz",
+      "integrity": "sha512-A1BbuQ0LceLHvq7F/P7w3QvfpmZqbmViIUPHdNLvZimFNLo4e6IQunmzbe+8aSStH9QRZm3VOflyvNeXvvpZEQ==",
+      "dependencies": {
+        "@turf/helpers": "^6.5.0",
+        "@turf/invariant": "^6.5.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/turf"
+      }
+    },
+    "node_modules/@turf/helpers": {
+      "version": "6.5.0",
+      "resolved": "https://registry.npmjs.org/@turf/helpers/-/helpers-6.5.0.tgz",
+      "integrity": "sha512-VbI1dV5bLFzohYYdgqwikdMVpe7pJ9X3E+dlr425wa2/sMJqYDhTO++ec38/pcPvPE6oD9WEEeU3Xu3gza+VPw==",
+      "funding": {
+        "url": "https://opencollective.com/turf"
+      }
+    },
+    "node_modules/@turf/invariant": {
+      "version": "6.5.0",
+      "resolved": "https://registry.npmjs.org/@turf/invariant/-/invariant-6.5.0.tgz",
+      "integrity": "sha512-Wv8PRNCtPD31UVbdJE/KVAWKe7l6US+lJItRR/HOEW3eh+U/JwRCSUl/KZ7bmjM/C+zLNoreM2TU6OoLACs4eg==",
+      "dependencies": {
+        "@turf/helpers": "^6.5.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/turf"
+      }
+    },
+    "node_modules/@turf/meta": {
+      "version": "6.5.0",
+      "resolved": "https://registry.npmjs.org/@turf/meta/-/meta-6.5.0.tgz",
+      "integrity": "sha512-RrArvtsV0vdsCBegoBtOalgdSOfkBrTJ07VkpiCnq/491W67hnMWmDu7e6Ztw0C3WldRYTXkg3SumfdzZxLBHA==",
+      "dependencies": {
+        "@turf/helpers": "^6.5.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/turf"
+      }
+    },
     "node_modules/@types/json-schema": {
       "version": "7.0.11",
       "resolved": "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.11.tgz",
@@ -2135,6 +2217,28 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/geojson-geometries": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/geojson-geometries/-/geojson-geometries-2.0.0.tgz",
+      "integrity": "sha512-HKljxKnbJrdkr7ijg5/nvcr1b81HP+C/rS48cJwRb3xEqiEynlGkRVkQ/msopw+EE3gf7DjEKdZyEGMck0bOpw==",
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/geojson-geometries-lookup": {
+      "version": "0.5.0",
+      "resolved": "https://registry.npmjs.org/geojson-geometries-lookup/-/geojson-geometries-lookup-0.5.0.tgz",
+      "integrity": "sha512-AfadxaBda6VTwwX4USLiVofFaz0HIjubC7ZC15hGTvc8K0di3pmCNWGFotKJeURSxYPbJLFoet34X3JrIKFX4A==",
+      "dependencies": {
+        "@turf/bbox": "^6.0.1",
+        "@turf/boolean-contains": "^6.0.1",
+        "geojson-geometries": "^2.0.0",
+        "rbush": "^3.0.1"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
     "node_modules/get-intrinsic": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.2.0.tgz",
@@ -3600,6 +3704,19 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/quickselect": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/quickselect/-/quickselect-2.0.0.tgz",
+      "integrity": "sha512-RKJ22hX8mHe3Y6wH/N3wCM6BWtjaxIyyUIkpHOvfFnxdI4yD4tBXEBKSbriGujF6jnSVkJrffuo6vxACiSSxIw=="
+    },
+    "node_modules/rbush": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/rbush/-/rbush-3.0.1.tgz",
+      "integrity": "sha512-XRaVO0YecOpEuIvbhbpTrZgoiI6xBlz6hnlr6EHhd+0x9ase6EmeN+hdwwUaJvLcsFFQ8iWVF1GAK1yB0BWi0w==",
+      "dependencies": {
+        "quickselect": "^2.0.0"
+      }
+    },
     "node_modules/read-cache": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz",

package.json

@@ -12,6 +12,7 @@
   "dependencies": {
     "@tailwindcss/typography": "^0.5.4",
     "@vueuse/core": "^10.1.0",
+    "geojson-geometries-lookup": "^0.5.0",
     "pinia": "^2.0.35",
     "vue": "^3.2.47",
     "vue-router": "^4.1.6"

public/data/reps.json

@@ -0,0 +1,5 @@
+[
+  {
+    "code": ""
+  }
+]

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>