Override vectorTileLayerStyles about leaflet.vectorgrid

[perliedman]

Hi there,
you mean you want to update the style for all features in the layer?

There is currently no method for doing that. You could theoretically achieve this by using getFeatureId option, and then finding all features through the private member _vectorTiles and settings their style, but that would be a hack.

This seems like a useful feature, though, so I'll keep the issue open and think about if it could be implemented.

[abenrob]

duplicate/related to #50

[gregallensworth]

I have done what you describe: override/replace the vectorTileLayerStyles for a specific layer, then call its redraw() in order to apply the new style.

// the VectorGrid setup, with initial color schemes
mylayer = L.vectorGrid.protobuf(URL_HERE, {
	rendererFactory: L.canvas.tile,
	interactive: true,
	vectorTileLayerStyles: {
		easythings: {
			fill: true, fillColor: 'blue', fillOpacity: 1,
			color: 'rgb(0, 0, 0)', opacity: 1, weight: 0.5,
		},
		bigthings: {
			fill: true, fillColor: 'red', fillOpacity: 1,
			color: 'rgb(0, 0, 0)', opacity: 1, weight: 0.5,
		},
		otherthings: {
			fill: true, fillColor: 'yellow', fillOpacity: 1,
			color: 'rgb(0, 0, 0)', opacity: 1, weight: 0.5,
		}
	},
}).addTo(MAP);

// override the styles for one of those, to use a different fill color
// then redraw
mylayer.options.vectorTileLayerStyles.bigthings.fillColor = 'purple';
mylayer.redraw();

// override the styles for one of those, to use a callback for choosing colors
// before, it was just one solid color but now it chooses based on criteria
// then redraw
mylayer.options.vectorTileLayerStyles.easythings = function (properties, zoom) {
    var style = {
        fill: true, fillColor: 'white', fillOpacity: 1,
        color: 'rgb(0, 0, 0)', opacity: 1, weight: 0.5,
    };

    switch (properties.status) {
        case 'done':
            style.fillColor = 'orange';
            break;
        case 'happening':
            style.fillColor = 'silver';
            break;
        case 'pending':
            style.fillColor = 'blue';
            break;
        default:
            style.fillColor = 'green';
            break;
    }

    return style;
};
mylayer.redraw();

An improvement I would like to see, would be an alternative to redraw() to simply reapply the styles, without re-downloading the tiles. As it stands, the tiles are re-downloaded and this makes for a relatively slow visual experience as well as network usage and server hits. I think I'll open an Issue for that, and see about doing that...

[tapiamcclung]

And should it be possible to achieve the same behavior with a L.vectorGrid.slicer layer?
I tried the same approach you suggest, the layer only flashes but its style is not updated.
Inspecting layer.options.vectorTileLayerStyles.sliced reveals that whatever style I am setting gets changed there, just not on the tiles.

[tapiamcclung]

As an update to my previous post/question, I found that if I only set a property and redraw the layer, it doesn't work:

layer.options.vectorTileLayerStyles.sliced.fillColor = 'green';
layer.redraw();

whereas setting it to be a function and return the style, does:

layer.options.vectorTileLayerStyles.sliced = () => {
  return {
     fill: true,
     fillColor: 'green',
     fillOpacity: 0.25,
     stroke: true,
     color: 'green',
     weight: 1
  }
}
layer.redraw();

I had to include fill for fillColorto work... Not sure why, though.