diff --git a/package.json b/package.json index 715c5f2..abd8246 100644 --- a/package.json +++ b/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" }, diff --git a/src/Resistant.ts b/src/Resistant.ts index 0282ce4..ab754ed 100644 --- a/src/Resistant.ts +++ b/src/Resistant.ts @@ -9,4 +9,6 @@ export interface Resistant { "lien_declaration": string "date_declaration": string mention: string + latitude: string + longitude: string } diff --git a/src/components/Picto_EL_fond-blanc.png b/src/components/Picto_EL_fond-blanc.png new file mode 100644 index 0000000..0f2af04 Binary files /dev/null and b/src/components/Picto_EL_fond-blanc.png differ diff --git a/src/getResistantPhotoUrl.tsx b/src/getResistantPhotoUrl.tsx new file mode 100644 index 0000000..447ca33 --- /dev/null +++ b/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`; diff --git a/src/main.tsx b/src/main.tsx index e9fd895..4c4de7f 100644 --- a/src/main.tsx +++ b/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"; diff --git a/src/routes/Liste/Map/Picto.tsx b/src/routes/Liste/Map/Picto.tsx new file mode 100644 index 0000000..a82ebc9 --- /dev/null +++ b/src/routes/Liste/Map/Picto.tsx @@ -0,0 +1,4 @@ +import React from "react"; +import pictoPng from "./picto-fond-blanc.png"; + +export const Picto = () => diff --git a/src/routes/Liste/Map/PopupContent.tsx b/src/routes/Liste/Map/PopupContent.tsx new file mode 100644 index 0000000..045f99b --- /dev/null +++ b/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