You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

24 lines
1.3 KiB

2 years ago
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) {
Object.keys(attributes).forEach((name)=>{
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);