[feat] Hiding Markers when Search and Filters are Activated #86
Conversation
| @@ -87,8 +89,16 @@ export const MarkerInfoWindow = ({ | |||
| useEffect(() => { | |||
| if (marker && clusterer) { | |||
| clusterer.addMarker(marker); | |||
| markerMap.set(projectId, marker as unknown as google.maps.Marker); | |||
There was a problem hiding this comment.
this bypasses the type-checking system but may cause runtime issues bc of compatibility. marker = AdvancedMarkerElement but markerMap takes in google.maps.Marker which is needed to call setMap().
There was a problem hiding this comment.
hmmm, I don't want to run the risk of runtime errors and when I checked it on my VSCode it did say Marker is depreciated. Since this feature does not need to be merged in ASAP, let's work together on a fix after Thanksgiving Break.
nehaahussain
changed the title
| @@ -129,6 +130,50 @@ export default function AddMarker({ | |||
| return setClusterer; | |||
| }, [map]); | |||
|
|
|||
| const markerMap = useRef<Map<number, google.maps.Marker>>(new Map()); | |||
There was a problem hiding this comment.
What does this line do?
There was a problem hiding this comment.
This creates markerMap which is like a hashmap that maps the project ids to its corresponding marker (google.maps.Marker). useRef is just a hook that makes it so that the component doesn't re-render every time we update the map. Instead, useRef creates a mutable object (markerMap.current) that exists across re-renders of the component.
| @@ -87,8 +89,16 @@ export const MarkerInfoWindow = ({ | |||
| useEffect(() => { | |||
| if (marker && clusterer) { | |||
| clusterer.addMarker(marker); | |||
| markerMap.set(projectId, marker as unknown as google.maps.Marker); | |||
There was a problem hiding this comment.
hmmm, I don't want to run the risk of runtime errors and when I checked it on my VSCode it did say Marker is depreciated. Since this feature does not need to be merged in ASAP, let's work together on a fix after Thanksgiving Break.
What's new in this PR
Description
markerMapto map the project ids to its corresponding marker.Screenshots
Screen.Recording.2024-11-24.at.8.14.44.PM.mov
How to review
Next steps
google.maps.Markervsgoogle.maps.marker.AdvancedMarkerElement->setMap()is part of Marker not AdvancedMarkerElement (check comment)Relevant links
Online sources
Related PRs
CC: @itsliterallymonique