On default location it displays marker and circle point but When I search new location it doesn't update location, marker and circle point. It should update location, marker and circle to new searched location e.g. if search for "London" it should update location from previous, marker and circle should also be there on location of London.
<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);
});
});