Is it possible to style edit marker icons? about leaflet.draw

[jacobtoye]

Implemented in 0.2. Can do:

drawControl.setDrawingOptions(
    polyline: {
        icon: new L.DivIcon({
            iconSize: new L.Point(10, 10),
            className: 'leaflet-div-icon leaflet-editing-icon my-own-class'
        })
    }
);

Will add to README.

[mfdickerson]

This worked:

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'
        })
    }
});

[juanAFernandez]

Also something as simple as overrite the classes, to for example, change to circles:

.leaflet-div-icon {
  background-color: #f4f4f4;
  border: 1px solid #666;
  border-radius: 50%;
  display: inline-block;
}

.leaflet-editing-icon {
  background-color: #f4f4f4;
  border: 1px solid #666;
  border-radius: 50%;
  display: inline-block;
}

[mfdickerson]

@jacobtoye and @Starefossen, I'm wondering if either of you can help me.

When instantiating the drawControl I have:

    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 as @Starefossen mentioned above, 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?

[RickMohr]

Note -- if you're not using the Draw toolbar you can update the vertices for drawing by extending L.Edit.PolyVerticesEdit similarly to L.Edit.Poly above.

[nadun-ascentic]

@8volution23 If you really need to do it, just use width and height property with !important.
.leaflet-editing-icon { width: 10px !important; height: 10px !important; border-radius: 20px; }

[jacobtoye]

You are right. 0.2 is a WIP, I wouldn't advise using it beyond dev at the moment. However this is still a bug. I'll look into fixing it.

[Starefossen]

Ahh.. Great! I'm currently testing out 0.2 to see if I can find any bugs, and if there are anything I can help out with. Still learning the ways of the Leaflet core, so yet a still learning to do. I'll send you a link to a project I'm working on when it's stable enough to be demoed :)

[Starefossen]

This is just perfect. You rock @jacobtoye!

[RickMohr]

I see no CSS styling for leaflet-editing-icon in either Leaflet or Leaflet Draw -- looks like the intent is to allow styling vertex icons using that class, so could omit my-own-icon.

[8volution23]

Sorry to revive this thread again, but how would you change the vertices shape to circles instead of squares? I tried this so far: .leaflet-editing-icon{ border-radius: 20px; } which rounds the squares, but I couldn't make them smaller.

@RickMohr , I've seen you did something similar here, but not sure how to apply it to Leaflet.draw