gistda-sphere-react 1.0.0 → 1.0.1

package/dist/index.js

@@ -23,7 +23,7 @@ __export(index_exports, {
   Circle: () => Circle,
   Dot: () => Dot,
   Layer: () => Layer,
-  Map: () => SphereMap_default,
+  Map: () => SphereMap,
   MapProvider: () => MapProvider,
   Marker: () => Marker,
   Polygon: () => Polygon,
@@ -299,9 +299,10 @@ function useMapControls() {
 }
 
 // src/components/Circle.tsx
-var Circle = (0, import_react3.forwardRef)(function Circle2({
+function Circle({
   center,
   radius,
+  ref,
   title,
   detail,
   popup,
@@ -316,7 +317,7 @@ var Circle = (0, import_react3.forwardRef)(function Circle2({
   onClick,
   onDrag,
   onDrop
-}, ref) {
+}) {
   const { map, isReady } = useMapContext();
   const { sphere } = useSphereContext();
   const circleRef = (0, import_react3.useRef)(null);
@@ -426,12 +427,13 @@ var Circle = (0, import_react3.forwardRef)(function Circle2({
     []
   );
   return null;
-});
+}
 
 // src/components/Dot.tsx
 var import_react4 = require("react");
-var Dot = (0, import_react4.forwardRef)(function Dot2({
+function Dot({
   position,
+  ref,
   title,
   detail,
   visibleRange,
@@ -443,7 +445,7 @@ var Dot = (0, import_react4.forwardRef)(function Dot2({
   onClick,
   onDrag,
   onDrop
-}, ref) {
+}) {
   const { map, isReady } = useMapContext();
   const { sphere } = useSphereContext();
   const dotRef = (0, import_react4.useRef)(null);
@@ -535,7 +537,7 @@ var Dot = (0, import_react4.forwardRef)(function Dot2({
     []
   );
   return null;
-});
+}
 
 // src/components/Layer.tsx
 var import_react5 = require("react");
@@ -672,8 +674,9 @@ function Layer({
 
 // src/components/Marker.tsx
 var import_react6 = require("react");
-var Marker = (0, import_react6.forwardRef)(function Marker2({
+function Marker({
   position,
+  ref,
   icon,
   title,
   detail,
@@ -688,7 +691,7 @@ var Marker = (0, import_react6.forwardRef)(function Marker2({
   onDrop,
   onHover,
   onLeave
-}, ref) {
+}) {
   const { map, isReady } = useMapContext();
   const { sphere } = useSphereContext();
   const markerRef = (0, import_react6.useRef)(null);
@@ -813,12 +816,13 @@ var Marker = (0, import_react6.forwardRef)(function Marker2({
     []
   );
   return null;
-});
+}
 
 // src/components/Polygon.tsx
 var import_react7 = require("react");
-var Polygon = (0, import_react7.forwardRef)(function Polygon2({
+function Polygon({
   positions,
+  ref,
   title,
   detail,
   label,
@@ -838,7 +842,7 @@ var Polygon = (0, import_react7.forwardRef)(function Polygon2({
   onClick,
   onDrag,
   onDrop
-}, ref) {
+}) {
   const { map, isReady } = useMapContext();
   const { sphere } = useSphereContext();
   const polygonRef = (0, import_react7.useRef)(null);
@@ -971,12 +975,117 @@ var Polygon = (0, import_react7.forwardRef)(function Polygon2({
     []
   );
   return null;
-});
+}
 
 // src/components/Polyline.tsx
 var import_react8 = require("react");
-var Polyline = (0, import_react8.forwardRef)(
-  function Polyline2({
+function Polyline({
+  positions,
+  ref,
+  title,
+  detail,
+  label,
+  labelOptions,
+  popup,
+  visibleRange,
+  lineWidth,
+  lineColor,
+  lineStyle,
+  pivot,
+  clickable,
+  draggable,
+  pointer,
+  zIndex,
+  onClick,
+  onDrag,
+  onDrop
+}) {
+  const { map, isReady } = useMapContext();
+  const { sphere } = useSphereContext();
+  const polylineRef = (0, import_react8.useRef)(null);
+  const callbacksRef = (0, import_react8.useRef)({ onClick, onDrag, onDrop });
+  (0, import_react8.useEffect)(() => {
+    callbacksRef.current = { onClick, onDrag, onDrop };
+  }, [onClick, onDrag, onDrop]);
+  (0, import_react8.useEffect)(() => {
+    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,
@@ -991,141 +1100,36 @@ var Polyline = (0, import_react8.forwardRef)(
     clickable,
     draggable,
     pointer,
-    zIndex,
-    onClick,
-    onDrag,
-    onDrop
-  }, ref) {
-    const { map, isReady } = useMapContext();
-    const { sphere } = useSphereContext();
-    const polylineRef = (0, import_react8.useRef)(null);
-    const callbacksRef = (0, import_react8.useRef)({ onClick, onDrag, onDrop });
-    (0, import_react8.useEffect)(() => {
-      callbacksRef.current = { onClick, onDrag, onDrop };
-    }, [onClick, onDrag, onDrop]);
-    (0, import_react8.useEffect)(() => {
-      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;
+    zIndex
+  ]);
+  (0, import_react8.useImperativeHandle)(
+    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);
       }
-      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
-    ]);
-    (0, import_react8.useImperativeHandle)(
-      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;
-  }
-);
+    }),
+    []
+  );
+  return null;
+}
 
 // src/components/Popup.tsx
 var import_react9 = require("react");
-var Popup = (0, import_react9.forwardRef)(function Popup2({
+function Popup({
   position,
+  ref,
   title,
   detail,
   loadDetail,
@@ -1134,7 +1138,7 @@ var Popup = (0, import_react9.forwardRef)(function Popup2({
   size,
   closable = true,
   onClose
-}, ref) {
+}) {
   const { map, isReady } = useMapContext();
   const { sphere } = useSphereContext();
   const popupRef = (0, import_react9.useRef)(null);
@@ -1212,12 +1216,110 @@ var Popup = (0, import_react9.forwardRef)(function Popup2({
     []
   );
   return null;
-});
+}
 
 // src/components/Rectangle.tsx
 var import_react10 = require("react");
-var Rectangle = (0, import_react10.forwardRef)(
-  function Rectangle2({
+function Rectangle({
+  position,
+  size,
+  ref,
+  title,
+  detail,
+  popup,
+  visibleRange,
+  lineWidth,
+  lineColor,
+  fillColor,
+  lineStyle,
+  clickable,
+  draggable,
+  editable,
+  zIndex,
+  onClick,
+  onDrag,
+  onDrop
+}) {
+  const { map, isReady } = useMapContext();
+  const { sphere } = useSphereContext();
+  const rectangleRef = (0, import_react10.useRef)(null);
+  const callbacksRef = (0, import_react10.useRef)({ onClick, onDrag, onDrop });
+  (0, import_react10.useEffect)(() => {
+    callbacksRef.current = { onClick, onDrag, onDrop };
+  }, [onClick, onDrag, onDrop]);
+  (0, import_react10.useEffect)(() => {
+    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,
@@ -1231,144 +1333,63 @@ var Rectangle = (0, import_react10.forwardRef)(
     clickable,
     draggable,
     editable,
-    zIndex,
-    onClick,
-    onDrag,
-    onDrop
-  }, ref) {
-    const { map, isReady } = useMapContext();
-    const { sphere } = useSphereContext();
-    const rectangleRef = (0, import_react10.useRef)(null);
-    const callbacksRef = (0, import_react10.useRef)({ onClick, onDrag, onDrop });
-    (0, import_react10.useEffect)(() => {
-      callbacksRef.current = { onClick, onDrag, onDrop };
-    }, [onClick, onDrag, onDrop]);
-    (0, import_react10.useEffect)(() => {
-      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;
+    zIndex
+  ]);
+  (0, import_react10.useImperativeHandle)(
+    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);
       }
-      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
-    ]);
-    (0, import_react10.useImperativeHandle)(
-      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;
-  }
-);
+    }),
+    []
+  );
+  return null;
+}
 
 // src/components/SphereMap.tsx
 var import_react11 = require("react");
 var import_jsx_runtime3 = require("react/jsx-runtime");
-var SphereMap = (0, import_react11.forwardRef)(
-  function SphereMap2({
-    children,
-    zoom = 7,
-    zoomRange,
-    center,
-    language = "th",
-    input = true,
-    lastView = false,
-    ui,
-    filter,
-    rotate,
-    pitch,
-    className,
-    style,
-    id,
+function SphereMap({
+  children,
+  ref,
+  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
+}) {
+  const containerRef = (0, import_react11.useRef)(null);
+  const mapRef = (0, import_react11.useRef)(null);
+  const [isReady, setIsReady] = (0, import_react11.useState)(false);
+  const { sphere, isLoaded, registerMap, unregisterMap } = useSphereContext();
+  const callbacksRef = (0, import_react11.useRef)({
     onReady,
     onZoom,
     onLocation,
@@ -1381,12 +1402,9 @@ var SphereMap = (0, import_react11.forwardRef)(
     onIdle,
     onMouseMove,
     onError
-  }, ref) {
-    const containerRef = (0, import_react11.useRef)(null);
-    const mapRef = (0, import_react11.useRef)(null);
-    const [isReady, setIsReady] = (0, import_react11.useState)(false);
-    const { sphere, isLoaded, registerMap, unregisterMap } = useSphereContext();
-    const callbacksRef = (0, import_react11.useRef)({
+  });
+  (0, import_react11.useEffect)(() => {
+    callbacksRef.current = {
       onReady,
       onZoom,
       onLocation,
@@ -1399,175 +1417,158 @@ var SphereMap = (0, import_react11.forwardRef)(
       onIdle,
       onMouseMove,
       onError
-    });
-    (0, import_react11.useEffect)(() => {
-      callbacksRef.current = {
-        onReady,
-        onZoom,
-        onLocation,
-        onClick,
-        onDoubleClick,
-        onRotate,
-        onPitch,
-        onDrag,
-        onDrop,
-        onIdle,
-        onMouseMove,
-        onError
+    };
+  });
+  const initialPropsRef = (0, import_react11.useRef)({
+    zoom,
+    zoomRange,
+    center,
+    language,
+    input,
+    lastView,
+    ui,
+    filter,
+    rotate,
+    pitch
+  });
+  (0, import_react11.useEffect)(() => {
+    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
       };
-    });
-    const initialPropsRef = (0, import_react11.useRef)({
-      zoom,
-      zoomRange,
-      center,
-      language,
-      input,
-      lastView,
-      ui,
-      filter,
-      rotate,
-      pitch
-    });
-    (0, import_react11.useEffect)(() => {
-      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.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 (initialProps.center) {
-          options.location = initialProps.center;
+        if (typeof initialProps.rotate === "number") {
+          map.rotate(initialProps.rotate, false);
         }
-        if (initialProps.ui) {
-          options.ui = initialProps.ui;
+        if (typeof initialProps.pitch === "number") {
+          map.pitch(initialProps.pitch);
         }
-        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]);
-    (0, import_react11.useImperativeHandle)(
-      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
+        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);
     };
-    return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-      "div",
-      {
-        className,
-        id,
-        ref: containerRef,
-        style: containerStyle,
-        children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(MapProvider, { isReady, map: mapRef.current, children: isReady && children })
+  }, [isLoaded, sphere, registerMap, unregisterMap]);
+  (0, import_react11.useImperativeHandle)(
+    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();
       }
-    );
-  }
-);
-var SphereMap_default = SphereMap;
+    }),
+    []
+  );
+  const containerStyle = {
+    width: "100%",
+    height: "100%",
+    ...style
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+    "div",
+    {
+      className,
+      id,
+      ref: containerRef,
+      style: containerStyle,
+      children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(MapProvider, { isReady, map: mapRef.current, children: isReady && children })
+    }
+  );
+}
 
 // src/hooks/useMapEvent.ts
 var import_react12 = require("react");