move mock address out of Map component to address useEffect dep war…

…ning
sfbrigade · Nov 24, 2024 · 7c9fd84 · 7c9fd84
1 parent 633af2d
commit 7c9fd84
Showing 1 changed file with 125 additions and 12 deletions.
diff --git a/app/components/map.tsx b/app/components/map.tsx
@@ -8,25 +8,25 @@ import seismicData from "../../seismic-11212024.json";
 import tsunamiData from "../../tsunami-11212024.json";
 import softStoriesData from "../../soft-stories-11232024.json";
 
-const addressLookupCoordinates = {
-  geometry: {
-    type: "Point",
-    coordinates: [-122.463733, 37.777448],
-  },
-};
-
 const typedSeismicData: FeatureCollection<Geometry> =
   seismicData as FeatureCollection<Geometry>;
 const typedTsunamiData: FeatureCollection<Geometry> =
   tsunamiData as FeatureCollection<Geometry>;
 const typedSoftStoriesData: FeatureCollection<Geometry> =
   softStoriesData as FeatureCollection<Geometry>;
 
+const addressLookupCoordinates = {
+  geometry: {
+    type: "Point",
+    coordinates: [-122.463733, 37.777448],
+  },
+};
+const coords = addressLookupCoordinates.geometry.coordinates;
+const addressLngLat = new LngLat(coords[0], coords[1]);
+
 const Map = () => {
   const mapContainerRef = useRef<HTMLDivElement>(null);
   const mapRef = useRef<mapboxgl.Map | null>(null);
-  const coords = addressLookupCoordinates.geometry.coordinates;
-  const addressLngLat = new LngLat(coords[0], coords[1]);
 
   useEffect(() => {
     const mapboxToken = process.env.NEXT_PUBLIC_MAPBOX_TOKEN;
@@ -57,7 +57,21 @@ const Map = () => {
           // Initial configuration for the Mapbox Standard style set above. By default, its ID is `basemap`.
           basemap: {
             // 'default', 'faded', or 'monochrome'
-            theme: "default",
+            theme: "monochrome",
+            // // attempt to color the water a darker shade
+            // stylesheet: {
+            //   layers: [
+            //     {
+            //       id: "water",
+            //       source: "composite",
+            //       "source-layer": "water",
+            //       type: "fill",
+            //       paint: {
+            //         "fill-color": "pink",
+            //       },
+            //     },
+            //   ],
+            // },
           },
         },
       });
@@ -66,8 +80,10 @@ const Map = () => {
 
       const nav = new mapboxgl.NavigationControl({ showCompass: false });
       map.addControl(nav, "top-right");
-
       map.on("load", () => {
+        // attempt to change water color after style load
+        map.setPaintProperty("water", "fill-color", "#99DDFF");
+
         // Draw address marker
         const el = document.createElement("div");
 
@@ -96,6 +112,8 @@ const Map = () => {
         });
 
         // Add layers
+
+        // seismic
         map.addLayer({
           id: "seismicLayer",
           source: "seismic",
@@ -106,6 +124,7 @@ const Map = () => {
           },
         });
 
+        // tsunami
         map.addLayer({
           id: "tsunamiLayer",
           source: "tsunami",
@@ -116,6 +135,39 @@ const Map = () => {
           },
         });
 
+        // buildings
+        map.addLayer({
+          id: "add-3d-buildings",
+          source: "composite",
+          "source-layer": "building",
+          filter: ["==", "extrude", "true"],
+          type: "fill-extrusion",
+          minzoom: 15,
+          paint: {
+            "fill-extrusion-color": "#aaa",
+            "fill-extrusion-height": [
+              "interpolate",
+              ["linear"],
+              ["zoom"],
+              15,
+              0,
+              15.05,
+              ["get", "height"],
+            ],
+            "fill-extrusion-base": [
+              "interpolate",
+              ["linear"],
+              ["zoom"],
+              15,
+              0,
+              15.05,
+              ["get", "min_height"],
+            ],
+            "fill-extrusion-opacity": 0.6,
+          },
+        });
+
+        // soft story indicators
         map.addLayer({
           id: "softStoriesLayer",
           source: "soft-stories",
@@ -124,11 +176,72 @@ const Map = () => {
             "circle-radius": 4.5,
             "circle-stroke-width": 1,
             "circle-stroke-color": "#FFFFFF",
-            "circle-color": "#171923", // gray/900
+            // "circle-color": "#171923", // gray/900
+
+            "circle-color": [
+              // 'interpolate',
+              // // Set the linear rate of change to 0.5
+              // ['linear'],
+              // ['zoom'],
+              // // When zoom is 15, buildings will be beige.
+              // 15,
+              // '#D9D3C9',
+              // // When zoom is 18 or higher, buildings will be yellow.
+              // 18,
+              // '#ffd700'
+              // "rgb",
+              "step",
+              ["to-number", ["get", "tier"]],
+              "#000000",
+              1,
+              "#333333",
+              2,
+              "#222222",
+              3,
+              "#111111",
+              4,
+              "#171923", // gray/900"
+
+              // map tier number to grey brightness
+              // ["*", 25, ["get", "tier"]],
+              // ["*", 25, ["get", "tier"]],
+              // ["*", 25, ["get", "tier"]],
+            ],
           },
         });
       });
 
+      map.on("style.load", () => {
+        console.log(map);
+        const style = map.getStyle();
+        console.log(style);
+        // map.setConfigProperty("/streets-v12", "layers", [
+        //   {
+        //     id: "water",
+        //     source: "mapbox-streets-v12",
+        //     "source-layer": "water",
+        //     type: "fill",
+        //     paint: {
+        //       "fill-color": "#00ffff",
+        //     },
+        //   },
+        // ]);
+        // map.setConfigProperty("water", "paint", {
+        //   "fill-color": "#00ffff",
+        // });
+        // map.setConfigProperty("basemap", "layers", [
+        //   {
+        //     id: "water",
+        //     source: "mapbox-streets-v12",
+        //     "source-layer": "water",
+        //     type: "fill",
+        //     paint: {
+        //       "fill-color": "#00ffff",
+        //     },
+        //   },
+        // ]);
+      });
+
       return () => {
         if (mapRef.current) mapRef.current.remove();
       };