Why L.vectorGrid.protobuf return undefined?

Question

I'm using in React, Leaflet and react-leaflet.

Random things in order to post the question: Leaflet is the leading open-source JavaScript library for mobile-friendly interactive maps. Weighing just about 42 KB of JS, it has all the mapping features most developers ever need. Leaflet is designed with simplicity, performance and usability in mind. It works efficiently across all major desktop and mobile platforms, can be extended with lots of plugins, has a beautiful, easy to use and well-documented API and a simple, readable source code that is a joy to contribute to.

I have this component:

import L from 'leaflet';
import { useEffect } from 'react';
import { useMap } from 'react-leaflet';
import { useSelector } from 'react-redux';
import { selectLayersStatus } from './LayerSlice';

type LayerDetails = {
    layerName?: string;
    tileUrl?: string;
    fillColor?: string;
} | undefined;

const AddLayerToMap: React.FC<LayerDetails> = () => {

    const selectLayersStatusSelector = useSelector(selectLayersStatus);

    const mapInstance = useMap();


    useEffect(() => {

        console.log('selectLayersStatusSelector:', selectLayersStatusSelector?.layers);

        let layerName: any = selectLayersStatusSelector?.layers?.data?.layerName;
        let tileUrl: any = selectLayersStatusSelector?.layers?.data?.tileUrl;
        let fillColor: any = selectLayersStatusSelector?.layers?.data?.fillColor;

        const defaultOptions: any = {
            zIndex: 1,
            // fetchOptions: {
            //     headers: {
            //       'Authorization': `Bearer ${keycloak.token}`
            //     }
            //   },
            maxZoom: 18,
            minZoom: 5,
            rendererFactory: 'L.canvas.tile',
            attribution: 'SIGEO',
        };

        const newGridConfig: any = {
            url: tileUrl,
            layerName: layerName,
            vectorTileLayerStyles: {
                default: {
                    weight: 1,
                    fillColor: fillColor,
                    fillOpacity: 0.3,
                    fill: true,
                }
            },
            interactive: true,
            getFeatureId: (f: any) => f.name,
        }

        if (mapInstance) {

            console.log('tileUrl:', tileUrl);
            console.log('layerName:', layerName);
            console.log('fillColor:', fillColor);

            console.log("AddLayerToMap: ", tileUrl, layerName, mapInstance);

            console.log("mapInstance: ", mapInstance);
            console.log("Adding new vector grid layer: ", newGridConfig);

            // @ts-ignore
            const addedLayer = L.vectorGrid?.protobuf(newGridConfig?.url,
                { ...defaultOptions, ...newGridConfig?.options })?.addTo(mapInstance);

            console.log("Added new vector grid layer: ", addedLayer);

        }

    }, [mapInstance, selectLayersStatusSelector?.layers]);

    // ... (rest of the functions and event handlers remain the same)

    return (
        <div></div>
    );
}

export default AddLayerToMap;

And I have this package.json:

{
  ...
  "dependencies": {
    ...
    "@react-leaflet/core": "^2.1.0",
    "leaflet": "^1.9.4",
    "leaflet.vectorgrid": "^1.3.0",
    "react-leaflet": "^4.2.1",
    "react-leaflet-vectorgrid": "^2.2.1",
   ...
  }
}

Why the last console.log("Added new vector grid layer: ", addedLayer); return undefined???

What I am missing out with VectorGrid and protobuf???

Answer 1

I solved with these imports:

import L from 'leaflet';
import 'leaflet.vectorgrid/dist/Leaflet.VectorGrid.bundled.js';
import 'leaflet/dist/leaflet.css';

And this:

// @ts-ignore
addedLayer = new L.VectorGrid.Protobuf(newGridConfig.url, { ...defaultOptions, ...newGridConfig.options }).addTo(mapInstance);