react-leaflet-milsymbol/dist/react-leaflet-milsymbol.es.js

A React Leaflet v4 wrapper for the milsymbol library

import { jsxs, jsx } from "react/jsx-runtime";
import { useMemo, useRef, useEffect } from "react";
import { Marker, Tooltip, Popup } from "react-leaflet";
import { DivIcon } from "leaflet";
import ms from "milsymbol";
const useMilSymbol = (sidc, options = {}) => {
  return useMemo(() => {
    return new ms.Symbol(sidc, {
      size: options.size ?? 35,
      ...options
    });
  }, [options, sidc]);
};
const MilSymbol = ({
  position,
  sidc,
  size = 35,
  options = {},
  tooltipContent,
  popupContent,
  eventHandlers
}) => {
  const markerRef = useRef(null);
  const milSymbol = useMilSymbol(sidc, { size, ...options });
  const divIcon = useMemo(() => new DivIcon({
    html: milSymbol.asDOM(),
    className: "",
    iconSize: [milSymbol.getSize().width, milSymbol.getSize().height],
    iconAnchor: [milSymbol.getAnchor().x, milSymbol.getAnchor().y]
  }), [milSymbol]);
  useEffect(() => {
    if (markerRef.current) {
      markerRef.current.setIcon(divIcon);
    }
  }, [divIcon, sidc, size, options]);
  return /* @__PURE__ */ jsxs(
    Marker,
    {
      position,
      icon: divIcon,
      ref: markerRef,
      eventHandlers,
      children: [
        tooltipContent && /* @__PURE__ */ jsx(Tooltip, { children: tooltipContent }),
        popupContent && /* @__PURE__ */ jsx(Popup, { children: popupContent })
      ]
    }
  );
};
export {
  MilSymbol,
  useMilSymbol
};
//# sourceMappingURL=react-leaflet-milsymbol.es.js.map