gistda-sphere-react 1.0.0

package/dist/index.mjs

@@ -0,0 +1,2013 @@
+// src/components/Circle.tsx
+import { forwardRef, useEffect as useEffect2, useImperativeHandle, useRef as useRef2 } from "react";
+
+// src/context/MapContext.tsx
+import { createContext, useContext, useMemo } from "react";
+import { jsx } from "react/jsx-runtime";
+var MapContext = createContext(null);
+function MapProvider({
+  map,
+  isReady,
+  children
+}) {
+  const value = useMemo(
+    () => ({ map, isReady }),
+    [map, isReady]
+  );
+  return /* @__PURE__ */ jsx(MapContext.Provider, { value, children });
+}
+function useMapContext() {
+  const context = useContext(MapContext);
+  if (!context) {
+    throw new Error("useMapContext must be used within a SphereMap component");
+  }
+  return context;
+}
+
+// src/context/SphereContext.tsx
+import {
+  createContext as createContext2,
+  useCallback,
+  useContext as useContext2,
+  useEffect,
+  useMemo as useMemo2,
+  useRef,
+  useState
+} from "react";
+import { jsx as jsx2 } from "react/jsx-runtime";
+var SphereContext = createContext2(null);
+var SCRIPT_ID = "gistda-sphere-api-script";
+var scriptLoadingPromise = null;
+function loadSphereScript(apiKey, customUrl) {
+  if (scriptLoadingPromise) {
+    return scriptLoadingPromise;
+  }
+  const existingScript = document.getElementById(SCRIPT_ID);
+  if (existingScript) {
+    if (window.sphere) {
+      return Promise.resolve();
+    }
+    existingScript.remove();
+  }
+  scriptLoadingPromise = new Promise((resolve, reject) => {
+    const script = document.createElement("script");
+    script.id = SCRIPT_ID;
+    script.type = "text/javascript";
+    script.src = customUrl || `https://api.sphere.gistda.or.th/map/?key=${apiKey}`;
+    script.async = true;
+    script.onload = () => {
+      setTimeout(() => {
+        if (window.sphere) {
+          resolve();
+        } else {
+          reject(
+            new Error("Sphere API loaded but window.sphere is not available")
+          );
+        }
+      }, 0);
+    };
+    script.onerror = () => {
+      script.remove();
+      scriptLoadingPromise = null;
+      reject(
+        new Error(
+          "Failed to load Sphere API script. This may be due to domain restrictions. Ensure your API key is registered for your domain at https://sphere.gistda.or.th/"
+        )
+      );
+    };
+    document.head.appendChild(script);
+  });
+  return scriptLoadingPromise;
+}
+function SphereProvider({
+  apiKey,
+  children,
+  scriptUrl,
+  onLoad,
+  onError
+}) {
+  const [isLoaded, setIsLoaded] = useState(false);
+  const [error, setError] = useState(null);
+  const [sphere, setSphere] = useState(null);
+  const [map, setMap] = useState(null);
+  const [isMapReady, setIsMapReady] = useState(false);
+  const mapRef = useRef(null);
+  const handleLoad = useCallback(() => {
+    setIsLoaded(true);
+    setSphere(window.sphere ?? null);
+    onLoad?.();
+  }, [onLoad]);
+  const handleError = useCallback(
+    (err) => {
+      setError(err);
+      onError?.(err);
+    },
+    [onError]
+  );
+  useEffect(() => {
+    if (window.sphere) {
+      handleLoad();
+      return;
+    }
+    loadSphereScript(apiKey, scriptUrl).then(handleLoad).catch(handleError);
+  }, [apiKey, scriptUrl, handleLoad, handleError]);
+  const registerMap = useCallback((newMap) => {
+    mapRef.current = newMap;
+    setMap(newMap);
+    setIsMapReady(true);
+  }, []);
+  const unregisterMap = useCallback(() => {
+    mapRef.current = null;
+    setMap(null);
+    setIsMapReady(false);
+  }, []);
+  const goTo = useCallback((options, animate = true) => {
+    mapRef.current?.goTo(options, animate);
+  }, []);
+  const setCenter = useCallback((location, animate = true) => {
+    mapRef.current?.location(location, animate);
+  }, []);
+  const setZoom = useCallback((zoom, animate = true) => {
+    mapRef.current?.zoom(zoom, animate);
+  }, []);
+  const setBound = useCallback((bound, options) => {
+    mapRef.current?.bound(bound, options);
+  }, []);
+  const setRotate = useCallback((angle, animate = true) => {
+    mapRef.current?.rotate(angle, animate);
+  }, []);
+  const setPitch = useCallback((angle) => {
+    mapRef.current?.pitch(angle);
+  }, []);
+  const setFilter = useCallback((filter) => {
+    if (mapRef.current && window.sphere) {
+      const filterValue = filter === false ? false : window.sphere.Filter[filter];
+      mapRef.current.enableFilter(filterValue);
+    }
+  }, []);
+  const setLanguage = useCallback((language) => {
+    mapRef.current?.language(language);
+  }, []);
+  const resize = useCallback(() => {
+    mapRef.current?.resize();
+  }, []);
+  const repaint = useCallback(() => {
+    mapRef.current?.repaint();
+  }, []);
+  const setBaseLayer = useCallback((layer) => {
+    const layerValue = window.sphere?.Layers?.[layer];
+    if (mapRef.current && layerValue) {
+      mapRef.current.Layers.setBase(layerValue);
+    }
+  }, []);
+  const addLayer = useCallback((layer) => {
+    const layerValue = window.sphere?.Layers?.[layer];
+    if (mapRef.current && layerValue) {
+      mapRef.current.Layers.add(layerValue);
+    }
+  }, []);
+  const removeLayer = useCallback((layer) => {
+    const layerValue = window.sphere?.Layers?.[layer];
+    if (mapRef.current && layerValue) {
+      mapRef.current.Layers.remove(layerValue);
+    }
+  }, []);
+  const controls = useMemo2(
+    () => ({
+      isReady: isMapReady && sphere !== null,
+      goTo,
+      setCenter,
+      setZoom,
+      setBound,
+      setRotate,
+      setPitch,
+      setFilter,
+      setLanguage,
+      setBaseLayer,
+      addLayer,
+      removeLayer,
+      resize,
+      repaint
+    }),
+    [
+      isMapReady,
+      sphere,
+      goTo,
+      setCenter,
+      setZoom,
+      setBound,
+      setRotate,
+      setPitch,
+      setFilter,
+      setLanguage,
+      setBaseLayer,
+      addLayer,
+      removeLayer,
+      resize,
+      repaint
+    ]
+  );
+  const contextValue = useMemo2(
+    () => ({
+      isLoaded,
+      error,
+      sphere,
+      apiKey,
+      map,
+      isMapReady,
+      controls,
+      registerMap,
+      unregisterMap
+    }),
+    [
+      isLoaded,
+      error,
+      sphere,
+      apiKey,
+      map,
+      isMapReady,
+      controls,
+      registerMap,
+      unregisterMap
+    ]
+  );
+  return /* @__PURE__ */ jsx2(SphereContext.Provider, { value: contextValue, children });
+}
+function useSphereContext() {
+  const context = useContext2(SphereContext);
+  if (!context) {
+    throw new Error("useSphereContext must be used within a SphereProvider");
+  }
+  return context;
+}
+function useMap() {
+  const { map, isMapReady, sphere } = useSphereContext();
+  return { map, sphere, isReady: isMapReady && sphere !== null };
+}
+function useMapControls() {
+  const { controls } = useSphereContext();
+  return controls;
+}
+
+// src/components/Circle.tsx
+var Circle = forwardRef(function Circle2({
+  center,
+  radius,
+  title,
+  detail,
+  popup,
+  visibleRange,
+  lineWidth,
+  lineColor,
+  fillColor,
+  lineStyle,
+  clickable,
+  draggable,
+  zIndex,
+  onClick,
+  onDrag,
+  onDrop
+}, ref) {
+  const { map, isReady } = useMapContext();
+  const { sphere } = useSphereContext();
+  const circleRef = useRef2(null);
+  const callbacksRef = useRef2({ onClick, onDrag, onDrop });
+  useEffect2(() => {
+    callbacksRef.current = { onClick, onDrag, onDrop };
+  }, [onClick, onDrag, onDrop]);
+  useEffect2(() => {
+    if (!(isReady && map && sphere)) {
+      return;
+    }
+    const options = {};
+    if (title) {
+      options.title = title;
+    }
+    if (detail) {
+      options.detail = detail;
+    }
+    if (popup) {
+      options.popup = popup;
+    }
+    if (visibleRange) {
+      options.visibleRange = visibleRange;
+    }
+    if (typeof lineWidth === "number") {
+      options.lineWidth = lineWidth;
+    }
+    if (lineColor) {
+      options.lineColor = lineColor;
+    }
+    if (fillColor) {
+      options.fillColor = fillColor;
+    }
+    if (lineStyle) {
+      options.lineStyle = lineStyle;
+    }
+    if (typeof clickable === "boolean") {
+      options.clickable = clickable;
+    }
+    if (typeof draggable === "boolean") {
+      options.draggable = draggable;
+    }
+    if (typeof zIndex === "number") {
+      options.zIndex = zIndex;
+    }
+    const circle = new sphere.Circle(center, radius, options);
+    circleRef.current = circle;
+    map.Overlays.add(circle);
+    const handleOverlayClick = (data) => {
+      if (data.overlay === circle) {
+        callbacksRef.current.onClick?.(circle);
+      }
+    };
+    const handleOverlayDrag = (overlay) => {
+      if (overlay === circle) {
+        callbacksRef.current.onDrag?.(circle);
+      }
+    };
+    const handleOverlayDrop = (overlay) => {
+      if (overlay === circle) {
+        callbacksRef.current.onDrop?.(circle);
+      }
+    };
+    map.Event.bind("overlayClick", handleOverlayClick);
+    map.Event.bind("overlayDrag", handleOverlayDrag);
+    map.Event.bind("overlayDrop", handleOverlayDrop);
+    return () => {
+      map.Event.unbind("overlayClick", handleOverlayClick);
+      map.Event.unbind("overlayDrag", handleOverlayDrag);
+      map.Event.unbind("overlayDrop", handleOverlayDrop);
+      map.Overlays.remove(circle);
+      circleRef.current = null;
+    };
+  }, [
+    isReady,
+    map,
+    sphere,
+    center,
+    radius,
+    title,
+    detail,
+    popup,
+    visibleRange,
+    lineWidth,
+    lineColor,
+    fillColor,
+    lineStyle,
+    clickable,
+    draggable,
+    zIndex
+  ]);
+  useImperativeHandle(
+    ref,
+    () => ({
+      getCircle: () => circleRef.current,
+      togglePopup: (show, location) => {
+        circleRef.current?.pop(show, location);
+      },
+      getCenter: () => circleRef.current?.location() ?? null,
+      getBound: () => circleRef.current?.bound() ?? null,
+      getArea: (language) => circleRef.current?.size(language) ?? null,
+      getRadius: (language) => circleRef.current?.radius(language) ?? null,
+      updateStyle: (options) => {
+        circleRef.current?.update(options);
+      }
+    }),
+    []
+  );
+  return null;
+});
+
+// src/components/Dot.tsx
+import { forwardRef as forwardRef2, useEffect as useEffect3, useImperativeHandle as useImperativeHandle2, useRef as useRef3 } from "react";
+var Dot = forwardRef2(function Dot2({
+  position,
+  title,
+  detail,
+  visibleRange,
+  lineWidth,
+  lineColor,
+  clickable,
+  draggable,
+  zIndex,
+  onClick,
+  onDrag,
+  onDrop
+}, ref) {
+  const { map, isReady } = useMapContext();
+  const { sphere } = useSphereContext();
+  const dotRef = useRef3(null);
+  const callbacksRef = useRef3({ onClick, onDrag, onDrop });
+  useEffect3(() => {
+    callbacksRef.current = { onClick, onDrag, onDrop };
+  }, [onClick, onDrag, onDrop]);
+  useEffect3(() => {
+    if (!(isReady && map && sphere)) {
+      return;
+    }
+    const options = {};
+    if (title) {
+      options.title = title;
+    }
+    if (detail) {
+      options.detail = detail;
+    }
+    if (visibleRange) {
+      options.visibleRange = visibleRange;
+    }
+    if (typeof lineWidth === "number") {
+      options.lineWidth = lineWidth;
+    }
+    if (lineColor) {
+      options.lineColor = lineColor;
+    }
+    if (typeof clickable === "boolean") {
+      options.clickable = clickable;
+    }
+    if (typeof draggable === "boolean") {
+      options.draggable = draggable;
+    }
+    if (typeof zIndex === "number") {
+      options.zIndex = zIndex;
+    }
+    const dot = new sphere.Dot(position, options);
+    dotRef.current = dot;
+    map.Overlays.add(dot);
+    const handleOverlayClick = (data) => {
+      if (data.overlay === dot) {
+        callbacksRef.current.onClick?.(dot);
+      }
+    };
+    const handleOverlayDrag = (overlay) => {
+      if (overlay === dot) {
+        callbacksRef.current.onDrag?.(dot);
+      }
+    };
+    const handleOverlayDrop = (overlay) => {
+      if (overlay === dot) {
+        const newLocation = dot.location();
+        callbacksRef.current.onDrop?.(dot, newLocation);
+      }
+    };
+    map.Event.bind("overlayClick", handleOverlayClick);
+    map.Event.bind("overlayDrag", handleOverlayDrag);
+    map.Event.bind("overlayDrop", handleOverlayDrop);
+    return () => {
+      map.Event.unbind("overlayClick", handleOverlayClick);
+      map.Event.unbind("overlayDrag", handleOverlayDrag);
+      map.Event.unbind("overlayDrop", handleOverlayDrop);
+      map.Overlays.remove(dot);
+      dotRef.current = null;
+    };
+  }, [
+    isReady,
+    map,
+    sphere,
+    position,
+    title,
+    detail,
+    visibleRange,
+    lineWidth,
+    lineColor,
+    clickable,
+    draggable,
+    zIndex
+  ]);
+  useImperativeHandle2(
+    ref,
+    () => ({
+      getDot: () => dotRef.current,
+      setPosition: (location) => {
+        dotRef.current?.location(location);
+      },
+      getPosition: () => dotRef.current?.location() ?? null
+    }),
+    []
+  );
+  return null;
+});
+
+// src/components/Layer.tsx
+import { useEffect as useEffect4, useRef as useRef4 } from "react";
+function Layer({
+  name,
+  preset,
+  isBase = false,
+  type,
+  url,
+  zoomRange,
+  source,
+  opacity,
+  zIndex,
+  bound,
+  attribution,
+  extraQuery,
+  id,
+  format,
+  srs,
+  tileMatrixPrefix,
+  styles,
+  version,
+  refresh,
+  zoomOffset,
+  beforeId
+}) {
+  const { map, isReady } = useMapContext();
+  const { sphere } = useSphereContext();
+  const layerRef = useRef4(null);
+  useEffect4(() => {
+    if (!(isReady && map && sphere)) {
+      return;
+    }
+    let layer = null;
+    if (preset && sphere.Layers[preset]) {
+      layer = sphere.Layers[preset];
+    } else if (name) {
+      const options = {};
+      if (type) {
+        options.type = type;
+      }
+      if (url) {
+        options.url = url;
+      }
+      if (zoomRange) {
+        options.zoomRange = zoomRange;
+      }
+      if (source) {
+        options.source = source;
+      }
+      if (typeof opacity === "number") {
+        options.opacity = opacity;
+      }
+      if (typeof zIndex === "number") {
+        options.zIndex = zIndex;
+      }
+      if (bound) {
+        options.bound = bound;
+      }
+      if (attribution) {
+        options.attribution = attribution;
+      }
+      if (extraQuery) {
+        options.extraQuery = extraQuery;
+      }
+      if (id) {
+        options.id = id;
+      }
+      if (format) {
+        options.format = format;
+      }
+      if (srs) {
+        options.srs = srs;
+      }
+      if (tileMatrixPrefix) {
+        options.tileMatrixPrefix = tileMatrixPrefix;
+      }
+      if (styles) {
+        options.styles = styles;
+      }
+      if (version) {
+        options.version = version;
+      }
+      if (typeof refresh === "number") {
+        options.refresh = refresh;
+      }
+      if (typeof zoomOffset === "number") {
+        options.zoomOffset = zoomOffset;
+      }
+      layer = new sphere.Layer(name, options);
+    } else {
+      return;
+    }
+    layerRef.current = layer;
+    if (isBase) {
+      map.Layers.setBase(layer);
+    } else {
+      map.Layers.add(layer, beforeId);
+    }
+    return () => {
+      if (!isBase && layerRef.current) {
+        map.Layers.remove(layerRef.current);
+      }
+      layerRef.current = null;
+    };
+  }, [
+    isReady,
+    map,
+    sphere,
+    name,
+    preset,
+    isBase,
+    type,
+    url,
+    zoomRange,
+    source,
+    opacity,
+    zIndex,
+    bound,
+    attribution,
+    extraQuery,
+    id,
+    format,
+    srs,
+    tileMatrixPrefix,
+    styles,
+    version,
+    refresh,
+    zoomOffset,
+    beforeId
+  ]);
+  return null;
+}
+
+// src/components/Marker.tsx
+import { forwardRef as forwardRef3, useEffect as useEffect5, useImperativeHandle as useImperativeHandle3, useRef as useRef5 } from "react";
+var Marker = forwardRef3(function Marker2({
+  position,
+  icon,
+  title,
+  detail,
+  popup,
+  visibleRange,
+  clickable,
+  draggable,
+  zIndex,
+  rotate,
+  onClick,
+  onDrag,
+  onDrop,
+  onHover,
+  onLeave
+}, ref) {
+  const { map, isReady } = useMapContext();
+  const { sphere } = useSphereContext();
+  const markerRef = useRef5(null);
+  const callbacksRef = useRef5({ onClick, onDrag, onDrop, onHover, onLeave });
+  useEffect5(() => {
+    callbacksRef.current = { onClick, onDrag, onDrop, onHover, onLeave };
+  }, [onClick, onDrag, onDrop, onHover, onLeave]);
+  useEffect5(() => {
+    if (!(isReady && map && sphere)) {
+      return;
+    }
+    const options = {};
+    if (icon) {
+      options.icon = icon;
+    }
+    if (title) {
+      options.title = title;
+    }
+    if (detail) {
+      options.detail = detail;
+    }
+    if (popup) {
+      options.popup = popup;
+    }
+    if (visibleRange) {
+      options.visibleRange = visibleRange;
+    }
+    if (typeof clickable === "boolean") {
+      options.clickable = clickable;
+    }
+    if (typeof draggable === "boolean") {
+      options.draggable = draggable;
+    }
+    if (typeof zIndex === "number") {
+      options.zIndex = zIndex;
+    }
+    if (typeof rotate === "number") {
+      options.rotate = rotate;
+    }
+    const marker = new sphere.Marker(position, options);
+    markerRef.current = marker;
+    map.Overlays.add(marker);
+    const handleOverlayClick = (data) => {
+      if (data.overlay === marker) {
+        callbacksRef.current.onClick?.(marker);
+      }
+    };
+    const handleOverlayDrag = (overlay) => {
+      if (overlay === marker) {
+        callbacksRef.current.onDrag?.(marker);
+      }
+    };
+    const handleOverlayDrop = (overlay) => {
+      if (overlay === marker) {
+        const newLocation = marker.location();
+        callbacksRef.current.onDrop?.(marker, newLocation);
+      }
+    };
+    const handleOverlayHover = (overlay) => {
+      if (overlay === marker) {
+        callbacksRef.current.onHover?.(marker);
+      }
+    };
+    const handleOverlayLeave = (overlay) => {
+      if (overlay === marker) {
+        callbacksRef.current.onLeave?.(marker);
+      }
+    };
+    map.Event.bind("overlayClick", handleOverlayClick);
+    map.Event.bind("overlayDrag", handleOverlayDrag);
+    map.Event.bind("overlayDrop", handleOverlayDrop);
+    map.Event.bind("overlayHover", handleOverlayHover);
+    map.Event.bind("overlayLeave", handleOverlayLeave);
+    return () => {
+      map.Event.unbind("overlayClick", handleOverlayClick);
+      map.Event.unbind("overlayDrag", handleOverlayDrag);
+      map.Event.unbind("overlayDrop", handleOverlayDrop);
+      map.Event.unbind("overlayHover", handleOverlayHover);
+      map.Event.unbind("overlayLeave", handleOverlayLeave);
+      map.Overlays.remove(marker);
+      markerRef.current = null;
+    };
+  }, [
+    isReady,
+    map,
+    sphere,
+    position,
+    icon,
+    title,
+    detail,
+    popup,
+    visibleRange,
+    clickable,
+    draggable,
+    zIndex,
+    rotate
+  ]);
+  useEffect5(() => {
+    if (markerRef.current && position) {
+      markerRef.current.location(position, false);
+    }
+  }, [position]);
+  useEffect5(() => {
+    if (markerRef.current && typeof rotate === "number") {
+      markerRef.current.update({ rotate });
+    }
+  }, [rotate]);
+  useImperativeHandle3(
+    ref,
+    () => ({
+      getMarker: () => markerRef.current,
+      togglePopup: (show) => {
+        markerRef.current?.pop(show);
+      },
+      setPosition: (location, animate = false) => {
+        markerRef.current?.location(location, animate);
+      },
+      setRotation: (angle) => {
+        markerRef.current?.update({ rotate: angle });
+      }
+    }),
+    []
+  );
+  return null;
+});
+
+// src/components/Polygon.tsx
+import { forwardRef as forwardRef4, useEffect as useEffect6, useImperativeHandle as useImperativeHandle4, useRef as useRef6 } from "react";
+var Polygon = forwardRef4(function Polygon2({
+  positions,
+  title,
+  detail,
+  label,
+  labelOptions,
+  popup,
+  visibleRange,
+  lineWidth,
+  lineColor,
+  fillColor,
+  lineStyle,
+  pivot,
+  clickable,
+  draggable,
+  pointer,
+  zIndex,
+  editable,
+  onClick,
+  onDrag,
+  onDrop
+}, ref) {
+  const { map, isReady } = useMapContext();
+  const { sphere } = useSphereContext();
+  const polygonRef = useRef6(null);
+  const callbacksRef = useRef6({ onClick, onDrag, onDrop });
+  useEffect6(() => {
+    callbacksRef.current = { onClick, onDrag, onDrop };
+  }, [onClick, onDrag, onDrop]);
+  useEffect6(() => {
+    if (!(isReady && map && sphere) || positions.length < 3) {
+      return;
+    }
+    const options = {};
+    if (title) {
+      options.title = title;
+    }
+    if (detail) {
+      options.detail = detail;
+    }
+    if (label) {
+      options.label = label;
+    }
+    if (labelOptions) {
+      options.labelOptions = labelOptions;
+    }
+    if (popup) {
+      options.popup = popup;
+    }
+    if (visibleRange) {
+      options.visibleRange = visibleRange;
+    }
+    if (typeof lineWidth === "number") {
+      options.lineWidth = lineWidth;
+    }
+    if (lineColor) {
+      options.lineColor = lineColor;
+    }
+    if (fillColor) {
+      options.fillColor = fillColor;
+    }
+    if (lineStyle) {
+      options.lineStyle = lineStyle;
+    }
+    if (pivot) {
+      options.pivot = pivot;
+    }
+    if (typeof clickable === "boolean") {
+      options.clickable = clickable;
+    }
+    if (typeof draggable === "boolean") {
+      options.draggable = draggable;
+    }
+    if (typeof pointer === "boolean") {
+      options.pointer = pointer;
+    }
+    if (typeof zIndex === "number") {
+      options.zIndex = zIndex;
+    }
+    if (typeof editable === "boolean") {
+      options.editable = editable;
+    }
+    const polygon = new sphere.Polygon(positions, options);
+    polygonRef.current = polygon;
+    map.Overlays.add(polygon);
+    const handleOverlayClick = (data) => {
+      if (data.overlay === polygon) {
+        callbacksRef.current.onClick?.(polygon);
+      }
+    };
+    const handleOverlayDrag = (overlay) => {
+      if (overlay === polygon) {
+        callbacksRef.current.onDrag?.(polygon);
+      }
+    };
+    const handleOverlayDrop = (overlay) => {
+      if (overlay === polygon) {
+        callbacksRef.current.onDrop?.(polygon);
+      }
+    };
+    map.Event.bind("overlayClick", handleOverlayClick);
+    map.Event.bind("overlayDrag", handleOverlayDrag);
+    map.Event.bind("overlayDrop", handleOverlayDrop);
+    return () => {
+      map.Event.unbind("overlayClick", handleOverlayClick);
+      map.Event.unbind("overlayDrag", handleOverlayDrag);
+      map.Event.unbind("overlayDrop", handleOverlayDrop);
+      map.Overlays.remove(polygon);
+      polygonRef.current = null;
+    };
+  }, [
+    isReady,
+    map,
+    sphere,
+    positions,
+    title,
+    detail,
+    label,
+    labelOptions,
+    popup,
+    visibleRange,
+    lineWidth,
+    lineColor,
+    fillColor,
+    lineStyle,
+    pivot,
+    clickable,
+    draggable,
+    pointer,
+    zIndex,
+    editable
+  ]);
+  useImperativeHandle4(
+    ref,
+    () => ({
+      getPolygon: () => polygonRef.current,
+      togglePopup: (show, location) => {
+        polygonRef.current?.pop(show, location);
+      },
+      getPivot: () => polygonRef.current?.pivot() ?? null,
+      getCentroid: () => polygonRef.current?.centroid() ?? null,
+      getBound: () => polygonRef.current?.bound() ?? null,
+      getArea: (language) => polygonRef.current?.size(language) ?? null,
+      rotate: (angle) => {
+        polygonRef.current?.rotate(angle);
+      },
+      updateStyle: (options) => {
+        polygonRef.current?.update(options);
+      },
+      toGeoJSON: () => polygonRef.current?.toJSON() ?? null
+    }),
+    []
+  );
+  return null;
+});
+
+// src/components/Polyline.tsx
+import { forwardRef as forwardRef5, useEffect as useEffect7, useImperativeHandle as useImperativeHandle5, useRef as useRef7 } from "react";
+var Polyline = forwardRef5(
+  function Polyline2({
+    positions,
+    title,
+    detail,
+    label,
+    labelOptions,
+    popup,
+    visibleRange,
+    lineWidth,
+    lineColor,
+    lineStyle,
+    pivot,
+    clickable,
+    draggable,
+    pointer,
+    zIndex,
+    onClick,
+    onDrag,
+    onDrop
+  }, ref) {
+    const { map, isReady } = useMapContext();
+    const { sphere } = useSphereContext();
+    const polylineRef = useRef7(null);
+    const callbacksRef = useRef7({ onClick, onDrag, onDrop });
+    useEffect7(() => {
+      callbacksRef.current = { onClick, onDrag, onDrop };
+    }, [onClick, onDrag, onDrop]);
+    useEffect7(() => {
+      if (!(isReady && map && sphere) || positions.length < 2) {
+        return;
+      }
+      const options = {};
+      if (title) {
+        options.title = title;
+      }
+      if (detail) {
+        options.detail = detail;
+      }
+      if (label) {
+        options.label = label;
+      }
+      if (labelOptions) {
+        options.labelOptions = labelOptions;
+      }
+      if (popup) {
+        options.popup = popup;
+      }
+      if (visibleRange) {
+        options.visibleRange = visibleRange;
+      }
+      if (typeof lineWidth === "number") {
+        options.lineWidth = lineWidth;
+      }
+      if (lineColor) {
+        options.lineColor = lineColor;
+      }
+      if (lineStyle) {
+        options.lineStyle = lineStyle;
+      }
+      if (pivot) {
+        options.pivot = pivot;
+      }
+      if (typeof clickable === "boolean") {
+        options.clickable = clickable;
+      }
+      if (typeof draggable === "boolean") {
+        options.draggable = draggable;
+      }
+      if (typeof pointer === "boolean") {
+        options.pointer = pointer;
+      }
+      if (typeof zIndex === "number") {
+        options.zIndex = zIndex;
+      }
+      const polyline = new sphere.Polyline(positions, options);
+      polylineRef.current = polyline;
+      map.Overlays.add(polyline);
+      const handleOverlayClick = (data) => {
+        if (data.overlay === polyline) {
+          callbacksRef.current.onClick?.(polyline);
+        }
+      };
+      const handleOverlayDrag = (overlay) => {
+        if (overlay === polyline) {
+          callbacksRef.current.onDrag?.(polyline);
+        }
+      };
+      const handleOverlayDrop = (overlay) => {
+        if (overlay === polyline) {
+          callbacksRef.current.onDrop?.(polyline);
+        }
+      };
+      map.Event.bind("overlayClick", handleOverlayClick);
+      map.Event.bind("overlayDrag", handleOverlayDrag);
+      map.Event.bind("overlayDrop", handleOverlayDrop);
+      return () => {
+        map.Event.unbind("overlayClick", handleOverlayClick);
+        map.Event.unbind("overlayDrag", handleOverlayDrag);
+        map.Event.unbind("overlayDrop", handleOverlayDrop);
+        map.Overlays.remove(polyline);
+        polylineRef.current = null;
+      };
+    }, [
+      isReady,
+      map,
+      sphere,
+      positions,
+      title,
+      detail,
+      label,
+      labelOptions,
+      popup,
+      visibleRange,
+      lineWidth,
+      lineColor,
+      lineStyle,
+      pivot,
+      clickable,
+      draggable,
+      pointer,
+      zIndex
+    ]);
+    useImperativeHandle5(
+      ref,
+      () => ({
+        getPolyline: () => polylineRef.current,
+        togglePopup: (show, location) => {
+          polylineRef.current?.pop(show, location);
+        },
+        getPivot: () => polylineRef.current?.pivot() ?? null,
+        getCentroid: () => polylineRef.current?.centroid() ?? null,
+        getBound: () => polylineRef.current?.bound() ?? null,
+        getLength: (language) => polylineRef.current?.size(language) ?? null,
+        rotate: (angle) => {
+          polylineRef.current?.rotate(angle);
+        },
+        updateStyle: (options) => {
+          polylineRef.current?.update(options);
+        }
+      }),
+      []
+    );
+    return null;
+  }
+);
+
+// src/components/Popup.tsx
+import { forwardRef as forwardRef6, useEffect as useEffect8, useImperativeHandle as useImperativeHandle6, useRef as useRef8 } from "react";
+var Popup = forwardRef6(function Popup2({
+  position,
+  title,
+  detail,
+  loadDetail,
+  html,
+  loadHtml,
+  size,
+  closable = true,
+  onClose
+}, ref) {
+  const { map, isReady } = useMapContext();
+  const { sphere } = useSphereContext();
+  const popupRef = useRef8(null);
+  const onCloseRef = useRef8(onClose);
+  useEffect8(() => {
+    onCloseRef.current = onClose;
+  }, [onClose]);
+  useEffect8(() => {
+    if (!(isReady && map && sphere)) {
+      return;
+    }
+    const options = {
+      closable
+    };
+    if (title) {
+      options.title = title;
+    }
+    if (detail) {
+      options.detail = detail;
+    }
+    if (loadDetail) {
+      options.loadDetail = loadDetail;
+    }
+    if (html) {
+      options.html = html;
+    }
+    if (loadHtml) {
+      options.loadHtml = loadHtml;
+    }
+    if (size) {
+      options.size = size;
+    }
+    const popup = new sphere.Popup(position, options);
+    popupRef.current = popup;
+    map.Overlays.add(popup);
+    const handlePopupClose = (closedPopup) => {
+      if (closedPopup === popup) {
+        onCloseRef.current?.(popup);
+      }
+    };
+    map.Event.bind("popupClose", handlePopupClose);
+    return () => {
+      map.Event.unbind("popupClose", handlePopupClose);
+      map.Overlays.remove(popup);
+      popupRef.current = null;
+    };
+  }, [
+    isReady,
+    map,
+    sphere,
+    position,
+    title,
+    detail,
+    loadDetail,
+    html,
+    loadHtml,
+    size,
+    closable
+  ]);
+  useImperativeHandle6(
+    ref,
+    () => ({
+      getPopup: () => popupRef.current,
+      setPosition: (location) => {
+        popupRef.current?.location(location);
+      },
+      setTitle: (newTitle) => {
+        popupRef.current?.title(newTitle);
+      },
+      setDetail: (newDetail) => {
+        popupRef.current?.detail(newDetail);
+      },
+      getElement: () => popupRef.current?.element() ?? null
+    }),
+    []
+  );
+  return null;
+});
+
+// src/components/Rectangle.tsx
+import { forwardRef as forwardRef7, useEffect as useEffect9, useImperativeHandle as useImperativeHandle7, useRef as useRef9 } from "react";
+var Rectangle = forwardRef7(
+  function Rectangle2({
+    position,
+    size,
+    title,
+    detail,
+    popup,
+    visibleRange,
+    lineWidth,
+    lineColor,
+    fillColor,
+    lineStyle,
+    clickable,
+    draggable,
+    editable,
+    zIndex,
+    onClick,
+    onDrag,
+    onDrop
+  }, ref) {
+    const { map, isReady } = useMapContext();
+    const { sphere } = useSphereContext();
+    const rectangleRef = useRef9(null);
+    const callbacksRef = useRef9({ onClick, onDrag, onDrop });
+    useEffect9(() => {
+      callbacksRef.current = { onClick, onDrag, onDrop };
+    }, [onClick, onDrag, onDrop]);
+    useEffect9(() => {
+      if (!(isReady && map && sphere)) {
+        return;
+      }
+      const options = {};
+      if (title) {
+        options.title = title;
+      }
+      if (detail) {
+        options.detail = detail;
+      }
+      if (popup) {
+        options.popup = popup;
+      }
+      if (visibleRange) {
+        options.visibleRange = visibleRange;
+      }
+      if (typeof lineWidth === "number") {
+        options.lineWidth = lineWidth;
+      }
+      if (lineColor) {
+        options.lineColor = lineColor;
+      }
+      if (fillColor) {
+        options.fillColor = fillColor;
+      }
+      if (lineStyle) {
+        options.lineStyle = lineStyle;
+      }
+      if (typeof clickable === "boolean") {
+        options.clickable = clickable;
+      }
+      if (typeof draggable === "boolean") {
+        options.draggable = draggable;
+      }
+      if (typeof editable === "boolean") {
+        options.editable = editable;
+      }
+      if (typeof zIndex === "number") {
+        options.zIndex = zIndex;
+      }
+      const rectangle = new sphere.Rectangle(position, size, options);
+      rectangleRef.current = rectangle;
+      map.Overlays.add(rectangle);
+      const handleOverlayClick = (data) => {
+        if (data.overlay === rectangle) {
+          callbacksRef.current.onClick?.(rectangle);
+        }
+      };
+      const handleOverlayDrag = (overlay) => {
+        if (overlay === rectangle) {
+          callbacksRef.current.onDrag?.(rectangle);
+        }
+      };
+      const handleOverlayDrop = (overlay) => {
+        if (overlay === rectangle) {
+          callbacksRef.current.onDrop?.(rectangle);
+        }
+      };
+      map.Event.bind("overlayClick", handleOverlayClick);
+      map.Event.bind("overlayDrag", handleOverlayDrag);
+      map.Event.bind("overlayDrop", handleOverlayDrop);
+      return () => {
+        map.Event.unbind("overlayClick", handleOverlayClick);
+        map.Event.unbind("overlayDrag", handleOverlayDrag);
+        map.Event.unbind("overlayDrop", handleOverlayDrop);
+        map.Overlays.remove(rectangle);
+        rectangleRef.current = null;
+      };
+    }, [
+      isReady,
+      map,
+      sphere,
+      position,
+      size,
+      title,
+      detail,
+      popup,
+      visibleRange,
+      lineWidth,
+      lineColor,
+      fillColor,
+      lineStyle,
+      clickable,
+      draggable,
+      editable,
+      zIndex
+    ]);
+    useImperativeHandle7(
+      ref,
+      () => ({
+        getRectangle: () => rectangleRef.current,
+        togglePopup: (show, location) => {
+          rectangleRef.current?.pop(show, location);
+        },
+        getBound: () => rectangleRef.current?.bound() ?? null,
+        getArea: (language) => rectangleRef.current?.size(language) ?? null,
+        updateStyle: (options) => {
+          rectangleRef.current?.update(options);
+        }
+      }),
+      []
+    );
+    return null;
+  }
+);
+
+// src/components/SphereMap.tsx
+import {
+  forwardRef as forwardRef8,
+  useEffect as useEffect10,
+  useImperativeHandle as useImperativeHandle8,
+  useRef as useRef10,
+  useState as useState2
+} from "react";
+import { jsx as jsx3 } from "react/jsx-runtime";
+var SphereMap = forwardRef8(
+  function SphereMap2({
+    children,
+    zoom = 7,
+    zoomRange,
+    center,
+    language = "th",
+    input = true,
+    lastView = false,
+    ui,
+    filter,
+    rotate,
+    pitch,
+    className,
+    style,
+    id,
+    onReady,
+    onZoom,
+    onLocation,
+    onClick,
+    onDoubleClick,
+    onRotate,
+    onPitch,
+    onDrag,
+    onDrop,
+    onIdle,
+    onMouseMove,
+    onError
+  }, ref) {
+    const containerRef = useRef10(null);
+    const mapRef = useRef10(null);
+    const [isReady, setIsReady] = useState2(false);
+    const { sphere, isLoaded, registerMap, unregisterMap } = useSphereContext();
+    const callbacksRef = useRef10({
+      onReady,
+      onZoom,
+      onLocation,
+      onClick,
+      onDoubleClick,
+      onRotate,
+      onPitch,
+      onDrag,
+      onDrop,
+      onIdle,
+      onMouseMove,
+      onError
+    });
+    useEffect10(() => {
+      callbacksRef.current = {
+        onReady,
+        onZoom,
+        onLocation,
+        onClick,
+        onDoubleClick,
+        onRotate,
+        onPitch,
+        onDrag,
+        onDrop,
+        onIdle,
+        onMouseMove,
+        onError
+      };
+    });
+    const initialPropsRef = useRef10({
+      zoom,
+      zoomRange,
+      center,
+      language,
+      input,
+      lastView,
+      ui,
+      filter,
+      rotate,
+      pitch
+    });
+    useEffect10(() => {
+      if (!(isLoaded && sphere && containerRef.current)) {
+        return;
+      }
+      const initialProps = initialPropsRef.current;
+      try {
+        const options = {
+          placeholder: containerRef.current,
+          zoom: initialProps.zoom,
+          language: initialProps.language,
+          input: initialProps.input,
+          lastView: initialProps.lastView
+        };
+        if (initialProps.zoomRange) {
+          options.zoomRange = initialProps.zoomRange;
+        }
+        if (initialProps.center) {
+          options.location = initialProps.center;
+        }
+        if (initialProps.ui) {
+          options.ui = initialProps.ui;
+        }
+        const map = new sphere.Map(options);
+        mapRef.current = map;
+        map.Event.bind("ready", () => {
+          setIsReady(true);
+          registerMap(map);
+          if (initialProps.filter && window.sphere) {
+            map.enableFilter(window.sphere.Filter[initialProps.filter]);
+          }
+          if (typeof initialProps.rotate === "number") {
+            map.rotate(initialProps.rotate, false);
+          }
+          if (typeof initialProps.pitch === "number") {
+            map.pitch(initialProps.pitch);
+          }
+          callbacksRef.current.onReady?.(map);
+        });
+        map.Event.bind("zoom", () => {
+          const currentZoom = map.zoom();
+          callbacksRef.current.onZoom?.(currentZoom);
+        });
+        map.Event.bind("location", () => {
+          const currentLocation = map.location();
+          callbacksRef.current.onLocation?.(currentLocation);
+        });
+        map.Event.bind("click", (location) => {
+          callbacksRef.current.onClick?.(location);
+        });
+        map.Event.bind("doubleClick", (location) => {
+          callbacksRef.current.onDoubleClick?.(location);
+        });
+        map.Event.bind("rotate", () => {
+          const angle = map.rotate();
+          callbacksRef.current.onRotate?.(angle);
+        });
+        map.Event.bind("pitch", () => {
+          const angle = map.pitch();
+          callbacksRef.current.onPitch?.(angle);
+        });
+        map.Event.bind("drag", () => {
+          callbacksRef.current.onDrag?.();
+        });
+        map.Event.bind("drop", () => {
+          callbacksRef.current.onDrop?.();
+        });
+        map.Event.bind("idle", () => {
+          callbacksRef.current.onIdle?.();
+        });
+        map.Event.bind("mousemove", (location) => {
+          callbacksRef.current.onMouseMove?.(location);
+        });
+        map.Event.bind("error", (error) => {
+          callbacksRef.current.onError?.(error);
+        });
+      } catch (error) {
+        callbacksRef.current.onError?.(
+          error instanceof Error ? error : new Error(String(error))
+        );
+      }
+      return () => {
+        unregisterMap();
+        mapRef.current = null;
+        setIsReady(false);
+      };
+    }, [isLoaded, sphere, registerMap, unregisterMap]);
+    useImperativeHandle8(
+      ref,
+      () => ({
+        getMap: () => mapRef.current,
+        setZoom: (newZoom, animate = true) => {
+          mapRef.current?.zoom(newZoom, animate);
+        },
+        setCenter: (location, animate = true) => {
+          mapRef.current?.location(location, animate);
+        },
+        setBound: (bound, options) => {
+          mapRef.current?.bound(bound, options);
+        },
+        goTo: (target, animate = true) => {
+          mapRef.current?.goTo(target, animate);
+        },
+        setRotate: (angle, animate = true) => {
+          mapRef.current?.rotate(angle, animate);
+        },
+        setPitch: (angle) => {
+          mapRef.current?.pitch(angle);
+        },
+        setFilter: (newFilter) => {
+          if (mapRef.current && window.sphere) {
+            mapRef.current.enableFilter(window.sphere.Filter[newFilter]);
+          }
+        },
+        resize: () => {
+          mapRef.current?.resize();
+        },
+        repaint: () => {
+          mapRef.current?.repaint();
+        }
+      }),
+      []
+    );
+    const containerStyle = {
+      width: "100%",
+      height: "100%",
+      ...style
+    };
+    return /* @__PURE__ */ jsx3(
+      "div",
+      {
+        className,
+        id,
+        ref: containerRef,
+        style: containerStyle,
+        children: /* @__PURE__ */ jsx3(MapProvider, { isReady, map: mapRef.current, children: isReady && children })
+      }
+    );
+  }
+);
+var SphereMap_default = SphereMap;
+
+// src/hooks/useMapEvent.ts
+import { useEffect as useEffect11, useRef as useRef11 } from "react";
+function useMapEvent(eventName, handler) {
+  const { map, isReady } = useMapContext();
+  const { sphere } = useSphereContext();
+  const handlerRef = useRef11(handler);
+  useEffect11(() => {
+    handlerRef.current = handler;
+  }, [handler]);
+  useEffect11(() => {
+    if (!(isReady && map && sphere)) {
+      return;
+    }
+    const stableHandler = (data) => {
+      return handlerRef.current(data);
+    };
+    map.Event.bind(eventName, stableHandler);
+    return () => {
+      map.Event.unbind(eventName, stableHandler);
+    };
+  }, [map, isReady, sphere, eventName]);
+}
+function useMapReady(handler) {
+  useMapEvent("ready", handler);
+}
+function useMapClick(handler) {
+  useMapEvent("click", handler);
+}
+function useMapZoom(handler) {
+  useMapEvent("zoom", handler);
+}
+function useMapLocation(handler) {
+  useMapEvent("location", handler);
+}
+function useOverlayClick(handler) {
+  useMapEvent("overlayClick", handler);
+}
+
+// src/hooks/useOverlays.ts
+import { useCallback as useCallback2, useMemo as useMemo3, useState as useState3 } from "react";
+function generateId() {
+  return `overlay-${Date.now()}-${Math.random().toString(36).slice(2, 9)}`;
+}
+function useOverlayState() {
+  const [items, setItems] = useState3([]);
+  const add = useCallback2((data) => {
+    const id = data.id ?? generateId();
+    const newItem = { ...data, id };
+    setItems((prev) => [...prev, newItem]);
+    return id;
+  }, []);
+  const update = useCallback2(
+    (id, data) => {
+      setItems(
+        (prev) => prev.map((item) => item.id === id ? { ...item, ...data } : item)
+      );
+    },
+    []
+  );
+  const remove = useCallback2((id) => {
+    setItems((prev) => prev.filter((item) => item.id !== id));
+  }, []);
+  const clear = useCallback2(() => {
+    setItems([]);
+  }, []);
+  const get = useCallback2(
+    (id) => {
+      return items.find((item) => item.id === id);
+    },
+    [items]
+  );
+  return useMemo3(
+    () => ({ items, add, update, remove, clear, get }),
+    [items, add, update, remove, clear, get]
+  );
+}
+function useMarkers() {
+  return useOverlayState();
+}
+function usePolygons() {
+  return useOverlayState();
+}
+function usePolylines() {
+  return useOverlayState();
+}
+function useCircles() {
+  return useOverlayState();
+}
+function useOverlays() {
+  const markers = useMarkers();
+  const polygons = usePolygons();
+  const polylines = usePolylines();
+  const circles = useCircles();
+  const clearAll = useCallback2(() => {
+    markers.clear();
+    polygons.clear();
+    polylines.clear();
+    circles.clear();
+  }, [markers, polygons, polylines, circles]);
+  return useMemo3(
+    () => ({ markers, polygons, polylines, circles, clearAll }),
+    [markers, polygons, polylines, circles, clearAll]
+  );
+}
+
+// src/hooks/useRoute.ts
+import { useCallback as useCallback3, useMemo as useMemo4 } from "react";
+function useRoute() {
+  const { map, isReady } = useMap();
+  const addDestination = useCallback3(
+    (destination, mode) => {
+      map?.Route?.add(destination, mode);
+    },
+    [map]
+  );
+  const insertDestination = useCallback3(
+    (index, destination, mode) => {
+      map?.Route?.insert(index, destination, mode);
+    },
+    [map]
+  );
+  const removeDestination = useCallback3(
+    (destination) => {
+      map?.Route?.remove(destination);
+    },
+    [map]
+  );
+  const removeDestinationAt = useCallback3(
+    (index) => {
+      map?.Route?.removeAt(index);
+    },
+    [map]
+  );
+  const clearDestinations = useCallback3(() => {
+    map?.Route?.clearDestination();
+  }, [map]);
+  const clearPath = useCallback3(() => {
+    map?.Route?.clearPath();
+  }, [map]);
+  const clear = useCallback3(() => {
+    map?.Route?.clear();
+  }, [map]);
+  const reverse = useCallback3(() => {
+    map?.Route?.reverse();
+  }, [map]);
+  const search = useCallback3(() => {
+    map?.Route?.search();
+  }, [map]);
+  const getDistance = useCallback3(
+    (format = false) => {
+      return map?.Route?.distance(format) ?? 0;
+    },
+    [map]
+  );
+  const getInterval = useCallback3(
+    (format = false) => {
+      return map?.Route?.interval(format) ?? 0;
+    },
+    [map]
+  );
+  const getGuide = useCallback3(
+    (format = false) => {
+      const result = map?.Route?.guide(format);
+      return result ?? [];
+    },
+    [map]
+  );
+  const exportRouteLine = useCallback3(
+    (options) => {
+      return map?.Route?.exportRouteLine(options) ?? null;
+    },
+    [map]
+  );
+  const listDestinations = useCallback3(() => {
+    return map?.Route?.list() ?? [];
+  }, [map]);
+  const size = useCallback3(() => {
+    return map?.Route?.size() ?? 0;
+  }, [map]);
+  const setMode = useCallback3(
+    (mode) => {
+      map?.Route?.mode(mode);
+    },
+    [map]
+  );
+  const setModeAt = useCallback3(
+    (index, mode) => {
+      map?.Route?.modeOf(index, mode);
+    },
+    [map]
+  );
+  const enableRouteType = useCallback3(
+    (routeType, state) => {
+      map?.Route?.enableRoute(routeType, state);
+    },
+    [map]
+  );
+  const setLabel = useCallback3(
+    (label) => {
+      map?.Route?.label(label);
+    },
+    [map]
+  );
+  const setAuto = useCallback3(
+    (state) => {
+      map?.Route?.auto(state);
+    },
+    [map]
+  );
+  const setLanguage = useCallback3(
+    (lang) => {
+      map?.Route?.language(lang);
+    },
+    [map]
+  );
+  return useMemo4(
+    () => ({
+      isReady,
+      addDestination,
+      insertDestination,
+      removeDestination,
+      removeDestinationAt,
+      clearDestinations,
+      clearPath,
+      clear,
+      reverse,
+      search,
+      getDistance,
+      getInterval,
+      getGuide,
+      exportRouteLine,
+      listDestinations,
+      size,
+      setMode,
+      setModeAt,
+      enableRouteType,
+      setLabel,
+      setAuto,
+      setLanguage
+    }),
+    [
+      isReady,
+      addDestination,
+      insertDestination,
+      removeDestination,
+      removeDestinationAt,
+      clearDestinations,
+      clearPath,
+      clear,
+      reverse,
+      search,
+      getDistance,
+      getInterval,
+      getGuide,
+      exportRouteLine,
+      listDestinations,
+      size,
+      setMode,
+      setModeAt,
+      enableRouteType,
+      setLabel,
+      setAuto,
+      setLanguage
+    ]
+  );
+}
+
+// src/hooks/useSearch.ts
+import { useCallback as useCallback4, useMemo as useMemo5 } from "react";
+function useSearch() {
+  const { map, isReady } = useMap();
+  const suggest = useCallback4(
+    async (keyword, options) => {
+      if (!map?.Search) {
+        throw new Error("Search API not available");
+      }
+      return await map.Search.suggest(keyword, options);
+    },
+    [map]
+  );
+  const search = useCallback4(
+    async (keyword, options) => {
+      if (!map?.Search) {
+        throw new Error("Search API not available");
+      }
+      return await map.Search.search(keyword, options);
+    },
+    [map]
+  );
+  const address = useCallback4(
+    async (location, options) => {
+      if (!map?.Search) {
+        throw new Error("Search API not available");
+      }
+      return await map.Search.address(location, options);
+    },
+    [map]
+  );
+  const nearPoi = useCallback4(
+    async (location, options) => {
+      if (!map?.Search) {
+        throw new Error("Search API not available");
+      }
+      const result = await map.Search.nearPoi(location, options);
+      return result.data ?? result;
+    },
+    [map]
+  );
+  const clear = useCallback4(() => {
+    map?.Search?.clear();
+  }, [map]);
+  const enablePopup = useCallback4(
+    (state) => {
+      map?.Search?.enablePopup(state);
+    },
+    [map]
+  );
+  const setLanguage = useCallback4(
+    (lang) => {
+      map?.Search?.language(lang);
+    },
+    [map]
+  );
+  return useMemo5(
+    () => ({
+      isReady,
+      suggest,
+      search,
+      address,
+      nearPoi,
+      clear,
+      enablePopup,
+      setLanguage
+    }),
+    [
+      isReady,
+      suggest,
+      search,
+      address,
+      nearPoi,
+      clear,
+      enablePopup,
+      setLanguage
+    ]
+  );
+}
+
+// src/hooks/useSphere.ts
+function useSphere() {
+  const { sphere, isLoaded, error, apiKey } = useSphereContext();
+  return {
+    sphere,
+    isLoaded,
+    error,
+    apiKey
+  };
+}
+
+// src/hooks/useTags.ts
+import { useCallback as useCallback5, useMemo as useMemo6 } from "react";
+var TAG_CATEGORIES = [
+  {
+    name: "Food & Dining",
+    tags: [
+      { id: "\u0E2D\u0E32\u0E2B\u0E32\u0E23\u0E44\u0E17\u0E22", label: "Thai Food" },
+      { id: "\u0E2D\u0E32\u0E2B\u0E32\u0E23\u0E0D\u0E35\u0E48\u0E1B\u0E38\u0E48\u0E19", label: "Japanese" },
+      { id: "\u0E2D\u0E32\u0E2B\u0E32\u0E23\u0E08\u0E35\u0E19", label: "Chinese" },
+      { id: "\u0E2D\u0E32\u0E2B\u0E32\u0E23\u0E40\u0E01\u0E32\u0E2B\u0E25\u0E35", label: "Korean" },
+      { id: "\u0E2D\u0E32\u0E2B\u0E32\u0E23\u0E40\u0E27\u0E35\u0E22\u0E14\u0E19\u0E32\u0E21", label: "Vietnamese" },
+      { id: "\u0E2D\u0E32\u0E2B\u0E32\u0E23\u0E2D\u0E34\u0E19\u0E40\u0E14\u0E35\u0E22", label: "Indian" },
+      { id: "\u0E2D\u0E32\u0E2B\u0E32\u0E23\u0E2D\u0E34\u0E15\u0E32\u0E25\u0E35", label: "Italian" },
+      { id: "\u0E2D\u0E32\u0E2B\u0E32\u0E23\u0E1D\u0E23\u0E31\u0E48\u0E07\u0E40\u0E28\u0E2A", label: "French" },
+      { id: "\u0E2D\u0E32\u0E2B\u0E32\u0E23\u0E40\u0E22\u0E2D\u0E23\u0E21\u0E31\u0E19", label: "German" },
+      { id: "\u0E2D\u0E32\u0E2B\u0E32\u0E23\u0E22\u0E38\u0E42\u0E23\u0E1B", label: "European" }
+    ]
+  },
+  {
+    name: "Services",
+    tags: [
+      { id: "\u0E18\u0E19\u0E32\u0E04\u0E32\u0E23", label: "Bank" },
+      { id: "ATM", label: "ATM" },
+      { id: "\u0E42\u0E23\u0E07\u0E1E\u0E22\u0E32\u0E1A\u0E32\u0E25", label: "Hospital" },
+      { id: "\u0E1B\u0E31\u0E4A\u0E21\u0E19\u0E49\u0E33\u0E21\u0E31\u0E19", label: "Gas Station" }
+    ]
+  },
+  {
+    name: "Tourism",
+    tags: [
+      { id: "\u0E42\u0E23\u0E07\u0E41\u0E23\u0E21", label: "Hotel" },
+      { id: "\u0E27\u0E31\u0E14", label: "Temple" },
+      { id: "\u0E1E\u0E34\u0E1E\u0E34\u0E18\u0E20\u0E31\u0E13\u0E11\u0E4C", label: "Museum" },
+      { id: "\u0E2B\u0E49\u0E32\u0E07\u0E2A\u0E23\u0E23\u0E1E\u0E2A\u0E34\u0E19\u0E04\u0E49\u0E32", label: "Shopping Mall" }
+    ]
+  }
+];
+function useTags() {
+  const { map, isReady } = useMap();
+  const set = useCallback5(
+    (tag, options) => {
+      map?.Tags?.set(tag, options);
+    },
+    [map]
+  );
+  const add = useCallback5(
+    (tag, options) => {
+      map?.Tags?.add(tag, options);
+    },
+    [map]
+  );
+  const remove = useCallback5(
+    (tag) => {
+      map?.Tags?.remove(tag);
+    },
+    [map]
+  );
+  const clear = useCallback5(() => {
+    map?.Tags?.clear();
+  }, [map]);
+  const list = useCallback5(() => {
+    return map?.Tags?.list() ?? [];
+  }, [map]);
+  const size = useCallback5(() => {
+    return map?.Tags?.size() ?? 0;
+  }, [map]);
+  const enablePopup = useCallback5(
+    (state) => {
+      map?.Tags?.enablePopup(state);
+    },
+    [map]
+  );
+  const setLanguage = useCallback5(
+    (lang) => {
+      map?.Tags?.language(lang);
+    },
+    [map]
+  );
+  return useMemo6(
+    () => ({
+      isReady,
+      set,
+      add,
+      remove,
+      clear,
+      list,
+      size,
+      enablePopup,
+      setLanguage
+    }),
+    [isReady, set, add, remove, clear, list, size, enablePopup, setLanguage]
+  );
+}
+export {
+  Circle,
+  Dot,
+  Layer,
+  SphereMap_default as Map,
+  MapProvider,
+  Marker,
+  Polygon,
+  Polyline,
+  Popup,
+  Rectangle,
+  SphereMap,
+  SphereProvider,
+  TAG_CATEGORIES,
+  useCircles,
+  useMap,
+  useMapClick,
+  useMapContext,
+  useMapControls,
+  useMapEvent,
+  useMapLocation,
+  useMapReady,
+  useMapZoom,
+  useMarkers,
+  useOverlayClick,
+  useOverlays,
+  usePolygons,
+  usePolylines,
+  useRoute,
+  useSearch,
+  useSphere,
+  useSphereContext,
+  useTags
+};