feat: (urban tool) add support for aoi and region url params (#262)

# Description

Want to be able iframe with zoom to US/CONUS/States/Urban region. Adding
support for that via url params.

Author: slesaad

urban-dashboard/src/components/dashboard/index.jsx

@@ -4,32 +4,48 @@ import Box from '@mui/material/Box';
 import { InfoSidebar } from '../infoSidebar';
 import MapBoxViewerWrapper from '../mapboxViewer/MapboxViewerWrapper';
 
-export function Dashboard({ dataset, urbanRegions, zoomLevel, zoomLocation }) {
-  const [urbanRegion, setUrbanRegion] = useState("");
+export function Dashboard({
+    dataset,
+    urbanRegions,
+    zoomLevel,
+    zoomLocation,
+    selectedAoi,
+    selectedUrbanRegion,
+    updateURLParams
+  }) {
+  const [urbanRegion, setUrbanRegion] = useState(selectedUrbanRegion);
   const [zoomOut, setZoomOut] = useState(false);
   const handleZoomOut = () => {
     setZoomOut(!zoomOut);
   };
 
+  const handleUrbanRegionSelection = (region) => {
+    updateURLParams({
+      region: region
+    });
+    setUrbanRegion(region)
+  }
+
   return (
     <Box
       className="fullSize">
       <div className="dashboard-container">
         <InfoSidebar
           urbanRegions={urbanRegions}
           selection={urbanRegion}
-          setSelection={setUrbanRegion}
+          setSelection={handleUrbanRegionSelection}
           handleZoomOut={handleZoomOut}
           dataset={dataset}
         />
         <MapBoxViewerWrapper
           urbanRegions={urbanRegions}
           urbanRegion={urbanRegion}
-          setSelection={setUrbanRegion}
+          setSelection={handleUrbanRegionSelection}
           zoomOut={zoomOut}
           dataset={dataset}
           zoomLevel={zoomLevel}
           zoomLocation={zoomLocation}
+          selectedAoi={selectedAoi}
         />
       </div>
     </Box>

urban-dashboard/src/components/dashboardContainer/index.jsx

@@ -10,6 +10,9 @@ export function DashboardContainer({
   defaultZoomLevel,
   defaultZoomLocation,
   defaultDataset,
+  selectedAoi,
+  selectedUrbanRegion,
+  updateURLParams
 }) {
   const { config } = useConfig();
   const [dataset] = useState(defaultDataset || "gra2pes"); //vulcan, gra2pes (default)
@@ -45,6 +48,9 @@ export function DashboardContainer({
           zoomLocation={zoomLocation}
           dataset={dataset}
           urbanRegions={urbanRegions}
+          selectedAoi={selectedAoi}
+          selectedUrbanRegion={selectedUrbanRegion}
+          updateURLParams={updateURLParams}
         />
       )}
     </>

urban-dashboard/src/components/mapboxViewer/MapboxViewer.jsx

@@ -3,15 +3,17 @@ import mapboxgl from "mapbox-gl";
 import "mapbox-gl/dist/mapbox-gl.css";
 import Grid from "@mui/material/Grid";
 import Box from "@mui/material/Box";
-import { VULCAN_RASTER_URL, GRA2PES_RASTER_URL } from "./helper";
+import { VULCAN_RASTER_URL, GRA2PES_RASTER_URL, AOI_BOUNDS } from "./helper";
 import "./index.css";
-import defaultZoomLocation from '../../App'
+
+
 export class MapBoxViewer extends Component {
   constructor(props) {
     super(props);
     this.state = {
       currentViewer: null,
-      selectedUrbanRegion: null,
+      mapLoaded: false,
+      selectedUrbanRegion: props.urbanRegion
     };
   }
 
@@ -31,13 +33,15 @@ export class MapBoxViewer extends Component {
       touchZoomRotate: false,
     });
 
-    this.setState({ currentViewer: map });
+    this.setState({ currentViewer: map, mapLoaded: false });
 
     // map.addControl(HomeButtonControl);
     map.addControl(new mapboxgl.NavigationControl());
 
     // add the tile sources
     map.on("load", () => {
+      this.setState({ mapLoaded: true });
+
       map.addSource("raster-tiles-vulcan", {
         type: "raster",
         tiles: [VULCAN_RASTER_URL],
@@ -69,11 +73,33 @@ export class MapBoxViewer extends Component {
       }
 
       // Move label layers above raster layers
-      map.moveLayer("country-label");
-      map.moveLayer("state-label");
-      map.moveLayer("settlement-major-label");
-      map.moveLayer("settlement-minor-label");
-      map.moveLayer("admin-1-boundary");
+      const labelLayers = [
+        'country-label',
+        'state-label',
+        'settlement-major-label',
+        'settlement-minor-label',
+        'admin-1-boundary'
+      ];
+      labelLayers.forEach(id => {
+          if (map.getLayer(id)) map.moveLayer(id);
+      });
+
+      // Handle initial urban region selection or AOI bounds
+      if (this.props.urbanRegion) {
+        const selectedRegion = this.props.urbanRegions.find(
+            item => item.name === this.props.urbanRegion
+        );
+        if (selectedRegion) {
+            this.handleUrbanRegionSelection(
+                map,
+                this.props.urbanRegion,
+                selectedRegion.center,
+                selectedRegion.geojson
+            );
+        }
+        } else {
+            this.applyAOIBounds(map);
+        }
     });
     // Catch general map errors (like tile decoding failure)
     map.on("error", (e) => {
@@ -106,6 +132,10 @@ export class MapBoxViewer extends Component {
 
   // Trigger zoom out when zoomOut button is clicked.
   componentDidUpdate = (prevProps) => {
+    const { currentViewer, mapLoaded } = this.state;
+
+    if (!mapLoaded || !currentViewer) return; // Guard until map is ready
+
     if (prevProps.zoomOut !== this.props.zoomOut) {
       this.resetMapView();
     }
@@ -115,54 +145,60 @@ export class MapBoxViewer extends Component {
     }
 
     if (prevProps.urbanRegion !== this.props.urbanRegion) {
-      const urbanRegion = this.props.urbanRegions.filter(
-        (item) => item.name === this.props.urbanRegion
-      )[0];
-      if (urbanRegion) {
-        // const name = urbanRegion.center;
-        const center = urbanRegion.center;
-        const geojson = urbanRegion.geojson;
-
-        // update selected region
-        // this.setState({ selectedUrbanRegion: name });
-        // this.props.setSelection(name);
-
-        //focus on selected region
-        this.focusSelectedUrbanRegion(
-          this.state.currentViewer,
-          center,
-          geojson
+      console.log('urban region changed to', this.props.urbanRegion);
+
+      const selectedRegion = this.props.urbanRegions.find(
+          item => item.name === this.props.urbanRegion
+      );
+      if (selectedRegion) {
+        console.log('selected region is:', selectedRegion);
+        this.handleUrbanRegionSelection(
+          currentViewer,
+          this.props.urbanRegion,
+          selectedRegion.center,
+          selectedRegion.geojson
         );
       }
     }
+
+    if (prevProps.selectedAoi !== this.props.selectedAoi && !this.props.urbanRegion) {
+      this.applyAOIBounds(currentViewer);
+    }
   };
 
   resetMapView = () => {
     const { currentViewer } = this.state;
-    if (currentViewer) {
-      this.props.setSelection("");
-      this.setState({
-        selectedUrbanRegion: false, //giving this incorrect state will force it to reset
-      });
 
-      // Zoom out and fly back to center and remove all the geoJSON layers
-      const currentMap = this.state.currentViewer;
-      currentMap.flyTo({
-        center: [-98.771556, 32.967243],
-        zoom: 4,
-        speed: 1.2,
-        curve: 1.42,
-      });
-
-      if (currentMap.getLayer("boundary-fill"))
-        currentMap.removeLayer("boundary-fill");
-      if (currentMap.getLayer("boundary-outline"))
-        currentMap.removeLayer("boundary-outline");
-      if (currentMap.getSource("urban-boundary"))
-        currentMap.removeSource("urban-boundary");
-    } else {
-      console.log("Map instance not initialized yet...");
+    if (!currentViewer) {
+      console.log('Map instance not initialized yet...');
+      return;
     }
+
+    this.props.setSelection("");
+    this.setState({
+      selectedUrbanRegion: false, //giving this incorrect state will force it to reset
+    });
+
+    // Zoom out and fly back to center and remove all the geoJSON layers
+    currentMap.flyTo({
+      center: [-98.771556, 32.967243],
+      zoom: 4,
+      speed: 1.2,
+      curve: 1.42,
+    });
+
+    if (currentMap.getLayer("boundary-fill"))
+      currentMap.removeLayer("boundary-fill");
+    if (currentMap.getLayer("boundary-outline"))
+      currentMap.removeLayer("boundary-outline");
+    if (currentMap.getSource("urban-boundary"))
+      currentMap.removeSource("urban-boundary");
+  };
+
+  handleUrbanRegionSelection = (map, name, center, geojson) => {
+    this.setState({ selectedUrbanRegion: name });
+    this.props.setSelection(name);
+    this.focusSelectedUrbanRegion(map, center, geojson);
   };
 
   plotUrbanRegions = (map, urbanRegions) => {
@@ -172,30 +208,27 @@ export class MapBoxViewer extends Component {
       const el = document.createElement("div");
       el.className = "marker";
 
-      let marker = this.addMarker(map, el, name, lon, lat);
+      const marker = this.addMarker(map, el, name, lon, lat);
 
       // when clicked on a urban region, focus on it
       marker.getElement().addEventListener("click", () => {
-        this.setState({ selectedUrbanRegion: name });
-        this.props.setSelection(name);
-        this.focusSelectedUrbanRegion(map, center, geojson);
+        this.handleUrbanRegionSelection(map, name, center, geojson);
       });
     });
   };
 
   addMarker = (map, element, name, lon, lat) => {
-    let marker = new mapboxgl.Marker(element)
+    const marker = new mapboxgl.Marker(element)
       .setLngLat([lon, lat])
-      // .setPopup(new mapboxgl.Popup({ offset: 25 })
-      // .setText(name)
       .addTo(map);
 
-    const tooltipContent = `<strong>${name}<strong>`;
+    const tooltipContent = `<strong>${name}</strong>`;
     const popup = new mapboxgl.Popup({
       closeButton: false,
       offset: [-3, -15],
       anchor: "bottom",
     }).setHTML(tooltipContent);
+
     marker.setPopup(popup);
     marker.getElement().addEventListener("mouseenter", () => {
       popup.addTo(map);
@@ -251,6 +284,29 @@ export class MapBoxViewer extends Component {
     });
   };
 
+  applyAOIBounds = map => {
+    const { selectedAoi : aoi } = this.props;
+
+    if (!aoi || !AOI_BOUNDS[aoi]) {
+        console.log('No valid AOI specified or AOI not found in bounds');
+        return;
+    }
+
+    const bounds = AOI_BOUNDS[aoi];
+    const bbox = [
+        bounds.southwest[0],
+        bounds.southwest[1],
+        bounds.northeast[0],
+        bounds.northeast[1]
+    ];
+
+    console.log(`Applying AOI bounds for ${aoi}:`, bbox);
+
+    map.fitBounds(bbox, {
+        padding: 100
+    });
+};
+
   render() {
     return (
       <Box component="main" className="map-section">

urban-dashboard/src/components/mapboxViewer/helper/index.jsx

@@ -32,3 +32,66 @@ export const BASEMAP_ID_DEFAULT = 'satellite';
 // export const GRA2PES_RASTER_URL = "https://a.tiles.mapbox.com/v4/mapbox.satellite/{z}/{x}/{y}.jpg90?access_token=pk.eyJ1IjoiY292aWQtbmFzYSIsImEiOiJjbGNxaWdqdXEwNjJnM3VuNDFjM243emlsIn0.NLbvgae00NUD5K64CD6ZyA";
 export const VULCAN_RASTER_URL = "https://earth.gov/ghgcenter/api/raster/searches/dc3da6e6c0b1a2e941713c1c5932cb84/tiles/WebMercatorQuad/{z}/{x}/{y}?assets=total-co2&colormap_name=spectral_r&rescale=0%2C4000"
 export const GRA2PES_RASTER_URL = "https://earth.gov/ghgcenter/api/raster/searches/50ad78abf9e9c642971cdce22ef8baf0/tiles/WebMercatorQuad/{z}/{x}/{y}?assets=co2&colormap_name=spectral_r&rescale=0%2C2000"
+
+
+// Define bounds for different areas of interest
+export const AOI_BOUNDS = {
+  CONUS: {
+    southwest: [-125.0, 24.0], // [lng, lat]
+    northeast: [-66.0, 49.0],
+  },
+  US: {
+    southwest: [-180.0, 18.0], // [lng, lat] - includes Hawaii and Alaska
+    northeast: [-66.0, 72.0],
+  },
+  Alabama: { southwest: [-88.5, 30.2], northeast: [-84.9, 35.0] },
+  Alaska: { southwest: [-179.1, 51.2], northeast: [179.9, 71.5] },
+  Arizona: { southwest: [-114.8, 31.3], northeast: [-109.0, 37.0] },
+  Arkansas: { southwest: [-94.6, 33.0], northeast: [-89.6, 36.5] },
+  California: { southwest: [-124.5, 32.5], northeast: [-114.0, 42.0] },
+  Colorado: { southwest: [-109.1, 36.9], northeast: [-102.0, 41.0] },
+  Connecticut: { southwest: [-73.7, 40.9], northeast: [-71.8, 42.0] },
+  Delaware: { southwest: [-75.8, 38.5], northeast: [-75.0, 39.8] },
+  Florida: { southwest: [-87.6, 24.4], northeast: [-80.0, 31.0] },
+  Georgia: { southwest: [-85.6, 30.3], northeast: [-80.8, 35.0] },
+  Hawaii: { southwest: [-160.3, 18.9], northeast: [-154.8, 22.2] },
+  Idaho: { southwest: [-117.2, 42.0], northeast: [-111.0, 49.0] },
+  Illinois: { southwest: [-91.5, 36.9], northeast: [-87.0, 42.5] },
+  Indiana: { southwest: [-88.1, 37.7], northeast: [-84.8, 41.8] },
+  Iowa: { southwest: [-96.6, 40.4], northeast: [-90.1, 43.5] },
+  Kansas: { southwest: [-102.1, 36.9], northeast: [-94.6, 40.0] },
+  Kentucky: { southwest: [-89.6, 36.5], northeast: [-81.9, 39.1] },
+  Louisiana: { southwest: [-94.0, 28.9], northeast: [-88.8, 33.0] },
+  Maine: { southwest: [-71.1, 43.0], northeast: [-66.9, 47.5] },
+  Maryland: { southwest: [-79.5, 37.9], northeast: [-75.0, 39.7] },
+  Massachusetts: { southwest: [-73.5, 41.2], northeast: [-69.9, 42.9] },
+  Michigan: { southwest: [-90.4, 41.7], northeast: [-82.4, 48.3] },
+  Minnesota: { southwest: [-97.3, 43.5], northeast: [-89.5, 49.4] },
+  Mississippi: { southwest: [-91.7, 30.2], northeast: [-88.1, 34.9] },
+  Missouri: { southwest: [-95.8, 35.9], northeast: [-89.0, 40.6] },
+  Montana: { southwest: [-116.1, 44.4], northeast: [-104.0, 49.0] },
+  Nebraska: { southwest: [-104.1, 40.0], northeast: [-95.3, 43.0] },
+  Nevada: { southwest: [-120.0, 35.0], northeast: [-114.0, 42.0] },
+  'New Hampshire': { southwest: [-72.6, 42.7], northeast: [-70.6, 45.3] },
+  'New Jersey': { southwest: [-75.6, 38.9], northeast: [-73.9, 41.4] },
+  'New Mexico': { southwest: [-109.1, 31.3], northeast: [-103.0, 37.0] },
+  'New York': { southwest: [-79.8, 40.5], northeast: [-71.8, 45.0] },
+  'North Carolina': { southwest: [-84.3, 33.8], northeast: [-75.5, 36.6] },
+  'North Dakota': { southwest: [-104.0, 45.9], northeast: [-96.5, 49.0] },
+  Ohio: { southwest: [-84.8, 38.4], northeast: [-80.5, 41.9] },
+  Oklahoma: { southwest: [-103.0, 33.6], northeast: [-94.4, 37.0] },
+  Oregon: { southwest: [-124.6, 41.9], northeast: [-116.5, 46.3] },
+  Pennsylvania: { southwest: [-80.5, 39.7], northeast: [-74.7, 42.3] },
+  'Rhode Island': { southwest: [-71.9, 41.1], northeast: [-71.1, 42.0] },
+  'South Carolina': { southwest: [-83.3, 32.0], northeast: [-78.5, 35.2] },
+  'South Dakota': { southwest: [-104.1, 42.5], northeast: [-96.4, 45.9] },
+  Tennessee: { southwest: [-90.3, 34.9], northeast: [-81.6, 36.7] },
+  Texas: { southwest: [-106.6, 25.8], northeast: [-93.5, 36.5] },
+  Utah: { southwest: [-114.1, 36.9], northeast: [-109.0, 42.0] },
+  Vermont: { southwest: [-73.4, 42.7], northeast: [-71.5, 45.0] },
+  Virginia: { southwest: [-83.7, 36.5], northeast: [-75.2, 39.5] },
+  Washington: { southwest: [-124.8, 45.5], northeast: [-116.9, 49.0] },
+  'West Virginia': { southwest: [-82.6, 37.2], northeast: [-77.7, 40.6] },
+  Wisconsin: { southwest: [-92.9, 42.5], northeast: [-86.7, 47.3] },
+  Wyoming: { southwest: [-111.1, 40.9], northeast: [-104.1, 45.0] },
+};