5

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/

Mark Dickerson
  • 53
  • 1
  • 6

1 Answers1

8

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.

Stranded Kid
  • 1,395
  • 3
  • 15
  • 23
  • Thank you! That's exactly what I was looking for. Is there a good way to do that for the opacity of the "middle markers"? The opacity is set in the function _createMiddleMarker [L.Edit.Poly Class](https://github.com/Leaflet/Leaflet.draw/blob/1f49919df00467a234a9ed94c93bbfa9d804f6ec/src/edit/handler/Edit.Poly.js). I tried a to extend the `L.Edit.Poly' class and see if I could redefine that function, but I got some errors. – Mark Dickerson Sep 28 '15 at 16:24