when I search city in search bar than another city it show marker and circle on both location previous city and current city like so. if u see picture it will tell you what i am saying. help me to imporve the code.

See problem

<div >
        <div >
            <input type="text" placeholder="City" id="search">
            <button id="clickme" type="button">Search</button>
        </div>

    <div id="map"></div>
</div>



clickme.addEventListener("click",my=(e)=>{
          e.preventDefault();
          var city=search.value;
          fetch(`https://api.openweathermap.org/data/2.5/weather?q=${city}&appid=ac3673a8887645fc3d0493904a348e03`)
          .then(response=> response.json())
          .then(data=>{
              var lat=data.coord.lat;
              var long=data.coord.lon;
              var udata=data.name;
              var latlng = L.latLng(lat, long);    
              map.panTo([lat,long],13);
              var circle = L.circle([lat, long], {
                color: 'red',
                fillColor: '#f03',
                fillOpacity: 0.5,
                radius: 1000
            }).addTo(map);
            var marker= L.marker(latlng).addTo(map)
              var popup = L.popup()
              .setLatLng(latlng)
              .setContent(udata)
              .openOn(map);
               console.log(data.name);
              
              });
          });

CodePudding user response：

You would need to clear the previous layer from the map instance. You can try this (DOCS):

clickme.addEventListener("click",my=(e)=>{
          e.preventDefault();
          var city=search.value;
          fetch(`https://api.openweathermap.org/data/2.5/weather?q=${city}&appid=ac3673a8887645fc3d0493904a348e03`)
          .then(response=> response.json())
          .then(data=>{ 
    
              // Clear the layers from the map instance
              map.eachLayer(function (layer) {
                  map.removeLayer(layer);
              });
    
              var lat=data.coord.lat;
              var long=data.coord.lon;
              var udata=data.name;
              var latlng = L.latLng(lat, long);    
              map.panTo([lat,long],13);
              var circle = L.circle([lat, long], {
                color: 'red',
                fillColor: '#f03',
                fillOpacity: 0.5,
                radius: 1000
            }).addTo(map);
            var marker= L.marker(latlng).addTo(map)
              var popup = L.popup()
              .setLatLng(latlng)
              .setContent(udata)
              .openOn(map);
               console.log(data.name);
              
              });
          });

Or you can create a layer group and add the layer to/remove it from that (DOCS):

// Create a layer group
const layerGroup = L.layerGroup().addTo(map)

clickme.addEventListener("click",my=(e)=>{
          e.preventDefault();
          var city=search.value;
          fetch(`https://api.openweathermap.org/data/2.5/weather?q=${city}&appid=ac3673a8887645fc3d0493904a348e03`)
          .then(response=> response.json())
          .then(data=>{
  
              // Clear the layer group
              layerGroup.clearLayers()
    
              var lat=data.coord.lat;
              var long=data.coord.lon;
              var udata=data.name;
              var latlng = L.latLng(lat, long);    
              map.panTo([lat,long],13);
              var circle = L.circle([lat, long], {
                color: 'red',
                fillColor: '#f03',
                fillOpacity: 0.5,
                radius: 1000
            }).addTo(layerGroup); // Add to layerGroup instead of map

            // Add marker to layerGroup instead of map
            var marker= L.marker(latlng).addTo(layerGroup)
              var popup = L.popup()
              .setLatLng(latlng)
              .setContent(udata)
              .openOn(map);
               console.log(data.name);
              
              });
          });

CodePudding user response：

You should store the marker in a variable like:

var marker = L.marker(latlng).addTo(map) and then you will be able to move the marker with: marker.setLatLng(latlng);