MapBox clear all current markers

Question

I've created a MapBox instance with:

var map = new mapboxgl.Map({
    container : 'map',
    style : 'mapbox://styles/mapbox/streets-v9'
});

I need to clear all markers, and have tried things like map.remove(marker) on each one, and a few other things, but nothing seems to work.

Is there a simple function call to just clear all markers from the map?

EDIT: Different from How to remove all layers and features from map? because I get "eachLayer is not a recognised function" (or similar) in console.

Answer 1

You saw this? https://www.mapbox.com/mapbox-gl-js/api/#marker#remove

Instead of map.remove maybe try marker.remove:

var marker = new mapboxgl.Marker().addTo(map);
marker.remove();

Answer 2

If you added multiple markers, and you want to clear all them on your map, you have to loop overs all markers, and delete them one by one, you will have something like this :

if (currentMarkers!==null) {
    for (var i = currentMarkers.length - 1; i >= 0; i--) {
      currentMarkers[i].remove();
    }
}

Consider thar var currentMarkers contains all markers, you can do this with sometning like :

oneMarker= new mapboxgl.Marker(currentMarkerDiv)
    .setLngLat(marker.geometry.coordinates)
    .addTo(mapboxMap);
    currentMarkers.push(oneMarker);

Where var currentMarkers is a global variable :

var currentMarkers=[];

Full example :

// markers saved here
var currentMarkers=[];

// tmp marker
var oneMarker= new mapboxgl.Marker(currentMarkerDiv)
    .setLngLat(marker.geometry.coordinates)
    .addTo(mapboxMap);

// save tmp marker into currentMarkers
currentMarkers.push(oneMarker);


// remove markers 
if (currentMarkers!==null) {
    for (var i = currentMarkers.length - 1; i >= 0; i--) {
      currentMarkers[i].remove();
    }
}

Answer 3

You can't query for all markers - without a hack - to remove, so instead keep track of them when you add them so you can later iterate and remove.

let mapMarkers = []

// adding
const marker = new mapboxgl.Marker()
                        .setLngLat([0, 0])
                        .addTo(map)
mapMarkers.push(marker)

// removing
mapMarkers.forEach((marker) => marker.remove())
mapMarkers = []

Answer 4

If you added the markers like this (to be able to add styling and custom images as markers), then you can simply remove the class (I did it through Jquery though).

Adding markers that are in a GeoJson:

GeoJson.features.forEach(function(marker) {
var el = document.createElement('div');
el.className = 'marker';
new mapboxgl.Marker(el).setLngLat(marker.geometry.coordinates).addTo(map);
});

Removing markers:

$( ".marker" ).remove();

Answer 5

For people looking for a simple answer to remove one marker do:

marker.remove()

Here is an example in React:

// Add Marker to map at the specific position
const customMarker = createCustomMarker(newMarkerIcon.current, true) // Separation required for event listeners. Create custom marker adds some css and an icon using custom sources.
const marker = new mapboxgl.Marker({
  element: customMarker
})
  .setLngLat(event.lngLat)
  .addTo(map.current)

// Listens to clicks for removal after placement
customMarker.addEventListener('click', removeMarkerFromClick)
customMarker.addEventListener('touchstart', removeMarkerFromClick)

 function removeMarkerFromClick(event) {
    // Remove marker retrieved from event
    const marker = event.target
    marker.remove()
  }

For many markers look at this answer in this thread.

Answer 6

If you are using React and set new position in every click. follow

if (marker.current) {
  marker.current.remove();
}

marker.current = new mapboxgl.Marker()
.setLngLat(ev.lngLat)
.addTo(map.current as any);