From af3eccb84283c7d85767ad1d3b7abff484ab997d Mon Sep 17 00:00:00 2001 From: Jalil Arfaoui Date: Mon, 8 May 2023 19:45:44 +0200 Subject: [PATCH] feat: migrate from mapbox to maplibre --- index.html | 9 ++- package.json | 1 + src/main.tsx | 12 ++- src/routes/Liste/Map/ResistantsMap.tsx | 12 +-- yarn.lock | 105 ++++++++++++++++++++++++- 5 files changed, 127 insertions(+), 12 deletions(-) diff --git a/index.html b/index.html index 58f84ba..4fa5e47 100644 --- a/index.html +++ b/index.html @@ -4,9 +4,14 @@ Résistants Enfance Libre + - -
+ +
diff --git a/package.json b/package.json index 17e78f7..4e0c877 100644 --- a/package.json +++ b/package.json @@ -25,6 +25,7 @@ "@types/react": "^18.0.26", "@types/react-dom": "^18.0.9", "@vitejs/plugin-react-swc": "^3.0.0", + "maplibre-gl": "^2.4.0", "prettier": "^2.8.4", "prop-types": "^15.8.1", "typescript": "^4.9.3", diff --git a/src/main.tsx b/src/main.tsx index 0071506..b66481e 100644 --- a/src/main.tsx +++ b/src/main.tsx @@ -11,11 +11,17 @@ const renderResistants = (defaultViewMode: ViewMode) => { ); }; -// @ts-ignore -window.Squarespace.onInitialize(Y, function () { +const render = () => { const defaultViewMode: ViewMode = location.href.includes("resistants") ? "photos" : "map"; renderResistants(defaultViewMode); -}); +}; + +if ("Squarespace" in window) { + // @ts-ignore + window.Squarespace.onInitialize(Y, render); +} else { + render(); +} diff --git a/src/routes/Liste/Map/ResistantsMap.tsx b/src/routes/Liste/Map/ResistantsMap.tsx index 78ec6ba..673eb40 100644 --- a/src/routes/Liste/Map/ResistantsMap.tsx +++ b/src/routes/Liste/Map/ResistantsMap.tsx @@ -1,6 +1,8 @@ import React from "react"; -import { Resistant } from "../../../Resistant"; import Map, { Marker, NavigationControl, Popup } from "react-map-gl"; +import maplibregl from "maplibre-gl"; +import "maplibre-gl/dist/maplibre-gl.css"; +import { Resistant } from "../../../Resistant"; import { Picto } from "./Picto"; import { PopupContent } from "./PopupContent"; @@ -8,8 +10,8 @@ interface Props { resistants: Resistant[]; } -const accessToken = - "pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4M29iazA2Z2gycXA4N2pmbDZmangifQ.-g_vE53SD2WrJ6tFX7QHmA"; +const accessToken = "LiH20XNxcFiTXyT4fgjM"; + export const ResistantsMap = ({ resistants }: Props) => { const [selectedResistant, selectResistant] = React.useState( null @@ -23,8 +25,8 @@ export const ResistantsMap = ({ resistants }: Props) => { zoom: 5, }} style={{ width: "100%", height: 600 }} - mapStyle="mapbox://styles/mapbox/streets-v9" - mapboxAccessToken={accessToken} + mapLib={maplibregl} + mapStyle={`https://api.maptiler.com/maps/streets-v2/style.json?key=${accessToken}`} > {resistants.map((r) => ( diff --git a/yarn.lock b/yarn.lock index 3546695..9ba2039 100644 --- a/yarn.lock +++ b/yarn.lock @@ -471,7 +471,7 @@ __metadata: languageName: node linkType: hard -"@mapbox/tiny-sdf@npm:^2.0.6": +"@mapbox/tiny-sdf@npm:^2.0.5, @mapbox/tiny-sdf@npm:^2.0.6": version: 2.0.6 resolution: "@mapbox/tiny-sdf@npm:2.0.6" checksum: efff5b5a7599aaa995e3c2fd8f2acd071226096458eebb694ffd7258043c46c52b1d09bb3c7343d2126eb257b3cd7d34e6dc7ccaaad7619e6f3e7dd76229a3cd @@ -796,7 +796,7 @@ __metadata: languageName: node linkType: hard -"@types/geojson@npm:*": +"@types/geojson@npm:*, @types/geojson@npm:^7946.0.10": version: 7946.0.10 resolution: "@types/geojson@npm:7946.0.10" checksum: 12c407c2dc93ecb26c08af533ee732f1506a9b29456616ba7ba1d525df96206c28ddf44a528f6a5415d7d22893e9d967420940a9c095ee5e539c1eba5fefc1f4 @@ -812,6 +812,24 @@ __metadata: languageName: node linkType: hard +"@types/mapbox__point-geometry@npm:*, @types/mapbox__point-geometry@npm:^0.1.2": + version: 0.1.2 + resolution: "@types/mapbox__point-geometry@npm:0.1.2" + checksum: 6e495e5d7e1fae986ab28ee26b5443b9e6ba54ad97c9df051832ab6e2aafc65fe63d4dd80101c922372fa01423b6947fdcfd253f298b3154418c17e7d3a8aa47 + languageName: node + linkType: hard + +"@types/mapbox__vector-tile@npm:^1.3.0": + version: 1.3.0 + resolution: "@types/mapbox__vector-tile@npm:1.3.0" + dependencies: + "@types/geojson": "*" + "@types/mapbox__point-geometry": "*" + "@types/pbf": "*" + checksum: 42fbeba625b6cb3bad47ea79b947aea2a1e32d0620b2f2e17a45cc075ca3be2990697115dd4896d84f11df7c0a9a3533ee76414745b8fd29cb311677b1c6832f + languageName: node + linkType: hard + "@types/parse-json@npm:^4.0.0": version: 4.0.0 resolution: "@types/parse-json@npm:4.0.0" @@ -819,6 +837,13 @@ __metadata: languageName: node linkType: hard +"@types/pbf@npm:*, @types/pbf@npm:^3.0.2": + version: 3.0.2 + resolution: "@types/pbf@npm:3.0.2" + checksum: f71ba1facd44a43bd32d4391177099cab69b2ae8381a260382287a4f7f255565d39fa0cf5da27fd2820fc923ead245d50a668824aaa423f908838813802d47f5 + languageName: node + linkType: hard + "@types/prop-types@npm:*": version: 15.7.5 resolution: "@types/prop-types@npm:15.7.5" @@ -1421,6 +1446,17 @@ __metadata: languageName: node linkType: hard +"global-prefix@npm:^3.0.0": + version: 3.0.0 + resolution: "global-prefix@npm:3.0.0" + dependencies: + ini: ^1.3.5 + kind-of: ^6.0.2 + which: ^1.3.1 + checksum: 8a82fc1d6f22c45484a4e34656cc91bf021a03e03213b0035098d605bfc612d7141f1e14a21097e8a0413b4884afd5b260df0b6a25605ce9d722e11f1df2881d + languageName: node + linkType: hard + "graceful-fs@npm:^4.2.6": version: 4.2.10 resolution: "graceful-fs@npm:4.2.10" @@ -1568,6 +1604,13 @@ __metadata: languageName: node linkType: hard +"ini@npm:^1.3.5": + version: 1.3.8 + resolution: "ini@npm:1.3.8" + checksum: dfd98b0ca3a4fc1e323e38a6c8eb8936e31a97a918d3b377649ea15bdb15d481207a0dda1021efbd86b464cae29a0d33c1d7dcaf6c5672bee17fa849bc50a1b3 + languageName: node + linkType: hard + "invariant@npm:^2.2.4": version: 2.2.4 resolution: "invariant@npm:2.2.4" @@ -1649,6 +1692,13 @@ __metadata: languageName: node linkType: hard +"kind-of@npm:^6.0.2": + version: 6.0.3 + resolution: "kind-of@npm:6.0.3" + checksum: 3ab01e7b1d440b22fe4c31f23d8d38b4d9b91d9f291df683476576493d5dfd2e03848a8b05813dd0c3f0e835bc63f433007ddeceb71f05cb25c45ae1b19c6d3b + languageName: node + linkType: hard + "lines-and-columns@npm:^1.1.6": version: 1.2.4 resolution: "lines-and-columns@npm:1.2.4" @@ -1736,6 +1786,38 @@ __metadata: languageName: node linkType: hard +"maplibre-gl@npm:^2.4.0": + version: 2.4.0 + resolution: "maplibre-gl@npm:2.4.0" + 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.5 + "@mapbox/unitbezier": ^0.0.1 + "@mapbox/vector-tile": ^1.3.1 + "@mapbox/whoots-js": ^3.1.0 + "@types/geojson": ^7946.0.10 + "@types/mapbox__point-geometry": ^0.1.2 + "@types/mapbox__vector-tile": ^1.3.0 + "@types/pbf": ^3.0.2 + csscolorparser: ~1.0.3 + earcut: ^2.2.4 + geojson-vt: ^3.2.1 + gl-matrix: ^3.4.3 + global-prefix: ^3.0.0 + murmurhash-js: ^1.0.0 + pbf: ^3.2.1 + potpack: ^1.0.2 + quickselect: ^2.0.0 + supercluster: ^7.1.5 + tinyqueue: ^2.0.3 + vt-pbf: ^3.1.3 + checksum: ee3f422332596616861c243ced39b5b58b9d071487f0de75df49e5140fe04c4a9c112a83eb1e5f82bb34a11e78a0d54c39b62f65ef773f371b06b0b319a5a7a2 + languageName: node + linkType: hard + "minimatch@npm:^3.1.1": version: 3.1.2 resolution: "minimatch@npm:3.1.2" @@ -2035,6 +2117,13 @@ __metadata: languageName: node linkType: hard +"potpack@npm:^1.0.2": + version: 1.0.2 + resolution: "potpack@npm:1.0.2" + checksum: 9dfdbbce012ce80842249abcdd89e20222eb8ae96beba8d578b7e41e78feefc7e33b5c72d46fb8dd3a1e382cb4da9c34574764d88aa8849ab36f542fd2088b42 + languageName: node + linkType: hard + "potpack@npm:^2.0.0": version: 2.0.0 resolution: "potpack@npm:2.0.0" @@ -2265,6 +2354,7 @@ __metadata: "@types/react-dom": ^18.0.9 "@vitejs/plugin-react-swc": ^3.0.0 mapbox-gl: ^2.12.1 + maplibre-gl: ^2.4.0 prettier: ^2.8.4 prop-types: ^15.8.1 react: ^18.2.0 @@ -2721,6 +2811,17 @@ __metadata: languageName: node linkType: hard +"which@npm:^1.3.1": + version: 1.3.1 + resolution: "which@npm:1.3.1" + dependencies: + isexe: ^2.0.0 + bin: + which: ./bin/which + checksum: f2e185c6242244b8426c9df1510e86629192d93c1a986a7d2a591f2c24869e7ffd03d6dac07ca863b2e4c06f59a4cc9916c585b72ee9fa1aa609d0124df15e04 + languageName: node + linkType: hard + "which@npm:^2.0.2": version: 2.0.2 resolution: "which@npm:2.0.2"