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.
<div class="container-fluid d-flex flex-column align-items-center area">
<div class="search-area">
<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);
});
});
You would need to clear the previous layer from the map instance. You can try creating 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);
});
});
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);