I'm new to leaflets and am trying to circle the map when clicked. I want conditions like the following: Circle moves from one point to another when clicked on the map (If the circle already exists and there is only one circle) Directly Zoom on where the circle is made However I have the following problem: Circle increases When pressing

move a circle from one point to another

I’m new to leaflets and am trying to circle the map when clicked. I want conditions like the following:

Circle moves from one point to another when clicked on the map (If the circle already exists and there is only one circle)
Directly Zoom on where the circle is made

However I have the following problem:

Circle increases
When pressing another point, the circle disappears first and after that it will appear at the previous point and at the most recent point
Don’t zoom in where the circle is made

Is there a solution to this problem?

<!DOCTYPE html>
<html>
   <head>
      <title>Leaflet Polygons</title>
      <link rel = "stylesheet" href = "http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css"/>
      <script src = "http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script>
   </head>
   
   <body>
      <div id = "map" style = "width: 900px; height: 580px"></div>
      <script>
         // Creating map options
         var mapOptions = {
            center: [16.506174, 80.648015],
            zoom: 11
         }
         var groupCircle = L.featureGroup();

         var map = new L.map('map', mapOptions);    // Creating a map object
         
         // Creating a Layer object
         var layer = new L.TileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png');
         map.addLayer(layer); // Adding layer to the map
         
         map.on("click", function(e){
            if(map.hasLayer(groupCircle)){
                map.removeLayer(groupCircle)
            }else{
                new L.Circle([e.latlng.lat, e.latlng.lng], 5000).addTo(groupCircle);
                map.addLayer(groupCircle)
            }
            
         })
      </script>
   </body>
   
</html>

JavaScript
​x
 
<!DOCTYPE html>
<html>
   <head>
      <title>Leaflet Polygons</title>
      <link rel = "stylesheet" href = "http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css"/>
      <script src = "http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script>
   </head>
   
   <body>
      <div id = "map" style = "width: 900px; height: 580px"></div>
      <script>
         // Creating map options
         var mapOptions = {
            center: [16.506174, 80.648015],
            zoom: 11
         }
         var groupCircle = L.featureGroup();
​
         var map = new L.map('map', mapOptions);    // Creating a map object
         
         // Creating a Layer object
         var layer = new L.TileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png');
         map.addLayer(layer); // Adding layer to the map
         
         map.on("click", function(e){
            if(map.hasLayer(groupCircle)){
                map.removeLayer(groupCircle)
            }else{
                new L.Circle([e.latlng.lat, e.latlng.lng], 5000).addTo(groupCircle);
                map.addLayer(groupCircle)
            }
            
         })
      </script>
   </body>
   
</html>
​

Answer

The circle will increase because you delete only the featureGroup layer not the content of the featureGroup. Re-initiation can be done as follows:

map.removeLayer(groupCircle)
groupCircle = L.featureGroup();

JavaScript
 
map.removeLayer(groupCircle)
groupCircle = L.featureGroup();
​

Can be added directly after re-initiation

 if(map.hasLayer(groupCircle)){
                //Start
                map.removeLayer(groupCircle)
                groupCircle = L.featureGroup();
                new L.Circle([e.latlng.lat, e.latlng.lng], 5000).addTo(groupCircle);
                map.addLayer(groupCircle)
                //End
            }else{
                new L.Circle([e.latlng.lat, e.latlng.lng], 5000).addTo(groupCircle);
                map.addLayer(groupCircle)
            }

JavaScript
 
 if(map.hasLayer(groupCircle)){
                //Start
                map.removeLayer(groupCircle)
                groupCircle = L.featureGroup();
                new L.Circle([e.latlng.lat, e.latlng.lng], 5000).addTo(groupCircle);
                map.addLayer(groupCircle)
                //End
            }else{
                new L.Circle([e.latlng.lat, e.latlng.lng], 5000).addTo(groupCircle);
                map.addLayer(groupCircle)
            }
​

Can add “setView” command:

map.setView([e.latlng.lat, e.latlng.lng], 11); //11 = zoom level

JavaScript
 
map.setView([e.latlng.lat, e.latlng.lng], 11); //11 = zoom level
​

Here’s the full code:

<!DOCTYPE html>
<html>
   <head>
      <title>Leaflet Polygons</title>
      <link rel = "stylesheet" href = "http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css"/>
      <script src = "http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script>
   </head>
   
   <body>
      <div id = "map" style = "width: 900px; height: 580px"></div>
      <script>
         // Creating map options
         var mapOptions = {
            center: [16.506174, 80.648015],
            zoom: 11
         }
         var groupCircle = L.featureGroup();

         var map = new L.map('map', mapOptions);    // Creating a map object
         
         // Creating a Layer object
         var layer = new L.TileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png');
         map.addLayer(layer); // Adding layer to the map
         
         map.on("click", function(e){
            map.setView([e.latlng.lat, e.latlng.lng], 11); //11 = zoom level
            if(map.hasLayer(groupCircle)){
                //Start
                map.removeLayer(groupCircle)
                groupCircle = L.featureGroup();
                new L.Circle([e.latlng.lat, e.latlng.lng], 5000).addTo(groupCircle);
                map.addLayer(groupCircle)
                //End
            }else{
                new L.Circle([e.latlng.lat, e.latlng.lng], 5000).addTo(groupCircle);
                map.addLayer(groupCircle)
            }
            
         })
         
      </script>
   </body>
</html>

JavaScript
 
<!DOCTYPE html>
<html>
   <head>
      <title>Leaflet Polygons</title>
      <link rel = "stylesheet" href = "http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css"/>
      <script src = "http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script>
   </head>
   
   <body>
      <div id = "map" style = "width: 900px; height: 580px"></div>
      <script>
         // Creating map options
         var mapOptions = {
            center: [16.506174, 80.648015],
            zoom: 11
         }
         var groupCircle = L.featureGroup();
​
         var map = new L.map('map', mapOptions);    // Creating a map object
         
         // Creating a Layer object
         var layer = new L.TileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png');
         map.addLayer(layer); // Adding layer to the map
         
         map.on("click", function(e){
            map.setView([e.latlng.lat, e.latlng.lng], 11); //11 = zoom level
            if(map.hasLayer(groupCircle)){
                //Start
                map.removeLayer(groupCircle)
                groupCircle = L.featureGroup();
                new L.Circle([e.latlng.lat, e.latlng.lng], 5000).addTo(groupCircle);
                map.addLayer(groupCircle)
                //End
            }else{
                new L.Circle([e.latlng.lat, e.latlng.lng], 5000).addTo(groupCircle);
                map.addLayer(groupCircle)
            }
            
         })
         
      </script>
   </body>
</html>
​

Advertisement

Answer