Leaflet.StyleEditor

The Leaflet StyleEditor allows to edit the style of any feature drawn within Leaflet. After activating the tool, the features can be edited by simply clicking them within the map. Current Leaflet version is: 0.7.2.

Check out the Demo!

And another demo with Leaflet.draw.

Usage

//Initialize the StyleEditor
var styleEditor = L.control.styleEditor({
    position: "topleft"
});
map.addControl(styleEditor);

It is also possible to specify different color ramps or to specify the set of markers:

var styleEditor = L.control.styleEditor({
    position: "topleft",
    colorRamp: ['#1abc9c', '#2ecc71', '#3498db'],
    markers: ['circle-stroked', 'circle', 'square-stroked', 'square']
});
map.addControl(styleEditor);

There is also an event to catch style changes:

map.on('styleeditor:changed', function(element){
    console.log(element);
});

When using with Leaflet.draw you can define if the editor should open when new features are added:

var styleEditor = L.control.styleEditor({
    openOnLeafletDraw: true
});
map.addControl(styleEditor);

Bower

Leaflet.StyleEditor is also a registered package in Bower (based on nodejs). Integrate the source in your project with:

npm install -g bower
bower install Leaflet.StyleEditor

TODO

• Better representation of marker icons (img instead of plain text)
• "Restore default" button
• Visual highlight of the selected feature

Author

Dennis Wilhelm, 2014