1

I am using the Leaflet draw plugin located at

https://github.com/Leaflet/Leaflet.draw

and what I want to do is when a person draws a new polyline to print in the console the index number of that polyline and also add a value such as color:'red' to its properties.

Then when I click that line to edit it later also print to the console the index number and the value stored in the color property.

1
  • I was able to implement what is here, but what happens if you edit two items and then press save or cancel? I would want to save the coords back to a database for each modified line. My process was when the line was initially created and placed into the DB, I grabbed its DB id and added it to the properties so can later retrieve it. Also what is the difference in listening for the edit using e.layer.on('edit', logProps); and having a map.on('draw:edited', function(e) { ... });
    – dakotaBear
    May 4, 2016 at 19:27

1 Answer 1

2

You can access Leaflet's internal layer id using L.stamp and set the color of the polyline by changing its .options.color property. To log the properties to the console each time the layer is edited, you will want to listen for the edit event:

map.on('draw:created', function(e) {
  console.log('Layer created: ' + L.stamp(e.layer));
  e.layer.options.color='red';
  e.layer.on('edit', logProps);
  featureGroup.addLayer(e.layer);
});

function logProps(e) {
  console.log('Layer edited: ' + L.stamp(e.target));
  console.log('Color: ' + e.target.options.previousOptions.color);
}

Styles are changed during editing, so to access the line's color, you will need to use .options.previousOptions.color, which contains the color as originally assigned.

Example fiddle:

http://jsfiddle.net/nathansnider/nh8hg7zq/

4
  • I was able to implement what is here, but what happens if you edit two items and then press save or cancel? I would want to save the coords back to a database for each modified line. My process was when the line was initially created and placed into the DB, I grabbed its DB id and added it to the properties so can later retrieve it. Also what is the difference in listening for the edit using e.layer.on('edit', logProps); and having a map.on('draw:edited', function(e) { ... });
    – dakotaBear
    May 4, 2016 at 19:28
  • In this example, saving or pressing cancel has no effect on whether the ids and colors are logged to the console. The edit event is tied to an individual layer (polyline, marker, etc.) and fires each time that layer is edited. For a polyline, this would include adding and moving vertices. The draw:edited event only fires when the edit operation is completed (saved), and it includes the entire layerGroup (which may consist of multiple layers). May 4, 2016 at 21:51
  • I have also discovered that this does not work with the newer leaflet draw plugin as posted on GitHub - or at least the previousOptions part does not work. It might be that this just works with v0.2.2 as hosted by mapBox.
    – dakotaBear
    May 5, 2016 at 2:24
  • I confirmed that just upgrading the leaflet draw js from 0.2.2 to the file at the following breaks the access to the color property. api.mapbox.com/mapbox.js/plugins/leaflet-draw/v0.2.3/…
    – dakotaBear
    May 10, 2016 at 20:28

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.