Vector Tile Layer redraw on click event

[nicolas-perez-oportus96]

Hello there!

After several attempts, I was able to display the desired data (in .pbf), but every time I click on a polygon to see its associated data, the tile layer reloads or redraws (disappears and reappears later).

Also, getting data takes some time. My .pbf set weighs something like 11mb.

Here is my code

import React, { useContext } from 'react';
import { Map, TileLayer, LayersControl, LayerGroup, WMSTileLayer, withLeaflet} from 'react-leaflet';
import { BingLayer } from 'react-leaflet-bing-v2';
import L, { CRS } from 'leaflet';
import { FeatureContext } from './FeatureContext';
import VectorGridDefault from "react-leaflet-vectorgrid";

export default function MapComponent({ data }) {
    const [feature, setFeature] = useContext(FeatureContext);

    function getFeatureData(featureData) {
        setFeature(featureData);
        console.log(feature)
    }

    const vectorStyles = {
        ING_FINAL: {
          fill: true,
          weight: 1,
          fillColor: "#ff00ff",
          color: "#ff00ff",
          fillOpacity: 0.9,
          opacity: 0.9,
          maxNativeZoom: 14,
          minNativeZoom: 1
        }
      };
      const VectorGrid = withLeaflet(VectorGridDefault);
      const options = {
        tolerance: 30, 
        extent: 4096, 
        buffer: 128, 
        rendererFactory: L.svg.tile ,
        type: "protobuf",
        url: "http://{server_ip}/ING_VT/{z}/{x}/{y}.pbf",
        vectorTileLayerStyles: vectorStyles,
        subdomains: "abcd",
        key: "abcdefghi01234567890",
        interactive: true,
        zIndex: 401
      };

    return (
        <Map center={[-34.238347, -70.250921]} zoom={8} minZoom={6} maxZoom={12} maxBounds={[[-35.494268, -70.735148], [-32.963408, -69.766694]]} crs={CRS.EPSG3857} >
            {/* Control de Capas */}
            <LayersControl position="topright">
                {/* GRUPO DE CAPAS WORLD IMAGERY+ SHADERELIEF */}
                <LayersControl.BaseLayer checked name="HillShade" >
                    <LayerGroup>
                        {/* ESRI WORLD IMAGERY */}
                        <TileLayer
                            attribution='Tiles &copy; Esri &mdash; Source: Esri, i-cubed, USDA, USGS, AEX, GeoEye, Getmapping, Aerogrid, IGN, IGP, UPR-EGP, and the GIS User Community'
                            url="https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}"
                        />
                        {/* OPEN MAP SURFER HILLSHADE */}
                        <TileLayer
                            attribution='Imagery from <a href="http://giscience.uni-hd.de/">GIScience Research Group @ University of Heidelberg</a> | Map data  <a href="https://lpdaac.usgs.gov/products/aster_policies">ASTER GDEM</a>, <a href="http://srtm.csi.cgiar.org/">SRTM</a>'
                            url="https://maps.heigit.org/openmapsurfer/tiles/asterh/webmercator/{z}/{x}/{y}.png"
                        />
                    </LayerGroup>
                </LayersControl.BaseLayer>

                {/* ESRI Shaded Relief */}
                <LayersControl.BaseLayer name="ESRI Shaded Relief">
                    <TileLayer
                        attribution='Tiles &copy; Esri &mdash; Source: Esri'
                        url="https://server.arcgisonline.com/ArcGIS/rest/services/World_Shaded_Relief/MapServer/tile/{z}/{y}/{x}" 
                    />
                </LayersControl.BaseLayer>

                {/* BING Maps Satellital */}
                <LayersControl.BaseLayer name="BING Maps Satellital">
                    <BingLayer bingkey={bing_key} />
                </LayersControl.BaseLayer>

                <VectorGrid {...options}  onClick={ (e) => (getFeatureData(e.layer.properties))  } />

            </LayersControl>
        </Map>
    )
}