Remove markers in Tomtom for react

Maps SDK for Web (JavaScript)
#1

Hello! I’ve found good documentation for ADDING markers to a tomtom map in react, but I haven’t been able to find anything on clearing markers from a map. I know there is .remove(), but I haven’t been able to get that to work.

The gist of what I’m trying to do is:

  • The user enters two addresses
  • Those are geocoded into points
  • when they hit submit, it adds markers for each address on to the map
  • each time they hit submit, I want to clear away all the old markers and only display the new ones.

Here is my bit of code where I’m adding

 const addMarkers = () => {
    const firstCoordsArr = [firstAddCoords.lon, firstAddCoords.lat];
    const secondCoordsArr = [secondAddCoords.lon, secondAddCoords.lat];

    const marker1 = new tt.Marker().setLngLat(firstCoordsArr).addTo(map);
    const marker2 = new tt.Marker().setLngLat(secondCoordsArr).addTo(map);
   }```
#2

Hi,
You can remove markers simply with remove():Maps.Marker
You can read more on documentation page: Documentation | Maps SDK Web JS v6

1 Like
#3

what does the syntax for this actually look like though? I’ve tried

marker1.remove();
marker1.Maps.Marker.remove();
Maps.Marker.remove(marker1);

with no luck

#4

It should work like this: marker1.remove()

I just created a simple map and checked it and it works just fine.

How I add and remove marker:

<script>
   var marker1 = new tt.Marker().setLngLat(speedyPizzaCoordinates).addTo(map);
   marker1.remove()
</script>
1 Like