diff --git a/frontend/src/Components/Map/ForceMapUpdate.tsx b/frontend/src/Components/Map/ForceMapUpdate.tsx index 2034f8bd..b59a5bef 100644 --- a/frontend/src/Components/Map/ForceMapUpdate.tsx +++ b/frontend/src/Components/Map/ForceMapUpdate.tsx @@ -16,6 +16,7 @@ const ForceMapUpdate: React.FC = ({ triggerUpdate, position }) => { const map = useMap(); useEffect(() => { + console.log('hello'); map.invalidateSize(); }, [triggerUpdate]); diff --git a/frontend/src/Components/RoadConditions/ConditionsMap.tsx b/frontend/src/Components/RoadConditions/ConditionsMap.tsx index 3380c0ed..9e4d6214 100644 --- a/frontend/src/Components/RoadConditions/ConditionsMap.tsx +++ b/frontend/src/Components/RoadConditions/ConditionsMap.tsx @@ -1,15 +1,20 @@ import MapWrapper from '../Map/MapWrapper'; import { FC } from 'react'; import '../../css/road_conditions.css'; +import ForceMapUpdate from '../Map/ForceMapUpdate'; -interface Props {} +interface Props { + triggerUpdate: number; +} -const ConditionsMap: FC = () => { +const ConditionsMap: FC = ({ triggerUpdate }) => { //TODO trigger redrwaw the plot return (
- + + +
); }; diff --git a/frontend/src/pages/RoadConditions.tsx b/frontend/src/pages/RoadConditions.tsx index 0465b414..3797b18b 100644 --- a/frontend/src/pages/RoadConditions.tsx +++ b/frontend/src/pages/RoadConditions.tsx @@ -16,6 +16,7 @@ import { getConditionsWay } from '../queries/conditions'; const RoadConditions = () => { const [wayData, setWayData] = useState>(); + const [triggerUpdate, setTriggerUpdate] = useState(0); console.log(wayData); @@ -60,9 +61,12 @@ const RoadConditions = () => { sizes={[45, 55]} minSize={150} snapOffset={10} + onDragEnd={() => { + setTriggerUpdate((prev) => prev + 1); + }} // dragInterval={50} > - +