@lugg/maps 1.0.0-beta.0 → 1.0.0-beta.10

package/src/components/Circle.tsx

@@ -0,0 +1,52 @@
+import React from 'react';
+import { StyleSheet } from 'react-native';
+import LuggCircleViewNativeComponent from '../fabric/LuggCircleViewNativeComponent';
+import type { CircleProps } from './Circle.types';
+
+export type { CircleProps } from './Circle.types';
+
+export class Circle extends React.PureComponent<CircleProps> {
+  private _cachedZIndex: number | undefined;
+  private _cachedStyle: any;
+
+  private getStyle(zIndex: number | undefined) {
+    if (zIndex == null) return styles.circle;
+    if (zIndex !== this._cachedZIndex) {
+      this._cachedZIndex = zIndex;
+      this._cachedStyle = [{ zIndex }, styles.circle];
+    }
+    return this._cachedStyle!;
+  }
+
+  render() {
+    const {
+      center,
+      radius,
+      strokeColor,
+      strokeWidth,
+      fillColor,
+      zIndex,
+      onPress,
+    } = this.props;
+
+    return (
+      <LuggCircleViewNativeComponent
+        style={this.getStyle(zIndex)}
+        center={center}
+        radius={radius}
+        strokeColor={strokeColor}
+        strokeWidth={strokeWidth}
+        fillColor={fillColor}
+        tappable={!!onPress}
+        onCirclePress={onPress}
+      />
+    );
+  }
+}
+
+const styles = StyleSheet.create({
+  circle: {
+    position: 'absolute',
+    pointerEvents: 'none',
+  },
+});

package/src/components/Circle.types.ts

@@ -0,0 +1,33 @@
+import type { ColorValue } from 'react-native';
+import type { Coordinate } from '../types';
+
+export interface CircleProps {
+  /**
+   * Center coordinate of the circle
+   */
+  center: Coordinate;
+  /**
+   * Radius in meters
+   */
+  radius: number;
+  /**
+   * Stroke (outline) color
+   */
+  strokeColor?: ColorValue;
+  /**
+   * Stroke width in points
+   */
+  strokeWidth?: number;
+  /**
+   * Fill color of the circle
+   */
+  fillColor?: ColorValue;
+  /**
+   * Z-index for layering
+   */
+  zIndex?: number;
+  /**
+   * Called when the circle is tapped
+   */
+  onPress?: () => void;
+}

package/src/components/Circle.web.tsx

@@ -0,0 +1,95 @@
+import { memo, useCallback, useEffect, useRef } from 'react';
+import { useMapContext } from '../MapProvider.web';
+import type { CircleProps } from './Circle.types';
+
+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]);
+
+    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;
+
+      listenersRef.current.forEach((l) => l.remove());
+      listenersRef.current = [];
+
+      if (onPress) {
+        listenersRef.current.push(circle.addListener('click', handleClick));
+      }
+      circle.set('clickable', !!onPress);
+    }, [onPress, handleClick]);
+
+    useEffect(() => {
+      if (!map) {
+        circleRef.current?.setMap(null);
+        return;
+      }
+
+      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 (onPress) {
+          listenersRef.current.push(circle.addListener('click', handleClick));
+        }
+      }
+    }, [
+      map,
+      center,
+      radius,
+      strokeColor,
+      strokeWidth,
+      fillColor,
+      zIndex,
+      onPress,
+      handleClick,
+    ]);
+
+    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/GeoJson.types.ts

@@ -56,11 +56,22 @@ export type Geometry =
   | MultiPolygon
   | GeometryCollection;
 
