Adding types (in progress)

src/map/components/App.tsx

@@ -7,7 +7,7 @@ import { createRoot } from "react-dom/client";
 import { Map, MapProvider } from "react-map-gl";
 
 import DataTileLayer from "./DataTileLayer.tsx";
-import { useMenuStore } from "./Store.tsx";
+import { useMenuStore, MenuState } from "./Store.tsx";
 
 const INITIAL_VIEW_STATE = {
   latitude: 62.5,
@@ -18,10 +18,9 @@ const INITIAL_VIEW_STATE = {
 };
 
 export function App() {
-  const [tmp, setTmp] = useState([]);
-  const zoom = useMenuStore((state: any) => state.zoom);
-  const setZoom = useMenuStore((state: any) => state.setZoom);
-  const searchView = useMenuStore((state: any) => {
+  const zoom = useMenuStore((state: MenuState) => state.zoom);
+  const setZoom = useMenuStore((state: MenuState) => state.setZoom);
+  const searchView = useMenuStore((state: MenuState) => {
     if (state.searchView.zoom) {
       return state.searchView;
     } else {
@@ -38,11 +37,14 @@ export function App() {
     };
   }, []);
 
-  const layers = useMenuStore((state: any) => {
-    const layers: any = [];
+  const layers = useMenuStore((state: MenuState) => {
+    const layers = [];
 
-    for (const p in state.layer) {
-      if (state.layer[p].type == "ground" && state.layer[p].checked == true) {
+    for (const [p, _] of state.layer) {
+      if (
+        state.layer.get(p)!.type == "ground" &&
+        state.layer.get(p)!.checked == true
+      ) {
         let opacity = 1;
         if (
           p == "Sverige" ||
@@ -62,21 +64,21 @@ export function App() {
         layers.push({
           id: p,
           source: "ground",
-          "source-layer": state.layer[p].name,
+          "source-layer": state.layer.get(p)!.name,
           type: "fill",
           paint: {
             "fill-color":
               state.theme == "light"
-                ? state.layer[p].color
-                : state.layer[p].dark_color,
+                ? state.layer.get(p)!.color
+                : state.layer.get(p)!.dark_color,
             "fill-opacity": opacity,
           },
         });
       }
 
       if (
-        state.layer[p].type == "communication" &&
-        state.layer[p].checked == true
+        state.layer.get(p)!.type == "communication" &&
+        state.layer.get(p)!.checked == true
       ) {
         let line_width = 2;
         let line_blur = 1;
@@ -94,7 +96,7 @@ export function App() {
         layers.push({
           id: `${p}_outline`,
           source: "connection",
-          "source-layer": state.layer[p].name,
+          "source-layer": state.layer.get(p)!.name,
           type: "line",
           paint: {
             "line-color": state.theme == "light" ? "#000" : "#fff",
@@ -106,13 +108,13 @@ export function App() {
         layers.push({
           id: p,
           source: "connection",
-          "source-layer": state.layer[p].name,
+          "source-layer": state.layer.get(p)!.name,
           type: "line",
           paint: {
             "line-color":
               state.theme == "light"
-                ? state.layer[p].color
-                : state.layer[p].dark_color,
+                ? state.layer.get(p)!.color
+                : state.layer.get(p)!.dark_color,
             "line-width": line_width,
             "line-gap-width": line_gap_width,
           },
@@ -162,7 +164,7 @@ export function App() {
     return layers;
   });
 
-  const layers2 = useMenuStore((state: any) => {
+  const layers2 = useMenuStore((state: MenuState) => {
     const layers = [];
 
     layers.push(
@@ -171,7 +173,7 @@ export function App() {
         id: "test",
         data: "http://localhost:5173/file_3/{z}/{x}/{y}.pbf",
         loaders: [MVTLoader],
-        alpha: state.layer.Temperatur.checked == true ? 200 : 0,
+        alpha: state.layer.get("Temperatur")!.checked == true ? 200 : 0,
         // updateTriggers: {
         //   alpha: state.layer["Temperatur"].checked
         // }

src/map/components/DataTileLayer.tsx

@@ -1,11 +1,27 @@
 import { PMTilesSource } from "@loaders.gl/pmtiles";
+// @ts-ignore
 import { color } from "d3-color";
+// @ts-ignore
 import { scaleQuantize } from "d3-scale";
+// @ts-ignore
 import { interpolateYlOrRd } from "d3-scale-chromatic";
-import { CompositeLayer } from "deck.gl";
+import { CompositeLayer, Viewport } from "@deck.gl/core";
 
 import DelaunayLayer from "./DelaunayLayer";
 
+interface ViewTile {
+  minX: number;
+  minY: number;
+  maxX: number;
+  maxY: number;
+  zoom: number;
+}
+
+interface Reload {
+  tiles: boolean;
+  zoom: boolean;
+}
+
 export default class DataTileLayer extends CompositeLayer {
   initializeState() {
     const source = new PMTilesSource({
@@ -17,13 +33,13 @@ export default class DataTileLayer extends CompositeLayer {
       this.context.viewport.zoom,
     );
     viewTiles.zoom = viewTiles.zoom > 10 ? 10 : viewTiles.zoom;
-    const tiles = {};
+    const tiles = new Map();
 
     const ldata = this.getAllTiles(source, tiles, viewTiles);
 
     this.setState({
       source: source,
-      storage: {},
+      storage: new Map(),
       viewTiles,
       ldata,
       tiles,
@@ -48,27 +64,25 @@ export default class DataTileLayer extends CompositeLayer {
       this.clearTiles(this.state.tiles, viewTiles);
 
       this.setState({
-        storage: {},
+        storage: new Map(),
         viewTiles,
         ldata,
         tiles: this.state.tiles,
       });
     } else {
       this.setState({
-        storage: {},
+        storage: new Map(),
       });
     }
   }
 
   renderLayers() {
-    //console.log("this", this)
     return [
       // @ts-ignore
       new DelaunayLayer({
         id: "c",
         data: this.state.ldata,
         getPosition: (d) => {
-          //console.log(d.c)
           return d.c;
         },
         getValue: (d) => {
@@ -84,13 +98,7 @@ export default class DataTileLayer extends CompositeLayer {
             [-10, 20],
             [0, 0.1, 0.2, 0.3, 0.4, 0.5, 0.6, 0.7, 0.8, 0.9, 1],
           );
-          //console.log(q(x))
-          //let col = interpolateYlOrRd((x + 30) / 50);
-          //console.log("x", x)
-          //console.log("q(x)", q(x))
-          //console.log("rgb", hexToRGB(interpolateYlOrRd(q(x))))
           return [...this.hexToRGB(interpolateYlOrRd(q(x))), this.props.alpha];
-          //return [...hexToRGB(interpolateYlOrRd((x + 30) / 50)), 200];
         },
         updateTriggers: {
           colorScale: [this.props.alpha],
@@ -99,15 +107,15 @@ export default class DataTileLayer extends CompositeLayer {
     ];
   }
 
-  hexToRGB(hex) {
+  hexToRGB(hex: string): Array<number> {
     const c = color(hex);
     return [c.r, c.g, c.b];
   }
 
-  lon2tile(lon, zoom) {
+  lon2tile(lon: number, zoom: number): number {
     return Math.floor(((lon + 180) / 360) * Math.pow(2, zoom));
   }
-  lat2tile(lat, zoom) {
+  lat2tile(lat: number, zoom: number): number {
     return Math.floor(
       ((1 -
         Math.log(
@@ -119,7 +127,10 @@ export default class DataTileLayer extends CompositeLayer {
     );
   }
 
-  getTilesInViewport(viewport, zoom) {
+  getTilesInViewport(
+    viewport: Viewport,
+    zoom: number,
+  ): Array<{ x: number; y: number; zoom: number }> {
     const { width, height, latitude, longitude, zoom: currentZoom } = viewport;
     const tiles = [];
 
@@ -138,11 +149,6 @@ export default class DataTileLayer extends CompositeLayer {
     const tileY2 =
       Math.floor((bottomRight[1] + worldSize) / tileSize) % Math.pow(2, zoom);
 
-    console.log("tileX1", tileX1);
-    console.log("tileY1", tileY1);
-    console.log("tileX2", tileX2);
-    console.log("tileY2", tileY2);
-
     for (let x = tileX1; x <= tileX2; x++) {
       for (let y = tileY1; y <= tileY2; y++) {
         tiles.push({ x, y, zoom });
@@ -156,7 +162,7 @@ export default class DataTileLayer extends CompositeLayer {
     return await source.getMetadata();
   }
 
-  getTileCoordinates(boundingBox, zoom) {
+  getTileCoordinates(boundingBox: Array<number>, zoom: number): ViewTile {
     const minX = this.lon2tile(boundingBox[0], zoom);
     const maxX = this.lon2tile(boundingBox[2], zoom);
     const maxY = this.lat2tile(boundingBox[1], zoom);
@@ -165,14 +171,19 @@ export default class DataTileLayer extends CompositeLayer {
     return { minX, maxX, minY, maxY, zoom };
   }
 
-  async getAllTiles(source, tiles, viewTiles) {
+  async getAllTiles(
+    source: PMTilesSource,
+    tiles: Map<string, any>,
+    viewTiles: ViewTile,
+  ): Promise<Array<{ c: number; t: number }>> {
     const zoom = viewTiles.zoom;
 
     let data = [];
     for (let i = viewTiles.minY - 1; i <= viewTiles.maxY + 1; i++) {
       for (let j = viewTiles.minX - 1; j <= viewTiles.maxX + 1; j++) {
         if (!tiles.hasOwnProperty(`${j}${i}${zoom}`)) {
           tiles[`${j}${i}${zoom}`] = await source.getVectorTile({
+            layers: "",
             x: j,
             y: i,
             zoom: Math.floor(zoom),
@@ -190,13 +201,10 @@ export default class DataTileLayer extends CompositeLayer {
         }
       }
     }
-
-    //console.log("data", zoom, data);
-
     return data;
   }
 
-  clearTiles(tiles, viewTiles) {
+  clearTiles(tiles: Map<string, any>, viewTiles: ViewTile) {
     const keepKeys = [];
     for (let i = viewTiles.minY - 2; i <= viewTiles.maxY + 2; i++) {
       for (let j = viewTiles.minX - 2; j <= viewTiles.maxX + 2; j++) {
@@ -213,7 +221,7 @@ export default class DataTileLayer extends CompositeLayer {
     }
   }
 
-  reloadData(viewTiles, oldViewTiles) {
+  reloadData(viewTiles: ViewTile, oldViewTiles: ViewTile): Reload {
     const {
       minX: minXOld,
       minY: minYOld,
@@ -246,3 +254,6 @@ export default class DataTileLayer extends CompositeLayer {
 }
 
 DataTileLayer.layerName = "DataTileLayer";
+DataTileLayer.defaultProps = {
+  alpha: 0,
+};

src/map/components/Footer.tsx

@@ -1,11 +1,11 @@
 import { Button, Flex, Popover } from "@radix-ui/themes";
 import { Theme } from "@radix-ui/themes";
 
-import { useMenuStore } from "./Store";
+import { useMenuStore, MenuState } from "./Store";
 import { ThemeButton } from "./Theme";
 
 export function Footer() {
-  const theme = useMenuStore((state: any) => state.theme);
+  const theme = useMenuStore((state: MenuState) => state.theme);
 
   return (
     <Theme

src/map/components/Header.tsx

@@ -52,19 +52,19 @@ async function loadOptions(inputValue: string) {
 
 const defaultSearchOptions = await getDefaultSearchOptions(options);
 
-const groundList = Object.entries(mapElements)
+const groundList = Array.from(mapElements)
   .filter(([_, value]) => value.type == "ground")
   .map(([key, _]) => {
     return <LayerLabel value={key} label={key} />;
   });
 
-const communicationList = Object.entries(mapElements)
+const communicationList = Array.from(mapElements)
   .filter(([_, value]) => value.type == "communication")
   .map(([key, _]) => {
     return <LayerLabel value={key} label={key} />;
   });
 
-const temperature = Object.entries(mapElements)
+const temperature = Array.from(mapElements)
   .filter(([_, value]) => value.type == "data")
   .map(([key, _]) => {
     return <LayerLabel value={key} label={key} />;
@@ -75,13 +75,14 @@ function LayerLabel({ _, label }: any): any {
   const layer = useMenuStore((state: any) => state.layer);
   const toggleLayer = useMenuStore((state: any) => state.toggleLayer);
 
+  console.log(layer);
   return (
     <Text as="label" size="2">
       <Flex justify="between" gap="2" style={{ margin: "9px 0" }}>
         {label}
         <Switch
           id={label}
-          checked={layer[label].checked}
+          checked={layer.get(label)!.checked}
           onCheckedChange={(e) => {
             return toggleLayer(label, e);
           }}