[Disaster Dashboard] Fix zoom buttons on disaster specific maps (#2776)

Fixes a bug where the (+)/(-) zoom buttons on the individual disaster maps don't do anything on click. This PR makes the ids of each button div unique, which fixes the issue. https://github.com/datacommonsorg/website/assets/4034366/e9cc526f-29a8-4e98-b1e0-34a4a9244aea
datacommonsorg · Jun 6, 2023 · b8b597f · b8b597f
1 parent 7db5876
commit b8b597f
Showing 1 changed file with 11 additions and 9 deletions.
diff --git a/static/js/components/tiles/disaster_event_map_tile.tsx b/static/js/components/tiles/disaster_event_map_tile.tsx
@@ -28,6 +28,7 @@ import {
   addPolygonLayer,
   drawD3Map,
   getProjection,
+  MapZoomParams,
 } from "../../chart/draw_d3_map";
 import {
   GeoJsonData,
@@ -110,7 +111,10 @@ export const DisasterEventMapTile = memo(function DisasterEventMapTile(
     _.isNull(props.disasterEventData);
   const shouldShowMap =
     !isInitialLoading && !_.isEmpty(baseMapGeoJson.features);
-
+  const zoomParams = {
+    zoomInButtonId: `${ZOOM_IN_BUTTON_ID}-${props.id}`,
+    zoomOutButtonId: `${ZOOM_OUT_BUTTON_ID}-${props.id}`,
+  };
   useEffect(() => {
     if (_.isNull(props.disasterEventData)) {
       return;
@@ -143,7 +147,8 @@ export const DisasterEventMapTile = memo(function DisasterEventMapTile(
         baseMapGeoJson,
         props.disasterEventData,
         polygonGeoJson,
-        pathGeoJson
+        pathGeoJson,
+        zoomParams
       );
     }
   }, [
@@ -187,13 +192,13 @@ export const DisasterEventMapTile = memo(function DisasterEventMapTile(
           {shouldShowMap && (
             <div className={`${CSS_SELECTOR_PREFIX}-zoom-button-section`}>
               <div
-                id={ZOOM_IN_BUTTON_ID}
+                id={zoomParams.zoomInButtonId}
                 className={`${CSS_SELECTOR_PREFIX}-zoom-button`}
               >
                 <i className="material-icons">add</i>
               </div>
               <div
-                id={ZOOM_OUT_BUTTON_ID}
+                id={zoomParams.zoomOutButtonId}
                 className={`${CSS_SELECTOR_PREFIX}-zoom-button`}
               >
                 <i className="material-icons">remove</i>
@@ -343,14 +348,11 @@ export const DisasterEventMapTile = memo(function DisasterEventMapTile(
     geoJsonData: GeoJsonData,
     disasterEventData: Record<string, DisasterEventPointData>,
     polygonGeoJson: GeoJsonData,
-    pathGeoJson: GeoJsonData
+    pathGeoJson: GeoJsonData,
+    zoomParams: MapZoomParams
   ): void {
     const width = svgContainerRef.current.offsetWidth;
     const height = svgHeight;
-    const zoomParams = {
-      zoomInButtonId: ZOOM_IN_BUTTON_ID,
-      zoomOutButtonId: ZOOM_OUT_BUTTON_ID,
-    };
     const isUsaPlace = isChildPlaceOf(
       props.place.dcid,
       USA_PLACE_DCID,