Rework map style

ecds · Dec 18, 2024 · b639a9c · b639a9c
1 parent 6625713
commit b639a9c
Show file tree

Hide file tree

Showing 30 changed files with 8,477 additions and 2,797 deletions.
diff --git a/.eslintrc b/.eslintrc
@@ -1,37 +1,15 @@
 {
   "root": true,
   "parser": "@typescript-eslint/parser",
-  "plugins": ["@typescript-eslint", "jsx-a11y", "unused-imports", "react"],
+  "plugins": [
+    "jsx-a11y"
+  ],
   "extends": [
-    "eslint:recommended",
-    "plugin:react/recommended",
     "@remix-run/eslint-config",
     "@remix-run/eslint-config/node",
     "plugin:jsx-a11y/recommended"
   ],
   "rules": {
-    "@typescript-eslint/no-unused-vars": [
-      "warn",
-      {
-        "vars": "all",
-        "args": "after-used",
-        "argsIgnorePattern": "^_",
-        "varsIgnorePattern": "^_"
-      }
-    ],
-    "unused-imports/no-unused-imports": "error",
-    "unused-imports/no-unused-vars": [
-      "warn",
-      {
-        "vars": "all",
-        "args": "after-used",
-        "argsIgnorePattern": "^_"
-      }
-    ]
-  },
-  "settings": {
-    "react": {
-      "version": "detect"
-    }
+    "@typescript-eslint/ban-ts-comment": "off"
   }
-}
+}
diff --git a/app/components/mapping/Counties.tsx b/app/components/mapping/Counties.tsx
@@ -6,12 +6,16 @@ import { useCallback, useContext, useEffect, useRef, useState } from "react";
 import { MapContext } from "~/contexts";
 import { ClientOnly } from "remix-utils/client-only";
 import PlacePopup from "./PlacePopup.client";
-import { counties as countyStyle } from "~/mapStyles";
+import { masks } from "~/mapStyles";
 import PlaceTooltip from "./PlaceTooltip";
 import { Link } from "@remix-run/react";
 import type { MapGeoJSONFeature, MapMouseEvent } from "maplibre-gl";
 import type { ESPlace } from "~/esTypes";
 
