diff --git a/components/Map.tsx b/components/Map.tsx index fbf3f86..e46fe36 100644 --- a/components/Map.tsx +++ b/components/Map.tsx @@ -1,20 +1,24 @@ -import React, { useRef, useEffect, useState } from "react"; +import React, { useRef, useEffect } from "react"; import Gradient from "javascript-color-gradient"; -import mapboxgl from "!mapbox-gl"; // eslint-disable-line import/no-webpack-loader-syntax +import mapboxgl from "mapbox-gl"; import styles from "../styles/Map.module.css"; import cellModEdits from "../data/cellModEditCounts.json"; import ToggleLayersControl from "./ToggleLayersControl"; -mapboxgl.accessToken = process.env.NEXT_PUBLIC_MAPBOX_TOKEN; +mapboxgl.accessToken = process.env.NEXT_PUBLIC_MAPBOX_TOKEN ?? ""; const colorGradient = new Gradient(); colorGradient.setGradient("#888888", "#00FF00", "#FFFF00", "#FF0000"); colorGradient.setMidpoint(300); const Map = () => { - const mapContainer = useRef(null); - const map = useRef(null); + const mapContainer = useRef( + null + ) as React.MutableRefObject; + const map = useRef( + null + ) as React.MutableRefObject; useEffect(() => { if (map.current) return; // initialize map only once @@ -57,7 +61,10 @@ const Map = () => { var viewportNW = map.current.project([-180, 85.051129]); var cellSize = Math.pow(2, zoom + 2); - const graticule = { + const graticule: GeoJSON.FeatureCollection< + GeoJSON.Geometry, + GeoJSON.GeoJsonProperties + > = { type: "FeatureCollection", features: [], }; @@ -104,7 +111,10 @@ const Map = () => { source: "graticule", }); - const gridLabelPoints = { + const gridLabelPoints: GeoJSON.FeatureCollection< + GeoJSON.Geometry, + GeoJSON.GeoJsonProperties + > = { type: "FeatureCollection", features: [], }; @@ -153,7 +163,10 @@ const Map = () => { "graticule" ); - const grid = { + const grid: GeoJSON.FeatureCollection< + GeoJSON.Geometry, + GeoJSON.GeoJsonProperties + > = { type: "FeatureCollection", features: [], }; @@ -175,7 +188,9 @@ const Map = () => { x * cellSize + viewportNW.x, y * cellSize + viewportNW.y + cellSize, ]); - const editCount = cellModEdits[`${x - 57},${50 - y}`]; + const editCount = (cellModEdits as Record)[ + `${x - 57},${50 - y}` + ]; grid.features.push({ type: "Feature", geometry: { @@ -226,7 +241,7 @@ const Map = () => { }); map.current.on("click", "grid-layer", (e) => { - console.log(e.features[0]); + console.log(e.features && e.features[0]); }); }); diff --git a/components/ToggleLayersControl.tsx b/components/ToggleLayersControl.tsx index 309b497..f399366 100644 --- a/components/ToggleLayersControl.tsx +++ b/components/ToggleLayersControl.tsx @@ -1,4 +1,5 @@ -import React, { useRef, useEffect, useState } from "react"; +import React, { useEffect, useState } from "react"; +import type mapboxgl from "mapbox-gl"; import styles from "../styles/ToggleLayersControl.module.css"; @@ -19,7 +20,7 @@ const ToggleLayersControl: React.FC = ({ map }) => { heatmapVisible ? "visible" : "none" ); } - }, [heatmapVisible]); + }, [map, heatmapVisible]); useEffect(() => { if (map.current && map.current.isStyleLoaded()) { map.current.setLayoutProperty( @@ -28,7 +29,7 @@ const ToggleLayersControl: React.FC = ({ map }) => { gridVisible ? "visible" : "none" ); } - }, [gridVisible]); + }, [map, gridVisible]); useEffect(() => { if (map.current && map.current.isStyleLoaded()) { map.current.setLayoutProperty( @@ -37,7 +38,7 @@ const ToggleLayersControl: React.FC = ({ map }) => { labelsVisible ? "visible" : "none" ); } - }, [labelsVisible]); + }, [map, labelsVisible]); return (
@@ -63,7 +64,6 @@ const ToggleLayersControl: React.FC = ({ map }) => {