+export interface FeatureProperties {
+  'title'?: string;
+  'description'?: string;
+  'fill'?: string;
+  'fill-opacity'?: number;
+  'stroke'?: string;
+  'stroke-width'?: number;
+  'stroke-opacity'?: number;
+  [key: string]: unknown;
+}
+
 export interface Feature<G extends Geometry = Geometry> {
   type: 'Feature';
   id?: string | number;
   geometry: G;
-  properties: Record<string, any> | null;
+  properties: FeatureProperties | null;
 }
 
 export interface FeatureCollection<G extends Geometry = Geometry> {

package/src/components/GroundOverlay.tsx

@@ -0,0 +1,47 @@
+import React from 'react';
+import { Image, StyleSheet } from 'react-native';
+import LuggGroundOverlayViewNativeComponent from '../fabric/LuggGroundOverlayViewNativeComponent';
+import type { GroundOverlayProps } from './GroundOverlay.types';
+
+export type {
+  GroundOverlayProps,
+  GroundOverlayBounds,
+} from './GroundOverlay.types';
+
+export class GroundOverlay extends React.PureComponent<GroundOverlayProps> {
+  private _cachedZIndex: number | undefined;
+  private _cachedStyle: any;
+
+  private getStyle(zIndex: number | undefined) {
+    if (zIndex == null) return styles.overlay;
+    if (zIndex !== this._cachedZIndex) {
+      this._cachedZIndex = zIndex;
+      this._cachedStyle = [{ zIndex }, styles.overlay];
+    }
+    return this._cachedStyle!;
+  }
+
+  render() {
+    const { image, bounds, opacity, bearing, zIndex, onPress } = this.props;
+    const resolved = Image.resolveAssetSource(image);
+
+    return (
+      <LuggGroundOverlayViewNativeComponent
+        style={this.getStyle(zIndex)}
+        image={resolved?.uri ?? ''}
+        bounds={bounds}
+        opacity={opacity}
+        bearing={bearing}
+        tappable={!!onPress}
+        onGroundOverlayPress={onPress}
+      />
+    );
+  }
+}
+
+const styles = StyleSheet.create({
+  overlay: {
+    position: 'absolute',
+    pointerEvents: 'none',
+  },
+});

package/src/components/GroundOverlay.types.ts

@@ -0,0 +1,36 @@
+import type { ImageSourcePropType } from 'react-native';
+import type { Coordinate } from '../types';
+
+export interface GroundOverlayBounds {
+  northeast: Coordinate;
+  southwest: Coordinate;
+}
+
+export interface GroundOverlayProps {
+  /**
+   * Image to overlay on the map
+   */
+  image: ImageSourcePropType;
+  /**
+   * Geographic bounds for the overlay
+   */
+  bounds: GroundOverlayBounds;
+  /**
+   * Opacity of the overlay (0-1)
+   */
+  opacity?: number;
+  /**
+   * Bearing (rotation) in degrees clockwise from north.
+   * Only supported on Google Maps.
+   * @platform google
+   */
+  bearing?: number;
+  /**
+   * Z-index for layering
+   */
+  zIndex?: number;
+  /**
+   * Called when the overlay is tapped
+   */
+  onPress?: () => void;
+}

package/src/components/GroundOverlay.web.tsx

@@ -0,0 +1,81 @@
+import { memo, useCallback, useEffect, useRef } from 'react';
+import { useMapContext } from '../MapProvider.web';
+import type { GroundOverlayProps } from './GroundOverlay.types';
+
+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]);
+
+    // 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;
+
+      listenersRef.current.forEach((l) => l.remove());
+      listenersRef.current = [];
+
+      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 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 = [];
+
+      const overlay = new google.maps.GroundOverlay(imageUrl, latLngBounds, {
+        opacity,
+        clickable: !!onPress,
+        map,
+      });
+
+      overlay.set('zIndex', zIndex);
+      overlayRef.current = overlay;
+
+      if (onPress) {
+        listenersRef.current.push(overlay.addListener('click', handleClick));
+      }
+    }, [map, image, bounds, opacity, zIndex, onPress, handleClick]);
+
+    return null;
+  }
+);

package/src/components/Marker.tsx

@@ -1,15 +1,40 @@
-import React from 'react';
+import React, { isValidElement } from 'react';
 import { StyleSheet } from 'react-native';
-import LuggMarkerViewNativeComponent from '../fabric/LuggMarkerViewNativeComponent';
-import type { MarkerProps } from './Marker.types';
+import LuggMarkerViewNativeComponent, {
+  Commands,
+} from '../fabric/LuggMarkerViewNativeComponent';
+import LuggCalloutViewNativeComponent from '../fabric/LuggCalloutViewNativeComponent';
+import type { MarkerProps, MarkerRef } from './Marker.types';
+import type { Point } from '../types';
 
 export type {
+  CalloutOptions,
+  MarkerRef,
   MarkerProps,
   MarkerPressEvent,
   MarkerDragEvent,
 } from './Marker.types';
 
