@lugg/maps 1.0.0-beta.3 → 1.0.0-beta.5

package/src/MapView.types.ts

@@ -4,10 +4,71 @@ import type {
   MapProvider,
   Coordinate,
   EdgeInsets,
-  MapTheme,
   PressEventPayload,
 } from './types';
 
+export type MapType =
+  | 'standard'
+  | 'satellite'
+  | 'terrain'
+  | 'hybrid'
+  | 'muted-standard';
+
+export type MapTheme = 'light' | 'dark' | 'system';
+
+export type InsetAdjustment = 'automatic' | 'never';
+
+export type PoiCategory =
+  | 'airport'
+  | 'amusement-park'
+  | 'aquarium'
+  | 'atm'
+  | 'bakery'
+  | 'bank'
+  | 'beach'
+  | 'brewery'
+  | 'cafe'
+  | 'campground'
+  | 'car-rental'
+  | 'ev-charger'
+  | 'fire-station'
+  | 'fitness-center'
+  | 'food-market'
+  | 'gas-station'
+  | 'hospital'
+  | 'hotel'
+  | 'laundry'
+  | 'library'
+  | 'marina'
+  | 'movie-theater'
+  | 'museum'
+  | 'national-park'
+  | 'nightlife'
+  | 'park'
+  | 'parking'
+  | 'pharmacy'
+  | 'police'
+  | 'post-office'
+  | 'public-transport'
+  | 'restaurant'
+  | 'restroom'
+  | 'school'
+  | 'stadium'
+  | 'store'
+  | 'theater'
+  | 'university'
+  | 'winery'
+  | 'zoo';
+
+export interface PoiFilter {
+  /**
+   * Filter mode
+   * @default 'including'
+   */
+  mode?: 'including' | 'excluding';
+  categories: PoiCategory[];
+}
+
 /**
  * Options for moving the camera
  */
@@ -64,6 +125,11 @@ export interface MapViewProps extends ViewProps {
    * @default 'apple' on iOS, 'google' on Android
    */
   provider?: MapProvider;
+  /**
+   * Map type to display
+   * @default 'standard'
+   */
+  mapType?: MapType;
   /**
    * Map style ID (Google Maps) or configuration name (Apple Maps)
    */
@@ -121,11 +187,29 @@ export interface MapViewProps extends ViewProps {
    * @platform android
    */
   userLocationButtonEnabled?: boolean;
+  /**
+   * Show points of interest on the map (Apple Maps only).
+   * When false, hides all POIs regardless of poiFilter.
+   * @default true
+   * @platform ios
+   */
+  poiEnabled?: boolean;
+  /**
+   * Filter POI categories to show or hide (Apple Maps only).
+   * Only takes effect when poiEnabled is true.
+   * @platform ios
+   */
+  poiFilter?: PoiFilter;
   /**
    * Map color theme
    * @default 'system'
    */
   theme?: MapTheme;
+  /**
+   * Safe area inset adjustment behavior
+   * @default 'never'
+   */
+  insetAdjustment?: InsetAdjustment;
   /**
    * Called when the map is pressed
    */

package/src/MapView.web.tsx

@@ -101,6 +101,7 @@ export const MapView = forwardRef<MapViewRef, MapViewProps>(function MapView(
   ref
 ) {
   const {
+    mapType = 'standard',
     mapId = 'DEMO_MAP_ID',
     initialCoordinate,
     initialZoom = 10,
@@ -417,6 +418,15 @@ export const MapView = forwardRef<MapViewRef, MapViewProps>(function MapView(
     wasGesture.current = false;
   };
 
+  const mapTypeId =
+    mapType === 'satellite'
+      ? 'satellite'
+      : mapType === 'terrain'
+      ? 'terrain'
+      : mapType === 'hybrid'
+      ? 'hybrid'
+      : 'roadmap';
+
   const gestureHandling =
     scrollEnabled === false && zoomEnabled === false
       ? 'none'
@@ -453,6 +463,7 @@ export const MapView = forwardRef<MapViewRef, MapViewProps>(function MapView(
           defaultZoom={initialZoom}
           minZoom={minZoom}
           maxZoom={maxZoom}
+          mapTypeId={mapTypeId}
           gestureHandling={gestureHandling}
           colorScheme={colorScheme}
           disableDefaultUI

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,93 @@
+import { 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[]>([]);
+
+  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/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,85 @@
+import { 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[]>([]);
+
+  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,17 +1,40 @@
 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,
 } 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) {
@@ -35,6 +58,7 @@ export class Marker extends React.PureComponent<MarkerProps> {
       rotate = 0,
       scale = 1,
       rasterize = true,
+      centerOnPress = true,
       draggable = false,
       onPress,
       onDragStart,
@@ -51,19 +75,21 @@ 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}
         title={title}
         description={description}
-        anchor={anchor}
+        anchor={anchor ?? DEFAULT_ANCHOR}
         rotate={rotate}
         scale={scale}
         rasterize={rasterize}
+        centerOnPress={centerOnPress}
         draggable={draggable}
         onMarkerPress={onPress}
         onMarkerDragStart={onDragStart}
@@ -75,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 {
@@ -41,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;
   /**
@@ -65,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