diff --git a/atd-vzv/src/views/map/InfoBox/MapPolygonInfoBox.js b/atd-vzv/src/views/map/InfoBox/MapPolygonInfoBox.js
index 796952d48..ee7d8fee9 100644
--- a/atd-vzv/src/views/map/InfoBox/MapPolygonInfoBox.js
+++ b/atd-vzv/src/views/map/InfoBox/MapPolygonInfoBox.js
@@ -1,6 +1,6 @@
import React from "react";
import InfoCard from "./InfoCard";
-import { StyledDesktopInfo } from "./infoBoxStyles";
+import { StyledPoylgonInfo } from "./infoBoxStyles";
const MapPolygonInfoBox = ({ crashCounts, isMapTypeSet }) => {
const createCrashContent = (crashCounts) => {
@@ -8,12 +8,12 @@ const MapPolygonInfoBox = ({ crashCounts, isMapTypeSet }) => {
isMapTypeSet.fatal &&
content.push({
title: "Fatalities",
- content: `${crashCounts.fatality || 0}`,
+ content: `${crashCounts?.fatality || 0}`,
});
isMapTypeSet.injury &&
content.push({
title: "Serious Injuries",
- content: `${crashCounts.injury || 0}`,
+ content: `${crashCounts?.injury || 0}`,
});
return content;
};
@@ -22,7 +22,7 @@ const MapPolygonInfoBox = ({ crashCounts, isMapTypeSet }) => {
const infoCard = ;
- return {infoCard};
+ return {infoCard};
};
export default MapPolygonInfoBox;
diff --git a/atd-vzv/src/views/map/InfoBox/infoBoxStyles.js b/atd-vzv/src/views/map/InfoBox/infoBoxStyles.js
index 31b690948..702656008 100644
--- a/atd-vzv/src/views/map/InfoBox/infoBoxStyles.js
+++ b/atd-vzv/src/views/map/InfoBox/infoBoxStyles.js
@@ -4,13 +4,18 @@ import { responsive } from "../../../constants/responsive";
export const popupMarginsWidth = 20;
export const maxInfoBoxWidth = responsive.drawerWidth - popupMarginsWidth;
-export const StyledDesktopInfo = styled.div`
+export const StyledPoylgonInfo = styled.div`
position: absolute;
- margin: 8px;
- padding: 2px;
+ margin: 6px;
max-width: ${maxInfoBoxWidth}px;
z-index: 9 !important;
pointer-events: none;
+ /* Combine the height of the geocoder box and 10px Mapbox spacing */
+ top: 46px;
+ /* Combine the mobile height of the geocoder box and 10px Mapbox spacing */
+ @media (max-width: 639px) {
+ top: 60px;
+ }
`;
export const StyledMobileInfo = styled.div`