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>
Advertisement
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();
- 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) }
- 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>