react-leaflet/lib/SVGOverlay.js

React components for Leaflet maps

import { createElementHook, createElementObject, createLayerHook, updateMediaOverlay } from '@react-leaflet/core';
import { SVGOverlay as LeafletSVGOverlay } from 'leaflet';
import { forwardRef, useImperativeHandle } from 'react';
import { createPortal } from 'react-dom';
export const useSVGOverlayElement = createElementHook(function createSVGOverlay(props, context) {
    const { attributes, bounds, ...options } = props;
    const container = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
    container.setAttribute('xmlns', 'http://www.w3.org/2000/svg');
    if (attributes != null) {
        for (const name of Object.keys(attributes)){
            container.setAttribute(name, attributes[name]);
        }
    }
    const overlay = new LeafletSVGOverlay(container, bounds, options);
    return createElementObject(overlay, context, container);
}, updateMediaOverlay);
export const useSVGOverlay = createLayerHook(useSVGOverlayElement);
function SVGOverlayComponent({ children, ...options }, forwardedRef) {
    const { instance, container } = useSVGOverlay(options).current;
    useImperativeHandle(forwardedRef, ()=>instance);
    return container == null || children == null ? null : /*#__PURE__*/ createPortal(children, container);
}
export const SVGOverlay = /*#__PURE__*/ forwardRef(SVGOverlayComponent);