diff --git a/src/frontend/src/components/IndividualProject/MapSection/index.tsx b/src/frontend/src/components/IndividualProject/MapSection/index.tsx index a56a1b4f..357abb2e 100644 --- a/src/frontend/src/components/IndividualProject/MapSection/index.tsx +++ b/src/frontend/src/components/IndividualProject/MapSection/index.tsx @@ -154,12 +154,12 @@ const MapSection = () => { > {taskStatusObj && tasksData && - tasksData?.map((task: Record, index: number) => { + tasksData?.map((task: Record) => { return ( id.toString(), [id]); const hasInteractions = useRef(false); + const imageId = `${sourceId}-image/logo`; useEffect(() => { hasInteractions.current = !!interactions.length; @@ -28,21 +29,26 @@ export default function VectorLayer({ useEffect(() => { if (!map || !isMapLoaded || !geojson) return; - if (map.getSource(sourceId)) { - map?.removeLayer(sourceId); + + if (map?.getSource(sourceId)) { + if (map?.getLayer(sourceId)) map?.removeLayer(sourceId); + if (map?.getLayer(imageId)) map?.removeLayer(imageId); + if (map?.getLayer(`${sourceId}-layer`)) + map?.removeLayer(`${sourceId}-layer`); map?.removeSource(sourceId); } + map.addSource(sourceId, { type: 'geojson', data: geojson, }); - }, [sourceId, isMapLoaded, map, geojson]); + }, [sourceId, isMapLoaded, map, geojson, imageId]); useEffect(() => { if (!map || !isMapLoaded) return; if (visibleOnMap) { map.addLayer({ - id: sourceId, + id: `${sourceId}-layer`, type: 'line', source: sourceId, layout: {}, @@ -50,7 +56,6 @@ export default function VectorLayer({ }); if (hasImage) { - const imageId = uuidv4(); map.loadImage(image, (error, img: any) => { if (error) throw error; // Add the loaded image to the style's sprite with the ID 'kitten'. @@ -114,11 +119,14 @@ export default function VectorLayer({ useEffect( () => () => { if (map?.getSource(sourceId)) { - map?.removeLayer(sourceId); + if (map?.getLayer(sourceId)) map?.removeLayer(sourceId); + if (map?.getLayer(imageId)) map?.removeLayer(imageId); + if (map?.getLayer(`${sourceId}-layer`)) + map?.removeLayer(`${sourceId}-layer`); map?.removeSource(sourceId); } }, - [map, sourceId], + [map, sourceId, imageId], ); return null; diff --git a/src/frontend/src/views/Projects/index.tsx b/src/frontend/src/views/Projects/index.tsx index cd56878f..8f57622e 100644 --- a/src/frontend/src/views/Projects/index.tsx +++ b/src/frontend/src/views/Projects/index.tsx @@ -49,10 +49,10 @@ const Projects = () => { ), )