@lugg/maps 1.0.0-beta.4 → 1.0.0-beta.6

package/src/components/Circle.web.tsx

@@ -1,93 +1,95 @@
-import { useCallback, useEffect, useRef } from 'react';
+import { memo, useCallback, useEffect, useRef } from 'react';
 import { useMapContext } from '../MapProvider.web';
 import type { CircleProps } from './Circle.types';
 
-export const Circle = ({
-  center,
-  radius,
-  strokeColor = '#000000',
-  strokeWidth = 1,
-  fillColor = 'rgba(0, 0, 0, 0.3)',
-  zIndex = 0,
-  onPress,
-}: CircleProps) => {
-  const { map } = useMapContext();
-  const circleRef = useRef<google.maps.Circle | null>(null);
-  const listenersRef = useRef<google.maps.MapsEventListener[]>([]);
+export const Circle = memo(
+  ({
+    center,
+    radius,
+    strokeColor = '#000000',
+    strokeWidth = 1,
+    fillColor = 'rgba(0, 0, 0, 0.3)',
+    zIndex = 0,
+    onPress,
+  }: CircleProps) => {
+    const { map } = useMapContext();
+    const circleRef = useRef<google.maps.Circle | null>(null);
+    const listenersRef = useRef<google.maps.MapsEventListener[]>([]);
 
-  const handleClick = useCallback(() => {
-    onPress?.();
-  }, [onPress]);
+    const handleClick = useCallback(() => {
+      onPress?.();
+    }, [onPress]);
 
-  useEffect(() => {
-    return () => {
-      listenersRef.current.forEach((l) => l.remove());
-      listenersRef.current = [];
-      circleRef.current?.setMap(null);
-      circleRef.current = null;
-    };
-  }, []);
+    useEffect(() => {
+      return () => {
+        listenersRef.current.forEach((l) => l.remove());
+        listenersRef.current = [];
+        circleRef.current?.setMap(null);
+        circleRef.current = null;
+      };
+    }, []);
 
-  useEffect(() => {
-    const circle = circleRef.current;
-    if (!circle) return;
+    useEffect(() => {
+      const circle = circleRef.current;
+      if (!circle) return;
 
-    listenersRef.current.forEach((l) => l.remove());
-    listenersRef.current = [];
+      listenersRef.current.forEach((l) => l.remove());
+      listenersRef.current = [];
 
-    if (onPress) {
-      listenersRef.current.push(circle.addListener('click', handleClick));
-    }
-    circle.set('clickable', !!onPress);
-  }, [onPress, handleClick]);
+      if (onPress) {
+        listenersRef.current.push(circle.addListener('click', handleClick));
+      }
+      circle.set('clickable', !!onPress);
+    }, [onPress, handleClick]);
 
-  useEffect(() => {
-    if (!map) {
-      circleRef.current?.setMap(null);
-      return;
-    }
+    useEffect(() => {
+      if (!map) {
+        circleRef.current?.setMap(null);
+        return;
+      }
 
-    const googleCenter = { lat: center.latitude, lng: center.longitude };
+      const googleCenter = { lat: center.latitude, lng: center.longitude };
 
-    if (circleRef.current) {
-      circleRef.current.setCenter(googleCenter);
-      circleRef.current.setRadius(radius);
-      circleRef.current.setOptions({
-        strokeColor: strokeColor as string,
-        strokeWeight: strokeWidth,
-        fillColor: fillColor as string,
-        zIndex,
-      });
-    } else {
-      const circle = new google.maps.Circle({
-        center: googleCenter,
-        radius,
-        strokeColor: strokeColor as string,
-        strokeWeight: strokeWidth,
-        strokeOpacity: 1,
-        fillColor: fillColor as string,
-        fillOpacity: 1,
-        zIndex,
-        clickable: !!onPress,
-        map,
-      });
-      circleRef.current = circle;
+      if (circleRef.current) {
+        circleRef.current.setCenter(googleCenter);
+        circleRef.current.setRadius(radius);
+        circleRef.current.setOptions({
+          strokeColor: strokeColor as string,
+          strokeWeight: strokeWidth,
+          fillColor: fillColor as string,
+          zIndex,
+        });
+      } else {
+        const circle = new google.maps.Circle({
+          center: googleCenter,
+          radius,
+          strokeColor: strokeColor as string,
+          strokeWeight: strokeWidth,
+          strokeOpacity: 1,
+          fillColor: fillColor as string,
+          fillOpacity: 1,
+          zIndex,
+          clickable: !!onPress,
+          map,
+        });
+        circleRef.current = circle;
 
-      if (onPress) {
-        listenersRef.current.push(circle.addListener('click', handleClick));
+        if (onPress) {
+          listenersRef.current.push(circle.addListener('click', handleClick));
+        }
       }
-    }
-  }, [
-    map,
-    center,
-    radius,
-    strokeColor,
-    strokeWidth,
-    fillColor,
-    zIndex,
-    onPress,
-    handleClick,
-  ]);
+    }, [
+      map,
+      center,
+      radius,
+      strokeColor,
+      strokeWidth,
+      fillColor,
+      zIndex,
+      onPress,
+      handleClick,
+    ]);
 
-  return null;
-};
+    return null;
+  }
+);

package/src/components/GeoJson.tsx

@@ -1,4 +1,4 @@
-import React, { useMemo, type ReactElement } from 'react';
+import React, { memo, useMemo, type ReactElement } from 'react';
 import type {
   Feature,
   FeatureCollection,
@@ -199,7 +199,7 @@ const renderGeometry = (
   return elements;
 };
 
-export const GeoJson = (props: GeoJsonProps) => {
+export const GeoJson = memo((props: GeoJsonProps) => {
   const { geojson } = props;
 
   const elements = useMemo(() => {
@@ -218,4 +218,4 @@ export const GeoJson = (props: GeoJsonProps) => {
   }, [geojson, props]);
 
   return <>{elements}</>;
-};
+});

package/src/components/GroundOverlay.web.tsx

@@ -1,85 +1,81 @@
-import { useCallback, useEffect, useRef } from 'react';
+import { memo, useCallback, useEffect, useRef } from 'react';
 import { useMapContext } from '../MapProvider.web';
 import type { GroundOverlayProps } from './GroundOverlay.types';
 
-export const GroundOverlay = ({
-  image,
-  bounds,
-  opacity = 1,
-  zIndex = 0,
-  onPress,
-}: GroundOverlayProps) => {
-  const { map } = useMapContext();
-  const overlayRef = useRef<google.maps.GroundOverlay | null>(null);
-  const listenersRef = useRef<google.maps.MapsEventListener[]>([]);
+export const GroundOverlay = memo(
+  ({ image, bounds, opacity = 1, zIndex = 0, onPress }: GroundOverlayProps) => {
+    const { map } = useMapContext();
+    const overlayRef = useRef<google.maps.GroundOverlay | null>(null);
+    const listenersRef = useRef<google.maps.MapsEventListener[]>([]);
 
-  const handleClick = useCallback(() => {
-    onPress?.();
-  }, [onPress]);
+    const handleClick = useCallback(() => {
+      onPress?.();
+    }, [onPress]);
+
+    // Cleanup on unmount
+    useEffect(() => {
+      return () => {
+        listenersRef.current.forEach((l) => l.remove());
+        listenersRef.current = [];
+        overlayRef.current?.setMap(null);
+        overlayRef.current = null;
+      };
+    }, []);
+
+    // Sync listeners
+    useEffect(() => {
+      const overlay = overlayRef.current;
+      if (!overlay) return;
 
-  // Cleanup on unmount
-  useEffect(() => {
-    return () => {
       listenersRef.current.forEach((l) => l.remove());
       listenersRef.current = [];
-      overlayRef.current?.setMap(null);
-      overlayRef.current = null;
-    };
-  }, []);
 
-  // Sync listeners
-  useEffect(() => {
-    const overlay = overlayRef.current;
-    if (!overlay) return;
+      if (onPress) {
+        listenersRef.current.push(overlay.addListener('click', handleClick));
+      }
+      overlay.set('clickable', !!onPress);
+    }, [onPress, handleClick]);
 
-    listenersRef.current.forEach((l) => l.remove());
-    listenersRef.current = [];
+    // Sync overlay with props
+    useEffect(() => {
+      if (!map) {
+        overlayRef.current?.setMap(null);
+        return;
+      }
 
-    if (onPress) {
-      listenersRef.current.push(overlay.addListener('click', handleClick));
-    }
-    overlay.set('clickable', !!onPress);
-  }, [onPress, handleClick]);
-
-  // Sync overlay with props
-  useEffect(() => {
-    if (!map) {
-      overlayRef.current?.setMap(null);
-      return;
-    }
+      const source =
+        typeof image === 'number'
+          ? null
+          : Array.isArray(image)
+          ? image[0]
+          : image;
+      const imageUrl = source?.uri ?? '';
+      if (!imageUrl) return;
 
-    const source =
-      typeof image === 'number'
-        ? null
-        : Array.isArray(image)
-        ? image[0]
-        : image;
-    const imageUrl = source?.uri ?? '';
-    if (!imageUrl) return;
+      const latLngBounds = new google.maps.LatLngBounds(
+        { lat: bounds.southwest.latitude, lng: bounds.southwest.longitude },
+        { lat: bounds.northeast.latitude, lng: bounds.northeast.longitude }
+      );
 
-    const latLngBounds = new google.maps.LatLngBounds(
-      { lat: bounds.southwest.latitude, lng: bounds.southwest.longitude },
-      { lat: bounds.northeast.latitude, lng: bounds.northeast.longitude }
-    );
-
-    // GroundOverlay bounds are immutable — recreate if bounds change
-    overlayRef.current?.setMap(null);
-    listenersRef.current.forEach((l) => l.remove());
-    listenersRef.current = [];
+      // GroundOverlay bounds are immutable — recreate if bounds change
+      overlayRef.current?.setMap(null);
+      listenersRef.current.forEach((l) => l.remove());
+      listenersRef.current = [];
 
-    const overlay = new google.maps.GroundOverlay(imageUrl, latLngBounds, {
-      opacity,
-      clickable: !!onPress,
-      map,
-    });
+      const overlay = new google.maps.GroundOverlay(imageUrl, latLngBounds, {
+        opacity,
+        clickable: !!onPress,
+        map,
+      });
 
-    overlay.set('zIndex', zIndex);
-    overlayRef.current = overlay;
+      overlay.set('zIndex', zIndex);
+      overlayRef.current = overlay;
 
-    if (onPress) {
-      listenersRef.current.push(overlay.addListener('click', handleClick));
-    }
-  }, [map, image, bounds, opacity, zIndex, onPress, handleClick]);
+      if (onPress) {
+        listenersRef.current.push(overlay.addListener('click', handleClick));
+      }
+    }, [map, image, bounds, opacity, zIndex, onPress, handleClick]);
 
-  return null;
-};
+    return null;
+  }
+);

package/src/components/Marker.tsx

@@ -1,12 +1,15 @@
 import React, { isValidElement } from 'react';
 import { StyleSheet } from 'react-native';
-import LuggMarkerViewNativeComponent from '../fabric/LuggMarkerViewNativeComponent';
+import LuggMarkerViewNativeComponent, {
+  Commands,
+} from '../fabric/LuggMarkerViewNativeComponent';
 import LuggCalloutViewNativeComponent from '../fabric/LuggCalloutViewNativeComponent';
-import type { MarkerProps } from './Marker.types';
+import type { MarkerProps, MarkerRef } from './Marker.types';
 import type { Point } from '../types';
 
 export type {
   CalloutOptions,
+  MarkerRef,
   MarkerProps,
   MarkerPressEvent,
   MarkerDragEvent,
@@ -14,7 +17,24 @@ export type {
 
 const DEFAULT_ANCHOR: Point = { x: 0.5, y: 1 };
 
-export class Marker extends React.PureComponent<MarkerProps> {
+export class Marker
+  extends React.PureComponent<MarkerProps>
+  implements MarkerRef
+{
+  private nativeRef = React.createRef<any>();
+
+  showCallout() {
+    const ref = this.nativeRef.current;
+    if (!ref) return;
+    Commands.showCallout(ref);
+  }
+
+  hideCallout() {
+    const ref = this.nativeRef.current;
+    if (!ref) return;
+    Commands.hideCallout(ref);
+  }
+
   private getStyle(zIndex: number | undefined) {
     if (zIndex == null) return styles.marker;
     if (zIndex !== this._cachedZIndex) {
@@ -38,6 +58,7 @@ export class Marker extends React.PureComponent<MarkerProps> {
       rotate = 0,
       scale = 1,
       rasterize = true,
+      centerOnPress = true,
       draggable = false,
       onPress,
       onDragStart,
@@ -54,10 +75,11 @@ export class Marker extends React.PureComponent<MarkerProps> {
         : React.createElement(callout)
       : null;
     const calloutBubbled = calloutOptions?.bubbled ?? true;
-    const calloutAnchor = calloutOptions?.anchor;
+    const calloutOffset = calloutOptions?.offset;
 
     return (
       <LuggMarkerViewNativeComponent
+        ref={this.nativeRef}
         style={this.getStyle(zIndex)}
         name={name}
         coordinate={coordinate}
@@ -67,6 +89,7 @@ export class Marker extends React.PureComponent<MarkerProps> {
         rotate={rotate}
         scale={scale}
         rasterize={rasterize}
+        centerOnPress={centerOnPress}
         draggable={draggable}
         onMarkerPress={onPress}
         onMarkerDragStart={onDragStart}
@@ -78,7 +101,7 @@ export class Marker extends React.PureComponent<MarkerProps> {
           <LuggCalloutViewNativeComponent
             style={calloutStyles.callout}
             bubbled={calloutBubbled}
-            anchor={calloutAnchor}
+            offset={calloutOffset}
           >
             {calloutContent}
           </LuggCalloutViewNativeComponent>

package/src/components/Marker.types.ts

@@ -14,13 +14,18 @@ export interface CalloutOptions {
    */
   bubbled?: boolean;
   /**
-   * Anchor point for the callout relative to the marker position.
-   * `{x: 0.5, y: 1}` places the bottom-center of the callout at the marker.
+   * Pixel offset for non-bubbled callouts from their default centered position above the marker.
+   * Positive `x` moves right, positive `y` moves down.
+   * Only applies when `bubbled` is `false`.
    *
-   * @note Not supported on web.
-   * @default {x: 0.5, y: 1}
+   * @default {x: 0, y: 0}
    */
-  anchor?: Point;
+  offset?: Point;
+}
+
+export interface MarkerRef {
+  showCallout(): void;
+  hideCallout(): void;
 }
 
 export interface MarkerProps {
@@ -68,6 +73,11 @@ export interface MarkerProps {
    * @default true
    */
   rasterize?: boolean;
+  /**
+   * Whether the map centers on the marker when pressed.
+   * @default true
+   */
+  centerOnPress?: boolean;
   /**
    * Whether the marker can be dragged by the user.
    * @default false