thallada/modmapper-web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Configure site to download timelapse images

Browse Source 
Load cell edit JSON files from a localhost server and download each
day's image automatically after refreshing the heatmap grid.

This isn't something I want to actually deploy, but I wanted to commit
it to a branch so I have it saved if I ever want to make a different
timelapse in the future.
This commit is contained in:
Tyler Hallada 2023-11-18 02:04:28 -05:00
parent e7be15a201
commit a2a2847894
4 changed files with 190 additions and 90 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

109
components/Map.tsx
View File

@ -1,7 +1,8 @@
import React, { useCallback, useRef, useEffect, useState } from "react"; import React, { useCallback, useRef, useEffect, useState } from "react";
import { useRouter } from "next/router"; import { useRouter } from "next/router";
import { saveAs } from "file-saver";
import Gradient from "javascript-color-gradient"; import Gradient from "javascript-color-gradient";
import mapboxgl from "mapbox-gl"; import mapboxgl, { GeoJSONSource } from "mapbox-gl";
import useSWRImmutable from "swr/immutable"; import useSWRImmutable from "swr/immutable";
import { useAppDispatch, useAppSelector } from "../lib/hooks"; import { useAppDispatch, useAppSelector } from "../lib/hooks";
@ -25,7 +26,14 @@ colorGradient.setGradient(
"#FFA500", "#FFA500",
"#FF0000" "#FF0000"
); );
colorGradient.setMidpoint(730); colorGradient.setMidpoint(5);
const dateToString = (date: Date): string => {
const year = date.getUTCFullYear().toString();
const month = `${date.getUTCMonth() + 1}`.padStart(2, "0");
const day = `${date.getUTCDate()}`.padStart(2, "0");
return `${year}-${month}-${day}`;
}
const Map: React.FC = () => { const Map: React.FC = () => {
const router = useRouter(); const router = useRouter();
@ -64,11 +72,18 @@ const Map: React.FC = () => {
(state) => state.plugins.selectedFetchedPlugin (state) => state.plugins.selectedFetchedPlugin
); );
const [day, setDay] = useState(new Date('2011-11-11'));
const { data: cellsData, error: cellsError } = useSWRImmutable( const { data: cellsData, error: cellsError } = useSWRImmutable(
"https://cells.modmapper.com/edits.json", `http://localhost:8000/cell_edits_${dateToString(day)}.json`,
(_) => jsonFetcherWithLastModified<Record<string, number>>(_) (_) => jsonFetcherWithLastModified<Record<string, number>>(_)
); );
// useEffect(() => {
// Object.defineProperty(window, 'devicePixelRatio', {
// get: function() {return 300 / 96}
// });
// }, []);
const selectMapCell = useCallback( const selectMapCell = useCallback(
(cell: { x: number; y: number }) => { (cell: { x: number; y: number }) => {
if (!map.current) return; if (!map.current) return;
@ -425,7 +440,7 @@ const Map: React.FC = () => {
], ],
glyphs: "mapbox://fonts/mapbox/{fontstack}/{range}.pbf", glyphs: "mapbox://fonts/mapbox/{fontstack}/{range}.pbf",
}, },
center: [0, 0], center: [0,0],
zoom: 0, zoom: 0,
minZoom: 0, minZoom: 0,
maxZoom: 8, maxZoom: 8,
@ -433,6 +448,7 @@ const Map: React.FC = () => {
[-180, -85.051129], [-180, -85.051129],
[180, 85.051129], [180, 85.051129],
], ],
preserveDrawingBuffer: true,
}); });
map.current.on("load", () => { map.current.on("load", () => {
setMapLoaded(true); setMapLoaded(true);
@ -591,7 +607,7 @@ const Map: React.FC = () => {
cellY: 50 - y, cellY: 50 - y,
label: `${x - 57}, ${50 - y}`, label: `${x - 57}, ${50 - y}`,
color: editCount ? colorGradient.getColor(editCount) : "#888888", color: editCount ? colorGradient.getColor(editCount) : "#888888",
opacity: editCount ? Math.min((editCount / 150) * 0.25, 0.5) : 0, opacity: editCount ? Math.min(editCount * 0.25, 0.5) : 0,
}, },
}); });
} }
@ -805,7 +821,88 @@ const Map: React.FC = () => {
}); });
setHeatmapLoaded(true); setHeatmapLoaded(true);
}, [cellsData, mapLoaded, router, setHeatmapLoaded]); }, [cellsData, mapLoaded, router, setHeatmapLoaded, day, setDay]);
useEffect(() => {
if (!heatmapLoaded) return; // wait for heatmap to load
setTimeout(() => { // wait 1 second for it to *really* load
console.log('loaded');
map.current.getCanvas().toBlob((blob) => {
console.log('got blob');
saveAs(blob, `map_${dateToString(day)}.png`);
// will trigger new JSON fetch and re-render of the heatmap
const nextDay = new Date(day);
nextDay.setUTCDate(nextDay.getUTCDate() + 1);
if (nextDay > new Date()) return;
setDay(nextDay);
});
}, 100);
}, [heatmapLoaded, day, setDay]);
useEffect(() => {
if (!heatmapLoaded || !cellsData) return;
const zoom = map.current.getZoom();
const viewportNW = map.current.project([-180, 85.051129]);
const cellSize = Math.pow(2, zoom + 2);
const grid: GeoJSON.FeatureCollection<
GeoJSON.Geometry,
GeoJSON.GeoJsonProperties
> = {
type: "FeatureCollection",
features: [],
};
for (let x = 0; x < 128; x += 1) {
for (let y = 0; y < 128; y += 1) {
let nw = map.current.unproject([
x * cellSize + viewportNW.x,
y * cellSize + viewportNW.y,
]);
let ne = map.current.unproject([
x * cellSize + viewportNW.x + cellSize,
y * cellSize + viewportNW.y,
]);
let se = map.current.unproject([
x * cellSize + viewportNW.x + cellSize,
y * cellSize + viewportNW.y + cellSize,
]);
let sw = map.current.unproject([
x * cellSize + viewportNW.x,
y * cellSize + viewportNW.y + cellSize,
]);
const editCount = cellsData.data[`${x - 57},${50 - y}`];
grid.features.push({
type: "Feature",
id: x * 1000 + y,
geometry: {
type: "Polygon",
coordinates: [
[
[nw.lng, nw.lat],
[ne.lng, ne.lat],
[se.lng, se.lat],
[sw.lng, sw.lat],
[nw.lng, nw.lat],
],
],
},
properties: {
x: x,
y: y,
cellX: x - 57,
cellY: 50 - y,
label: `${x - 57}, ${50 - y}`,
color: editCount ? colorGradient.getColor(editCount) : "#888888",
opacity: editCount ? Math.min(editCount * 0.25, 0.5) : 0,
},
});
}
}
(map.current.getSource('grid-source') as GeoJSONSource).setData(grid);
console.log("refreshed grid");
}, [heatmapLoaded, cellsData]);
return ( return (
<> <>

139
package-lock.json generated
View File

@ -14,11 +14,12 @@
"babel-plugin-add-react-displayname": "^0.0.5", "babel-plugin-add-react-displayname": "^0.0.5",
"date-fns": "^2.28.0", "date-fns": "^2.28.0",
"downshift": "^6.1.7", "downshift": "^6.1.7",
"file-saver": "^2.0.5",
"javascript-color-gradient": "^1.3.2", "javascript-color-gradient": "^1.3.2",
"js-cookie": "^3.0.1", "js-cookie": "^3.0.1",
"logrocket": "^3.0.1", "logrocket": "^3.0.1",
"logrocket-react": "^5.0.1", "logrocket-react": "^5.0.1",
"mapbox-gl": "^2.10.0", "mapbox-gl": "^2.15.0",
"minisearch": "^5.0.0", "minisearch": "^5.0.0",
"next": "12.2.5", "next": "12.2.5",
"react": "17.0.2", "react": "17.0.2",
@ -1840,22 +1841,17 @@
} }
}, },
"node_modules/@mapbox/geojson-rewind": { "node_modules/@mapbox/geojson-rewind": {
"version": "0.5.1", "version": "0.5.2",
"resolved": "https://registry.npmjs.org/@mapbox/geojson-rewind/-/geojson-rewind-0.5.1.tgz", "resolved": "https://registry.npmjs.org/@mapbox/geojson-rewind/-/geojson-rewind-0.5.2.tgz",
"integrity": "sha512-eL7fMmfTBKjrb+VFHXCGv9Ot0zc3C0U+CwXo1IrP+EPwDczLoXv34Tgq3y+2mPSFNVUXgU42ILWJTC7145KPTA==", "integrity": "sha512-tJaT+RbYGJYStt7wI3cq4Nl4SXxG8W7JDG5DMJu97V25RnbNg3QtQtf+KD+VLjNpWKYsRvXDNmNrBgEETr1ifA==",
"dependencies": { "dependencies": {
"get-stream": "^6.0.1", "get-stream": "^6.0.1",
"minimist": "^1.2.5" "minimist": "^1.2.6"
}, },
"bin": { "bin": {
"geojson-rewind": "geojson-rewind" "geojson-rewind": "geojson-rewind"
} }
}, },
"node_modules/@mapbox/geojson-types": {
"version": "1.0.2",
"resolved": "https://registry.npmjs.org/@mapbox/geojson-types/-/geojson-types-1.0.2.tgz",
"integrity": "sha512-e9EBqHHv3EORHrSfbR9DqecPNn+AmuAoQxV6aL8Xu30bJMJR1o8PZLZzpk1Wq7/NfCbuhmakHTPYRhoqLsXRnw=="
},
"node_modules/@mapbox/jsonlint-lines-primitives": { "node_modules/@mapbox/jsonlint-lines-primitives": {
"version": "2.0.2", "version": "2.0.2",
"resolved": "https://registry.npmjs.org/@mapbox/jsonlint-lines-primitives/-/jsonlint-lines-primitives-2.0.2.tgz", "resolved": "https://registry.npmjs.org/@mapbox/jsonlint-lines-primitives/-/jsonlint-lines-primitives-2.0.2.tgz",
@ -1875,14 +1871,14 @@
"integrity": "sha1-ioP5M1x4YO/6Lu7KJUMyqgru2PI=" "integrity": "sha1-ioP5M1x4YO/6Lu7KJUMyqgru2PI="
}, },
"node_modules/@mapbox/tiny-sdf": { "node_modules/@mapbox/tiny-sdf": {
"version": "2.0.5", "version": "2.0.6",
"resolved": "https://registry.npmjs.org/@mapbox/tiny-sdf/-/tiny-sdf-2.0.5.tgz", "resolved": "https://registry.npmjs.org/@mapbox/tiny-sdf/-/tiny-sdf-2.0.6.tgz",
"integrity": "sha512-OhXt2lS//WpLdkqrzo/KwB7SRD8AiNTFFzuo9n14IBupzIMa67yGItcK7I2W9D8Ghpa4T04Sw9FWsKCJG50Bxw==" "integrity": "sha512-qMqa27TLw+ZQz5Jk+RcwZGH7BQf5G/TrutJhspsca/3SHwmgKQ1iq+d3Jxz5oysPVYTGP6aXxCo5Lk9Er6YBAA=="
}, },
"node_modules/@mapbox/unitbezier": { "node_modules/@mapbox/unitbezier": {
"version": "0.0.0", "version": "0.0.1",
"resolved": "https://registry.npmjs.org/@mapbox/unitbezier/-/unitbezier-0.0.0.tgz", "resolved": "https://registry.npmjs.org/@mapbox/unitbezier/-/unitbezier-0.0.1.tgz",
"integrity": "sha1-FWUb1VOme4WB+zmIEMmK2Go0Uk4=" "integrity": "sha512-nMkuDXFv60aBr9soUG5q+GvZYL+2KZHVvsqFCzqnkGEf46U2fvmytHaEVc1/YZbiLn8X+eR3QzX1+dwDO1lxlw=="
}, },
"node_modules/@mapbox/vector-tile": { "node_modules/@mapbox/vector-tile": {
"version": "1.3.1", "version": "1.3.1",
@ -4344,6 +4340,11 @@
"node": "^10.12.0 || >=12.0.0" "node": "^10.12.0 || >=12.0.0"
} }
}, },
"node_modules/file-saver": {
"version": "2.0.5",
"resolved": "https://registry.npmjs.org/file-saver/-/file-saver-2.0.5.tgz",
"integrity": "sha512-P9bmyZ3h/PRG+Nzga+rbdI4OEpNDzAVyy74uVO9ATgzLK6VtAsYybF/+TOCvrc0MO793d6+42lLyZTw7/ArVzA=="
},
"node_modules/fill-range": { "node_modules/fill-range": {
"version": "7.0.1", "version": "7.0.1",
"resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.0.1.tgz", "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.0.1.tgz",
@ -5445,9 +5446,9 @@
} }
}, },
"node_modules/kdbush": { "node_modules/kdbush": {
"version": "3.0.0", "version": "4.0.2",
"resolved": "https://registry.npmjs.org/kdbush/-/kdbush-3.0.0.tgz", "resolved": "https://registry.npmjs.org/kdbush/-/kdbush-4.0.2.tgz",
"integrity": "sha512-hRkd6/XW4HTsA9vjVpY9tuXJYLSlelnkTmVFu4M9/7MIYQtFcHpbugAU7UbOfjOiVSVYl2fqgBuJ32JUmRo5Ew==" "integrity": "sha512-WbCVYJ27Sz8zi9Q7Q0xHC+05iwkm3Znipc2XTlrnJbsHMYktW4hPhXUE8Ys1engBrvffoSCqbil1JQAa7clRpA=="
}, },
"node_modules/kind-of": { "node_modules/kind-of": {
"version": "6.0.3", "version": "6.0.3",
@ -5609,17 +5610,16 @@
} }
}, },
"node_modules/mapbox-gl": { "node_modules/mapbox-gl": {
"version": "2.10.0", "version": "2.15.0",
"resolved": "https://registry.npmjs.org/mapbox-gl/-/mapbox-gl-2.10.0.tgz", "resolved": "https://registry.npmjs.org/mapbox-gl/-/mapbox-gl-2.15.0.tgz",
"integrity": "sha512-ZAlCe55LXlbg60l15okSBs70NQAPLw3yRO3SSJMTB1uU7uj2QQbLCQPy1Ds+3B4wlaa5W3ewv8FNOZPQOoSSPA==", "integrity": "sha512-fjv+aYrd5TIHiL7wRa+W7KjtUqKWziJMZUkK5hm8TvJ3OLeNPx4NmW/DgfYhd/jHej8wWL+QJBDbdMMAKvNC0A==",
"dependencies": { "dependencies": {
"@mapbox/geojson-rewind": "^0.5.1", "@mapbox/geojson-rewind": "^0.5.2",
"@mapbox/geojson-types": "^1.0.2",
"@mapbox/jsonlint-lines-primitives": "^2.0.2", "@mapbox/jsonlint-lines-primitives": "^2.0.2",
"@mapbox/mapbox-gl-supported": "^2.0.1", "@mapbox/mapbox-gl-supported": "^2.0.1",
"@mapbox/point-geometry": "^0.1.0", "@mapbox/point-geometry": "^0.1.0",
"@mapbox/tiny-sdf": "^2.0.5", "@mapbox/tiny-sdf": "^2.0.6",
"@mapbox/unitbezier": "^0.0.0", "@mapbox/unitbezier": "^0.0.1",
"@mapbox/vector-tile": "^1.3.1", "@mapbox/vector-tile": "^1.3.1",
"@mapbox/whoots-js": "^3.1.0", "@mapbox/whoots-js": "^3.1.0",
"csscolorparser": "~1.0.3", "csscolorparser": "~1.0.3",
@ -5627,12 +5627,13 @@
"geojson-vt": "^3.2.1", "geojson-vt": "^3.2.1",
"gl-matrix": "^3.4.3", "gl-matrix": "^3.4.3",
"grid-index": "^1.1.0", "grid-index": "^1.1.0",
"kdbush": "^4.0.1",
"murmurhash-js": "^1.0.0", "murmurhash-js": "^1.0.0",
"pbf": "^3.2.1", "pbf": "^3.2.1",
"potpack": "^1.0.2", "potpack": "^2.0.0",
"quickselect": "^2.0.0", "quickselect": "^2.0.0",
"rw": "^1.3.3", "rw": "^1.3.3",
"supercluster": "^7.1.4", "supercluster": "^8.0.0",
"tinyqueue": "^2.0.3", "tinyqueue": "^2.0.3",
"vt-pbf": "^3.1.3" "vt-pbf": "^3.1.3"
} }
@ -6363,9 +6364,9 @@
} }
}, },
"node_modules/potpack": { "node_modules/potpack": {
"version": "1.0.2", "version": "2.0.0",
"resolved": "https://registry.npmjs.org/potpack/-/potpack-1.0.2.tgz", "resolved": "https://registry.npmjs.org/potpack/-/potpack-2.0.0.tgz",
"integrity": "sha512-choctRBIV9EMT9WGAZHn3V7t0Z2pMQyl0EZE6pFc/6ml3ssw7Dlf/oAOvFwjm1HVsqfQN8GfeFyJ+d8tRzqueQ==" "integrity": "sha512-Q+/tYsFU9r7xoOJ+y/ZTtdVQwTWfzjbiXBDMM/JKUux3+QPP02iUuIoeBQ+Ot6oEDlC+/PGjB/5A3K7KKb7hcw=="
}, },
"node_modules/prelude-ls": { "node_modules/prelude-ls": {
"version": "1.2.1", "version": "1.2.1",
@ -7393,11 +7394,11 @@
} }
}, },
"node_modules/supercluster": { "node_modules/supercluster": {
"version": "7.1.4", "version": "8.0.1",
"resolved": "https://registry.npmjs.org/supercluster/-/supercluster-7.1.4.tgz", "resolved": "https://registry.npmjs.org/supercluster/-/supercluster-8.0.1.tgz",
"integrity": "sha512-GhKkRM1jMR6WUwGPw05fs66pOFWhf59lXq+Q3J3SxPvhNcmgOtLRV6aVQPMRsmXdpaeFJGivt+t7QXUPL3ff4g==", "integrity": "sha512-IiOea5kJ9iqzD2t7QJq/cREyLHTtSmUT6gQsweojg9WH2sYJqZK9SswTu6jrscO6D1G5v5vYZ9ru/eq85lXeZQ==",
"dependencies": { "dependencies": {
"kdbush": "^3.0.0" "kdbush": "^4.0.2"
} }
}, },
"node_modules/supports-color": { "node_modules/supports-color": {
@ -9139,19 +9140,14 @@
} }
}, },
"@mapbox/geojson-rewind": { "@mapbox/geojson-rewind": {
"version": "0.5.1", "version": "0.5.2",
"resolved": "https://registry.npmjs.org/@mapbox/geojson-rewind/-/geojson-rewind-0.5.1.tgz", "resolved": "https://registry.npmjs.org/@mapbox/geojson-rewind/-/geojson-rewind-0.5.2.tgz",
"integrity": "sha512-eL7fMmfTBKjrb+VFHXCGv9Ot0zc3C0U+CwXo1IrP+EPwDczLoXv34Tgq3y+2mPSFNVUXgU42ILWJTC7145KPTA==", "integrity": "sha512-tJaT+RbYGJYStt7wI3cq4Nl4SXxG8W7JDG5DMJu97V25RnbNg3QtQtf+KD+VLjNpWKYsRvXDNmNrBgEETr1ifA==",
"requires": { "requires": {
"get-stream": "^6.0.1", "get-stream": "^6.0.1",
"minimist": "^1.2.5" "minimist": "^1.2.6"
} }
}, },
"@mapbox/geojson-types": {
"version": "1.0.2",
"resolved": "https://registry.npmjs.org/@mapbox/geojson-types/-/geojson-types-1.0.2.tgz",
"integrity": "sha512-e9EBqHHv3EORHrSfbR9DqecPNn+AmuAoQxV6aL8Xu30bJMJR1o8PZLZzpk1Wq7/NfCbuhmakHTPYRhoqLsXRnw=="
},
"@mapbox/jsonlint-lines-primitives": { "@mapbox/jsonlint-lines-primitives": {
"version": "2.0.2", "version": "2.0.2",
"resolved": "https://registry.npmjs.org/@mapbox/jsonlint-lines-primitives/-/jsonlint-lines-primitives-2.0.2.tgz", "resolved": "https://registry.npmjs.org/@mapbox/jsonlint-lines-primitives/-/jsonlint-lines-primitives-2.0.2.tgz",
@ -9168,14 +9164,14 @@
"integrity": "sha1-ioP5M1x4YO/6Lu7KJUMyqgru2PI=" "integrity": "sha1-ioP5M1x4YO/6Lu7KJUMyqgru2PI="
}, },
"@mapbox/tiny-sdf": { "@mapbox/tiny-sdf": {
"version": "2.0.5", "version": "2.0.6",
"resolved": "https://registry.npmjs.org/@mapbox/tiny-sdf/-/tiny-sdf-2.0.5.tgz", "resolved": "https://registry.npmjs.org/@mapbox/tiny-sdf/-/tiny-sdf-2.0.6.tgz",
"integrity": "sha512-OhXt2lS//WpLdkqrzo/KwB7SRD8AiNTFFzuo9n14IBupzIMa67yGItcK7I2W9D8Ghpa4T04Sw9FWsKCJG50Bxw==" "integrity": "sha512-qMqa27TLw+ZQz5Jk+RcwZGH7BQf5G/TrutJhspsca/3SHwmgKQ1iq+d3Jxz5oysPVYTGP6aXxCo5Lk9Er6YBAA=="
}, },
"@mapbox/unitbezier": { "@mapbox/unitbezier": {
"version": "0.0.0", "version": "0.0.1",
"resolved": "https://registry.npmjs.org/@mapbox/unitbezier/-/unitbezier-0.0.0.tgz", "resolved": "https://registry.npmjs.org/@mapbox/unitbezier/-/unitbezier-0.0.1.tgz",
"integrity": "sha1-FWUb1VOme4WB+zmIEMmK2Go0Uk4=" "integrity": "sha512-nMkuDXFv60aBr9soUG5q+GvZYL+2KZHVvsqFCzqnkGEf46U2fvmytHaEVc1/YZbiLn8X+eR3QzX1+dwDO1lxlw=="
}, },
"@mapbox/vector-tile": { "@mapbox/vector-tile": {
"version": "1.3.1", "version": "1.3.1",
@ -10974,6 +10970,11 @@
"flat-cache": "^3.0.4" "flat-cache": "^3.0.4"
} }
}, },
"file-saver": {
"version": "2.0.5",
"resolved": "https://registry.npmjs.org/file-saver/-/file-saver-2.0.5.tgz",
"integrity": "sha512-P9bmyZ3h/PRG+Nzga+rbdI4OEpNDzAVyy74uVO9ATgzLK6VtAsYybF/+TOCvrc0MO793d6+42lLyZTw7/ArVzA=="
},
"fill-range": { "fill-range": {
"version": "7.0.1", "version": "7.0.1",
"resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.0.1.tgz", "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.0.1.tgz",
@ -11784,9 +11785,9 @@
} }
}, },
"kdbush": { "kdbush": {
"version": "3.0.0", "version": "4.0.2",
"resolved": "https://registry.npmjs.org/kdbush/-/kdbush-3.0.0.tgz", "resolved": "https://registry.npmjs.org/kdbush/-/kdbush-4.0.2.tgz",
"integrity": "sha512-hRkd6/XW4HTsA9vjVpY9tuXJYLSlelnkTmVFu4M9/7MIYQtFcHpbugAU7UbOfjOiVSVYl2fqgBuJ32JUmRo5Ew==" "integrity": "sha512-WbCVYJ27Sz8zi9Q7Q0xHC+05iwkm3Znipc2XTlrnJbsHMYktW4hPhXUE8Ys1engBrvffoSCqbil1JQAa7clRpA=="
}, },
"kind-of": { "kind-of": {
"version": "6.0.3", "version": "6.0.3",
@ -11919,17 +11920,16 @@
} }
}, },
"mapbox-gl": { "mapbox-gl": {
"version": "2.10.0", "version": "2.15.0",
"resolved": "https://registry.npmjs.org/mapbox-gl/-/mapbox-gl-2.10.0.tgz", "resolved": "https://registry.npmjs.org/mapbox-gl/-/mapbox-gl-2.15.0.tgz",
"integrity": "sha512-ZAlCe55LXlbg60l15okSBs70NQAPLw3yRO3SSJMTB1uU7uj2QQbLCQPy1Ds+3B4wlaa5W3ewv8FNOZPQOoSSPA==", "integrity": "sha512-fjv+aYrd5TIHiL7wRa+W7KjtUqKWziJMZUkK5hm8TvJ3OLeNPx4NmW/DgfYhd/jHej8wWL+QJBDbdMMAKvNC0A==",
"requires": { "requires": {
"@mapbox/geojson-rewind": "^0.5.1", "@mapbox/geojson-rewind": "^0.5.2",
"@mapbox/geojson-types": "^1.0.2",
"@mapbox/jsonlint-lines-primitives": "^2.0.2", "@mapbox/jsonlint-lines-primitives": "^2.0.2",
"@mapbox/mapbox-gl-supported": "^2.0.1", "@mapbox/mapbox-gl-supported": "^2.0.1",
"@mapbox/point-geometry": "^0.1.0", "@mapbox/point-geometry": "^0.1.0",
"@mapbox/tiny-sdf": "^2.0.5", "@mapbox/tiny-sdf": "^2.0.6",
"@mapbox/unitbezier": "^0.0.0", "@mapbox/unitbezier": "^0.0.1",
"@mapbox/vector-tile": "^1.3.1", "@mapbox/vector-tile": "^1.3.1",
"@mapbox/whoots-js": "^3.1.0", "@mapbox/whoots-js": "^3.1.0",
"csscolorparser": "~1.0.3", "csscolorparser": "~1.0.3",
@ -11937,12 +11937,13 @@
"geojson-vt": "^3.2.1", "geojson-vt": "^3.2.1",
"gl-matrix": "^3.4.3", "gl-matrix": "^3.4.3",
"grid-index": "^1.1.0", "grid-index": "^1.1.0",
"kdbush": "^4.0.1",
"murmurhash-js": "^1.0.0", "murmurhash-js": "^1.0.0",
"pbf": "^3.2.1", "pbf": "^3.2.1",
"potpack": "^1.0.2", "potpack": "^2.0.0",
"quickselect": "^2.0.0", "quickselect": "^2.0.0",
"rw": "^1.3.3", "rw": "^1.3.3",
"supercluster": "^7.1.4", "supercluster": "^8.0.0",
"tinyqueue": "^2.0.3", "tinyqueue": "^2.0.3",
"vt-pbf": "^3.1.3" "vt-pbf": "^3.1.3"
} }
@ -12452,9 +12453,9 @@
} }
}, },
"potpack": { "potpack": {
"version": "1.0.2", "version": "2.0.0",
"resolved": "https://registry.npmjs.org/potpack/-/potpack-1.0.2.tgz", "resolved": "https://registry.npmjs.org/potpack/-/potpack-2.0.0.tgz",
"integrity": "sha512-choctRBIV9EMT9WGAZHn3V7t0Z2pMQyl0EZE6pFc/6ml3ssw7Dlf/oAOvFwjm1HVsqfQN8GfeFyJ+d8tRzqueQ==" "integrity": "sha512-Q+/tYsFU9r7xoOJ+y/ZTtdVQwTWfzjbiXBDMM/JKUux3+QPP02iUuIoeBQ+Ot6oEDlC+/PGjB/5A3K7KKb7hcw=="
}, },
"prelude-ls": { "prelude-ls": {
"version": "1.2.1", "version": "1.2.1",
@ -13240,11 +13241,11 @@
"requires": {} "requires": {}
}, },
"supercluster": { "supercluster": {
"version": "7.1.4", "version": "8.0.1",
"resolved": "https://registry.npmjs.org/supercluster/-/supercluster-7.1.4.tgz", "resolved": "https://registry.npmjs.org/supercluster/-/supercluster-8.0.1.tgz",
"integrity": "sha512-GhKkRM1jMR6WUwGPw05fs66pOFWhf59lXq+Q3J3SxPvhNcmgOtLRV6aVQPMRsmXdpaeFJGivt+t7QXUPL3ff4g==", "integrity": "sha512-IiOea5kJ9iqzD2t7QJq/cREyLHTtSmUT6gQsweojg9WH2sYJqZK9SswTu6jrscO6D1G5v5vYZ9ru/eq85lXeZQ==",
"requires": { "requires": {
"kdbush": "^3.0.0" "kdbush": "^4.0.2"
} }
}, },
"supports-color": { "supports-color": {

3
package.json
View File

@ -17,11 +17,12 @@
"babel-plugin-add-react-displayname": "^0.0.5", "babel-plugin-add-react-displayname": "^0.0.5",
"date-fns": "^2.28.0", "date-fns": "^2.28.0",
"downshift": "^6.1.7", "downshift": "^6.1.7",
"file-saver": "^2.0.5",
"javascript-color-gradient": "^1.3.2", "javascript-color-gradient": "^1.3.2",
"js-cookie": "^3.0.1", "js-cookie": "^3.0.1",
"logrocket": "^3.0.1", "logrocket": "^3.0.1",
"logrocket-react": "^5.0.1", "logrocket-react": "^5.0.1",
"mapbox-gl": "^2.10.0", "mapbox-gl": "^2.15.0",
"minisearch": "^5.0.0", "minisearch": "^5.0.0",
"next": "12.2.5", "next": "12.2.5",
"react": "17.0.2", "react": "17.0.2",

29
styles/Map.module.css
View File

@ -2,8 +2,9 @@
position: absolute; position: absolute;
top: 0; top: 0;
bottom: 0; bottom: 0;
width: 100%;
z-index: 2; z-index: 2;
width: 4000px;
height: 4000px;
} }
.map-wrapper { .map-wrapper {
@ -11,16 +12,16 @@
height: 100%; height: 100%;
} }
.map-wrapper-sidebar-open .map-container { /* .map-wrapper-sidebar-open .map-container { */
width: calc(100% - 300px); /* width: calc(100% - 300px); */
left: 300px; /* left: 300px; */
} /* } */
/**/
@media only screen and (max-width: 600px) { /* @media only screen and (max-width: 600px) { */
.map-wrapper-sidebar-open .map-container { /* .map-wrapper-sidebar-open .map-container { */
height: calc(100% - 45%); /* height: calc(100% - 45%); */
width: 100%; /* width: 100%; */
left: 0; /* left: 0; */
bottom: 45%; /* bottom: 45%; */
} /* } */
} /* } */