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:
{ "name": "map-fe", "version": "0.1.0", "private": true, "dependencies": { "@emotion/react": "^11.11.1", "@emotion/styled": "^11.11.0", "@mui/icons-material": "^5.14.14", "@mui/material": "^5.14.14", "@mui/styled-engine-sc": "^6.0.0-alpha.2", "@mui/x-data-grid": "^6.16.2", "@react-leaflet/core": "^2.1.0", "@reduxjs/toolkit": "^1.9.7", "@testing-library/jest-dom": "^5.17.0", "@testing-library/react": "^13.4.0", "@testing-library/user-event": "^13.5.0", "@types/jest": "^27.5.2", "@types/node": "^16.18.59", "@types/react": "^18.2.29", "@types/react-dom": "^18.2.13", "@types/uuid": "^9.0.6", "bootstrap": "^5.3.2", "keycloak-js": "^22.0.4", "leaflet": "^1.9.4", "leaflet.vectorgrid": "^1.3.0", "lodash": "^4.17.21", "react": "^18.2.0", "react-bootstrap": "^2.9.0", "react-dom": "^18.2.0", "react-icons": "^4.11.0", "react-leaflet": "^4.2.1", "react-leaflet-vectorgrid": "^2.2.1", "react-redux": "^8.1.3", "react-scripts": "5.0.1", "redux": "^4.2.1", "styled-components": "^6.1.0", "typescript": "^4.9.5", "uuid": "^9.0.1", "web-vitals": "^2.1.4" }, "scripts": { "start": "react-scripts start", "build": "react-scripts build", "test": "react-scripts test", "eject": "react-scripts eject" }, "eslintConfig": { "extends": [ "react-app", "react-app/jest" ] }, "browserslist": { "production": [ ">0.2%", "not dead", "not op_mini all" ], "development": [ "last 1 chrome version", "last 1 firefox version", "last 1 safari version" ] }, "devDependencies": { "@types/leaflet": "^1.9.7" } } Why the last console.log("Added new vector grid layer: ", addedLayer); return undefined???
