Can't edit a circle - Githubissues

LeoMaldonado commented 6 years ago

[x] I'm reporting a bug, not asking for help
[x] I've looked at the documentation to make sure the behaviour is documented and expected
[x] I'm sure this is a Leaflet Draw code issue, not an issue with my own code nor with the framework I'm using (Cordova, Ionic, Angular, React…)
[x] I've searched through the issues to make sure it's not yet reported

How to reproduce

Leaflet version I'm using: 1.2.0
Leaflet Draw version I'm using: 0.4.13
Browser (with version) I'm using: Chrome
OS/Platform (with version) I'm using: MacOS High Sierra
Create a circle
Edit this circle
[x] this example is as simple as possible
[x] this example does not rely on any third party code

Editing the radius of any circle created, the new radius is not applied http://leaflet.github.io/Leaflet.draw/docs/examples/full.html

I've attached a gif explaining the problem:

I have created a simple project installing Leaflet.Draw via npm and this simple project had the same behavior as the full example in the link. My local project consists of a index.html:

<!DOCTYPE html>
<html>
<body>
    <div id='map' style="width:900px;height:900px"></div>
</body>
<script src="node_modules/leaflet/dist/leaflet.js"></script>
<link rel="stylesheet" type="text/css" href="node_modules/leaflet/dist/leaflet.css">
<script src="node_modules/leaflet-draw/dist/leaflet.draw.js"></script>
<link rel="stylesheet" type="text/css" href="node_modules/leaflet-draw/dist/leaflet.draw.css">
<script src="index.js"></script>
</html>

and a index.js:

var map = L.map('map').setView([51.505, -0.09], 13);
L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
    attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);
// FeatureGroup is to store editable layers
var drawnItems = new L.FeatureGroup();
map.addLayer(drawnItems);
var drawControl = new L.Control.Draw({
    edit: {
        featureGroup: drawnItems
    }
});
map.addControl(drawControl);

map.on(L.Draw.Event.CREATED, function (e) {
    var type = e.layerType;
    var layer = e.layer;
    drawnItems.addLayer(layer);
});
map.on('draw:edited', function (e) {
    var layers = e.layers;
    layers.eachLayer(function (layer) {
        drawnItems.addLayer(layer);
    });
});

ChaudhryAtif commented 6 years ago

I'm facing this issue as well. I'm able to drag the circle using the middle handler, but not able to resize it.

@LeoMaldonado Temporary solution: https://github.com/Leaflet/Leaflet.draw/issues/808#issuecomment-350340503

GustavoZatorre commented 6 years ago

https://github.com/Leaflet/Leaflet.draw/releases/tag/v0.4.11 is solved

ChaudhryAtif commented 6 years ago

@GustavoZatorre I have this issue in 0.4.13

joshkopecek commented 6 years ago

Can confirm this occurs in 0.4.13. Upgrading to 1.0.0 or downgrading to 0.4.11 solves the problem for me.

LeoMaldonado commented 6 years ago

@joshkopecek The issue occurs in 0.4.13 version. I've tested in versions 0.4.11, 0.4.12 and it works. The bug seems to be introduced in version 0.4.13.

ChaudhryAtif commented 6 years ago

Josh said it does not occur in 1.0.0, and since that is now the latest for npm install, it should work by default.

LeoMaldonado commented 6 years ago

In 1.0.0 version it is working fine. Thank You.

Leaflet / Leaflet.draw

Can't edit a circle #815

How to reproduce