leaflet/leaflet.editable

Make geometries editable in Leaflet.

Leaflet was created 11 years ago by Volodymyr Agafonkin, a Ukrainian citizen living in Kyiv.

Russian bombs are now falling over Volodymyr's hometown. His family, his friends, his neighbours, thousands and thousands of absolutely wonderful people, are either seeking refuge or fighting for their lives.

Russian soldiers have already killed tens of thousands of civilians, including women and children, and are committing mass war crimes like gang rapes, executions, looting, and targeted bombings of civilian shelters and places of cultural significance. The death toll keeps rising, and Ukraine needs your help.

As Volodymyr expressed a few days before the invasion:

If you want to help, educate yourself and others on the Russian threat, follow reputable journalists, demand severe Russian sanctions and Ukrainian support from your leaders, protest the war, reach out to Ukrainian friends, donate to Ukrainian charities. Just don't be silent.

Ukrainians are recommending the Come Back Alive charity. For other options, see StandWithUkraine.

If an appeal to humanity doesn't work for you, I'll appeal to your egoism: the future of Ukrainian citizens is the future of Leaflet.

It is chilling to see Leaflet being used for documenting Russia's war crimes, factual reporting of the war and for coordination of humanitarian efforts across Europe. We commend these uses of Leaflet.

If you support the actions of the Russian government (even after reading all this), do everyone else a favour and carry some seeds in your pocket.

Yours truly,
Leaflet maintainers.

---

Leaflet is the leading open-source JavaScript library for mobile-friendly interactive maps. Weighing just about 42 KB of gzipped JS plus 4 KB of gzipped CSS code, it has all the mapping features most developers ever need.

Leaflet is designed with simplicity, performance and usability in mind. It works efficiently across all major desktop and mobile platforms out of the box, taking advantage of modern browser features while being accessible on older ones too. It can be extended with a huge amount of plugins, has a beautiful, easy to use and well-documented API and a simple, readable source code that is a joy to contribute to.

For more info, docs and tutorials, check out the official website.
For Leaflet downloads (including the built main version), check out the download page.

We're happy to meet new contributors. If you want to get involved with Leaflet development, check out the contribution guide. Let's make the best mapping library that will ever exist, and push the limits of what's possible with online maps!

leaflet.editable's Issues

Get and delete polylines from Map

Hi

Is there a way for me to get a polyline that was created using map.editTools.startPolyLine() and delete it?

The goal is to have a custom button "New Line" that deletes a line if present and start a new line.

Therefore I would only like 1 drawable line at a time.

I put this.map.editTools; in my init function and have this.map.editTools.startPolyLine() in my button click handler.

Thanks

Using leaflet 0.7.3 + leaflet.editable leaflet0.7 branch.

Leaflet.Editable - dragend event doesn't work when ghost vertices are moved

Hello,

Here is what I am trying to do:

I am using leaflet.Editable plugin to draw a editable layer. So, I have a layer and then layer.enableEdit() puts it into edit mode with vertices (some are dark and some are lighter in color).

Then I am trying to see if the layer is of instance L.Marker and then attaching an event (dragend) to it. So, the next time, I try to move a vertex on the editable layer, i need the dragend to trigger and I am trying to set a flag to use it somewhere else. Issue is it works fine when I drag bright vertices and doesn't work when I try to move a light colored (ghost) vertices.

Any help is appreciated.

Some code:
if (_Layer instanceof L.Marker) {
_Layer.on('dragend', (e: any) => {
this._isDirty = true;
});
}

Thanks!

Create markers for only visible nodes

In big paths / polygons (10k+ nodes) creating and managing markers for every node is very slow. But usually only a hundred or so nodes are on a screen at any time. So only visible markers should be created, and removed when they go off-screen.

Invalid geometries are not removed with stopDrawing()

