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

[hamish0361]

Thank you for your answer, my friend!
I had a look at the project about fire departments and other emergencies https://www.lagekarte.info/ it was really cool.

I see on your map there is a way to draw arrows on the map, can you guide me to draw the same?
Or is there a way I can add it to the geoman-io controller?

[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!

[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);