Use with react-leaflet 3.0

[EGNKupava]

Hello there!
I am trying to use react-leaflet-vectorgrid with react-leaflet 3.0.
It doesn't work because in version 3.0 HOC 'withLeaflet' anymore doesn't exist.
Who can help?

[AndrejGajdos]

+1

[KoduIsGreat]

I also have a need for this, anyone have any advice?

[EGNKupava]

https://codesandbox.io/s/gracious-fog-9d52v?file=/src/vector-grid.js

[AndrejGajdos]

@EGNKupava thank you, I will check it out.

[FredChauviere]

I start to port the original code to react-leaflet 3.0 and it work 90%, but for an unknown reason (I'm not familiar enough with React Hooks yet), the active state don't seem to work so the active state is not persistent (active is always null in clearHighlight()

If somebody want to correct that code, they're welcome!

import React, { useState } from 'react';
import { createTileLayerComponent, updateGridLayer } from '@react-leaflet/core';
import L from 'leaflet';
import isObject from 'lodash/isObject';
import isFunction from 'lodash/isFunction';
import isString from 'lodash/isString';
import isEmpty from 'lodash/isEmpty';
import clone from 'lodash/clone';
import cloneDeep from 'lodash/cloneDeep';
import extend from 'lodash/extend';
import merge from 'lodash/merge';
import has from 'lodash/has';
import find from 'lodash/find';
import 'leaflet.vectorgrid';

export const VectorGrid = createTileLayerComponent (
    function createTileLayer(props, context) {
        const [highlight, setHighlight] = useState(null);
        const [active, setActive] = useState(null);
        const {
            data,
            style,
            hoverStyle,
            activeStyle,
            onClick,
            onMouseover,
            onMouseout,
            onDblclick,
            onContextmenu,
            vectorTileLayerStyles,
            url,
            maxNativeZoom,
            subdomains,
            accessKey,
            accessToken,
            type = 'protobuf',
            interactive = true,
            idField = '',
            ...rest
        } = props;
        delete(rest.leaflet);

        const baseStyle = (properties, zoom) => {
            if (isFunction(style)) {
                return style(properties);
            } else if (isObject(style)) {
                return style;
            }
            return {
                weight: 0.5,
                opacity: 1,
                color: '#ccc',
                fillColor: '#390870',
                fillOpacity: 0.6,
                fill: true,
                stroke: true
            };
        };

        const _getFeatureId = (feature) => {
            const {
                idField
            } = props;
            if (isFunction(idField)) {
                return idField(feature);
            } else if (isString(idField)) {
                return feature.properties[idField];
            }
        }
        
        const setFeatureStyle = (id, style) => {
            vectorGrid.setFeatureStyle(id, style);
        }
    
        const resetFeatureStyle = (ids) => {
            ids.map((id) => {
                vectorGrid.resetFeatureStyle(id);
                return null;
            });
        }
    
        const clearHighlight = (featureId, _active) => {
            if (featureId && featureId !== _active) {
                resetFeatureStyle([featureId]);
            }
            if (highlight && highlight !== _active) {
                resetFeatureStyle(highlight);
            }
            setHighlight(null);
        }
    
        const clearActive = () => {
            if (active) {
                resetFeatureStyle(active);
            }
            setActive(null);
        }

        const getFeature = (featureId) => {
            const {
                data,
                idField
            } = props;
            if (isEmpty(data) || isEmpty(data.features)) return {};
            const feature = find(data.features, ({
                properties
            }) => properties[idField] === featureId);
            return cloneDeep(feature);
        }

        const _propagateEvent = (eventHandler, e) =>{
            if (!isFunction(eventHandler)) return; 
            const featureId = _getFeatureId(e.layer);
            const feature = getFeature(featureId);
            const event = cloneDeep(e);
            const mergedEvent = merge(event.target, {
                feature
            });
            eventHandler(event);
        }

        let vectorGrid;
        if (type === 'slicer') {
            vectorGrid = new L.vectorGrid.slicer(data, {
                interactive: interactive,
                getFeatureId: feature => _getFeatureId(feature),
                rendererFactory: L.svg.tile,
                vectorTileLayerStyles: vectorTileLayerStyles || {
                    sliced: (properties, zoom) => {
                        const bs = baseStyle(properties, zoom);
                        bs.fill = true;
                        bs.stroke = true;
                        return bs;
                    }
                },
                ...rest
            });
        } else {
            vectorGrid = new L.vectorGrid.protobuf(url, {
                interactive: interactive,
                key: accessKey,
                token: accessToken,
                vectorTileLayerStyles: vectorTileLayerStyles,
                getFeatureId: feature => _getFeatureId(feature),
                rendererFactory: L.canvas.tile,
                ...rest
            });
        }
        vectorGrid.on('mouseover', (e) => {
            const {
                properties
            } = e.layer;
            _propagateEvent(onMouseover, e);
            let st;
            const featureId = _getFeatureId(e.layer);
            if (isFunction(hoverStyle)) {
                st = hoverStyle(properties);
            } else if (isObject(hoverStyle)) {
                st = cloneDeep(hoverStyle);
            }
            if (!isEmpty(st) && featureId) {
                clearHighlight();
                setHighlight(featureId);
                const base = cloneDeep(baseStyle(properties));
                const hoverStyle = extend(base, st);
                setFeatureStyle(featureId, hoverStyle);
            }
        })
        .on('mouseout', (e) => {
            _propagateEvent(onMouseout, e);
            const featureId = _getFeatureId(e.layer);
            clearHighlight(featureId, active);
        })
        .on('click', (e) => {
            const {
                properties
            } = e.layer;
            const featureId = _getFeatureId(e.layer);
            _propagateEvent(onClick, e);
            let st;
            if (isFunction(activeStyle)) {
                st = activeStyle(properties);
            } else if (isObject(activeStyle)) {
                st = cloneDeep(activeStyle);
            }
            if (!isEmpty(st) && featureId) {
                clearActive();
                setActive(featureId);
                const base = cloneDeep(baseStyle(properties));
                const activeStyle = extend(base, st);
                setFeatureStyle(featureId, activeStyle);
            }
        })
        .on('dblclick', (e) => {
            _propagateEvent(onDblclick, e);
            clearActive();
        })
        .on('contextmenu', (e) => {
            _propagateEvent(onContextmenu, e);
            clearActive();
        });

        return {
            instance: vectorGrid,
            context
        }
    }, 
    function upgrade(layer, props, prevprops) {
        return updateGridLayer(layer, props, prevprops)
    }
)

export default VectorGrid;

[KoduIsGreat]

I'm fairly certain you need to use a ref, because leaflet maintains its own state. I would look into the useRef hook provided by react

[FredChauviere]

Oh my god, you are right. I really need to invest more time learning React Hooks : I learned React through Class Components and the switch to Function Component is really hard now...

Here's my corrected code that now seems to work 95% :
(FYI, I did not port the Popup management code)

import { useRef } from 'react';
import { createTileLayerComponent, updateGridLayer } from '@react-leaflet/core';
import L from 'leaflet';
import isObject from 'lodash/isObject';
import isFunction from 'lodash/isFunction';
import isString from 'lodash/isString';
import isEmpty from 'lodash/isEmpty';
import clone from 'lodash/clone';
import cloneDeep from 'lodash/cloneDeep';
import extend from 'lodash/extend';
import merge from 'lodash/merge';
import has from 'lodash/has';
import find from 'lodash/find';
import 'leaflet.vectorgrid';


export const VectorGrid = createTileLayerComponent (
    function createTileLayer(props, context) {
        const highlight = useRef(null);
        const active = useRef(null);
        const {
            data,
            style,
            hoverStyle,
            activeStyle,
            onClick,
            onMouseover,
            onMouseout,
            onDblclick,
            onContextmenu,
            vectorTileLayerStyles,
            url,
            maxNativeZoom,
            subdomains,
            accessKey,
            accessToken,
            type = 'protobuf',
            interactive = true,
            idField = '',
            ...rest
        } = props;
        delete(rest.leaflet);

        const baseStyle = (properties, zoom) => {
            if (isFunction(style)) {
                return style(properties);
            } else if (isObject(style)) {
                return style;
            }
            return {
                weight: 0.5,
                opacity: 1,
                color: '#ccc',
                fillColor: '#390870',
                fillOpacity: 0.6,
                fill: true,
                stroke: true
            };
        };

        const _getFeatureId = (feature) => {
            const {
                idField
            } = props;
            if (isFunction(idField)) {
                return idField(feature);
            } else if (isString(idField)) {
                return feature.properties[idField];
            }
        }
        
        const setFeatureStyle = (id, style) => {
            vectorGrid.setFeatureStyle(id, style);
        }
    
        const resetFeatureStyle = (id) => {
            vectorGrid.resetFeatureStyle(id);
        }
    
        const clearHighlight = (properties) => {
            if (highlight.current) {
                if (highlight.current !== active.current) {
                    resetFeatureStyle(highlight.current);
                } else {
                    let st;
                    if (isFunction(activeStyle)) {
                        st = activeStyle(properties);
                    } else if (isObject(activeStyle)) {
                        st = cloneDeep(activeStyle);
                    }
                    if (!isEmpty(st)) {
                        const base = cloneDeep(baseStyle(properties));
                        const activeStyle = extend(base, st);
                        setFeatureStyle(active.current, activeStyle);
                    }
                }
            }
            highlight.current = null;
        }
    
        const clearActive = () => {
            if (active.current) {
                resetFeatureStyle(active.current);
            }
            active.current = null;
        }

        const getFeature = (featureId) => {
            const {
                data,
                idField
            } = props;
            if (isEmpty(data) || isEmpty(data.features)) return {};
            const feature = find(data.features, ({
                properties
            }) => properties[idField] === featureId);
            return cloneDeep(feature);
        }

        const _propagateEvent = (eventHandler, e) =>{
            if (!isFunction(eventHandler)) return; 
            const featureId = _getFeatureId(e.layer);
            const feature = getFeature(featureId);
            const event = cloneDeep(e);
            const mergedEvent = merge(event.target, {
                feature
            });
            eventHandler(event);
        }

        let vectorGrid;
        if (type === 'slicer') {
            vectorGrid = new L.vectorGrid.slicer(data, {
                interactive: interactive,
                getFeatureId: feature => _getFeatureId(feature),
                rendererFactory: L.svg.tile,
                vectorTileLayerStyles: vectorTileLayerStyles || {
                    sliced: (properties, zoom) => {
                        const bs = baseStyle(properties, zoom);
                        bs.fill = true;
                        bs.stroke = true;
                        return bs;
                    }
                },
                ...rest
            });
        } else {
            vectorGrid = new L.vectorGrid.protobuf(url, {
                interactive: interactive,
                key: accessKey,
                token: accessToken,
                vectorTileLayerStyles: vectorTileLayerStyles,
                getFeatureId: feature => _getFeatureId(feature),
                rendererFactory: L.canvas.tile,
                ...rest
            });
        }
        vectorGrid.on('mouseover', (e) => {
            const {
                properties
            } = e.layer;
            _propagateEvent(onMouseover, e);
            let st;
            const featureId = _getFeatureId(e.layer);
            if (isFunction(hoverStyle)) {
                st = hoverStyle(properties);
            } else if (isObject(hoverStyle)) {
                st = cloneDeep(hoverStyle);
            }
            if (!isEmpty(st) && featureId) {
                clearHighlight(properties);
                highlight.current = featureId;
                const base = cloneDeep(baseStyle(properties));
                const hoverStyle = extend(base, st);
                setFeatureStyle(featureId, hoverStyle);
            }
        })
        .on('mouseout', (e) => {
            const {
                properties
            } = e.layer;
            _propagateEvent(onMouseout, e);
            clearHighlight(properties);
        })
        .on('click', (e) => {
            const {
                properties
            } = e.layer;
            const featureId = _getFeatureId(e.layer);
            _propagateEvent(onClick, e);
            let st;
            if (isFunction(activeStyle)) {
                st = activeStyle(properties);
            } else if (isObject(activeStyle)) {
                st = cloneDeep(activeStyle);
            }
            if (!isEmpty(st) && featureId) {
                clearActive();
                active.current = featureId;
                const base = cloneDeep(baseStyle(properties));
                const activeStyle = extend(base, st);
                setFeatureStyle(featureId, activeStyle);
            }
        })
        .on('dblclick', (e) => {
            _propagateEvent(onDblclick, e);
            clearActive();
        })
        .on('contextmenu', (e) => {
            _propagateEvent(onContextmenu, e);
            clearActive();
        });

        return {
            instance: vectorGrid,
            context
        }
    }, 
    function upgrade(layer, props, prevprops) {
        return updateGridLayer(layer, props, prevprops)
    }
)

export default VectorGrid;

[FredChauviere]

I'm on a roll, I fixed the Tooltip and Popup code:
(Thanks to @KoduIsGreat again)

import { useEffect, useRef } from 'react';
import { createTileLayerComponent, updateGridLayer } from '@react-leaflet/core';
import L from 'leaflet';
import isObject from 'lodash/isObject';
import isFunction from 'lodash/isFunction';
import isString from 'lodash/isString';
import isEmpty from 'lodash/isEmpty';
import clone from 'lodash/clone';
import cloneDeep from 'lodash/cloneDeep';
import extend from 'lodash/extend';
import merge from 'lodash/merge';
import has from 'lodash/has';
import find from 'lodash/find';
import leaflet.vectorgrid;

export const VectorGrid = createTileLayerComponent (
    function createTileLayer(props, context) {
        const highlight = useRef(null);
        const active = useRef(null);
        const {
            data,
            style,
            hoverStyle,
            activeStyle,
            onClick,
            onMouseover,
            onMouseout,
            onDblclick,
            onContextmenu,
            vectorTileLayerStyles,
            url,
            maxNativeZoom,
            subdomains,
            accessKey,
            accessToken,
            type = 'protobuf',
            interactive = true,
            idField = '',
            ...rest
        } = props;
        delete(rest.leaflet);

        useEffect(() => {
            const {
                tooltipClassName = '',
                tooltip = null,
                popup = null
            } = props;
            if (tooltip) {
                vectorGrid.bindTooltip((layer) => {
                    if (isFunction(tooltip)) {
                        return tooltip(layer);
                    } else if (isString(tooltip) && has(layer.properties, tooltip)) {
                        return String(layer.properties[tooltip]);
                    } else if (isString(tooltip)) {
                        return tooltip;
                    }
                    return '';
                }, {
                    sticky: true,
                    direction: 'auto',
                    className: tooltipClassName
                });
            }
            if (popup) {
                vectorGrid.bindPopup(popup);
            }     
        }, [props.tooltip, props.popup]);

        const baseStyle = (properties, zoom) => {
            if (isFunction(style)) {
                return style(properties);
            } else if (isObject(style)) {
                return style;
            }
            return {
                weight: 0.5,
                opacity: 1,
                color: '#ccc',
                fillColor: '#390870',
                fillOpacity: 0.6,
                fill: true,
                stroke: true
            };
        };

        const _getFeatureId = (feature) => {
            const {
                idField
            } = props;
            if (isFunction(idField)) {
                return idField(feature);
            } else if (isString(idField)) {
                return feature.properties[idField];
            }
        }
        
        const setFeatureStyle = (id, style) => {
            vectorGrid.setFeatureStyle(id, style);
        }
    
        const resetFeatureStyle = (id) => {
            vectorGrid.resetFeatureStyle(id);
        }
    
        const clearHighlight = (properties) => {
            if (highlight.current) {
                if (highlight.current !== active.current) {
                    resetFeatureStyle(highlight.current);
                } else {
                    let st;
                    if (isFunction(activeStyle)) {
                        st = activeStyle(properties);
                    } else if (isObject(activeStyle)) {
                        st = cloneDeep(activeStyle);
                    }
                    if (!isEmpty(st)) {
                        const base = cloneDeep(baseStyle(properties));
                        const activeStyle = extend(base, st);
                        setFeatureStyle(active.current, activeStyle);
                    }
                }
            }
            highlight.current = null;
        }
    
        const clearActive = () => {
            if (active.current) {
                resetFeatureStyle(active.current);
            }
            active.current = null;
        }

        const getFeature = (featureId) => {
            const {
                data,
                idField
            } = props;
            if (isEmpty(data) || isEmpty(data.features)) return {};
            const feature = find(data.features, ({
                properties
            }) => properties[idField] === featureId);
            return cloneDeep(feature);
        }

        const _propagateEvent = (eventHandler, e) =>{
            if (!isFunction(eventHandler)) return; 
            const featureId = _getFeatureId(e.layer);
            const feature = getFeature(featureId);
            const event = cloneDeep(e);
            const mergedEvent = merge(event.target, {
                feature
            });
            eventHandler(event);
        }

        let vectorGrid;
        if (type === 'slicer') {
            vectorGrid = new L.vectorGrid.slicer(data, {
                interactive: interactive,
                getFeatureId: feature => _getFeatureId(feature),
                rendererFactory: L.svg.tile,
                vectorTileLayerStyles: vectorTileLayerStyles || {
                    sliced: (properties, zoom) => {
                        const bs = baseStyle(properties, zoom);
                        bs.fill = true;
                        bs.stroke = true;
                        return bs;
                    }
                },
                ...rest
            });
        } else {
            vectorGrid = new L.vectorGrid.protobuf(url, {
                interactive: interactive,
                key: accessKey,
                token: accessToken,
                vectorTileLayerStyles: vectorTileLayerStyles,
                getFeatureId: feature => _getFeatureId(feature),
                rendererFactory: L.canvas.tile,
                ...rest
            });
        }
        vectorGrid.on('mouseover', (e) => {
            const {
                properties
            } = e.layer;
            _propagateEvent(onMouseover, e);
            let st;
            const featureId = _getFeatureId(e.layer);
            if (isFunction(hoverStyle)) {
                st = hoverStyle(properties);
            } else if (isObject(hoverStyle)) {
                st = cloneDeep(hoverStyle);
            }
            if (!isEmpty(st) && featureId) {
                clearHighlight(properties);
                highlight.current = featureId;
                const base = cloneDeep(baseStyle(properties));
                const hoverStyle = extend(base, st);
                setFeatureStyle(featureId, hoverStyle);
            }
        })
        .on('mouseout', (e) => {
            const {
                properties
            } = e.layer;
            _propagateEvent(onMouseout, e);
            clearHighlight(properties);
        })
        .on('click', (e) => {
            const {
                properties
            } = e.layer;
            const featureId = _getFeatureId(e.layer);
            _propagateEvent(onClick, e);
            let st;
            if (isFunction(activeStyle)) {
                st = activeStyle(properties);
            } else if (isObject(activeStyle)) {
                st = cloneDeep(activeStyle);
            }
            if (!isEmpty(st) && featureId) {
                clearActive();
                active.current = featureId;
                const base = cloneDeep(baseStyle(properties));
                const activeStyle = extend(base, st);
                setFeatureStyle(featureId, activeStyle);
            }
        })
        .on('dblclick', (e) => {
            _propagateEvent(onDblclick, e);
            clearActive();
        })
        .on('contextmenu', (e) => {
            _propagateEvent(onContextmenu, e);
            clearActive();
        });

        return {
            instance: vectorGrid,
            context
        }
    }, 
    function upgrade(layer, props, prevprops) {
        return updateGridLayer(layer, props, prevprops)
    }
)

export default VectorGrid;

[seospinale]

I am aware this isn't the most elegant solution, but I managed to do this simple react component as a wrapper of leaflet.js, and it works with react-leaflet-v3, so I hope this is helpful for some else out there:

import { useEffect } from "react";
import { useLeafletContext } from "@react-leaflet/core";

import L from "leaflet";

import "leaflet.vectorgrid";

export default function VectorGrid(props) {
const { layerContainer, map } = useLeafletContext();

var url = "http://localhost:8082/river_network/{z}/{x}/{y}.pbf";

let options = {
rendererFactory: L.canvas.tile,
attribution:
'© something',
};

const vectorGrid = L.vectorGrid.protobuf(url, options);

const container = layerContainer || map;

useEffect(() => {
container.addLayer(vectorGrid);
return () => {
container.removeLayer(vectorGrid);
};
}, []);

return null;
}

[tobiRss]

I am aware this isn't the most elegant solution, but I managed to do this simple react component as a wrapper of leaflet.js, and it works with react-leaflet-v3, so I hope this is helpful for some else out there:

import { useEffect } from "react"; import { useLeafletContext } from "@react-leaflet/core";

import L from "leaflet";

import "leaflet.vectorgrid";

export default function VectorGrid(props) { const { layerContainer, map } = useLeafletContext();

var url = "http://localhost:8082/river_network/{z}/{x}/{y}.pbf";

let options = { rendererFactory: L.canvas.tile, attribution: '© something', };

const vectorGrid = L.vectorGrid.protobuf(url, options);

const container = layerContainer || map;

useEffect(() => { container.addLayer(vectorGrid); return () => { container.removeLayer(vectorGrid); }; }, []);

return null; }

You are a lifesaver, thank you!
One minor thing, I needed to add this line to my index.html

<script src="https://unpkg.com/leaflet.vectorgrid@latest/dist/Leaflet.VectorGrid.bundled.js"></script>

[flacoman91]

Do any of you know what else needs to be done for this to work with leaflet 1.8, react-leaflet 4.0 and react 18 ?

[jhoanborges]

Do any of you know what else needs to be done for this to work with leaflet 1.8, react-leaflet 4.0 and react 18 ?

+1

[CrazyKidJack]

Do any of you know what else needs to be done for this to work with leaflet 1.8, react-leaflet 4.0 and react 18 ?

+1

[flacoman91]

I created a sample project using create react app that has these working. I hope this helps.
https://github.com/flacoman91/react-18-vector-grid-example

The most confusing part for me was understanding the new contexts and the functional component syntax.

You can probably hack around and follow the examples from leaflet vectorgrid here
https://github.com/Leaflet/Leaflet.VectorGrid

[CrazyKidJack]

I created a sample project using create react app that has these working. I hope this helps. https://github.com/flacoman91/react-18-vector-grid-example

The most confusing part for me was understanding the new contexts and the functional component syntax.

You can probably hack around and follow the examples from leaflet vectorgrid here https://github.com/Leaflet/Leaflet.VectorGrid

Thank you so much for this! I have a couple of questions if you don't mind:

1. Why do you have react-leaflet-vectorgrid in your package.json if you included your own rewritten version?
2. Looking at your VectorGris.js, am I correct to conclude that you have not implemented the entire react-leaflet-vectorgrid wrapper, only the part for loading pre-created tiles from a tile server (protobuf)
3. I see in other people's previous comments that they had to do some extra work to make things like popups and tooltips work... does your code support those things? Or no would I need to make those work myself?