At the moment, if the user starts to draw a geometry, and stops while it's not complete, by triggering stopDrawing(), the incomplete feature is saved to the feature layer, no matter if it is valid or invalid. (By invalid I mean having MIN_VERTEX vertices.)

I believe endDrawing() should be removing it, but somehow with stopDrawing(), endDrawing() isn't called.

1.0 Branch always returns multipolygons

Excellent lib, but getting a few issues on the 1.0 branch. Primarily:

When calling .toGeoJSON on a single polygon, it returns a feature collection with multipolygons.
This doesn't happen with the 0.7 branch (returns a feature collection with polygons).

Is this perhaps an issue for the geojson.src in Leaflet.js master, rather than Leaflet.Editable?

On a totally unrelated note, how does one return a geometry collection from the geometry created by L.Editable (instead of a featurecollection - not supported by geodjango's orm)?

Best,
Joao

Bug in Create hole in a polygon by ctrl-clicking on it

Create hole in a polygon by ctrl-clicking on it
When I create a second hole point in the polygon I get error

Failed to load resource: net::ERR_FILE_NOT_FOUND --> Leaflet.Editable.js:795 
Uncaught TypeError: Cannot read property 'unshift' of undefined --> Leaflet.Editable.js:795 
L.Editable.PathEditor.L.Editable.BaseEditor.extend.addLatLng --> Leaflet.Editable.js:802 
L.Editable.PathEditor.L.Editable.BaseEditor.extend.newPointForward --> Leaflet.Editable.js:974 
L.Editable.PolygonEditor.L.Editable.PathEditor.extend.newHolecreate-hole-on-click.html:39 (anonymous function) --> leaflet.js:5 
o.Evented.o.Class.extend.fire --> leaflet.js:5 
o.Map.o.Evented.extend._fireDOMEvent --> leaflet.js:5 
o.Map.o.Evented.extend._handleDOMEven --> tleaflet.js:8
 h

Finishing with meta / ctrl leaves editor in non-functional state in continue-line.html

Steps to reproduce:

1. Open continue-line.html
2. Extend any line by meta / ctrl clicking on an end vertex.
3. Finish the line, by meta / crtrl clicking on the last vertex.

Editor goes into a weird state:

• drawing mode active
• clicking anywhere throws an

Uncaught TypeError: Cannot read property 'unshift' of undefined

from this line:

addLatLng: function (latlng) {
            if (this._drawing === L.Editable.FORWARD) this._drawnLatLngs.push(latlng);
            else this._drawnLatLngs.unshift(latlng);     <-----
            this.feature._bounds.extend(latlng);
            this.addVertexMarker(latlng, this._drawnLatLngs);
            this.refresh();
        },

Event log:

editable:vertex:mousedown
editable:vertex:click
editable:vertex:metakeyclick
editable:drawing:cancel
editable:drawing:end
editable:drawing:start
editable:vertex:clicked
editable:drawing:move
editable:drawing:mousedown
editable:drawing:click
Leaflet.Editable.js:917 Uncaught TypeError: Cannot read property 'unshift' of undefinedL.Editable.PathEditor.L.Editable.BaseEditor.extend.addLatLng @ Leaflet.Editable.js:917L.Editable.PathEditor.L.Editable.BaseEditor.extend.newPointBackward @ Leaflet.Editable.js:932L.Editable.PathEditor.L.Editable.BaseEditor.extend.processDrawingClick @ Leaflet.Editable.js:961L.Editable.BaseEditor.L.Class.extend.onDrawingClick @ Leaflet.Editable.js:690L.Editable.L.Evented.extend.onMouseup @ Leaflet.Editable.js:171o.Evented.o.Class.extend.fire @ leaflet.js:5o.Map.o.Evented.extend._fireDOMEvent @ leaflet.js:5o.Map.o.Evented.extend._handleDOMEvent @ leaflet.js:5h @ leaflet.js:7
editable:drawing:move

Middlemarker not updated to draggable vertex marker when clicked

(1) When a middle marker is clicked (so no mouse move), the marker is updated to the vertex marker icon, but the vertex marker is not draggable anymore.
(2) Any subsequent activated middle markers (regardless of moving) are also broken afterwards

To replicate (1):

1. Open the Basic Controls example
2. Click (without moving) one (50% opacity) middle marker
3. Try to move the created vertex marker.

To replicate (2):
Steps 1-3 above
4. move a other 'grey' vertex marker (move the marker, so no click)
5. Let go of the marker (marker is now white and additional middle markers are added
5. try to move the marker again

Reproducible in Safari and Chrome

Possibly the event chain is not correct for clicks, because in L.draggable a move event is required to fire the dragstart, drag and dragend events.

Hiding/showing editable Layer from Layercontrols making features uneditable

First of all: great lib, thanks for your work.

I have added the editable layer to the layer controls:

layerControls.addOverlay(layerAvoid, 'Avoidable Regions');

Whenever I toggle this Overlay, meaning remove it and then add it again, I am unable to edit the polygons I drew beforehand. Am I missing anything here or is this actually a bug?

Cheers and thanks.

Some spaces replaced with "Â" character

On lines 30, 54, 58, 159, 345, 500, 895 and 896 the space just after the pipe operator encodes as a "Â" character causing unexpected token errors in chrome.

L.Draw.Polygon events added by Editable Question

If I have an existing Polygon being draw by leaflet.draw, can I use editable to detect when any points of the polygon have been moved? Do I need to pass anything to the EditTools object to register this polygon with it so that these events will fire?

Ctrl + click is not detected under Chrome and Firefox in OS X

In this example: http://leaflet.github.io/Leaflet.Editable/example/continue-line.html the meta key detection works, but the control does not (editable:vertex:ctrlclick).

Not working: latest Chrome and Firefox
Working: Safari 9.0.1
OS: OS X 10.9.5

I believe it might be something with Ctrl + Click firing a right-click event in OS X. Still, in Safari it's caught and the right click menu is not displayed when clicking on a vertex in that example.

Controling the size of created\edited polygon

Hi,
I've started to use L.Editable plugin as an alternative for L.Draw. It's quite useful for as it seems more extensible.
However, I was wondering if it is a way to control the size of created or edited polygon\polyline. I've tried to hook on "editable:middlemarker:mousedown" event. I can check when the number of vertex is greater than assumed, but stuck for now how to react on that. Is there an easy way of redo last added vertex or quick stop propagating event? Or my way to solve the problem is incorrect?
Thanks anyway for plugin!

MultiLineString

What would it take to incorporate MultiLineString?

I would like to be able to import GeoJSON, find LineString, create an extension (off-shoot line) from any LineString points, then export back to GeoJSON.

Alternatively, draw a new line and connect it to another line, therefore merging the two into one MutliLineString.

Is this possible?

Handler positions should be calculated from pixel coordinates

I guess currently those are in "geographically correct" positions, but on large zoom levels, with long lines, those look like broken, and during editing you'll anyway get the "wrong" positions.

https://www.dropbox.com/s/e8ceqcqkyrts7a4/Screenshot%202014-11-09%2009.30.40.png?dl=0

Double clicking the second vertex when creating a polygon completes the polygon (but it is invalid)

If you double click the second vertex when creating a polygon, it commits the polygon even though it is invalid.

A seemingly simple fix is to change:

onVertexMarkerClick: function (e) {
...
        } else if (index >= 1 && index === e.vertex.getLastIndex() && this.drawing === L.Editable.FORWARD) {
            this.commitDrawing();

to

onVertexMarkerClick: function (e) {
        } else if (index >= 1 && index === e.vertex.getLastIndex() && this.drawing === L.Editable.FORWARD && this._drawnLatLngs.length >= this.MIN_VERTEX) {
            this.commitDrawing();
111

Support drawing/editing of L.Circle

Making a L.geoJson editable

I'm loading in some GeoJSON through ajax in my app. This GeoJSON can either hold points, lines, or polygons.

How can I make this GeoJSON editable?

Problems with editTools

Hi, i have a problem when i call a function to draw, it shows me the next error:
Cannot read property 'startPolyline' of undefined

What could be the problem if i have the Leaflet.Editable installed.

Thanks :)

onStopDraggingMarker

Is there an event for this? I have successfully added a marker to the map with the on('editable:drawing:commit' but I cannot work out how to signify the end of a marker drag move. Perhaps a new event is required. I will have a look at the source code at some point and see if I can figure out if any changes would be required.

Stephen

Enable/Disable a polyline from being edited

Hi

Follow up question. Is it possible to enable or disable a polyline from being edited after it has been added to a map.

I would basically like to have button that toggles edit mode of a line that was added using the editTools.

Thanks again for your assistance.

Support drawing/editing of L.Rectangle

Available on Bower?

I'm looking forward to switch to this from Leaflet.Draw on the new project I'm currently working on.

Would it be possible to get this on Bower? As we're using Bower for libraries and plugins.

Thanks!

How to stop edit and remove marker/line/polygon?

What's the best way to cancel out of current edit and remove any marker/line/polygon created? I've tried map.editTools.stopDrawing(); but that doesn't remove markers it just stops editing.

edit:

I guess my question is how to stop the workflow and clear uncommitted edits...

When event are refactored in Leaflet, use L.DomEvent.stop instead of e.cancel

L.DomEvent.stop should add a property to a Leaflet event that allow to define if this event has been stopped.

Ctrl+click does not work (Mac)

Tried these demos, nothing happened on ctrl+click (using Mac + Chrome, Firefox):

Continue line by ctrl-clicking on first/last point
Create hole in a polygon by ctrl-clicking on it

UX: startMarker without adding marker in center / under cursor

Adding a marker provides a very different user experience, compared to adding a polyline or a polygon:

• Polyline and polygon requires the user to click to change the map (like in Photoshop)
• marker puts a marker at the center of the map, and starts moving it as soon as the user moves the cursor

I'm looking for a way to make marker consistent with polyline/polygon, that is not changing the map until the user clicks.

Single Polyline with JSON

Apologies if this question should be on the leaflet's site.

I have a layerGroup which contains a editable polyline.

I am able save it's GeoJSON to a variable by doing:
currentLine = this.myLayers.myLine.toGeoJSON()

What is the best way to load data into this editable line?
this.myLayers.myLine = L.polyline((somehow get the x,y array of what I want to load)?

Or do I need to do something with the GeoJSON layer?

Thanks

fireMouseEvent is not a function

Hey,

when using leaflet.editable with leaflet 1.0:

10    843918   error    Uncaught TypeError: this._fireMouseEvent is not a functi
on, http://192.168.178.52:8100/lib/Leaflet.Editable-1.0/src/Leaflet.Editable.js,
 Line: 401

This error is thrown when a vertex is touched on mobile touch devices.

Clickhandler switches after having focus out of map

Hi,

I am experiencing the issue that when I am clicking out of the map zone, the click handler seem to switch.
At first a Vertex of a polygon gets deleted by clicking with left mousedown / double tap (on android chromium web view).
When clicking out of the map and trying to delete a vertex again it is right click / shftclick in browser chrome and nothing happens on android chromium.

Tried both the stable and dev 1.0 version (gh-pages)

map = L.map('map', {editable: true, doubleClickZoom: false, minZoom: 3, maxZoom: 19, zoomControl: false}).setView(startPoint, 16);

                            poly = L.polygon([
                                [
                                    [lat + polySize, lng],
                                    [lat, lng - polySize],
                                    [lat - polySize, lng],
                                    [lat, lng + polySize]
                                ]
                            ]);

                            map.addLayer(poly);
                            poly.enableEdit();
                            //Dbl Tap wether to edit or not
                            poly.on('dblclick', L.DomEvent.stop).on('dblclick', poly.toggleEdit);

Using Ionic, Angular - NO jQuery / jQuery Mobile implemented
Any idea appreciated =)

Cancel editing is complicated

Hello. I cant find easy way to cancel editing, so must write this:

map.on('editable:drawing:cancel', function (e) {
    map.removeLayer(e.layer);
});

var onKeyDown = function (e) {
    if (e.keyCode == 27) {  // esc button
        if (!this.editTools._drawingEditor) {return;};
        map.editTools._drawingEditor.disable();
    }
};
L.DomEvent.addListener(document, 'keydown', onKeyDown, map);

Is there other way? Maybe need to put something in plugin?

Create Editable Markers from GeoJSON

Hi All

I have a featureCollection of markers which I want to add to the map and have them editable.

I am doing the following.

  function onEachFeature(feature, layer){
   // TODO: MAKE THEM SNAPABLE AND EDITABLE AND SET CUSTOM ICONS
    self.layers.myMarkers.addLayer(layer);
  }

L.geoJson(markersFeatures,{
onEachFeature: onEachFeature
}).addTo(this.map)

Is this the correct way of doing this? I can get the basic markers to show up in the layer/map fine.

Thanks

Support for MultiPolygon

Hey great library, but correct me if I'm wrong, it seems to miss support for multipolygon?

Request: Move map when vertex hits border

Hey,

first: thanks for the great work.

Could you make the map move when a vertex hits the border of the visible map?

How to enable Editable using Leaflet Angular Directive

I'm using the angular-leaflet-directive and not sure how to enable Editable since the creation of the map object is using an angular directive. Is there another way to enable after map has been created?

Thanks for any assistance!

svg object gets invisible when its root is moved out of the map

Hey,

just found a bug, where a path object gets invisible when you move the map so that its root gets out of the visible area of the map.

I've made a video so things get clear pretty fast.

https://www.youtube.com/watch?v=U7SOvKwLHW8&feature=youtu.be

Thanks.

Follow roads (routing)

Hello, is it possible to add an option to follow roads while drawing polylines. There are some api from Mapquest, Google etc. By using one of those, can it be possible?

(http://developer.mapquest.com/web/products/dev-services/directions-ws)

No public interface to commit a drawing

I can save my current feature by calling:
map.editTools._drawingEditor.commitDrawing()
but it seems that there should be a public interface for this like:
map.editTools.commitDrawing()
or
map.editTools.stopDrawing(true)

Make possible to set skipMiddleMarkers at editor level

cf #13

map var undefined

Some minor demo glitches

Some things I noticed when playing with the demo's:
Ctrl-clicking to make holes in polygons or to extend a polyline does not work om my Mac. It does work on my Windows machine.
When creating a new marker, a spurious marker temporarily appears on a random spot on the map. This marker then disappears when I move the cursor to place the new marker.

Thanks for this great package!
It arrives just in time for me now that I need to make a mobile app for use on tablets. I was using (the also great) leaflet-draw, but it has no touch support.

Snapping example: Drag + zoom = middle marker not updated (master)

https://youtu.be/CSDL61XVyl8

cf #32

Leaflet CDN was rebuilt - Demo UI no longer works

Hey, not so much an issue (well, I guess it is) but more of a friendly note that leaflet had some issues with their CDN and it looks like it's been rebuilt with different URIs, so the leaflet.Editable demo UI page is no longer working and renders a blank page.

Simple line support

Hi,
I'm trying to use L.Editable (Leaflet 1.0 branch) to create lines (i.e. a geojson polyline with exactly 2 vertices - I'm surprised that geojson does not support lines...). I need this for network analysis, where lines have to be straight and contain only two vertices, but I'm sure others might have other uses for this as well.

I have adapted the tooltips example to achieve this by calling map.editTools.stopDrawing() when e.layer.editor._drawnLatLngs.length gives me the desired max number of vertices. But I've encountered two problems:

1. If I call stopDrawing when the _drawnLatLngs.length == 1 (i.e. 2 vertices), the line does not get created (the last vertex seems to get removed). If I call it when the length == 2, the line gets created but the user is forced to click twice. Once for the last vertex, and then again to commit. After drawing the last vertex and before committing the line, the usual temporary dashed line is visible, which makes it look like you are continuing the line and is misleading. I would like to reduce the line creation to just 2 clicks, or remove the dashed line after the second click.
2. A more serious problem is what happens after a line is created. The user should have the option to edit the line by moving its vertices. This works well. However, a midpoint vertex is always displayed. If the user drags it, they will add a new vertex, turning it into a polyline. Is there a way to disable this?

Thanks for the library! Any help is appreciated.

Joao

openPopup is not working when editable:drawing:end is triggered via keydown -> stopDrawing()

openPopup() is not working, as layer._popup._map is null when editable:drawing:end is triggered via keydown -> stopDrawing()

Given the following code:
http://jsbin.com/ratoli/4/edit?html,js,output

Click start to start drawing a polyline.

Stop in the following ways:

• click the last vertex -> popup opens
• click stop -> popup opens
• press ESC -> popup does not open

Upon looking at console.log(e.layer._popup) you can see that _map is null in the 3rd case.

Also, you can see, console.log(e.layer._popup._map) always returns undefined, thus _map is only being processed while this is happening. The added latency of console.logging _popup shows it correctly, while directly printing _map prints undefined in all case.

A possible fix is to put the whole editable:drawing:end in a setTimeout(..., 0) block, commented out in jsbin.

Cannot read property 'include' of undefined

I'm getting this error right after including the library:

any ideas?

Target specific polygon or polyline in a multi

In Leaflet master branch, multis are now managed directly by Polygon and Polyline classes. This refactor comes with a much simple and clear structure of the Path family, but also some limitations when dealing with editing the mulitpolygons or multipolylines.
There is no more mapping between every single shape of a polygon and a Javascript object. So for example the events of every shape are managed by the same javascript object, without a native way to know which shape has really triggered it.
There are some use cases where this missing information give us a bit of hard time:

• when we need to create a new hole in a polygon by clicking on it
• when we want to delete a polygon or a polyline by clicking on it (but not deleting the multipolygon or multipolyline itself)
• when we want to drag a whole polygon or polyline

I've come up with a solution, which basically consists in taking the latlng of the event, then looping over all the shapes of the multi, and trying to determine which of them includes the latlng.
This works, and it's unittested, but, firstly, it's a bit fragile, and, secondly, it duplicates a bit of code from Leaflet.

Now that we are very close the release of Leaflet 1.0, I would like to be sure I'm not missing a stronger scenario, and maybe take the opportunity to do a bit of refactor the Leaflet side to avoid those bits of code duplicated.

@mourner, @tmcw, @danzel, @jfirebaugh, I would love your feedback on this. :)

Thanks in advance! :)

Can do undo during a draw?

How can I do undo during draw a polygon, without redo all the polygon?

Draw polygon programmatically.

Is possible to draw a new polygon programmatically?

Disable interactivity for non-edited layers

When using Editable, registerForDrawing does not disable interactivity with the existing / non-edited layers. This results in:

• crosshair cursor changing to pointer when hovering over an existing layer
• events propagating to existing layers, like opening popups, panning, etc. during editing

This is the default behaviour in Leaflet Draw, and would be really nice for usability in Editor.

I only have the following ideas for implementing it:

• registerForDrawing should stop events propagating to non-edited layers, and set the icon with !important
• loop through all layers and call removeInteractiveTarget() with the appropriate targets on every single layer, and later adding them back individually. This would be probably super expensive when having lots of layers.