Change the colors of the lines / path when editing

[enkodellc]

I am trying change the color of the polygon lines when the shape is in create mode, not finished or editing. I am not having any success with the pm:drawstart or pm:drawend events. My goal is to have it work similar to what leaflet draw is doing. Seems like it should be default as it is very intuitive for users to see red lines when the polygon is not yet closed.

https://leaflet.github.io/Leaflet.draw/docs/examples/full.html View mode: EditMode:

This code seems to only change the colors for pm:globaleditmodetoggled.

    this.leafMap.on('pm:globaleditmodetoggled', (e) => {
      this.leafMap.pm.setGlobalOptions({pathOptions:{color:'green',  fillColor: 'green'}});
    });
    this.leafMap.on('pm:drawend', (e) => {
      this.leafMap.pm.setGlobalOptions({pathOptions:{color:'black',  fillColor: 'blue'}});
    });

    this.leafMap.on('pm:drawstart', (e) => {
      this.leafMap.pm.setGlobalOptions({pathOptions:{color:'green',  fillColor: 'green'}});
    });

    this.leafMap.on('pm:create', (e) => {
      this.leafMap.pm.setGlobalOptions({pathOptions:{color:'red',  fillColor: 'red'}});
   });

I also tried this with no luck from within the pm:create

      layer.on('pm:enable', (layer) => {
        console.log(layer);
        this.leafMap.pm.setGlobalOptions({pathOptions:{color:'pink',  fillColor: 'pink'}});
      });
      layer.on('pm:disable', (layer) => {
        console.log(layer);
        this.leafMap.pm.setGlobalOptions({color: 'purple'});
      });

And I also tried this:

this.leafMap.pm.enableDraw('Polygon',{color:'red', fillColor: 'green'});

[dillanspencer]

I have this same issue, I can't find any way to change the color to match the color of my circle

[enkodellc]

https://github.com/geoman-io/leaflet-geoman/issues/470 @codeofsumit can you post your code as I think you might have done what I am looking to do.

[Falke-Design]

@enkodellc I'm not sure if you are talking about drawing or editing.

For changing the color while drawing, I created the PR #1290. Until the merge you can use this workaround:

var style = {color: 'red'};
map.pm.Draw.Polygon._layer.setStyle(style)
map.pm.Draw.Polygon._hintline.setStyle(style)

For editing, just use the default Leaflet setStyle function:

layer.setStyle({color: 'red'});

If you want to set the color before starting drawing use:

map.pm.setGlobalOptions({templineStyle:{color:'pink',  fillColor: 'pink'}, hintlineStyle:{color:'pink',  fillColor: 'pink'}});

To set the color after drawing use:

map.pm.setGlobalOptions({pathOptions:{color:'pink',  fillColor: 'pink'}});

[enkodellc]

@Falke-Design Thanks here is what I did.

I load some shapes via persistent data. For those I need to add the color when I add those shapes. This works great

var staticColor = '#303954';
 poly.setStyle({color:staticColor});

Then for shapes that are newly drawn - when closed polygon or complete finished state I use this code. That works great.

    //Set the default color of the shapes that are user drawn
    this.leafMap.pm.setGlobalOptions({pathOptions:{color:this.staticColor,  fillColor: this.staticColor}});

This works for specifically for when creating a polygon

    //Set the creating a polygon Color of the
    this.leafMap.pm.setGlobalOptions({templineStyle:{color:this.editingColor,  fillColor: this.editingColor}, hintlineStyle:{color:this.editingColor,  fillColor: this.editingColor}});

So those work great. What I am still having issue is the following code. I am getting a JS error on those.

var style = {color: 'red'};
map.pm.Draw.Polygon._layer.setStyle(style)
map.pm.Draw.Polygon._hintline.setStyle(style)

Cannot read properties of undefined (reading 'setStyle')

I tried some variations of hintlinestyle with no luck and a few other options with no luck. The user story being I have an existing shape and when the user clicks the Edit button I want to change the color all shapes to be Red, showing the user they chose to be in Edit mode and should click Finish to save their changes.

I also tried to see if I could capture the Edit button event to change when drawing but no luck, most likely not doing that right.

        //Draw Started
        this.leafMap.on('pm:drawstart', (e) => {
            console.log('start drawing');
        });

        //Draw Ended
        this.leafMap.on('pm:drawend', (e) => {
            console.log('end drawing');
        });

I really appreciate the help with the other solutions, they are working great!

[enkodellc]

@codeofsumit works great! Much appreciated! Here is my final code for anyone interested:

    let staticColor = '#303954';
    let editingColor = 'red';

    //Set the creating a shape Color
    map.pm.setGlobalOptions({templineStyle:{color:editingColor,  fillColor: editingColor}, hintlineStyle:{color:editingColor,  fillColor: editingColor}});

    //Set the default color of the shapes
    map.pm.setGlobalOptions({pathOptions:{color:staticColor,  fillColor: staticColor}});

    //Changes the color of the layers when in edit mode
    map.on('pm:globaleditmodetoggled', e => {
      let style = e.enabled ? {color: editingColor} : {color: staticColor};

      for (let i in this.leafMap._layers) {
        if (map._layers[i]._path != undefined) {
          try {
            console.log(this.leafMap._layers[i]);
            map._layers[i].setStyle(style);
          }
          catch (e) {
            console.log("problem with " + e + map._layers[i]);
          }
        }
      }
    });

// if you draw something from a persistent data source set the default color using leaflet 
let poly = L.polygon(coords, { className: "polyline", smoothFactor: 1 });
//default polygon color
poly.setStyle({color:staticColor});
poly.addTo(map);