v_leaflet_draw cancel edit results in JavaScript "Uncaught TypeDef"

Was wondering if anyone else encountered this problem? Using v_leaflet_draw, click edit on the draw control, then click cancel and the result is a Javascript error. Other functionality seems to be fine. I would guess it is a Leaflet issue, but perhaps I am sending coordinates in an unexpected way? Thanks for any pointers.

VM721:7 Uncaught TypeError: Cannot read property '0' of undefinedo.Polyline.o.Path.extend._projectLatlngs @ VM721:7o.Polyline.o.Path.extend._projectLatlngs @ VM721:7o.Polyline.o.Path.extend._projectLatlngs @ VM721:7o.Polyline.o.Path.extend._project @ VM721:7o.SVG.o.Renderer.extend._updatePath @ VM721:7o.Path.o.Layer.extend.redraw @ VM721:7o.Polyline.o.Path.extend.setLatLngs @ VM721:7L.EditToolbar.Edit.L.Handler.extend._revertLayer @ VM722:10(anonymous function) @ VM722:10o.LayerGroup.o.Layer.extend.eachLayer @ VM721:7L.EditToolbar.Edit.L.Handler.extend.revertLayers @ VM722:10L.EditToolbar.L.Toolbar.extend.disable @ VM722:10h @ VM721:7 A piece of the Leaflet JavaScript where it seems “t” is null:

[i]
[i]
[i]

        _projectLatlngs: function(t, e) {
            var i, n, s = t[0]
 instanceof o.LatLng, r = t.length;
            if (s) {
                for (n = ,i = 0; r > i; i++)
                    n[i]
 = this._map.latLngToLayerPoint(t[i]
);
                e.push(n)
            } else
                for (i = 0; r > i; i++)
                    this._projectLatlngs(t[i]
, e)
        }
[/i]
[/i]
[/i]

Here is an example of creating a map which generates the above error when clicking edit, then cancel:

[i]
[i]

public class MyMap extends CssLayout {

    private static final Set<String> DRAW_POLYGON_BUTTON = new HashSet<>(Arrays.asList("polygon"));

    private LFeatureGroup fenceGroup;
    private LDraw drawController;
    private LMap map;



    public MyMap() {
        init();
    }


    private void init() {

        addStyleName("mapview");
        setSizeFull();

        String tileUrl = "http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png";

        LTileLayer mapBoxTiles = new LTileLayer(tileUrl);
        mapBoxTiles.setDetectRetina(true);

        map = new LMap();
        map.addLayer(mapBoxTiles);
        map.setImmediate(true);
        map.setSizeFull();

        Polygon enclosure = createEnclosure();
        LPolygon fence = new LPolygon(enclosure);

        fenceGroup = new LFeatureGroup();
        fenceGroup.addComponent(fence);
        map.setCenter(enclosure.getCentroid());
        map.zoomToContent();

        map.addLayer(fenceGroup);

        drawController = createDrawController(true);
        map.addControl(drawController);

        addComponent(map);

        setSizeFull();
    }



    private Polygon createEnclosure() {
        Coordinate coordinates = new Coordinate[4]
;
        coordinates[0]
 = new Coordinate(1, 2);
        coordinates[1]
 = new Coordinate(2, 3);
        coordinates[2]
 = new Coordinate(3, 4);
        coordinates[3]
 = new Coordinate(1, 2);
        GeometryFactory geometryFactory = new GeometryFactory();
        return geometryFactory.createPolygon(coordinates);
    }


    private LDraw createDrawController(boolean editable) {
        LDraw newDrawController = new LDraw();
        newDrawController.setDrawVisibleButtons(DRAW_POLYGON_BUTTON);
        newDrawController.setEditableFeatureGroup(fenceGroup);
        return newDrawController;
    }


}

[/i]
[/i]

Versions from pom.xml:
[/i]
[/i]
[/i]




  • vaadin 7.6.4



    [list]



  • v-leaflet 1.0.0-b6



    [list]



  • v-leaflet-draw 0.6.2




    [/list]

    [/list]

Entering edit mode and clicking cancel will work for LPolyLine and LCircle:

        // LPolyline fence = new LPolyline(new Point(1, 1), new Point(1, 10));
        // LCircle fence = new LCircle(new Point(1, 1), 20);

But will fail for LPolygon and LRectangle (an LPolygon subclass) when the JavaScript tries to do the revert:

       // LRectangle fence = new LRectangle(new Point(1, 1), new Point(20, 10));
        LPolygon fence = new LPolygon(new Point(1, 1), new Point(1, 10), new Point(20, 10), new Point(20, 1), new Point(1, 1));

[i]
[i]
[i]

[/i]
[/i]
[/i]

Part of the problem might be in v-leaflet’s
org.vaadin.addon.leaflet.util.JTSUtil
when creating a
LinearRing
. There is a check "
closed
" to see if the array of points forming the polygon ends with the first point in order to close the polygon, but the
equals
method was not implemented for
org.vaadin.addon.leaflet.shared.Point
, so the check always failed and an extra co-ordinate was being tacked on:

[code]
private static LinearRing toLinearRing(Point points) {
boolean closed = points[0]
.equals(points[points.length - 1]
);

    Coordinate[] coordinates = new Coordinate[points.length
            + (closed ? 0 : 1)];
    for (int i = 0; i < points.length; i++) {
        Point p = points[i]

;
coordinates[i]
= new Coordinate(p.getLon(), p.getLat());
}
if (!closed) {
coordinates[coordinates.length - 1]
= coordinates[0]
;
}
return getGeometryFactory().createLinearRing(coordinates);
}
[/code]Adding the
equals
method to
Point
stopped adding the extra co-ordinate, but didn’t resolve the issue. Still something with the
LinearRing
I would think, but I’m not sure how to setup the environment to follow the integration with JavaScript.

Hi,

Sorry for not answering sooner, I have somehow gathered a month’s queue for my forum TODO :slight_smile:

I fixed the equals thingie, but not sure if it helps. I’ll try to update to Leaflet 1.0 rc + latest draw JSs and then look if this still happens.

BTW. Try using Leaflet.Editable. It is awesome.

Hi, can you try against the latest v-leaflet:1.0.0-rc1 version? I didn’t manage to reproduce the issue with that. If it still happens, I’ll need to get some more details from you how to reproduce the issue.

cheers,
matti