Skip to content
Edit the style of features within Leaflet.
JavaScript HTML CSS
Latest commit eacd03b Feb 26, 2016 @dwilhelm89 Merge pull request #18 from arfa/master
Set the marker's Popup in the right position.

README.md

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

Something went wrong with that request. Please try again.