3

I am playing around with the options for Leaflet-Draw and have came up wit a little annoyance. Using a colorpicker I can set the color for every new polyline I draw by invoking options.draw.polyline.shapeOptions.color with draw:drawstart like this:

map.on('draw:drawstart', function() {
    drawControl.options.draw.polyline.shapeOptions.color = theInput.value;
});

The problem emerges when when changing color and drawing my first polyline - the line segment still have the old color (better explained with a picture): enter image description here

After finishing the firts polyline it turns to the right color and all new polylines segments have the right color but that first drawn polyline annoys me. Any idea how to solve this? There are no line segment style options in the documentation. And how do I style the dotted line?

4

You can use this function:

function changeColor(color){
    drawControl.options.draw.polyline.shapeOptions.color = color;
    drawControl.options.draw.polygon.shapeOptions.color = color;
    drawControl.options.draw.rectangle.shapeOptions.color = color;
    if(drawControl._toolbars.draw._activeMode.handler){
      var handler = drawControl._toolbars.draw._activeMode.handler;
      if(handler._poly){
        handler._poly.setStyle({color: color})
      } else if(handler._shape){
        handler._shape.setStyle({color: color})
      }
    }
  }
2
  • Works perfectly although I don't understand the "drawControl._toolbars.draw._activeMode.handler" part, yet :) Have to learn more javascript first. Thank you
    – FishHead
    Jan 19 '21 at 19:41
  • with if(drawControl._toolbars.draw._activeMode.handler){ it is checking if the handler is not false which includes also not null or undefined. Jan 19 '21 at 20:51

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.