Continue drawing about leaflet.draw

[jacobtoye]

Edit coming in 0.2

[Candyffm]

Still haven't found an anwser to this topic. Why is it closed?

[jacobtoye]

Could you explain what you mean by continue drawing?

[Starefossen]

Sorry for not taking the time to explain this properly. Imagine a user drawing a polyline, and they accidentally click on the last point, ending the drawing mode. However they wanted to draw a longer line with more way points. The only way to do this now is either to delete the line and start over or dragging the last point and then "create" new intermediate points in-between. Neither is a very good user experience and for the average user it may seam very illogical who would expect that there were some way for continue drawing the polyline.

[jacobtoye]

All good, yeah I thought it would be as you described. I think continuing polylines would be the only use for this functionality right?

In the future we want to add advanced editing tools, such as rotating & resizing. I think this functionality would come under that version.

It could be something like, double click anywhere on the map while in edit mode to create a new vertex and continue drawing. This coupled with the inclusion of tooltips while editing should provide the required functionality.

[Starefossen]

Yes, this feature would only be needed for polylines.

The advanced editing capacities you mentions sounds awesome! Looking forward to that version :D

[Starefossen]

Remind me to buy you a beer or something when 0.2 is release. The work you have been doing on Leaflet.draw is just freaking awesome!

[Oliv05]

Hi, Is this feature available ?
I written a hack to do this thing, but it's not very beatifull, and if the functionnality is written in your app now, I would be happy to know it. Thanks

Hi, i need that feature too ! :/ @Oliv05 can you show me your hack?
thanks !

[Oliv05]

Hi
I'm quite buzzy right now to clean the code (there is some code used in my app here but not relevant for your problem), so the idea is to redefine Polyline addHooks and removeHooks methods. I hope this could help you :

L.Draw.Polyline.prototype.addHooks = function() {
    nttLog('addHooks');
    L.Draw.Feature.prototype.addHooks.call(this);

    if (NTT.carto.lastPolyline) {
        // pour pouvoir reprendre la ligne à la fin (la continuer) quand la
        // ligne est chargée à l'initialisation de l'appli, data existante côté
        // serveur
        this._nttModified=true;
        this._geoid = NTT.carto.editingTraceId;

        this._poly = NTT.carto.lastPolyline;
        var latlongs=this._poly.getLatLngs(); length=latlongs.length;
        this._markerGroup = new L.LayerGroup();
        this._markers = [];
        this._poly.setLatLngs([]);//On met à zéro car addVertex rerempli _poly

        this._currentLatLng=this._map.getCenter();
        for (var i=0;i<length;i++){
            this.addVertex(latlongs[i]);
        }
    }
    else{
        this._nttModified=false;
    }

    NTT.carto.drawPolyline = this;
    if (this._map) {
        if (!this._markers) {
            this._markers = [];
            this._markerGroup = new L.LayerGroup();
        }
        this._map.addLayer(this._markerGroup);

        if (this._poly) {
            this._poly._map = this._map;
        }
        else
            this._poly = new L.Polyline([], this.options.shapeOptions);

        this._tooltip.updateContent(this._getTooltipText());

        // Make a transparent marker that will used to catch click events. These
        // click
        // events will create the vertices. We need to do this so we can ensure
        // that
        // we can create vertices over other map layers (markers, vector
        // layers). We
        // also do not want to trigger any click handlers of objects we are
        // clicking on
        // while drawing.
        if (!this._mouseMarker) {
            this._mouseMarker = L.marker(this._map.getCenter(), {
                icon : L.divIcon({
                    className : 'leaflet-mouse-marker',
                    iconAnchor : [ 20, 20 ],
                    iconSize : [ 40, 40 ]
                }),
                opacity : 0,
                zIndexOffset : this.options.zIndexOffset
            });
        }

        this._mouseMarker.on('mousedown', this._onMouseDown, this).addTo(
                this._map);

        this._map.on('mousemove', this._onMouseMove, this).on('mouseup',
                this._onMouseUp, this).on('zoomend', this._onZoomEnd, this);
    }
};

L.Draw.Polyline.prototype.removeHooks = function() {
    // alert('hehe');

    nttLog('RH:Remove Hooks');

    L.Draw.Feature.prototype.removeHooks.call(this);

    this._clearHideErrorTimeout();

    this._cleanUpShape();

    // remove markers from map
    this._map.removeLayer(this._markerGroup);
    nttLog('RH:removeMarkerGroup');
     delete this._markerGroup;
     delete this._markers;

    this._map.removeLayer(this._poly);
    nttLog('RH:RemoveLayer this._poly');
    var geojson=this._poly.toGeoJSON();
    delete this._poly;


    this._mouseMarker.off('mousedown', this._onMouseDown, this).off('mouseup',
            this._onMouseUp, this);
    this._map.removeLayer(this._mouseMarker);
    nttLog('RH:RemoveLayer this._mouseMarker');
    delete this._mouseMarker;


    // clean up DOM
    this._clearGuides();

    this._map.off('mousemove', this._onMouseMove, this).off('zoomend',
            this._onZoomEnd, this);

    if (this._nttValidated){
        if (this._nttModified){
            geojson.id=this._geoid;
            updateGeo(geojson, null);//On envoie la modification
        }
        else//Envoie d'une nouvelle trace
            sendNewTrace(geojson, null);
        this._nttValidated=false;
    }

};

@Oliv05 Thanks for the quick answer ! //Merci beaucoup!

[humiki]

It's still not possible to continue drawing a polyline in version 0.7.3. Any plans to implement this feature?

@humiki this is a little function i made to continue drawing à polyline.

this.restartManualDraw = function (Poly,opt)
    {
        self.ObjCreate = new L.Draw.Polyline(map, opt); //enable new polyline drawing mode.
        self.ObjCreate.enable();
        self.ObjCreate._mouseDownOrigin = L.point(55, 5); // line needed for anoying tips ( size in kilometers)

        var lastPolyDraw = null;
        var layerD = null;

        if (isDefined(Poly)) //if we pass a polyline in parameters
        {
            if (Poly instanceof GLVPolyline) // my stuff
                lastPolyDraw = Poly.getNative(); //my stuff
            else
                lastPolyDraw = Poly; 
        }
        else 
        {
            lastPolyDraw = self.getLastLine().getNative(); //getLastLine drawn.
            layerD = self.getLayerDessin(); // get the featureGroup 
            layerD.removeLayer(lastPolyDraw); //remove polyline (my stuff) you had to remove from featureGroup
        }

        if (isDefined(lastPolyDraw)) // if we have a result
        {

            var points = lastPolyDraw.getLatLngs(); // get all the latlng from the polyline we have to restart drawing
            self.ObjCreate._currentLatLng = points[0];// needed for tips 
            for (var i = 0; i < points.length; i++)
            {
                self.ObjCreate.addVertex(points[i]); // add latlng by latlng to re build the polyline
            }
        }
    };

it's not perfect but it works :)

[olmoe]

@ValGeolives
Where do I put this code?

[pimeggermont]

What is the status of this issue? I am also searching for this functionality in Leaflet.
Does someone got an in code example from the code above?

[ElijahKotyluk]

@jacobtoye any plans to get this implemented?