How do I style divicons in leaflet.draw edit mode? - icons

Question

Using leaflet.draw, I instantiate the drawControl I with:
scope.drawOptions = {
position: 'topright',
draw: {
polyline: false,
polygon: {
icon: new L.DivIcon({
iconSize: new L.Point(16, 16),
className: 'leaflet-div-icon leaflet-editing-icon my-own-class'
}),
allowIntersection: false,
drawError: {
color: '#5878B8',
message: '<strong>Oh snap!<strong> you can\'t draw that!'
},
shapeOptions: shapeOptions
},
circle: false, // Turns off this drawing tool
rectangle: false,
marker: false
},
edit: {
featureGroup: self.featureGroup
}
};
scope.drawControl = new L.Control.Draw(scope.drawOptions);
map.addControl(scope.drawControl);
But the style reverts back to the "default" when entering edit mode. I tried to combat this with:
map.on('draw:editstart', function(e) {
scope.drawControl.setDrawingOptions({
polygon: {
icon: new L.DivIcon({
iconSize: new L.Point(16, 16),
className: 'leaflet-div-icon leaflet-editing-icon my-own-class'
})
},
})
});
But that didn't help. Any suggestions?
There's a closed github issue on this but I couldn't figure it out: https://github.com/Leaflet/Leaflet.draw/issues/48#issuecomment-141546589
I created this jfiddle if anyone wants to play around: http://jsfiddle.net/markdickersonvt/mwz7pg2n/

Answer 1

Like this?
Basically, I just extend the L.Edit.Poly class
L.Edit.Poly = L.Edit.Poly.extend({
options : {
icon: new L.DivIcon({
iconSize: new L.Point(20, 20),
className: 'leaflet-div-icon leaflet-editing-icon my-own-icon'
})
}
});
I used to use the Draw plug-in, and abused extending default methods to get rid off tooltip for example. I think this is the best thing to do, this is why leaflet has been designed this way.