I am migrating to tomtom web map from mapbox gl, I was using the below code to remove all markers. could you please help me to do this with tomtom. I am using react and antdesign to show popups

Maps SDK for Web (JavaScript)
#1

while (map._markers.length) {
map._markers.forEach((marker: any) => marker.remove())
}

When i try to store the markers (about 100+ marker) in a state variable, I am not getting the updated list in the popup as i need to clear the marker from popup as well. Thanks in advance

#2

is map._markers a documented thing?

without seeing the code it can be hard to understand the issue

#3

my requirement is as below:

  1. show car icon for each shipment in tomtom map (intializeMap)
  2. onclick of car icon, show a popup (DetailPopUp) with detail and a button for view that shipment
  3. onclick of that button (showShipmentRoute function will be fired), need to remove all the car icon present in the map and show the origin, destination with traceline and one car icon to show where exatly it reached

I have done this with mapbox and removing each marker (car icons) with the help of _markers in mapbox. but unable to remove existing car icons in tomtom as we dont have _markers

If i store all markers in a state variable, and if i try to remove the icons from popup, not getting the latest state, as they intialized before updating the state

const MapView= (props) => {
    const Map: any = useRef(null)
    const MapContainer: any = useRef(null)
    const [rememberMarkers, setRememberMarkers]: any = useState([])

    const intializeMap = () => {
        Map.current = tt.map({
            container: MapContainer.current ? (MapContainer.current as HTMLElement) : '',
            center: defaultCoords,
            key: constants.mapKey,
        })
      
        Map.current.on('load', () => {
            let tempMrkrs=[]
            props.data?.forEach((eachShipment: any, idx: number) => {
                const { origin } = eachShipment
                    let marker = createMarker(idx, eachShipment)
                    let coords: any = [origin.longitude, origin.latitude]
                    marker.setLngLat(coords).addTo(Map.current)
                    tempMrkrs.push(marker)

            })
            setRememberMarkers(tempMrkrs)
            
        })
    }

    const createMarker = (id: any,  each: any) => {
        let element =  <img src={carIcon} alt='carIcon'  />
        let point = document.createElement('div')
        ReactDOM.render(<DetailPopUp id={id} trigger={element} data={each} showShipmentFn={showShipmentRoute} />, point); //Using ReactDOM.render to render popup component with lot of customization
        let mraker = new tt.Marker(point)
        return mraker
    }

    const showShipmentRoute = (shipmentDetails: any) => {
        removeAllMarker()
        //code for showing individual shipment with route
    }

    const removeAllMarker = () => {
        if (Map?.current && rememberMarkers?.length) {
            let tempmarkers = [...rememberMarkers]
            tempmarkers.forEach((eachMrkr: any) => {
                eachMrkr?.remove()
            })
            setRememberMarkers([])
        }
    }

    useEffect(() => {
        intializeMap()
        //return () => { //remove map }
    }, [])

    return <div ref={MapContainer} />
}
#4

hmm… can we have a working minimal reproducible example on codepen or similar?