CODEWITHSUNDEEP
javascriptmapboxmapbox-gl-js
HomerPlata
HomerPlata

Reputation: 1797

MapBox clear all current markers

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.

Upvotes: 27

Views: 57528

Answers (6)

Alex Alan Nunes
Alex Alan Nunes

Reputation: 194

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);

Upvotes: 0

Nick the Community Scientist
Nick the Community Scientist

Reputation: 1801

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.

Upvotes: 1

S..
S..

Reputation: 5758

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 = []

Upvotes: 3

Mohamed AIT MANSOUR
Mohamed AIT MANSOUR

Reputation: 845

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();
    }
}

Upvotes: 41

Ralph1983
Ralph1983

Reputation: 25

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();

Upvotes: 0

Andi-lo
Andi-lo

Reputation: 2312

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();

Upvotes: 47

Related Questions