Leaflet / Leaflet.VectorGrid

Display gridded vector data (sliced GeoJSON or protobuf vector tiles) in Leaflet 1.0.0
591 stars 192 forks source link

Styling points/circles differently from Polygons #280

Open SamG92 opened 1 year ago

SamG92 commented 1 year ago

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, }, }, })

Capture d’écran 2023-02-03 à 11 06 03

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). Capture d’écran 2023-02-03 à 11 06 17

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!