Correct way to change a style property on the fly

[eliboni]

For example, I want to change major roads color to red, the following code works fine when using the default style:

map.on('click',ev => {
		protomapsL.light.majorRoad = "#FF0000"; 
	        layer.setDefaultStyle(false,"","","none")
	        layer.clearLayout();
	        layer.rerenderTiles();
});

Is it the above the right ways to achieve the result? What if I want to change line width as well? I did not get if/how I can create my own symbolizer but to just override one single element .

The same in maplibre woudld be just a line of code:

		map.on('click', () => {
			map.setPaintProperty('roads_major', 'line-color', '#FF0000');
		});

Thanks! (and thanks for this great project!)

[bdon]

In general you will need to generate a new set of paintRules for all your changes, and then rerenderTiles. This is because protomaps-leaflet works in an "immediate mode" where no intermediate graphical state is stored, only the rendered images. MapLibre can accomplish this more efficiently because it works in "retained mode" with WebGL and you can update one piece of state. If your application uses this pattern heavily I would recommend using maplibre.

[eliboni]

@bdon, many thanks - if I generate a new set of paintRules (say myPaintRules), what is the correct way to apply them to current leafletLayer (before calling rerenderTiles) ?

[eliboni]

I can likely answer myself, after defining the new rules:

var myDynamicColor = "#FFCEBB";
var myDynamicInc = 0;

function myPaintRules() { 
  return [
   ...
    {
      dataLayer: "roads",
      symbolizer: new protomapsL.LineSymbolizer({
        color: myDynamicColor,
        width: protomapsL.exp(1.4, [
          [5, 0.5+myDynamicInc],
          [11, 2.5+myDynamicInc],
          [16, 7+myDynamicInc],
          [20, 30+myDynamicInc],
        ]),
      }),
      filter: (z, f) => {
        return f.props["pmap:kind"] == "highway";
      },
    },
...
  ];
 }

I can just update the layer paint_rules and call rerenderTiles()

myDynamicColor = "#F0F0F0#; // update color
myDynamicInc = 5; // increase width

layer.paint_rules = myPaintRules();
layer.rerenderTiles();

Does it make sense?

[bdon]

Yes, that seems like a fine solution if it's working. Thanks for sharing.