diff --git a/static/js/components/tiles/disaster_event_map_tile.tsx b/static/js/components/tiles/disaster_event_map_tile.tsx index e4931b93be..d651e0f355 100644 --- 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 && (
add
remove @@ -343,14 +348,11 @@ export const DisasterEventMapTile = memo(function DisasterEventMapTile( geoJsonData: GeoJsonData, disasterEventData: Record, 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,