Polygon Creation/Edition does not work

malishahi commented 6 years 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

I have the following code to draw a polygon, but in my console I face several errors, and after drawing the first polygon, the next polygon drawing is not possible. Also, when I want to edit the first polygon, the edit buttons don't work. ERRRORs in the console are as the following:

Uncaught TypeError: Cannot read property 'className' of undefined at NewClass.addHooks (/client/index-trusted.js:226213) at /client/index-trusted.js:226191 at NewClass._eachVertexHandler (/client/index-trusted.js:226187) at NewClass.addHooks (/client/index-trusted.js:226190) at NewClass. (/client/index-trusted.js:226290) at NewClass.fire (/client/index-trusted.js:212653) at NewClass._layerAdd (/client/index-trusted.js:218562) at NewClass.whenReady (/client/index-trusted.js:216406) at NewClass.addLayer (/client/index-trusted.js:218619) at NewClass.addLayer (/client/index-trusted.js:218772) 3/client/index-trusted.js:226480 Uncaught ReferenceError: type is not defined at Object.readableArea (/client/index-trusted.js:226480) at NewClass._getMeasurementString (/client/index-trusted.js:226093) at NewClass._getTooltipText (/client/index-trusted.js:226090) at NewClass._updateTooltip (/client/index-trusted.js:226038) at NewClass._onMouseMove (/client/index-trusted.js:225997) at NewClass.fire (/client/index-trusted.js:212653) at NewClass._fireDOMEvent (/client/index-trusted.js:216380) at NewClass._handleDOMEvent (/client/index-trusted.js:216334) at HTMLDivElement.handler (/client/index-trusted.js:214333) /client/index-trusted.js:231677 geometry: Object /client/index-trusted.js:231678 layer.getLatLngs(): Array(1) /client/index-trusted.js:231681 area: 743296.1639329994 /client/index-trusted.js:226213 Uncaught TypeError: Cannot read property 'className' of undefined at NewClass.addHooks (/client/index-trusted.js:226213) at /client/index-trusted.js:226191 at NewClass._eachVertexHandler (/client/index-trusted.js:226187) at NewClass.addHooks (/client/index-trusted.js:226190) at NewClass. (/client/index-trusted.js:226290) at NewClass.fire (/client/index-trusted.js:212653) at NewClass._layerAdd (/client/index-trusted.js:218562) at NewClass.whenReady (/client/index-trusted.js:216406) at NewClass.addLayer (/client/index-trusted.js:218619) at NewClass.addLayer (/client/index-trusted.js:218772) /client/index-trusted.js:226480 Uncaught ReferenceError: type is not defined at Object.readableArea (/client/index-trusted.js:226480) at NewClass._getMeasurementString (/client/index-trusted.js:226093) at NewClass._getTooltipText (/client/index-trusted.js:226090) at NewClass._updateTooltip (/client/index-trusted.js:226038) at NewClass._onMouseMove (/client/index-trusted.js:225997) at NewClass.fire (/client/index-trusted.js:212653) at NewClass._fireDOMEvent (/client/index-trusted.js:216380) at NewClass._handleDOMEvent (/client/index-trusted.js:216334) at HTMLDivElement.handler (/client/index-trusted.js:214333) 55index-trusted.js:226480 Uncaught ReferenceError: type is not defined at Object.readableArea (index-trusted.js:226480) at NewClass._getMeasurementString (index-trusted.js:226093) at NewClass._getTooltipText (index-trusted.js:226090) at NewClass._updateTooltip (index-trusted.js:226038) at NewClass._onMouseMove (index-trusted.js:225997) at NewClass.fire (index-trusted.js:212653) at NewClass._fireDOMEvent (index-trusted.js:216380) at NewClass._handleDOMEvent (index-trusted.js:216334) at HTMLDivElement.handler (index-trusted.js:214333) readableArea @ index-trusted.js:226480 _getMeasurementString @ index-trusted.js:226093 _getTooltipText @ index-trusted.js:226090 _updateTooltip @ index-trusted.js:226038 _onMouseMove @ index-trusted.js:225997 fire @ index-trusted.js:212653 _fireDOMEvent @ index-trusted.js:216380 _handleDOMEvent @ index-trusted.js:216334 handler @ index-trusted.js:214333 index-trusted.js:231677 geometry: {type: "Polygon", coordinates: Array(1)} index-trusted.js:231678 layer.getLatLngs(): [Array(4)] index-trusted.js:231681 area: 743296.1639329994 index-trusted.js:226213 Uncaught TypeError: Cannot read property 'className' of undefined at NewClass.addHooks (index-trusted.js:226213) at index-trusted.js:226191 at NewClass._eachVertexHandler (index-trusted.js:226187) at NewClass.addHooks (index-trusted.js:226190) at NewClass. (index-trusted.js:226290) at NewClass.fire (index-trusted.js:212653) at NewClass._layerAdd (index-trusted.js:218562) at NewClass.whenReady (index-trusted.js:216406) at NewClass.addLayer (index-trusted.js:218619) at NewClass.addLayer (index-trusted.js:218772) addHooks @ index-trusted.js:226213 (anonymous) @ index-trusted.js:226191 _eachVertexHandler @ index-trusted.js:226187 addHooks @ index-trusted.js:226190 (anonymous) @ index-trusted.js:226290 fire @ index-trusted.js:212653 _layerAdd @ index-trusted.js:218562 whenReady @ index-trusted.js:216406 addLayer @ index-trusted.js:218619 addLayer @ index-trusted.js:218772 addLayer @ index-trusted.js:218916 (anonymous) @ index-trusted.js:231688 fire @ index-trusted.js:212653 _fireCreatedEvent @ index-trusted.js:225968 _fireCreatedEvent @ index-trusted.js:226084 completeShape @ index-trusted.js:225987 handler @ index-trusted.js:214333 30index-trusted.js:226480 Uncaught ReferenceError: type is not defined at Object.readableArea (index-trusted.js:226480) at NewClass._getMeasurementString (index-trusted.js:226093) at NewClass._getTooltipText (index-trusted.js:226090) at NewClass._updateTooltip (index-trusted.js:226038) at NewClass._onMouseMove (index-trusted.js:225997) at NewClass.fire (index-trusted.js:212653) at NewClass._fireDOMEvent (index-trusted.js:216380) at NewClass._handleDOMEvent (index-trusted.js:216334) at HTMLDivElement.handler (index-trusted.js:214333) readableArea @ index-trusted.js:226480 _getMeasurementString @ index-trusted.js:226093 _getTooltipText @ index-trusted.js:226090 _updateTooltip @ index-trusted.js:226038 _onMouseMove @ index-trusted.js:225997 fire @ index-trusted.js:212653 _fireDOMEvent @ index-trusted.js:216380 _handleDOMEvent @ index-trusted.js:216334 handler @ index-trusted.js:214333 index-trusted.js:231692 edit start 5index-trusted.js:218197 Deprecated use of _flat, please use L.LineUtil.isFlat instead. _flat @ index-trusted.js:218197 _defaultShape @ index-trusted.js:226210 _initMarkers @ index-trusted.js:226232 addHooks @ index-trusted.js:226217 (anonymous) @ index-trusted.js:226191 _eachVertexHandler @ index-trusted.js:226187 addHooks @ index-trusted.js:226190 enable @ index-trusted.js:217674 _enableLayerEdit @ index-trusted.js:226681 eachLayer @ index-trusted.js:218847 addHooks @ index-trusted.js:226659 enable @ index-trusted.js:217674 enable @ index-trusted.js:226655 handler @ index-trusted.js:214333 index-trusted.js:218197 Deprecated use of _flat, please use L.LineUtil.isFlat instead. _flat @ index-trusted.js:218197 _defaultShape @ index-trusted.js:226210 _spliceLatLngs @ index-trusted.js:226242 o @ index-trusted.js:226276 fire @ index-trusted.js:212653 _onDragStart @ index-trusted.js:219276 fire @ index-trusted.js:212653 _onMove @ index-trusted.js:217871 handler @ index-trusted.js:214333 _handlePointer @ index-trusted.js:214141 onMove @ index-trusted.js:214151 index-trusted.js:212127 Uncaught TypeError: Cannot read property '_leaflet_id' of undefined at stamp (index-trusted.js:212127) at NewClass.removeLayer (index-trusted.js:218627) at NewClass.removeHooks (index-trusted.js:226224) at index-trusted.js:226195 at NewClass._eachVertexHandler (index-trusted.js:226187) at NewClass.removeHooks (index-trusted.js:226194) at NewClass.disable (index-trusted.js:217686) at NewClass._disableLayerEdit (index-trusted.js:226683) at NewClass.eachLayer (index-trusted.js:218847) at NewClass.removeHooks (index-trusted.js:226661) stamp @ index-trusted.js:212127 removeLayer @ index-trusted.js:218627 removeHooks @ index-trusted.js:226224 (anonymous) @ index-trusted.js:226195 _eachVertexHandler @ index-trusted.js:226187 removeHooks @ index-trusted.js:226194 disable @ index-trusted.js:217686 _disableLayerEdit @ index-trusted.js:226683 eachLayer @ index-trusted.js:218847 removeHooks @ index-trusted.js:226661 disable @ index-trusted.js:217686 disable @ index-trusted.js:226657 _save @ index-trusted.js:226645 handler @ index-trusted.js:214333 index-trusted.js:75154 [Violation] 'setTimeout' handler took 56ms index-trusted.js:212127 Uncaught TypeError: Cannot read property '_leaflet_id' of undefined at stamp (index-trusted.js:212127) at NewClass.removeLayer (index-trusted.js:218627) at NewClass.removeHooks (index-trusted.js:226224) at index-trusted.js:226195 at NewClass._eachVertexHandler (index-trusted.js:226187) at NewClass.removeHooks (index-trusted.js:226194) at NewClass. (index-trusted.js:226292) at NewClass.fire (index-trusted.js:212653) at NewClass.removeLayer (index-trusted.js:218645) at NewClass.removeLayer (index-trusted.js:218787)

