Configure site to download timelapse images
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:
parent
e7be15a201
commit
a2a2847894
@ -1,7 +1,8 @@
|
||||
import React, { useCallback, useRef, useEffect, useState } from "react";
|
||||
import { useRouter } from "next/router";
|
||||
import { saveAs } from "file-saver";
|
||||
import Gradient from "javascript-color-gradient";
|
||||
import mapboxgl from "mapbox-gl";
|
||||
import mapboxgl, { GeoJSONSource } from "mapbox-gl";
|
||||
import useSWRImmutable from "swr/immutable";
|
||||
|
||||
import { useAppDispatch, useAppSelector } from "../lib/hooks";
|
||||
@ -25,7 +26,14 @@ colorGradient.setGradient(
|
||||
"#FFA500",
|
||||
"#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 router = useRouter();
|
||||
@ -64,11 +72,18 @@ const Map: React.FC = () => {
|
||||
(state) => state.plugins.selectedFetchedPlugin
|
||||
);
|
||||
|
||||
const [day, setDay] = useState(new Date('2011-11-11'));
|
||||
const { data: cellsData, error: cellsError } = useSWRImmutable(
|
||||
"https://cells.modmapper.com/edits.json",
|
||||
`http://localhost:8000/cell_edits_${dateToString(day)}.json`,
|
||||
(_) => jsonFetcherWithLastModified<Record<string, number>>(_)
|
||||
);
|
||||
|
||||
// useEffect(() => {
|
||||
// Object.defineProperty(window, 'devicePixelRatio', {
|
||||
// get: function() {return 300 / 96}
|
||||
// });
|
||||
// }, []);
|
||||
|
||||
const selectMapCell = useCallback(
|
||||
(cell: { x: number; y: number }) => {
|
||||
if (!map.current) return;
|
||||
@ -425,7 +440,7 @@ const Map: React.FC = () => {
|
||||
],
|
||||
glyphs: "mapbox://fonts/mapbox/{fontstack}/{range}.pbf",
|
||||
},
|
||||
center: [0, 0],
|
||||
center: [0,0],
|
||||
zoom: 0,
|
||||
minZoom: 0,
|
||||
maxZoom: 8,
|
||||
@ -433,6 +448,7 @@ const Map: React.FC = () => {
|
||||
[-180, -85.051129],
|
||||
[180, 85.051129],
|
||||
],
|
||||
preserveDrawingBuffer: true,
|
||||
});
|
||||
map.current.on("load", () => {
|
||||
setMapLoaded(true);
|
||||
@ -591,7 +607,7 @@ const Map: React.FC = () => {
|
||||
cellY: 50 - y,
|
||||
label: `${x - 57}, ${50 - y}`,
|
||||
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);
|
||||
}, [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 (
|
||||
<>
|
||||
|
||||
139
package-lock.json
generated
139
package-lock.json
generated
@ -14,11 +14,12 @@
|
||||
"babel-plugin-add-react-displayname": "^0.0.5",
|
||||
"date-fns": "^2.28.0",
|
||||
"downshift": "^6.1.7",
|
||||
"file-saver": "^2.0.5",
|
||||
"javascript-color-gradient": "^1.3.2",
|
||||
"js-cookie": "^3.0.1",
|
||||
"logrocket": "^3.0.1",
|
||||
"logrocket-react": "^5.0.1",
|
||||
"mapbox-gl": "^2.10.0",
|
||||
"mapbox-gl": "^2.15.0",
|
||||
"minisearch": "^5.0.0",
|
||||
"next": "12.2.5",
|
||||
"react": "17.0.2",
|
||||
@ -1840,22 +1841,17 @@
|
||||
}
|
||||
},
|
||||
"node_modules/@mapbox/geojson-rewind": {
|
||||
"version": "0.5.1",
|
||||
"resolved": "https://registry.npmjs.org/@mapbox/geojson-rewind/-/geojson-rewind-0.5.1.tgz",
|
||||
"integrity": "sha512-eL7fMmfTBKjrb+VFHXCGv9Ot0zc3C0U+CwXo1IrP+EPwDczLoXv34Tgq3y+2mPSFNVUXgU42ILWJTC7145KPTA==",
|
||||
"version": "0.5.2",
|
||||
"resolved": "https://registry.npmjs.org/@mapbox/geojson-rewind/-/geojson-rewind-0.5.2.tgz",
|
||||
"integrity": "sha512-tJaT+RbYGJYStt7wI3cq4Nl4SXxG8W7JDG5DMJu97V25RnbNg3QtQtf+KD+VLjNpWKYsRvXDNmNrBgEETr1ifA==",
|
||||
"dependencies": {
|
||||
"get-stream": "^6.0.1",
|
||||
"minimist": "^1.2.5"
|
||||
"minimist": "^1.2.6"
|
||||
},
|
||||
"bin": {
|
||||
"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": {
|
||||
"version": "2.0.2",
|
||||
"resolved": "https://registry.npmjs.org/@mapbox/jsonlint-lines-primitives/-/jsonlint-lines-primitives-2.0.2.tgz",
|
||||
@ -1875,14 +1871,14 @@
|
||||
"integrity": "sha1-ioP5M1x4YO/6Lu7KJUMyqgru2PI="
|
||||
},
|
||||
"node_modules/@mapbox/tiny-sdf": {
|
||||
"version": "2.0.5",
|
||||
"resolved": "https://registry.npmjs.org/@mapbox/tiny-sdf/-/tiny-sdf-2.0.5.tgz",
|
||||
"integrity": "sha512-OhXt2lS//WpLdkqrzo/KwB7SRD8AiNTFFzuo9n14IBupzIMa67yGItcK7I2W9D8Ghpa4T04Sw9FWsKCJG50Bxw=="
|
||||
"version": "2.0.6",
|
||||
"resolved": "https://registry.npmjs.org/@mapbox/tiny-sdf/-/tiny-sdf-2.0.6.tgz",
|
||||
"integrity": "sha512-qMqa27TLw+ZQz5Jk+RcwZGH7BQf5G/TrutJhspsca/3SHwmgKQ1iq+d3Jxz5oysPVYTGP6aXxCo5Lk9Er6YBAA=="
|
||||
},
|
||||
"node_modules/@mapbox/unitbezier": {
|
||||
"version": "0.0.0",
|
||||
"resolved": "https://registry.npmjs.org/@mapbox/unitbezier/-/unitbezier-0.0.0.tgz",
|
||||
"integrity": "sha1-FWUb1VOme4WB+zmIEMmK2Go0Uk4="
|
||||
"version": "0.0.1",
|
||||
"resolved": "https://registry.npmjs.org/@mapbox/unitbezier/-/unitbezier-0.0.1.tgz",
|
||||
"integrity": "sha512-nMkuDXFv60aBr9soUG5q+GvZYL+2KZHVvsqFCzqnkGEf46U2fvmytHaEVc1/YZbiLn8X+eR3QzX1+dwDO1lxlw=="
|
||||
},
|
||||
"node_modules/@mapbox/vector-tile": {
|
||||
"version": "1.3.1",
|
||||
@ -4344,6 +4340,11 @@
|
||||
"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": {
|
||||
"version": "7.0.1",
|
||||
"resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.0.1.tgz",
|
||||
@ -5445,9 +5446,9 @@
|
||||
}
|
||||
},
|
||||
"node_modules/kdbush": {
|
||||
"version": "3.0.0",
|
||||
"resolved": "https://registry.npmjs.org/kdbush/-/kdbush-3.0.0.tgz",
|
||||
"integrity": "sha512-hRkd6/XW4HTsA9vjVpY9tuXJYLSlelnkTmVFu4M9/7MIYQtFcHpbugAU7UbOfjOiVSVYl2fqgBuJ32JUmRo5Ew=="
|
||||
"version": "4.0.2",
|
||||
"resolved": "https://registry.npmjs.org/kdbush/-/kdbush-4.0.2.tgz",
|
||||
"integrity": "sha512-WbCVYJ27Sz8zi9Q7Q0xHC+05iwkm3Znipc2XTlrnJbsHMYktW4hPhXUE8Ys1engBrvffoSCqbil1JQAa7clRpA=="
|
||||
},
|
||||
"node_modules/kind-of": {
|
||||
"version": "6.0.3",
|
||||
@ -5609,17 +5610,16 @@
|
||||
}
|
||||
},
|
||||
"node_modules/mapbox-gl": {
|
||||
"version": "2.10.0",
|
||||
"resolved": "https://registry.npmjs.org/mapbox-gl/-/mapbox-gl-2.10.0.tgz",
|
||||
"integrity": "sha512-ZAlCe55LXlbg60l15okSBs70NQAPLw3yRO3SSJMTB1uU7uj2QQbLCQPy1Ds+3B4wlaa5W3ewv8FNOZPQOoSSPA==",
|
||||
"version": "2.15.0",
|
||||
"resolved": "https://registry.npmjs.org/mapbox-gl/-/mapbox-gl-2.15.0.tgz",
|
||||
"integrity": "sha512-fjv+aYrd5TIHiL7wRa+W7KjtUqKWziJMZUkK5hm8TvJ3OLeNPx4NmW/DgfYhd/jHej8wWL+QJBDbdMMAKvNC0A==",
|
||||
"dependencies": {
|
||||
"@mapbox/geojson-rewind": "^0.5.1",
|
||||
"@mapbox/geojson-types": "^1.0.2",
|
||||
"@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.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",
|
||||
@ -5627,12 +5627,13 @@
|
||||
"geojson-vt": "^3.2.1",
|
||||
"gl-matrix": "^3.4.3",
|
||||
"grid-index": "^1.1.0",
|
||||
"kdbush": "^4.0.1",
|
||||
"murmurhash-js": "^1.0.0",
|
||||
"pbf": "^3.2.1",
|
||||
"potpack": "^1.0.2",
|
||||
"potpack": "^2.0.0",
|
||||
"quickselect": "^2.0.0",
|
||||
"rw": "^1.3.3",
|
||||
"supercluster": "^7.1.4",
|
||||
"supercluster": "^8.0.0",
|
||||
"tinyqueue": "^2.0.3",
|
||||
"vt-pbf": "^3.1.3"
|
||||
}
|
||||
@ -6363,9 +6364,9 @@
|
||||
}
|
||||
},
|
||||
"node_modules/potpack": {
|
||||
"version": "1.0.2",
|
||||
"resolved": "https://registry.npmjs.org/potpack/-/potpack-1.0.2.tgz",
|
||||
"integrity": "sha512-choctRBIV9EMT9WGAZHn3V7t0Z2pMQyl0EZE6pFc/6ml3ssw7Dlf/oAOvFwjm1HVsqfQN8GfeFyJ+d8tRzqueQ=="
|
||||
"version": "2.0.0",
|
||||
"resolved": "https://registry.npmjs.org/potpack/-/potpack-2.0.0.tgz",
|
||||
"integrity": "sha512-Q+/tYsFU9r7xoOJ+y/ZTtdVQwTWfzjbiXBDMM/JKUux3+QPP02iUuIoeBQ+Ot6oEDlC+/PGjB/5A3K7KKb7hcw=="
|
||||
},
|
||||
"node_modules/prelude-ls": {
|
||||
"version": "1.2.1",
|
||||
@ -7393,11 +7394,11 @@
|
||||
}
|
||||
},
|
||||
"node_modules/supercluster": {
|
||||
"version": "7.1.4",
|
||||
"resolved": "https://registry.npmjs.org/supercluster/-/supercluster-7.1.4.tgz",
|
||||
"integrity": "sha512-GhKkRM1jMR6WUwGPw05fs66pOFWhf59lXq+Q3J3SxPvhNcmgOtLRV6aVQPMRsmXdpaeFJGivt+t7QXUPL3ff4g==",
|
||||
"version": "8.0.1",
|
||||
"resolved": "https://registry.npmjs.org/supercluster/-/supercluster-8.0.1.tgz",
|
||||
"integrity": "sha512-IiOea5kJ9iqzD2t7QJq/cREyLHTtSmUT6gQsweojg9WH2sYJqZK9SswTu6jrscO6D1G5v5vYZ9ru/eq85lXeZQ==",
|
||||
"dependencies": {
|
||||
"kdbush": "^3.0.0"
|
||||
"kdbush": "^4.0.2"
|
||||
}
|
||||
},
|
||||
"node_modules/supports-color": {
|
||||
@ -9139,19 +9140,14 @@
|
||||
}
|
||||
},
|
||||
"@mapbox/geojson-rewind": {
|
||||
"version": "0.5.1",
|
||||
"resolved": "https://registry.npmjs.org/@mapbox/geojson-rewind/-/geojson-rewind-0.5.1.tgz",
|
||||
"integrity": "sha512-eL7fMmfTBKjrb+VFHXCGv9Ot0zc3C0U+CwXo1IrP+EPwDczLoXv34Tgq3y+2mPSFNVUXgU42ILWJTC7145KPTA==",
|
||||
"version": "0.5.2",
|
||||
"resolved": "https://registry.npmjs.org/@mapbox/geojson-rewind/-/geojson-rewind-0.5.2.tgz",
|
||||
"integrity": "sha512-tJaT+RbYGJYStt7wI3cq4Nl4SXxG8W7JDG5DMJu97V25RnbNg3QtQtf+KD+VLjNpWKYsRvXDNmNrBgEETr1ifA==",
|
||||
"requires": {
|
||||
"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": {
|
||||
"version": "2.0.2",
|
||||
"resolved": "https://registry.npmjs.org/@mapbox/jsonlint-lines-primitives/-/jsonlint-lines-primitives-2.0.2.tgz",
|
||||
@ -9168,14 +9164,14 @@
|
||||
"integrity": "sha1-ioP5M1x4YO/6Lu7KJUMyqgru2PI="
|
||||
},
|
||||
"@mapbox/tiny-sdf": {
|
||||
"version": "2.0.5",
|
||||
"resolved": "https://registry.npmjs.org/@mapbox/tiny-sdf/-/tiny-sdf-2.0.5.tgz",
|
||||
"integrity": "sha512-OhXt2lS//WpLdkqrzo/KwB7SRD8AiNTFFzuo9n14IBupzIMa67yGItcK7I2W9D8Ghpa4T04Sw9FWsKCJG50Bxw=="
|
||||
"version": "2.0.6",
|
||||
"resolved": "https://registry.npmjs.org/@mapbox/tiny-sdf/-/tiny-sdf-2.0.6.tgz",
|
||||
"integrity": "sha512-qMqa27TLw+ZQz5Jk+RcwZGH7BQf5G/TrutJhspsca/3SHwmgKQ1iq+d3Jxz5oysPVYTGP6aXxCo5Lk9Er6YBAA=="
|
||||
},
|
||||
"@mapbox/unitbezier": {
|
||||
"version": "0.0.0",
|
||||
"resolved": "https://registry.npmjs.org/@mapbox/unitbezier/-/unitbezier-0.0.0.tgz",
|
||||
"integrity": "sha1-FWUb1VOme4WB+zmIEMmK2Go0Uk4="
|
||||
"version": "0.0.1",
|
||||
"resolved": "https://registry.npmjs.org/@mapbox/unitbezier/-/unitbezier-0.0.1.tgz",
|
||||
"integrity": "sha512-nMkuDXFv60aBr9soUG5q+GvZYL+2KZHVvsqFCzqnkGEf46U2fvmytHaEVc1/YZbiLn8X+eR3QzX1+dwDO1lxlw=="
|
||||
},
|
||||
"@mapbox/vector-tile": {
|
||||
"version": "1.3.1",
|
||||
@ -10974,6 +10970,11 @@
|
||||
"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": {
|
||||
"version": "7.0.1",
|
||||
"resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.0.1.tgz",
|
||||
@ -11784,9 +11785,9 @@
|
||||
}
|
||||
},
|
||||
"kdbush": {
|
||||
"version": "3.0.0",
|
||||
"resolved": "https://registry.npmjs.org/kdbush/-/kdbush-3.0.0.tgz",
|
||||
"integrity": "sha512-hRkd6/XW4HTsA9vjVpY9tuXJYLSlelnkTmVFu4M9/7MIYQtFcHpbugAU7UbOfjOiVSVYl2fqgBuJ32JUmRo5Ew=="
|
||||
"version": "4.0.2",
|
||||
"resolved": "https://registry.npmjs.org/kdbush/-/kdbush-4.0.2.tgz",
|
||||
"integrity": "sha512-WbCVYJ27Sz8zi9Q7Q0xHC+05iwkm3Znipc2XTlrnJbsHMYktW4hPhXUE8Ys1engBrvffoSCqbil1JQAa7clRpA=="
|
||||
},
|
||||
"kind-of": {
|
||||
"version": "6.0.3",
|
||||
@ -11919,17 +11920,16 @@
|
||||
}
|
||||
},
|
||||
"mapbox-gl": {
|
||||
"version": "2.10.0",
|
||||
"resolved": "https://registry.npmjs.org/mapbox-gl/-/mapbox-gl-2.10.0.tgz",
|
||||
"integrity": "sha512-ZAlCe55LXlbg60l15okSBs70NQAPLw3yRO3SSJMTB1uU7uj2QQbLCQPy1Ds+3B4wlaa5W3ewv8FNOZPQOoSSPA==",
|
||||
"version": "2.15.0",
|
||||
"resolved": "https://registry.npmjs.org/mapbox-gl/-/mapbox-gl-2.15.0.tgz",
|
||||
"integrity": "sha512-fjv+aYrd5TIHiL7wRa+W7KjtUqKWziJMZUkK5hm8TvJ3OLeNPx4NmW/DgfYhd/jHej8wWL+QJBDbdMMAKvNC0A==",
|
||||
"requires": {
|
||||
"@mapbox/geojson-rewind": "^0.5.1",
|
||||
"@mapbox/geojson-types": "^1.0.2",
|
||||
"@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.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",
|
||||
@ -11937,12 +11937,13 @@
|
||||
"geojson-vt": "^3.2.1",
|
||||
"gl-matrix": "^3.4.3",
|
||||
"grid-index": "^1.1.0",
|
||||
"kdbush": "^4.0.1",
|
||||
"murmurhash-js": "^1.0.0",
|
||||
"pbf": "^3.2.1",
|
||||
"potpack": "^1.0.2",
|
||||
"potpack": "^2.0.0",
|
||||
"quickselect": "^2.0.0",
|
||||
"rw": "^1.3.3",
|
||||
"supercluster": "^7.1.4",
|
||||
"supercluster": "^8.0.0",
|
||||
"tinyqueue": "^2.0.3",
|
||||
"vt-pbf": "^3.1.3"
|
||||
}
|
||||
@ -12452,9 +12453,9 @@
|
||||
}
|
||||
},
|
||||
"potpack": {
|
||||
"version": "1.0.2",
|
||||
"resolved": "https://registry.npmjs.org/potpack/-/potpack-1.0.2.tgz",
|
||||
"integrity": "sha512-choctRBIV9EMT9WGAZHn3V7t0Z2pMQyl0EZE6pFc/6ml3ssw7Dlf/oAOvFwjm1HVsqfQN8GfeFyJ+d8tRzqueQ=="
|
||||
"version": "2.0.0",
|
||||
"resolved": "https://registry.npmjs.org/potpack/-/potpack-2.0.0.tgz",
|
||||
"integrity": "sha512-Q+/tYsFU9r7xoOJ+y/ZTtdVQwTWfzjbiXBDMM/JKUux3+QPP02iUuIoeBQ+Ot6oEDlC+/PGjB/5A3K7KKb7hcw=="
|
||||
},
|
||||
"prelude-ls": {
|
||||
"version": "1.2.1",
|
||||
@ -13240,11 +13241,11 @@
|
||||
"requires": {}
|
||||
},
|
||||
"supercluster": {
|
||||
"version": "7.1.4",
|
||||
"resolved": "https://registry.npmjs.org/supercluster/-/supercluster-7.1.4.tgz",
|
||||
"integrity": "sha512-GhKkRM1jMR6WUwGPw05fs66pOFWhf59lXq+Q3J3SxPvhNcmgOtLRV6aVQPMRsmXdpaeFJGivt+t7QXUPL3ff4g==",
|
||||
"version": "8.0.1",
|
||||
"resolved": "https://registry.npmjs.org/supercluster/-/supercluster-8.0.1.tgz",
|
||||
"integrity": "sha512-IiOea5kJ9iqzD2t7QJq/cREyLHTtSmUT6gQsweojg9WH2sYJqZK9SswTu6jrscO6D1G5v5vYZ9ru/eq85lXeZQ==",
|
||||
"requires": {
|
||||
"kdbush": "^3.0.0"
|
||||
"kdbush": "^4.0.2"
|
||||
}
|
||||
},
|
||||
"supports-color": {
|
||||
|
||||
@ -17,11 +17,12 @@
|
||||
"babel-plugin-add-react-displayname": "^0.0.5",
|
||||
"date-fns": "^2.28.0",
|
||||
"downshift": "^6.1.7",
|
||||
"file-saver": "^2.0.5",
|
||||
"javascript-color-gradient": "^1.3.2",
|
||||
"js-cookie": "^3.0.1",
|
||||
"logrocket": "^3.0.1",
|
||||
"logrocket-react": "^5.0.1",
|
||||
"mapbox-gl": "^2.10.0",
|
||||
"mapbox-gl": "^2.15.0",
|
||||
"minisearch": "^5.0.0",
|
||||
"next": "12.2.5",
|
||||
"react": "17.0.2",
|
||||
|
||||
@ -2,8 +2,9 @@
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
z-index: 2;
|
||||
width: 4000px;
|
||||
height: 4000px;
|
||||
}
|
||||
|
||||
.map-wrapper {
|
||||
@ -11,16 +12,16 @@
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.map-wrapper-sidebar-open .map-container {
|
||||
width: calc(100% - 300px);
|
||||
left: 300px;
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 600px) {
|
||||
.map-wrapper-sidebar-open .map-container {
|
||||
height: calc(100% - 45%);
|
||||
width: 100%;
|
||||
left: 0;
|
||||
bottom: 45%;
|
||||
}
|
||||
}
|
||||
/* .map-wrapper-sidebar-open .map-container { */
|
||||
/* width: calc(100% - 300px); */
|
||||
/* left: 300px; */
|
||||
/* } */
|
||||
/**/
|
||||
/* @media only screen and (max-width: 600px) { */
|
||||
/* .map-wrapper-sidebar-open .map-container { */
|
||||
/* height: calc(100% - 45%); */
|
||||
/* width: 100%; */
|
||||
/* left: 0; */
|
||||
/* bottom: 45%; */
|
||||
/* } */
|
||||
/* } */
|
||||
|
||||
Loading…
Reference in New Issue
Block a user