How do change the color and other properties of polygon and polyline drawings on the map?

[hamish0361]

I used your leaflet-geoman, it's really cool. I thank you for that.
Now I have a question I would like to ask for your help is there any way I can change the color or some other properties for each of the drawings( polygon, polyline) that I have selected on the map?

[Falke-Design]

To change the color while drawing you can set pathOptions:

// set the options for the different draw modes, will be also applied to the buttons in the toolbar
map.pm.enableDraw('Line',{pathOptions:{color:'red'}});
map.pm.enableDraw('Polygon', {pathOptions:{color:'green'}});
map.pm.disableDraw();

or

map.pm.setGlobalOptions({pathOptions:{color:'red'}});

https://jsfiddle.net/falkedesign/3tyr8pcz/

To style after drawing listen on the pm:create:

map.on('pm:create',(e)=>{
   if(e.layer instanceof L.Polyline){
       e.layer.setStyle({color: 'orange'});
    }
});

[Falke-Design]

The Arrows are a own implementation, but saddly I can't give you the code.
You can copy the "L.Draw.Line" class and apply in the _finishDraw function the logic for the Arrow-Head.

[hamish0361]

Yes I will try
Thank you for this support, you are great!

[ConwayDecker]

To change the color while drawing you can set pathOptions:

// set the options for the different draw modes, will be also applied to the buttons in the toolbar
map.pm.enableDraw('Line',{pathOptions:{color:'red'}});
map.pm.enableDraw('Polygon', {pathOptions:{color:'green'}});
map.pm.disableDraw();

or

map.pm.setGlobalOptions({pathOptions:{color:'red'}});

https://jsfiddle.net/falkedesign/3tyr8pcz/

To style after drawing listen on the pm:create:

map.on('pm:create',(e)=>{
   if(e.layer instanceof L.Polyline){
       e.layer.setStyle({color: 'orange'});
    }
});

I am having issues getting the preview for the circle and circle marker shapes to show up as my selected color. In the link you shared it appears the map does the same as mine: rectangle and polygon preview fine, but only circle and circle marker don't preview correctly. Is there a new solution to this?

[Falke-Design]

I'm not sure if you need to set templineStyle and hintlineStyle too

[ConwayDecker]

That was it! Thanks so much!

[ghost-ng]

try this:

// Add event listener to the featureGroup layer for when a new shape is created
map.on('pm:create', function(e) {
    var layer = e.layer;

    // Attach click event to the new shape
    layer.on('click', function() {
        // Log the color of the clicked shape
        console.log('Current Color:', this.options.color);
        // get new color from the color picker
        var newColor = document.getElementById('color-picker').value;
        console.log('New Color:', newColor);

        // Check if the clicked layer is a polygon
        if (layer instanceof L.Polygon || layer instanceof L.Circle) {
            // Set the selected polygon
            selectedPolygon = layer;
            selectedPolygon.setStyle({ fillColor: newColor });
            selectedPolygon.setStyle({ color: newColor });

            
        }
    });
});

// Define custom control class
var ColorPickerControl = L.Control.extend({
    onAdd: function(map) {
        // Create container element for color picker
        var container = L.DomUtil.create('div', 'leaflet-bar leaflet-control');
        
        // Create color picker input element
        var colorPicker = document.createElement('input');
        colorPicker.type = 'color';
        colorPicker.id = 'color-picker'; // Set an ID for styling or event handling
        colorPicker.title = 'Choose color';
        
        // Append color picker to container
        container.appendChild(colorPicker);

        return container;
    },

    onRemove: function(map) {
        // Nothing to do here
    }
});

// Add custom control to the map
var colorPickerControl = new ColorPickerControl({ position: 'topleft' }); // Adjust position as needed
colorPickerControl.addTo(map);