feat: add map

package.json

@@ -13,10 +13,12 @@
     "@mantine/core": "^5.10.3",
     "@mantine/hooks": "^5.10.3",
     "@tabler/icons-react": "^2.2.0",
+    "mapbox-gl": "^2.12.1",
     "public-google-sheets-parser": "^1.2.6",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-dotdotdot": "^1.3.1",
+    "react-map-gl": "^7.0.21",
     "react-router": "^6.8.0",
     "react-router-dom": "^6.8.0"
   },

src/Resistant.ts

@@ -9,4 +9,6 @@ export interface Resistant {
     "lien_declaration": string
     "date_declaration": string
     mention: string
+    latitude: string
+    longitude: string
 }

src/getResistantPhotoUrl.tsx

@@ -0,0 +1,3 @@
+import {Resistant} from "./Resistant";
+
+export const getResistantPhotoUrl = (resistant: Resistant) => `https://enfance-libre.frama.io/resistants/assets/${resistant.id}.jpg`;

src/main.tsx

@@ -2,6 +2,7 @@ import React from 'react'
 import ReactDOM from 'react-dom/client'
 import {Outlet} from "react-router";
 import {createHashRouter, RouterProvider} from "react-router-dom"
+import 'mapbox-gl/dist/mapbox-gl.css';
 import {ListeResistants, resistantsLoader} from "./routes/Liste"
 import NotFound from "./routes/NotFound";
 import { PageResistant } from "./routes/PageResistant";

src/routes/Liste/Map/Picto.tsx

@@ -0,0 +1,4 @@
+import React from "react";
+import pictoPng from "./picto-fond-blanc.png";
+
+export const Picto = () => <img src={pictoPng} height="40px" width="40px"/>

src/routes/Liste/Map/PopupContent.tsx

@@ -0,0 +1,22 @@
+import React from "react";
+import {useNavigate} from "react-router";
+import {Resistant} from "../../../Resistant";
+import {getResistantPhotoUrl} from "../../../getResistantPhotoUrl";
+
+export const PopupContent = ({resistant}: { resistant: Resistant }) => {
+    const navigate = useNavigate()
+
+    return <div style={{minWidth: "30em", minHeight: "15em"}} onClick={() => navigate(resistant.noms)}>
+        <img
+            src={getResistantPhotoUrl(resistant)}
+            style={{float: "left", maxHeight: "15em", marginRight: "1em"}}
+            alt={resistant.noms}
+        />
+        <strong style={{overflow: "hidden"}}>{resistant.noms}</strong><br/>
+        👨‍👩‍👧‍👦 Parent(s) de {resistant.enfants} <br/>
+        {resistant.mention}<br/>
+        <br/>
+        🇫🇷 {resistant.departement}, Académie de {resistant.academie}<br/>
+        📅 En désobéissance depuis {resistant.date_declaration}<br/>
+    </div>;
+}

src/routes/Liste/Map/ResistantsMap.tsx

@@ -0,0 +1,51 @@
+import React from "react";
+import {Resistant} from "../../../Resistant";
+import Map, {Marker, NavigationControl, Popup} from "react-map-gl";
+import {Picto} from "./Picto";
+import {PopupContent} from "./PopupContent";
+
+interface Props {
+    resistants: Resistant[]
+}
+
+const accessToken = "pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4M29iazA2Z2gycXA4N2pmbDZmangifQ.-g_vE53SD2WrJ6tFX7QHmA"
+export const ResistantsMap = ({resistants}: Props) => {
+    const [selectedResistant, selectResistant] = React.useState<Resistant | null>(null)
+
+    return <Map
+        initialViewState={{
+            longitude: 5,
+            latitude: 47,
+            zoom: 5,
+        }}
+        style={{width: "100%", height: 600}}
+        mapStyle="mapbox://styles/mapbox/streets-v9"
+        mapboxAccessToken={accessToken}
+    >
+        <NavigationControl/>
+        {resistants.map(r => (
+            <Marker
+                key={`marker-${r.id}`}
+                longitude={parseFloat(r.longitude)}
+                latitude={parseFloat(r.latitude)}
+                anchor="center"
+                onClick={(e) => {
+                    e.originalEvent.stopPropagation()
+                    selectResistant(r);
+                }}
+            >
+                <Picto/>
+            </Marker>
+        ))}
+        {selectedResistant && (<Popup
+            key={`popup-${selectedResistant.id}`}
+            longitude={parseFloat(selectedResistant.longitude)}
+            latitude={parseFloat(selectedResistant.latitude)}
+            anchor="bottom"
+            style={{minWidth: "40em", padding: "1em"}}
+            onClose={() => selectResistant(null)}
+        >
+            <PopupContent resistant={selectedResistant}/>
+        </Popup>)}
+    </Map>
+}

