Styling points/circles differently from Polygons

Hi there,

I'm loading a protobuf layer of objects containing both polygons and points/circles.
At first load, points/circles are not displayed when creating the vectorGrid using:

vectorGrid = L.vectorGrid.protobuf("https://url/{z}/{x}/{y}.pbf", {
rendererFactory: L.svg.tile,
interactive: true,
minZoom: 15,
maxZoom: 19,
getFeatureId: (f) => {
return f.properties.id;
},
vectorTileLayerStyles: {
item: {
weight: 1,
fill: true,
fillColor: "LightBlue",
fillOpacity: 0.4,
color: 'Gray',
opacity: 0.5,
},
},
})

But once the element styles are modified when hovering with mouseover/out event, the circles get styled like polygons and do appear on zoom change (not at the moment they are hovered).

I use the following code to handle events:

vectorGrid.on('mouseover', function (e) {
var id = e.layer.properties.id
vectorGridParcelles.setFeatureStyle(id, {
weight: 2,
fillColor: '#999999',
fillOpacity: 1,
fill: true,
color: 'Black',
})
})
vectorGrid.on('mouseout', function (e) {
var id = e.layer.properties.idu
vectorGridParcelles.setFeatureStyle(id, {
weight: 1,
fill: true,
fillColor: "LightBlue",
fillOpacity: 0.4,
color: 'Gray',
opacity: 0.5,
})
})

I read the document which talks about having different set of L.Path options but I can't make it work.
Is there a way to handle that and not display points/circles?

Thanks a lot!

Start by tracing how L.vectorGrid.protobuf applies vectorTileLayerStyles with the SVG renderer, then compare that path with setFeatureStyle calls from the mouseover and mouseout handlers. Confirm how point/circle features are rendered initially and after style changes; done means their visibility and styling no longer depend on hovering or zooming.