How to reproduce

Leaflet version I'm using: "leaflet": "^1.3.1",
Leaflet Draw version I'm using: "leaflet-draw": "^1.0.2",
Browser (with version) I'm using: Chrome
OS/Platform (with version) I'm using: Linux Ubuntu
step 1
step 2

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

I expect to see the functionalities to work properly, not being blocked.

Minimal example reproducing the issue

Here is the code:

    var map = L.map('mapid').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
    // Edit Toolbar
    let drawnItems = new L.FeatureGroup();
    map.addLayer(drawnItems);

    let drawControl = new L.Control.Draw({
        //draw: false,
        draw: {
            polygon: {
                allowIntersection: false, // Restricts shapes to simple polygons
                showArea: true,
                /*drawError: {
                    color: '#e1e100', // Color the shape will turn when intersects
                    message: '<strong>Oh snap!<strong> you can\'t draw that!' // Message that will show when intersect
                },*/
                shapeOptions: {
                    color: '#00ff00'
                },
                repeatMode: true
            },
            circle: false,
            circlemarker: false,
            marker: false,
            polyline: false,
            rectangle: false,
            handlers: {
                polygon: {
                    tooltip: {
                        start: 'Click to start drawing your farm.',
                        cont: 'Click to continue drawing your farm.',
                        end: 'Click the first point to close the boundary of your farm.'
                    }
                }
            }
        },
        edit: {
            featureGroup: drawnItems,
            remove: true
        }
    });

    L.drawLocal.draw.toolbar.buttons.polygon = 'Draw your farm boundary on the map.';
    L.drawLocal.draw.handlers.rectangle.tooltip.start = 'Not telling...';

    map.addControl(drawControl);

    /*var modifiedDraw = L.drawLocal.extend({
        draw: {
            toolbar: {
                buttons: {
                    polygon: 'Draw your farm as a polygon: '
                }
            }
        }
    });

    map.addControl(modifiedDraw);*/

    map.on(L.Draw.Event.CREATED, function (e) {
        //var type = e.layerType;
        let layer = e.layer;

        // Do whatever else you need to. (save to db; add to map etc)
        console.log('geometry: ', layer.toGeoJSON().geometry);
        console.log('layer.getLatLngs(): ', layer.getLatLngs());

        var area = L.GeometryUtil.geodesicArea(layer.getLatLngs()[0]);
        console.log('area: ', area);
        //map.addLayer(layer);
        drawnItems.addLayer(layer);

        //issue: Finish drawing process with editable feature
        var newLayer = L.GeoJSON.geometryToLayer(layer.toGeoJSON().geometry)
        newLayer.editing.enable();
        drawnItems.addLayer(newLayer);
    });

    map.on('draw:editstart', function () {
        console.log('edit start');
    });

    map.on('draw:editstop', function () {
        console.log('edit stop');
    });

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

