Skip to content
Advertisement

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:

  1. Circle increases
  2. When pressing another point, the circle disappears first and after that it will appear at the previous point and at the most recent point
  3. 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>

Answer

  1. 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();
  1. 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)
            }
  1. Can add “setView” command:
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>
Advertisement