CODEWITHSUNDEEP
javascriptgis
Michael Grzesiek
Michael Grzesiek

Reputation: 3

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:

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>

Upvotes: 0

Views: 91

Answers (1)

Rangga
Rangga

Reputation: 71

  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>

Upvotes: 2

Related Questions