How to Clear Markers Added to Maps in Leaflet

Asked 2 years ago, Updated 2 years ago, 118 views

onMapMoved=function(e){
  map.removeLayer(markerList);
  var url="https://api.twitter.com/1.1/search/tweets.json";
  varsearchKeywords=get_search_keywords();

  if(searchKeywords.length>0){
      searchKeywords.forEach(function output(searchKeywords){
          since_id = null;
          getTwitter(url,searchKeywords);
      });
  }
};

I would like to add an implementation to the onMapMoved function to erase the markers added on the map. If anyone knows how to do so, please reply.

(The get_search_keywords function interprets the keyword that you want to search on a web page, passes it to an array, and sends it to the getTwitter function for the keyword in the array to actually search for tweets.Based on the information we got, we are plotting only the ones with latitude and longitude information on the map with different functions.)

Here's the code for the function you're plotting on the map

 function update(data){// argument(data) contains the retrieved data
varbounds, distance1, distance2, r, southWest;
varbounds = map.getBounds();
varcenter=bound.getCenter();
var southWest=bound.getSouthWest();
var distance1 = bound.getNorthWest().distanceTo(SouthWest)/1000;
var distance2 = bound.getSouthEast().distanceTo(SouthWest)/1000;
var=distance1<distance2?distance1:distance2;
r* = 0.5;
r = Math.floor(r*10)/10;

$("#tweetDisplay").empty();// Empty the display area
$("#tweetDisplay").append('<br>');
vargeoFlag = 0;

$("#tweetDisplay").append("<p style='border:medium solid'>Twitter (radius from center of map"+r+"km)</p>);

var result=data.status;// Get what you need in the method chain from the retrieved data

// Get latitude and longitude only if it is Tweet with Geo tag from Twitter and plot the marker on the map
for (vari=0;i<result.length;i++){
    var name=result[i].user.name;// Name of the person who tweeted
    var account=result[i].user.screen_name;// The account name of the person who tweeted
    varimgsrc=result[i].user.profile_image_url;// profile image of the person who tweeted
    // var content=result[i].text;//Tweet Contents
    var contents = AutoLink (result[i].text); // If there is a URL in the tweet, skip to the link
    var updated=result[i].created_at;// Tweeted time

    US>vartweet;

    // Add the retrieved data to the Tweet display area
    tweet="<a href='https://twitter.com/"+account+"'>img src='"
            + imgsrc+"'>/a>"+"<p>"+'ID:'+name+'@'+account
            + "<br>"+contents+"<br>";

    if(result[i].coordinates){
        geoFlag = 1;
        var coordinates=result[i].coordinates.coordinates;// Tweet latitude and longitude information
        tweet+=' latitude: '+coordinates[1]+', longitude: '+coordinates[0]
                + "<br>"+'Time:'+updated+"<br>/p>";
        $("#tweetDisplay").append(tweet);
        varicon=L.icon({
            iconUrl —imgsrc,
            iconSize: [20,22]
        });
        marker = L.marker([coordinates[1], coordinates[0]], {
            icon —icon
        }).addTo(map);
        markerList.push(marker);
    } else{
        tweet+='Time:'+updated+"<br>/p>";
        $("#tweetDisplay").append(tweet);
    }
    if(i!=count-1){
        $("#tweetDisplay").append("</p><hr noshade size='7'>");
    }
}
if(geoFlag===0){
    alert('Geo tagged tweets were not detected.');
}
}

javascript leaflet

2022-09-30 20:29

1 Answers

onMapMoved is not a legitimate method, so I would like you to present the source code...
Use removeLayer.

 varmarker=L.marker([latitude, longitude] {
    icon —icon
}).addTo(map);

function onMapMoved(){
    map.removeLayer(marker);
}

map.on('move', onMapMoved);


2022-09-30 20:29

If you have any answers or tips


© 2024 OneMinuteCode. All rights reserved.