-export class Marker extends React.PureComponent<MarkerProps> {
+const DEFAULT_ANCHOR: Point = { x: 0.5, y: 1 };
+
+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) {
@@ -33,25 +58,38 @@ export class Marker extends React.PureComponent<MarkerProps> {
       rotate = 0,
       scale = 1,
       rasterize = true,
+      centerOnPress = true,
       draggable = false,
       onPress,
       onDragStart,
       onDragChange,
       onDragEnd,
+      callout,
+      calloutOptions,
       children,
     } = this.props;
 
+    const calloutContent = callout
+      ? isValidElement(callout)
+        ? callout
+        : React.createElement(callout)
+      : null;
+    const calloutBubbled = calloutOptions?.bubbled ?? true;
+    const calloutOffset = calloutOptions?.offset;
+
     return (
       <LuggMarkerViewNativeComponent
+        ref={this.nativeRef}
         style={this.getStyle(zIndex)}
         name={name}
         coordinate={coordinate}
         title={title}
         description={description}
-        anchor={anchor}
+        anchor={anchor ?? DEFAULT_ANCHOR}
         rotate={rotate}
         scale={scale}
         rasterize={rasterize}
+        centerOnPress={centerOnPress}
         draggable={draggable}
         onMarkerPress={onPress}
         onMarkerDragStart={onDragStart}
@@ -59,6 +97,15 @@ export class Marker extends React.PureComponent<MarkerProps> {
         onMarkerDragEnd={onDragEnd}
       >
         {children}
+        {calloutContent && (
+          <LuggCalloutViewNativeComponent
+            style={calloutStyles.callout}
+            bubbled={calloutBubbled}
+            offset={calloutOffset}
+          >
+            {calloutContent}
+          </LuggCalloutViewNativeComponent>
+        )}
       </LuggMarkerViewNativeComponent>
     );
   }
@@ -70,3 +117,10 @@ const styles = StyleSheet.create({
     pointerEvents: 'box-none',
   },
 });
+
+const calloutStyles = StyleSheet.create({
+  callout: {
+    position: 'absolute',
+    pointerEvents: 'box-none',
+  },
+});

package/src/components/Marker.types.ts

@@ -1,10 +1,33 @@
-import type { ReactNode } from 'react';
+import type { ComponentType, ReactElement, ReactNode } from 'react';
 import type { NativeSyntheticEvent } from 'react-native';
 import type { Coordinate, Point, PressEventPayload } from '../types';
 
 export type MarkerPressEvent = NativeSyntheticEvent<PressEventPayload>;
 export type MarkerDragEvent = NativeSyntheticEvent<PressEventPayload>;
 
+export interface CalloutOptions {
+  /**
+   * Whether to wrap the callout in the native platform bubble.
+   * Set to `false` to render custom content directly without the native callout chrome.
+   *
+   * @default true
+   */
+  bubbled?: boolean;
+  /**
+   * 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`.
+   *
+   * @default {x: 0, y: 0}
+   */
+  offset?: Point;
+}
+
+export interface MarkerRef {
+  showCallout(): void;
+  hideCallout(): void;
+}
+
 export interface MarkerProps {
   /**
    * Name used for debugging purposes
@@ -23,7 +46,10 @@ export interface MarkerProps {
    */
   description?: string;
   /**
-   * Anchor point for custom marker views
+   * Anchor point for custom marker views.
+   * `{x: 0.5, y: 1}` places the bottom-center of the marker at the coordinate.
+   *
+   * @default {x: 0.5, y: 1}
    */
   anchor?: Point;
   /**
@@ -47,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
@@ -68,6 +99,15 @@ export interface MarkerProps {
    * Called when marker drag ends
    */
   onDragEnd?: (event: MarkerDragEvent) => void;
+  /**
+   * Callout content displayed when marker is tapped.
+   * Pass a `ReactElement` for inline content or a `ComponentType` to be instantiated.
+   */
+  callout?: ComponentType<unknown> | ReactElement;
+  /**
+   * Callout configuration options.
+   */
+  calloutOptions?: CalloutOptions;
   /**
    * Custom marker view
    */