+const countyStyleLayer = masks.layers.find(
+  (layer) => layer.id === "simpleCounties"
+);
+
 const Counties = ({ counties }: { counties: ESPlace[] }) => {
   const { map } = useContext(MapContext);
   const hoveredId = useRef<string | undefined>(undefined);
@@ -90,22 +94,18 @@ const Counties = ({ counties }: { counties: ESPlace[] }) => {
   );
 
   useEffect(() => {
-    if (!map) return;
-    for (const countyLayer of countyStyle.layers) {
-      map.setLayoutProperty(countyLayer.id, "visibility", "visible");
-    }
+    if (!map || !countyStyleLayer) return;
+    map.setLayoutProperty(countyStyleLayer.id, "visibility", "visible");
 
-    map.on("mousemove", "counties-fill", handleMouseEnter);
-    map.on("mouseleave", "counties-fill", handleMouseLeave);
-    map.on("click", "counties-fill", handleClick);
+    map.on("mousemove", countyStyleLayer.id, handleMouseEnter);
+    map.on("mouseleave", countyStyleLayer.id, handleMouseLeave);
+    map.on("click", countyStyleLayer.id, handleClick);
 
     return () => {
-      for (const countyLayer of countyStyle.layers) {
-        map.setLayoutProperty(countyLayer.id, "visibility", "none");
-      }
-      map.off("mousemove", "counties-fill", handleMouseEnter);
-      map.off("mouseleave", "counties-fill", handleMouseLeave);
-      map.off("click", "counties-fill", handleClick);
+      map.setLayoutProperty(countyStyleLayer.id, "visibility", "none");
+      map.off("mousemove", countyStyleLayer.id, handleMouseEnter);
+      map.off("mouseleave", countyStyleLayer.id, handleMouseLeave);
+      map.off("click", countyStyleLayer.id, handleClick);
     };
   }, [map, handleMouseEnter, handleMouseLeave, handleClick]);
 

diff --git a/app/components/mapping/Islands.tsx b/app/components/mapping/Islands.tsx
@@ -3,7 +3,7 @@ import PlacePopup from "~/components/mapping/PlacePopup.client";
 import { MapContext } from "~/contexts";
 import { ClientOnly } from "remix-utils/client-only";
 import { Link } from "@remix-run/react";
-import { islands as islandStyle } from "~/mapStyles";
+import { masks } from "~/mapStyles";
 import PlaceTooltip from "./PlaceTooltip";
 import type { MapGeoJSONFeature, MapMouseEvent } from "maplibre-gl";
 import type { ESPlace } from "~/esTypes";
@@ -12,6 +12,10 @@ interface Props {
   islands: ESPlace[];
 }
 
+const islandStyleLayer = masks.layers.find(
+  (layer) => layer.id === "simpleIslandsFill"
+);
+
 const Islands = ({ islands }: Props) => {
   const { map } = useContext(MapContext);
   const hoveredId = useRef<string | undefined>(undefined);
@@ -21,9 +25,16 @@ const Islands = ({ islands }: Props) => {
   const [hoveredIsland, setHoveredIsland] = useState<ESPlace | undefined>(
     undefined
   );
+  const [tooltipLocation, setTooltipLocation] = useState<{
+    lat: number;
+    lon: number;
+  }>({ lat: 0, lon: 0 });
 
   const handleMouseEnter = useCallback(
-    ({ features }: MapMouseEvent & { features?: MapGeoJSONFeature[] }) => {
+    ({
+      features,
+      lngLat,
+    }: MapMouseEvent & { features?: MapGeoJSONFeature[] }) => {
       if (map) {
         map.getCanvas().style.cursor = "pointer";
         if (features && features.length > 0) {
@@ -44,6 +55,7 @@ const Islands = ({ islands }: Props) => {
               return undefined;
             });
             if (activeIsland != currentIsland) setHoveredIsland(currentIsland);
+            setTooltipLocation({ lon: lngLat.lng, lat: lngLat.lat });
           }
         }
       }
@@ -82,23 +94,19 @@ const Islands = ({ islands }: Props) => {
   );
 
   useEffect(() => {
-    if (!map) return;
+    if (!map || !islandStyleLayer) return;
 
-    for (const islandLayer of islandStyle.layers) {
-      map.setLayoutProperty(islandLayer.id, "visibility", "visible");
-    }
+    map.setLayoutProperty(islandStyleLayer.id, "visibility", "visible");
 
-    map.on("mousemove", "islands-fill", handleMouseEnter);
-    map.on("mouseleave", "islands-fill", handleMouseLeave);
-    map.on("click", "islands-fill", handleClick);
+    map.on("mousemove", islandStyleLayer.id, handleMouseEnter);
+    map.on("mouseleave", islandStyleLayer.id, handleMouseLeave);
+    map.on("click", islandStyleLayer.id, handleClick);
 
     return () => {
-      for (const islandLayer of islandStyle.layers) {
-        map.setLayoutProperty(islandLayer.id, "visibility", "none");
-      }
-      map.off("mousemove", "islands-fill", handleMouseEnter);
-      map.off("mouseleave", "islands-fill", handleMouseLeave);
-      map.off("click", "islands-fill", handleClick);
+      map.setLayoutProperty(islandStyleLayer.id, "visibility", "none");
+      map.off("mousemove", islandStyleLayer.id, handleMouseEnter);
+      map.off("mouseleave", islandStyleLayer.id, handleMouseLeave);
+      map.off("click", islandStyleLayer.id, handleClick);
     };
   }, [map, handleClick, handleMouseEnter, handleMouseLeave]);
 
@@ -130,7 +138,7 @@ const Islands = ({ islands }: Props) => {
                 </PlacePopup>
                 <PlaceTooltip
                   show={hoveredIsland == island}
-                  location={island.location}
+                  location={tooltipLocation}
                   onClose={() => setActiveIsland(undefined)}
                   zoomToFeature={false}
                   anchor="left"

diff --git a/app/components/mapping/Map.client.tsx b/app/components/mapping/Map.client.tsx
@@ -1,4 +1,4 @@
-import maplibregl from "maplibre-gl";
+import maplibregl, { AttributionControl } from "maplibre-gl";
 import { useContext, useEffect, useRef } from "react";
 import { MapContext } from "~/contexts";
 import { defaultBounds, topBarHeight } from "~/config";
@@ -13,6 +13,7 @@ interface Props {
 const Map = ({ children }: Props) => {
   const { setMap, setMapLoaded } = useContext(MapContext);
   const mapContainerRef = useRef<HTMLDivElement>(null);
+  const hoveredRef = useRef<number | undefined>(undefined);
 
   useEffect(() => {
     if (!setMap || !mapContainerRef.current) return;
@@ -36,13 +37,12 @@ const Map = ({ children }: Props) => {
         setMap(_map);
         setMapLoaded(true);
       });
+
+      _map.addControl(new AttributionControl({ compact: true }));
     } catch {}
 
     return () => {
       try {
-        // if (_map) {
-        //   _map.remove();
-        // }
         setMap(undefined);
         setMapLoaded(false);
       } catch {}

diff --git a/app/components/mapping/PlaceTooltip.tsx b/app/components/mapping/PlaceTooltip.tsx
@@ -34,6 +34,7 @@ const PlaceTooltip = ({
 }: PopupProps) => {
   const popupRef = useRef<Popup | null>(null);
   const { map } = useContext(MapContext);
+  console.log("🚀 ~ map:", map);
 
   const [coordinates, setCoordinates] = useState<
     [number, number] | undefined

diff --git a/app/components/mapping/StyleSwitcher.tsx b/app/components/mapping/StyleSwitcher.tsx
@@ -6,11 +6,11 @@ import { faLayerGroup } from "@fortawesome/free-solid-svg-icons";
 import { mapLayers } from "~/config";
 import type { ReactNode } from "react";
 import type { TBaseStyleName } from "~/types";
-import { labels } from "~/mapStyles";
+// import { labels } from "~/mapStyles";
 
-const defaultLabelColor = "#000000"
-const rasterLabelColor = "hsl(25.71deg 63.64% 97.84%)"
-const labelLayers = labels.layers.filter((layer) => layer.id.includes("label"))
+// const defaultLabelColor = "#000000";
+// const rasterLabelColor = "hsl(25.71deg 63.64% 97.84%)";
+// const labelLayers = labels.layers.filter((layer) => layer.id.includes("label"));
 
 const StyleSwitcher = ({ children }: { children?: ReactNode }) => {
   const { map } = useContext(MapContext);
@@ -21,32 +21,32 @@ const StyleSwitcher = ({ children }: { children?: ReactNode }) => {
     for (const style of mapLayers) {
       if (activeStyle === style.name) {
         style.layers.forEach((layer) =>
-          map.setLayoutProperty(layer, "visibility", "visible"),
+          map.setLayoutProperty(layer, "visibility", "visible")
         );
       } else {
         style.layers.forEach((layer) =>
-          map.setLayoutProperty(layer, "visibility", "none"),
+          map.setLayoutProperty(layer, "visibility", "none")
         );
       }
 
-      switch (activeStyle) {
-        case "default":
-          for (const label of labelLayers) {
-            map.setPaintProperty(label.id, "text-color", defaultLabelColor)
-            map.setPaintProperty(label.id, "text-halo-color", rasterLabelColor)
-          }
-          break
-        case "satellite":
-        case "usgs":
-          for (const label of labelLayers) {
-            map.setPaintProperty(label.id, "text-color", rasterLabelColor)
-            map.setPaintProperty(label.id, "text-halo-color", defaultLabelColor)
-          }
-          break;
+      // switch (activeStyle) {
+      //   case "default":
+      //     for (const label of labelLayers) {
+      //       map.setPaintProperty(label.id, "text-color", defaultLabelColor)
+      //       map.setPaintProperty(label.id, "text-halo-color", rasterLabelColor)
+      //     }
+      //     break
+      //   case "satellite":
+      //   case "usgs":
+      //     for (const label of labelLayers) {
+      //       map.setPaintProperty(label.id, "text-color", rasterLabelColor)
+      //       map.setPaintProperty(label.id, "text-halo-color", defaultLabelColor)
+      //     }
+      //     break;
 
-        default:
-          break;
-      }
+      //   default:
+      //     break;
+      // }
     }
   }, [map, activeStyle]);
 

diff --git a/app/components/search/FacetMenu.tsx b/app/components/search/FacetMenu.tsx
@@ -54,7 +54,6 @@ const FacetMenu = () => {
         <MenuSection className="mb-4 pb-4 border-b-2">
           <ul>
             {items.map((type, index) => {
-              // console.log("🚀 ~ {items.map ~ type:", type);
               return (
                 <li key={type.label} className="flex items-center me-4 my-2">
                   <input

diff --git a/app/components/search/GeoSearchClusters.tsx b/app/components/search/GeoSearchClusters.tsx
@@ -3,9 +3,9 @@ import { MapContext } from "~/contexts";
 import { largeCluster } from "~/mapStyles/geoJSON";
 import PlacePopup from "~/components/mapping/PlacePopup.client";
 import { ClientOnly } from "remix-utils/client-only";
+import { Link } from "@remix-run/react";
 import type { FeatureCollection } from "geojson";
 import type { MapLayerMouseEvent, SourceSpecification } from "maplibre-gl";
-import { Link } from "@remix-run/react";
 
 interface Props {
   geojson: FeatureCollection;
@@ -25,7 +25,7 @@ const GeoSearchClusters = ({ geojson }: Props) => {
   const [clusterList, setClusterList] =
     useState<{ title: string; slug: string }[]>();
 
-  const mouseenter = useCallback(
+  const mousemove = useCallback(
     (event: MapLayerMouseEvent) => {
       if (!event.features || !map || clusterList) return;
       const features = event.features;
@@ -90,15 +90,17 @@ const GeoSearchClusters = ({ geojson }: Props) => {
     if (!map.getSource(sourceId)) map.addSource(sourceId, layerSource);
 
     if (!map.getLayer(layerId))
-      map.addLayer(largeCluster({ id: layerId, source: sourceId }));
+      map.addLayer(
+        largeCluster({ id: layerId, source: sourceId, fillColor: "#5D414A" })
+      );
     map.on("click", layerId, handleClick);
-    map.on("mouseenter", layerId, mouseenter);
+    map.on("mousemove", layerId, mousemove);
     // map.on("mouseleave", layerId, mouseleave);
 
     return () => {
       if (map.getLayer(layerId)) {
         map.off("click", layerId, handleClick);
-        map.off("mouseenter", layerId, mouseenter);
+        map.off("mousemove", layerId, mousemove);
         map.off("mouseleave", layerId, mouseleave);
         map.removeLayer(layerId);
       }
@@ -111,7 +113,7 @@ const GeoSearchClusters = ({ geojson }: Props) => {
     mapLoaded,
     handleClick,
     clusterList,
-    mouseenter,
+    mousemove,
     mouseleave,
   ]);
 

diff --git a/app/components/search/SearchModal.tsx b/app/components/search/SearchModal.tsx
@@ -23,13 +23,11 @@ export default function SearchModal({ isOpen, setIsOpen }: SearchModalProps) {
   const location = useLocation();
 
   useEffect(() => {
-    console.log("🚀 ~ SearchModal ~ query:", query);
     setIsOpen(Boolean(!query) && Boolean(!location.search));
 
     // return () => {
     //   refine("");
     // };
-    console.log("🚀 ~ SearchModal ~ location:", location);
   }, [setIsOpen, query, location]);
 
   useEffect(() => {