Rendering error (symbol clipping) at vector tile edges in leaflet-vector-tile

Question

I am trying to create a overlay layer on the map with simple shapes/icons. But while rendering, shapes which are on the edge of the tile are getting cut due to vector tile edges. Here we are creating vector tiles using pbf file.

this.overlaylayer = vectorTileLayer(this.url, {
layers: ["A","B"],
layerOrder: (layers, zoomLevel) => {
  return ["A","B"];
},
vectorTileLayerStyles: {
    "A":(properties: any, zoom: any, center: any) => {
            return {
                weight: 1,
                radius: 4,
                color: 'black',
                fillColor: "red",
                fillOpacity: 1,
                clickable: true,
              }
        },
    B:(properties: any, zoom: any, center: any) => {
        return {
            weight: 3,
            color: "yellow",
            fillOpacity: 1,
            clickable: true
        }
},
// interactive: true,
getFeatureId: function (f: any) {
  return f.id;
},
maxNativeZoom: 24,
maxZoom: 24,
minNativeZoom: 12,
minZoom: 12,
keepBuffer: 4, 
updateWhenZooming: false,
updateInterval: 1000, //Tiles will not update more than once every updateInterval milliseconds when panning.
buffer:10 }); this.overlaylayer.addTo(this.map);

I have tried using the buffer option but it is not working. Any idea would be helpful.

Answer 1

This issue arises from SVG. If you add the following code to the place where SVG is generated in the leaflet-vector-tile library, the problem will be resolved.

m_svg.style.overflow = 'visible';