Using jsfiddle or another example site.

aqueiros commented 6 years ago

I think this is duplicated of https://github.com/Leaflet/Leaflet.draw/issues/804. I have been through this myself. Basically, every version from 0.4.12 up is broken. Use 0.4.12 and the problem should go away. The proper fix is already on master branch, but there has been no release with it yet.

malishahi commented 6 years ago

thanks for the note. And which leaflet version should I use? Currently I have "leaflet": "^1.3.1".

aqueiros commented 6 years ago

I am using leaflet 1.3.1 with leaflet-draw 0.4.12 without problems so far. There is a devDependecy for leaflet >=0.7.0 < 1.1 but assuming you don't want to develop leaflet-draw itself, you should be fine (theoretically).

pbonadero1 commented 4 years ago

Hi malishahi,

I'm having this error:

zone-evergreen.js:172 Uncaught ReferenceError: type is not defined at Object.readableArea (leaflet.draw.js:9) at NewClass._getMeasurementString (leaflet.draw.js:8) at NewClass._getTooltipText (leaflet.draw.js:8) at NewClass._updateTooltip (leaflet.draw.js:8) at NewClass._onMouseMove (leaflet.draw.js:8) at NewClass.fire (leaflet-src.js:593) at NewClass._fireDOMEvent (leaflet-src.js:4452) at NewClass._handleDOMEvent (leaflet-src.js:4409) at HTMLDivElement.handler (leaflet-src.js:2679) at ZoneDelegate.invokeTask (zone-evergreen.js:391)

I think that is similar to your issue, it happened when I added the showarea = true option, any idea?

thanks! pedro

leaflet: ^1.6.0 leaflet-draw: ^1.0.4