As soon as there is an edit button in the toolbar (soon) - after successful drawing, the edit mode should be enabled via toolbar, not automatically.

var options = {
    drawPolygon: true,  // adds button to draw a polygon
    editPolygon: true,  // adds button to toggle global edit mode
    deleteLayer: true   // adds a button to delete layers
};

this is bad naming for these buttons. Change it.

There are issues with multiple maps on a page as L.PM.Draw() is used like I'm a noob coder or something.
Fix it, future self 👊

Add L.PM.Draw as a new object to a map. Then everything is 👌

AFAIK it's currently not possible to pass custom styles for polygons, polylines & markers.
So as soon as I create an element, it gets the leaflet default style. Is it possible to define some custom styles, so that they get applied on creation?

Thanks!

when middleMarker become normal marker , it can't drag in Leaflet 1.0.0-rc.2.

After drawing out a polygon, if you want to remove it... you can remove all points except the last one.

Also, it would be great to see some functionality for deleting an entire polygon with one action as opposed to a point by point removal approach.

Nevertheless, nice work so far!

When new layer contents is added after the pm plugin was initialized, it does not handle pm:edit events for newly added elements.

Like this:

var geoJsonLayer = L.geoJson().addTo(map);
geoJsonLayer.addData(json);
geoJsonLayer.addEventListener('click', function() {
    geoJsonLayer.pm.toggleEdit();
});

Clicking on the geoJsonLayer does not enter the edit mode

For now this should include:

• Drag
• Edit
• Remove

In addition: pm:drawend should not enable edit mode by default.

Exactly drawn polygons (snapping ftw) share vertexes, obviously. In edit-mode, the markers to edit those vertexes are stacked on top of each other. Now the user can't reliably drag the marker/vertex for a specific polygon. It's kinda random.
Find a solution for it. Any solution. The last one caused the terrible bug #79

use it.

currently, when removing a layer from the map while in edit mode, it's markers stay on the map.
Find a hook into layer.remove and call layer.pm.disable().

well, you gotta pass a parent object to the leaflet events and make the stuff you wanna pass a child node. Like a layer or shape-type.

Just fix it.

Leaflet/Leaflet.draw#455 (comment)

As soon as I click on a polygon the pm:edit event get triggered. Even if there is no change related to the coordinates.

Is it the desired behavior?

because...

Hello, first, I want to show this is a great plugin. I am able to show measurement on line and polyon by integrating this with leaflet plugin (Leaflet Measure Path by ProminentEdge) in the option.

map.pm.setPathOptions({
showMeasurements: true,
});

But, I do not know how to update those measurements when I edit a line or polygon. I am new to leaflet. Could you please help me?

Hi there.

There are several pm-custom events including created, edited and dragXYZ.
AFAIK there are no events which get triggered when a polygon gets deleted. On the one hand it would be nice to ask for confirmation (like a pm:deletestart event) and on the other hand I would like to send a request after the polygon was deleted (like a pm:deleteend event).

thanks :)

hi,
is there an option to change toolbar position? e.g. position: 'topright'. thanks!

layer.pm = class;
class._layer = layer

🤔 this is bad. Get rid of it you fool.

So devs don't have to use the button but can trigger drawing manually

Enable drawing mode, enable edit mode of a polygon, drag a marker => errors.

This is because the yet-to-be-drawn polygon is already a layer on the map but has no (as in, less than 2) coordinates.

Draw at least two coordinates and the errors disappear.

This means the snap-calculation needs to handle (=ignore) layers with fewer than 2 coordinate points.

wtf? Fix it!

When calling the map.pm.addControls multiple times with the same truthy values, the related controls get multiplied:

Fix: disable drag during activation of removal tool
Or: prevent click on dragend

Markers need to be snappable to polygons and to other markers.

The features grow - there will soon be too much cases to test manually so: automate it with unit tests, possibly e2e tests.

It makes it big but it does nothing.

When the following CSS from the Demo isn't included the markers obviously won't show up

.marker-icon, .marker-icon:focus {
    background-color: #ffffff;
    border: 1px solid #3388FF;
    border-radius: 50%;
    margin: -7px 0 0 -7px !important;
    width: 14px !important;
    height: 14px !important;
    outline: 0;
}

So.. create a /dist folder and put .css and .js in there

the first click after the create-polygon button is pressed doesn't do anything. Maybe the map has to get focused?

If GeoJSON layer contains points then pm logs console error Uncaught TypeError: Cannot read property 'enabled' of undefined when it sees the L.Marker type of layer.

To reproduce use this: http://plnkr.co/edit/ZjLXPgIWpcAq2k9xIKoJ?p=preview

Expected behavior: map.fitBounds(geoJsonLayer.getBounds()) gets called
Actual behavior: map.fitBounds(geoJsonLayer.getBounds()) is not called because call to geoJsonLayer.addData(json) throws an exception

The current gh-pages branch is a small copy/mix of the demo.js in the master branch and the readme file.
Create a new website that shows off the features of leaflet.pm

do it

Hi,

I'm currently trying to configure a function to save the draw data to a geojson file, however the markers are not integrate to the function with "map.on('pm:create', function(e) {//...});".
I noticed that it's possible with other objects like line and polygon.

Do you have a solution for this?
Thanks

Would like to make use of event handlers like pm:dragstart and pm:dragend for polygons markers. So it would be possible to handle some tasks as soon as a polygon marker is dragged.

if(this.toggled()) {
  L.PM.enableDraw({
      map: map
  });
} else {
  L.PM.disableDraw(map);
}

should be replaced with a toggleDraw function.

L.PM.Draw.Poly should return if drawing mode is active or not.
Double Check that L.PM.Draw isn't getting messed up with multiple instances/maps.

Other plugins would work better with this one together if it would use setLatLngs to update the geometry layers.
Specifically here: L.PM.Edit.Line.js:277

Do it

pm:edit seems to fire only when coords change, not when new coords are added.

Not sure how bower can handle images (icons). Got to do something about it or make it a requirement that devs provide icon paths.

Uncaught TypeError: Cannot read property 'geometry' of undefined

Make an optional style that can be passed to the draw class so that a polygon that is currently drawn doesn't have to be just red lines:

Hello @codeofsumit ,
I am the member of cdnjs project.
I want to add this library, but the license mentioned in README.md https://github.com/codeofsumit/leaflet.pm#license is different from the package.json and also on npm. The first is MIT and second is ISC.
I want to confirm with you which one is the correct license.

cdnjs/cdnjs#9799
cdnjs/cdnjs#9880

You should check Leaflet.Editable, as a Leaflet.Draw alternative Leaflet 1.0 compliant.

Like with a press of shift or alt during drag, snapping should be disabled.

Mainly an "Edit" event.

that's because firefox needs content to be inside an :after pseude element.
Add a firefox fix to the css file.