src/routes/Liste/Thumbs/ResistantThumb.tsx

@@ -1,17 +1,19 @@
-import {Resistant} from "../Resistant";
 import {useNavigate} from "react-router";
-import {Separator} from "../components/Separator";
+import {BackgroundImage, Text} from "@mantine/core";
-import {BackgroundImage, Grid, Text} from "@mantine/core";
+import {getResistantPhotoUrl} from "../../../getResistantPhotoUrl";
+import {Resistant} from "../../../Resistant";
 
 interface Props {
     resistant: Resistant
 }
 
+const size = "200px"
+
 export const ResistantThumb = ({resistant}: Props) => {
     const navigate = useNavigate()
 
-    return <BackgroundImage src={`https://enfance-libre.frama.io/resistants/assets/${resistant.id}.jpg`} style={{width: "200px", height: "200px"}}>
+    return <BackgroundImage src={getResistantPhotoUrl(resistant)} style={{width: size, height: size}}>
-        <div className="thumb" onClick={() => navigate(resistant.noms)} style={{width: "200px", height: "200px", position: "relative"}}>
+        <div className="thumb" onClick={() => navigate(resistant.noms)} style={{width: size, height: size, position: "relative"}}>
             <div className="thumb-name"><Text size="sm">{resistant.noms}</Text></div>
         </div>
     </BackgroundImage>

src/routes/Liste/Thumbs/ResistantsThumbs.tsx

@@ -0,0 +1,13 @@
+import React from "react";
+import {Grid} from "@mantine/core";
+import {Resistant} from "../../../Resistant";
+import {ResistantThumb} from "./ResistantThumb";
+
+interface Props {
+    resistants: Resistant[]
+}
+export const ResistantsThumbs = ({resistants}: Props) => <Grid columns={4} gutterXs="md" gutterXl="md">
+    {resistants.map((r) => <Grid.Col span={"auto"} key={r.id}>
+        <ResistantThumb resistant={r}/>
+    </Grid.Col>)}
+</Grid>

src/routes/Liste/index.tsx

@@ -2,12 +2,13 @@ import React from "react";
 import {Outlet, useLoaderData} from "react-router";
 import {ResistantRow} from "../ResistantRow";
 import {Resistant} from "../../Resistant";
-import {Center, Grid, Group, SegmentedControl, TextInput} from "@mantine/core";
+import {Center, Group, SegmentedControl, TextInput} from "@mantine/core";
 import {FiltreDepartement} from "./FiltreDepartement";
-import {IconCameraSelfie, IconList, IconMap, IconPhoto, IconUsers} from "@tabler/icons-react";
+import {IconCameraSelfie, IconList, IconMap, IconUsers} from "@tabler/icons-react";
 import {Separator} from "../../components/Separator";
 import {FiltreAcademie} from "./FiltreAcademie";
-import {ResistantThumb} from "../ResistantThumb";
+import {ResistantsMap} from "./Map/ResistantsMap";
+import { ResistantsThumbs } from "./Thumbs/ResistantsThumbs";
 
 export const resistantsLoader = async () => {
     const spreadsheetId = '1GL1MBChnwNn0t8WtKK5M3PbtCJ_bTJRhoTwAI9jeWck'
@@ -28,7 +29,7 @@ export const ListeResistants = () => {
     const [departement, setDepartement] = React.useState<string|null>(null)
     const [academie, setAcademie] = React.useState<string|null>(null)
     const [nom, setNom] = React.useState<string|undefined>(undefined)
-    const [viewMode, setViewMode ] = React.useState<ViewMode>("photos")
+    const [viewMode, setViewMode ] = React.useState<ViewMode>("map")
 
     const filtreNom = (event: React.ChangeEvent<HTMLInputElement>) => setNom(event.target.value)
 
@@ -54,15 +55,14 @@ export const ListeResistants = () => {
                 <Separator />
 
                 {viewMode === "list" && filteredResistants.map((r) => <ResistantRow resistant={r} key={r.id}/>)}
-                {viewMode === "photos" && <Grid columns={4} gutterXs="md" gutterXl="md">
-                    {filteredResistants.map((r) => <Grid.Col span={"auto"} key={r.id}>
-                        <ResistantThumb resistant={r} />
-                    </Grid.Col>)}
-                </Grid>}
 
+                {viewMode === "photos" && <ResistantsThumbs resistants={filteredResistants} />}
+
+                {viewMode === "map" && <ResistantsMap resistants={filteredResistants} />}
 
                 <Outlet/>
             </div>
         </>
     );
 };
+

src/routes/PageResistant.tsx

@@ -1,5 +1,6 @@
 import {useLoaderData, useNavigate, useParams} from "react-router";
 import {Resistant} from "../Resistant";
+import {getResistantPhotoUrl} from "../getResistantPhotoUrl";
 
 export const PageResistant = () => {
     const {nomResistant} = useParams()
@@ -32,11 +33,11 @@ export const PageResistant = () => {
 
                                         <noscript>
                                             <img
-                                                src={`https://enfance-libre.frama.io/resistants/assets/${resistant.id}.jpg`}
+                                                src={getResistantPhotoUrl(resistant)}
                                                 alt={resistant.noms}/></noscript>
                                         <img className="thumb-image loaded"
-                                             data-src={`https://enfance-libre.frama.io/resistants/assets/${resistant.id}.jpg`}
+                                             data-src={getResistantPhotoUrl(resistant)}
-                                             data-image={`https://enfance-libre.frama.io/resistants/assets/${resistant.id}.jpg`}
+                                             data-image={getResistantPhotoUrl(resistant)}
                                              data-image-dimensions="2048x2048" data-image-focal-point="0.5,0.5"
                                              data-load="false" data-image-id="63cfa9c1bc68a5418b4a2126"
                                              data-type="image"
@@ -48,7 +49,7 @@ export const PageResistant = () => {
                                                  position: "absolute"
                                              }}
                                              alt={resistant.noms} data-image-resolution="500w"
-                                             src={`https://enfance-libre.frama.io/resistants/assets/${resistant.id}.jpg`}
+                                             src={getResistantPhotoUrl(resistant)}
                                         />
                                     </div>
                                 </div>

src/routes/ResistantRow.tsx

@@ -1,6 +1,7 @@
 import {Resistant} from "../Resistant";
 import {useNavigate} from "react-router";
 import {Separator} from "../components/Separator";
+import {getResistantPhotoUrl} from "../getResistantPhotoUrl";
 
 interface Props {
     resistant: Resistant
@@ -25,7 +26,7 @@ export const ResistantRow = ({resistant}: Props) => {
                                 data-test="image-block-inline-outer-wrapper" id="yui_3_17_2_1_1674987238932_136"
                             >
                                 <img
-                                    src={`https://enfance-libre.frama.io/resistants/assets/${resistant.id}.jpg`}
+                                    src={getResistantPhotoUrl(resistant)}
                                     alt={resistant.noms}
                                     style={{width: "200px", height: "200px"}}
                                 />

yarn.lock

@@ -461,6 +461,69 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@mapbox/geojson-rewind@npm:^0.5.2":
+  version: 0.5.2
+  resolution: "@mapbox/geojson-rewind@npm:0.5.2"
+  dependencies:
+    get-stream: ^6.0.1
+    minimist: ^1.2.6
+  bin:
+    geojson-rewind: geojson-rewind
+  checksum: 721470ab5e8912d69aef06fa4db891bade8b028d6708a35a982b1dfec0f40eb4ba05a749258867f5844cf4e776e53866813bf9c97e3289054b21cbf7840d3608
+  languageName: node
+  linkType: hard
+
+"@mapbox/jsonlint-lines-primitives@npm:^2.0.2":
+  version: 2.0.2
+  resolution: "@mapbox/jsonlint-lines-primitives@npm:2.0.2"
+  checksum: 4eb31edd3ccff530f7b687ddc6d813d6e24fc66e9a563460882e7861b49f9331c5ded6fd7e927b37affbbd98f83bff1f7b916119044f1931df03c6ffedba2cfb
+  languageName: node
+  linkType: hard
+
+"@mapbox/mapbox-gl-supported@npm:^2.0.1":
+  version: 2.0.1
+  resolution: "@mapbox/mapbox-gl-supported@npm:2.0.1"
+  checksum: 1dffc96baacc56e34b09f2ae6ac4b2b8f10ad51a9d7c4946dc2057f456deeacd5d0729e340120857b3204a14d9961266f3218d26e101d46e81717954f1c129af
+  languageName: node
+  linkType: hard
+
+"@mapbox/point-geometry@npm:0.1.0, @mapbox/point-geometry@npm:^0.1.0, @mapbox/point-geometry@npm:~0.1.0":
+  version: 0.1.0
+  resolution: "@mapbox/point-geometry@npm:0.1.0"
+  checksum: ed41c1ce0140de81039424415d9a199abba72cdb2287314e1b8c3e295da3224f7e8c1b0ae99a9b097703e7abe63e1978a518e29896989cc8bba3d482360bc22f
+  languageName: node
+  linkType: hard
+
+"@mapbox/tiny-sdf@npm:^2.0.6":
+  version: 2.0.6
+  resolution: "@mapbox/tiny-sdf@npm:2.0.6"
+  checksum: efff5b5a7599aaa995e3c2fd8f2acd071226096458eebb694ffd7258043c46c52b1d09bb3c7343d2126eb257b3cd7d34e6dc7ccaaad7619e6f3e7dd76229a3cd
+  languageName: node
+  linkType: hard
+
+"@mapbox/unitbezier@npm:^0.0.1":
+  version: 0.0.1
+  resolution: "@mapbox/unitbezier@npm:0.0.1"
+  checksum: bf104c85dbff37bf47d3217d9457a3abbf23714f78fefadea64e56bdc7c538491b626166809ef28db134f09baccd6ca3df6988a6422df90d8d0c9a23b0686043
+  languageName: node
+  linkType: hard
+
+"@mapbox/vector-tile@npm:^1.3.1":
+  version: 1.3.1
+  resolution: "@mapbox/vector-tile@npm:1.3.1"
+  dependencies:
+    "@mapbox/point-geometry": ~0.1.0
+  checksum: 7093d4fa7d0382a0eae9d79526c5ad57c32099300b013d3afb4ab7499ac2a096f6f0a487cc81151ef81e0432a4b157513666b1592a4a4c1497341cde835551aa
+  languageName: node
+  linkType: hard
+
+"@mapbox/whoots-js@npm:^3.1.0":
+  version: 3.1.0
+  resolution: "@mapbox/whoots-js@npm:3.1.0"
+  checksum: c1837c04effd205b207f441356d952eae7e8aad6c58f7c4900de50318c2147cf175936fc9434f20dfa409f9e6a78ec604d61e70c1c20572db0cc7655fbb65f50
+  languageName: node
+  linkType: hard
+
 "@npmcli/fs@npm:^2.1.0":
   version: 2.1.2
   resolution: "@npmcli/fs@npm:2.1.2"
@@ -756,6 +819,22 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@types/geojson@npm:*":
+  version: 7946.0.10
+  resolution: "@types/geojson@npm:7946.0.10"
+  checksum: 12c407c2dc93ecb26c08af533ee732f1506a9b29456616ba7ba1d525df96206c28ddf44a528f6a5415d7d22893e9d967420940a9c095ee5e539c1eba5fefc1f4
+  languageName: node
+  linkType: hard
+
+"@types/mapbox-gl@npm:^2.6.0":
+  version: 2.7.10
+  resolution: "@types/mapbox-gl@npm:2.7.10"
+  dependencies:
+    "@types/geojson": "*"
+  checksum: 0ee433fa7510733fd7744796d8b04c9bbc6e087a3b46a114433528bd7f64b2b475a245bda3598d7cd1db5a9cf5ea93567d234594b7cd3106d32b0c9cbe333888
+  languageName: node
+  linkType: hard
+
 "@types/parse-json@npm:^4.0.0":
   version: 4.0.0
   resolution: "@types/parse-json@npm:4.0.0"
@@ -1054,6 +1133,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"csscolorparser@npm:~1.0.3":
+  version: 1.0.3
+  resolution: "csscolorparser@npm:1.0.3"
+  checksum: e40f3045ea15c7e7eaa78e110412fe8b820d47b698c1eb1d1e7ecb42703bf447406a24304b891ae9df61e85d947f33fc67bd0120c7f9e3a5183e6e0b9afff92c
+  languageName: node
+  linkType: hard
+
 "csstype@npm:3.0.9":
   version: 3.0.9
   resolution: "csstype@npm:3.0.9"
@@ -1094,6 +1180,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"earcut@npm:^2.2.4":
+  version: 2.2.4
+  resolution: "earcut@npm:2.2.4"
+  checksum: aea0466cb2f24e0c3c57148d8d28ac9846f53c4f43ee66780826474303ac851b305ef988152d0bdeb31e8f7ca939dc0df737e7505cfb1c1bdf2ff9d7f9ea2faa
+  languageName: node
+  linkType: hard
+
 "emoji-regex@npm:^8.0.0":
   version: 8.0.0
   resolution: "emoji-regex@npm:8.0.0"
@@ -1289,6 +1382,27 @@ __metadata:
   languageName: node
   linkType: hard
 
+"geojson-vt@npm:^3.2.1":
+  version: 3.2.1
+  resolution: "geojson-vt@npm:3.2.1"
+  checksum: 7c7973cfaf9e3bb1c1dc9578ec00e602efb6f8d57f4dd7f6b28baeb7825bcaeb1684018b850211e333ab4b90a4a89a02ff7793732c505d67101ccbc38e307e02
+  languageName: node
+  linkType: hard
+
+"get-stream@npm:^6.0.1":
+  version: 6.0.1
+  resolution: "get-stream@npm:6.0.1"
+  checksum: e04ecece32c92eebf5b8c940f51468cd53554dcbb0ea725b2748be583c9523d00128137966afce410b9b051eb2ef16d657cd2b120ca8edafcf5a65e81af63cad
+  languageName: node
+  linkType: hard
+
+"gl-matrix@npm:^3.4.3":
+  version: 3.4.3
+  resolution: "gl-matrix@npm:3.4.3"
+  checksum: c47830ba727f3d0fab635c48135af96aef66274079a3e0afd6f68b68c98eae9fc1bcfdc7312fe2301e4fd22dd24c5e0f1b5d025960a208e50d07101ed8d940f9
+  languageName: node
+  linkType: hard
+
 "glob@npm:^7.1.3, glob@npm:^7.1.4":
   version: 7.2.3
   resolution: "glob@npm:7.2.3"
@@ -1323,6 +1437,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"grid-index@npm:^1.1.0":
+  version: 1.1.0
+  resolution: "grid-index@npm:1.1.0"
+  checksum: 0e9d427b606ac644a723719116bb067639c01dccc881f161525e8eddb13b2de3b8a274641ef6d926d7629877ad8ed06b45290d52dd2d8af45532c50ccbbefe43
+  languageName: node
+  linkType: hard
+
 "has-flag@npm:^3.0.0":
   version: 3.0.0
   resolution: "has-flag@npm:3.0.0"
@@ -1401,6 +1522,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"ieee754@npm:^1.1.12":
+  version: 1.2.1
+  resolution: "ieee754@npm:1.2.1"
+  checksum: 5144c0c9815e54ada181d80a0b810221a253562422e7c6c3a60b1901154184f49326ec239d618c416c1c5945a2e197107aee8d986a3dd836b53dffefd99b5e7e
+  languageName: node
+  linkType: hard
+
 "import-fresh@npm:^3.2.1":
   version: 3.3.0
   resolution: "import-fresh@npm:3.3.0"
@@ -1514,6 +1642,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"kdbush@npm:^3.0.0":
+  version: 3.0.0
+  resolution: "kdbush@npm:3.0.0"
+  checksum: bc5fa433958e42664a8a92457e4f0d1db55b3b8e36956aac0102964adb2eab043bdbff156570dc8d867144ceff588fb7a1c6e099ba9be068cd1767a73e1ace92
+  languageName: node
+  linkType: hard
+
 "lines-and-columns@npm:^1.1.6":
   version: 1.2.4
   resolution: "lines-and-columns@npm:1.2.4"
@@ -1572,6 +1707,35 @@ __metadata:
   languageName: node
   linkType: hard
 
+"mapbox-gl@npm:^2.12.1":
+  version: 2.12.1
+  resolution: "mapbox-gl@npm:2.12.1"
+  dependencies:
+    "@mapbox/geojson-rewind": ^0.5.2
+    "@mapbox/jsonlint-lines-primitives": ^2.0.2
+    "@mapbox/mapbox-gl-supported": ^2.0.1
+    "@mapbox/point-geometry": ^0.1.0
+    "@mapbox/tiny-sdf": ^2.0.6
+    "@mapbox/unitbezier": ^0.0.1
+    "@mapbox/vector-tile": ^1.3.1
+    "@mapbox/whoots-js": ^3.1.0
+    csscolorparser: ~1.0.3
+    earcut: ^2.2.4
+    geojson-vt: ^3.2.1
+    gl-matrix: ^3.4.3
+    grid-index: ^1.1.0
+    murmurhash-js: ^1.0.0
+    pbf: ^3.2.1
+    potpack: ^2.0.0
+    quickselect: ^2.0.0
+    rw: ^1.3.3
+    supercluster: ^7.1.5
+    tinyqueue: ^2.0.3
+    vt-pbf: ^3.1.3
+  checksum: 939ab47bc8dd25ea94bb18fb01f86cd6deceab0410aa08a63437a4902fdcd3ff9f78d3f5b025f438bd4b04bbe7719857db5c99a7e6f79b5dc1244e48ba1e28fa
+  languageName: node
+  linkType: hard
+
 "minimatch@npm:^3.1.1":
   version: 3.1.2
   resolution: "minimatch@npm:3.1.2"
@@ -1590,6 +1754,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"minimist@npm:^1.2.6":
+  version: 1.2.8
+  resolution: "minimist@npm:1.2.8"
+  checksum: 75a6d645fb122dad29c06a7597bddea977258957ed88d7a6df59b5cd3fe4a527e253e9bbf2e783e4b73657f9098b96a5fe96ab8a113655d4109108577ecf85b0
+  languageName: node
+  linkType: hard
+
 "minipass-collect@npm:^1.0.2":
   version: 1.0.2
   resolution: "minipass-collect@npm:1.0.2"
@@ -1692,6 +1863,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"murmurhash-js@npm:^1.0.0":
+  version: 1.0.0
+  resolution: "murmurhash-js@npm:1.0.0"
+  checksum: 083cea92a11bc9eb25be1446fc92eded3f49731bc1ad34fa8023afd68c234d1dd59458d70eb20e667b1383bedeeb8dfb1a16c89913b6ffe3584fd22fb598739d
+  languageName: node
+  linkType: hard
+
 "nanoid@npm:^3.3.4":
   version: 3.3.4
   resolution: "nanoid@npm:3.3.4"
@@ -1827,6 +2005,18 @@ __metadata:
   languageName: node
   linkType: hard
 
+"pbf@npm:^3.2.1":
+  version: 3.2.1
+  resolution: "pbf@npm:3.2.1"
+  dependencies:
+    ieee754: ^1.1.12
+    resolve-protobuf-schema: ^2.1.0
+  bin:
+    pbf: bin/pbf
+  checksum: 8033f5e21fffdc485e85d50bbff07ab3313c6841c3630a4ba9bc9e82d2e9005ab92000a1a90cb911223caa44316293e367bab607dd8110d5c771e6c8aaad63e1
+  languageName: node
+  linkType: hard
+
 "picocolors@npm:^1.0.0":
   version: 1.0.0
   resolution: "picocolors@npm:1.0.0"
@@ -1845,6 +2035,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"potpack@npm:^2.0.0":
+  version: 2.0.0
+  resolution: "potpack@npm:2.0.0"
+  checksum: 6dd41692349936b436c29c28cf9ff1268c03ed6ec96c4384b2d9eb95e58e422fab75d428648f475507dd167934984d1002df2010b83e5747b5c358bea371e8f7
+  languageName: node
+  linkType: hard
+
 "promise-inflight@npm:^1.0.1":
   version: 1.0.1
   resolution: "promise-inflight@npm:1.0.1"
@@ -1873,6 +2070,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"protocol-buffers-schema@npm:^3.3.1":
+  version: 3.6.0
+  resolution: "protocol-buffers-schema@npm:3.6.0"
+  checksum: 8713b5770f6745ddbcdf3bbd03ee020624d506233bb567927a6615a6f69a5bd620a5f49597f34f4115792b853a4c9cb9e2d5d6b930a1c04bf198023e45c1c349
+  languageName: node
+  linkType: hard
+
 "public-google-sheets-parser@npm:^1.2.6":
   version: 1.2.6
   resolution: "public-google-sheets-parser@npm:1.2.6"
@@ -1880,6 +2084,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"quickselect@npm:^2.0.0":
+  version: 2.0.0
+  resolution: "quickselect@npm:2.0.0"
+  checksum: ed2e78431050d223fb75da20ee98011aef1a03f7cb04e1a32ee893402e640be3cfb76d72e9dbe01edf3bb457ff6a62e5c2d85748424d1aa531f6ba50daef098c
+  languageName: node
+  linkType: hard
+
 "react-dom@npm:^18.2.0":
   version: 18.2.0
   resolution: "react-dom@npm:18.2.0"
@@ -1912,6 +2123,18 @@ __metadata:
   languageName: node
   linkType: hard
 
+"react-map-gl@npm:^7.0.21":
+  version: 7.0.21
+  resolution: "react-map-gl@npm:7.0.21"
+  dependencies:
+    "@types/mapbox-gl": ^2.6.0
+  peerDependencies:
+    mapbox-gl: "*"
+    react: ">=16.3.0"
+  checksum: 9c182fc0ab612d965baf53da5a977f06a466634f65932527f1ee447b7eac880c4abfc6c87572a8193664aa3c2d854243e4e37a421d7b22bb4a5f1419b547b250
+  languageName: node
+  linkType: hard
+
 "react-router-dom@npm:^6.8.0":
   version: 6.8.0
   resolution: "react-router-dom@npm:6.8.0"
@@ -1987,11 +2210,13 @@ __metadata:
     "@types/react": ^18.0.26
     "@types/react-dom": ^18.0.9
     "@vitejs/plugin-react-swc": ^3.0.0
+    mapbox-gl: ^2.12.1
     prop-types: ^15.8.1
     public-google-sheets-parser: ^1.2.6
     react: ^18.2.0
     react-dom: ^18.2.0
     react-dotdotdot: ^1.3.1
+    react-map-gl: ^7.0.21
     react-router: ^6.8.0
     react-router-dom: ^6.8.0
     typescript: ^4.9.3
@@ -2006,6 +2231,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"resolve-protobuf-schema@npm:^2.1.0":
+  version: 2.1.0
+  resolution: "resolve-protobuf-schema@npm:2.1.0"
+  dependencies:
+    protocol-buffers-schema: ^3.3.1
+  checksum: 88fffab2a3757888884a36f9aa4e24be5186b01820a8c26297dc1ce406b9daf776594926bdf524c2c8e8e5b0aba8ac48362b6584cdecc9a7083215ebca01c599
+  languageName: node
+  linkType: hard
+
 "resolve@npm:^1.19.0, resolve@npm:^1.22.1":
   version: 1.22.1
   resolution: "resolve@npm:1.22.1"
@@ -2064,6 +2298,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"rw@npm:^1.3.3":
+  version: 1.3.3
+  resolution: "rw@npm:1.3.3"
+  checksum: c20d82421f5a71c86a13f76121b751553a99cd4a70ea27db86f9b23f33db941f3f06019c30f60d50c356d0bd674c8e74764ac146ea55e217c091bde6fba82aa3
+  languageName: node
+  linkType: hard
+
 "safe-buffer@npm:~5.2.0":
   version: 5.2.1
   resolution: "safe-buffer@npm:5.2.1"
@@ -2199,6 +2440,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"supercluster@npm:^7.1.5":
+  version: 7.1.5
+  resolution: "supercluster@npm:7.1.5"
+  dependencies:
+    kdbush: ^3.0.0
+  checksum: 69863238870093b96617135884721b6343746e14f396b2d67d6b55c52c362ec0516c5e386aa21815e75a9cef2054e831ac34023d0d8b600091d28cea0794f027
+  languageName: node
+  linkType: hard
+
 "supports-color@npm:^5.3.0":
   version: 5.5.0
   resolution: "supports-color@npm:5.5.0"
@@ -2236,6 +2486,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"tinyqueue@npm:^2.0.3":
+  version: 2.0.3
+  resolution: "tinyqueue@npm:2.0.3"
+  checksum: 0b6bda46b680dca072f84aef1acd22a7085a2ff2aa8e222bb41045c61a056943805056d77d7f976587ed6a0597872beb5c416043f65f0314304432d6c178dd20
+  languageName: node
+  linkType: hard
+
 "to-fast-properties@npm:^2.0.0":
   version: 2.0.0
   resolution: "to-fast-properties@npm:2.0.0"
@@ -2368,6 +2625,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"vt-pbf@npm:^3.1.3":
+  version: 3.1.3
+  resolution: "vt-pbf@npm:3.1.3"
+  dependencies:
+    "@mapbox/point-geometry": 0.1.0
+    "@mapbox/vector-tile": ^1.3.1
+    pbf: ^3.2.1
+  checksum: 83375b7ffe2e92ab2a4c9924cf2cd80e311b38e9e616c244656140a76090c037c55a1b1379b234cb6567444f32e9cb40fd2c5b6e555ffff4330feba56250f90c
+  languageName: node
+  linkType: hard
+
 "which@npm:^2.0.2":
   version: 2.0.2
   resolution: "which@npm:2.0.2"