Mapboxgl JS doesn't remove markers

Question

I am trying to remove my markers in a MapboxGL map following this question but It doesn't work, it throws:

var marker = new mapboxgl.Marker().addTo(map);
marker.remove();
TypeError: e is undefined

My workflow is to throw a javascript function to remove markers and add new markers,:

            geojson.features = new_features;
            /* here code to remove!! */
            HERE CODE TO REMOVE!
            /* add markers to map */

            geojson.features.forEach(function(marker) {
              // create a HTML element for each feature
              var el = document.createElement('div');
              el.className = 'marker';

              // make a marker for each feature and add it to the map
              var new_marker = new mapboxgl.Marker(el)
                  .setLngLat(marker.geometry.coordinates)
                  .setPopup(new mapboxgl.Popup({offset: 25}) // add popups
                      .setHTML('<h3>' + marker.properties.title + '</h3><p>' + marker.properties.description + '</p>'))
                  .addTo(map);
            });

In my last effort I tried this to remove with this but It doesn't work well (The workflow updates randomly markers):

            /* remove markers */
            var markers = document.getElementsByClassName('marker');
            for (i = 0; i < markers.length; i++) {
                var marker = markers[i];                    
                marker.remove();
            }

UPDATE

I tried the suggested solution, but It doesn't work....:

        let markers = [];
        geojson.features.forEach((feature) => {
          let marker = new mapboxgl.Marker().setLngLat(feature.geometry.coordinates).addTo(map);
          markers.push(marker);
        });

        // clear markers array
        markers.forEach((marker) => marker.remove())


        geojson.features = features;

        geojson.features.forEach(function(marker) {
          // create a HTML element for each feature
          var el = document.createElement('div');
          el.className = 'marker';
          //el.setAttribute("longitude",marker.geometry.coordinates[0].toString());
          //el.setAttribute("latitude",marker.geometry.coordinates[1].toString());

          // make a marker for each feature and add it to the map
          var new_marker = new mapboxgl.Marker(el)
              .setLngLat(marker.geometry.coordinates)
              .setPopup(new mapboxgl.Popup({offset: 25}) // add popups
                  .setHTML('<h3>' + marker.properties.title + '</h3><p>' + marker.properties.description + '</p>'))
              .addTo(map);
        });

Try this: https://stackoverflow.com/questions/46155523/mapbox-clear-all-current-markers/56239290#56239290 — Ralph1983, May 21 '19 at 13:26
I keep track of all markers in a seperate array, then use myMarkers.forEach(m => m.remove()) not ideal, but it works. — sirclesam, Oct 03 '22 at 03:22

Dmitriy Pankratov · Answer 1 · 2019-04-11T17:18:58.120

The error occurs because you need to specify the coordinates for the marker:

let marker = new mapboxgl.Marker().setLngLat([30.5, 50.5]).addTo(map);

After that you can delete the marker:

marker.remove();

In your case, you may save all your markers to array and then remove each one:

var markers = [];

function drawMarkers(features){
  clearMarkers();
  features.forEach((feature) => {
    let marker = new mapboxgl.Marker()
      .setLngLat(feature.geometry.coordinates)
      .setPopup(new mapboxgl.Popup()
        .setHTML(`<h3>${feature.properties.title}</h3><p>${feature.properties.description}</p>`))
      .addTo(map);
    markers.push(marker)
  });
}

function clearMarkers(){
  markers.forEach((marker) => marker.remove());
  markers = [];
}

drawMarkers(<YOUR FEAUTURES>);

I posted the updated code... and sorry, It doesn't work... Something curious, If I remove the dom element from`document` object as in my second code snippet, It removes markers but It works randomly... — carlos.baez, Apr 11 '19 at 14:47

Mapboxgl JS doesn't remove markers

1 Answers1