Drawing a rectangle using leaflet.draw library doesn't work (it throws error in console). - Githubissues

Leaflet / Leaflet.draw

Vector drawing and editing plugin for Leaflet

https://leaflet.github.io/Leaflet.draw/docs/leaflet-draw-latest.html

MIT License

1.96k stars 992 forks source link

Drawing a rectangle using leaflet.draw library doesn't work (it throws error in console). #1070

Open abhi5057 opened 3 months ago

abhi5057 commented 3 months ago

[ ] I'm reporting a bug, not asking for help
[ ] I've looked at the documentation to make sure the behaviour is documented and expected
[ ] 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…)
[ ] I've searched through the issues to make sure it's not yet reported

How to reproduce

Leaflet version I'm using: 1.9.4
Leaflet Draw version I'm using: 1.0.4
Browser (with version) I'm using: Chrome
OS/Platform (with version) I'm using: Windows
step 1: Try to set up leaflet library in a basic js project and enable rectangle option.
step 2: Try drawing rectangle by choosing the rectangle option from the control.
step 3: Click on a point and try dragging the cursor to create a rectangle.

What behaviour I'm expecting and which behaviour I'm seeing

Expectation: I should've been able to create a rectangle by clicking and dragging the cursor. Observation: We're unable to drag the cursor to create a rectangle.

Minimal example reproducing the issue

[ ] this example is as simple as possible
[ ] this example does not rely on any third party code

abhi5057 commented 3 months ago

The issue is seen in readableArea function in leaflet.draw's code base. There's a wrong reference to type variable and hence we see the issue.

        readableArea: function (area, isMetric, precision) {
            var areaStr,
                units,
                precision = L.Util.extend({}, defaultPrecision, precision);

            if (isMetric) {
                units = ['ha', 'm'];
                type = typeof isMetric;
                if (type === 'string') {
                    units = [isMetric];
                } else if (type !== 'boolean') {
                    units = isMetric;
                }

Instead if we change to this.type in all the 3 references to type variable here, then we're able to draw rectangle, however we're unable to see its area while creating the rectangle though.