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.
2023-11-18 02:04:28 -05:00
4 changed files with 190 additions and 90 deletions
--- a/components/Map.tsx
+++ b/components/Map.tsx
@ -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;
@ -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 (
    <>
--- a/package-lock.json
+++ b/package-lock.json
@ -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": {
--- a/package.json
+++ b/package.json
@ -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",
--- a/styles/Map.module.css
+++ b/styles/Map.module.css
@ -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%; */
+/*   } */
+/* } */