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

package/src/components/Marker.web.tsx

@@ -1,7 +1,9 @@
 import React, {
+  forwardRef,
   isValidElement,
   useCallback,
   useEffect,
+  useImperativeHandle,
   useRef,
   useState,
 } from 'react';
@@ -11,7 +13,7 @@ import {
   useAdvancedMarkerRef,
 } from '@vis.gl/react-google-maps';
 import { useMapContext } from '../MapProvider.web';
-import type { MarkerProps } from './Marker.types';
+import type { MarkerProps, MarkerRef } from './Marker.types';
 
 const CALLOUT_ARROW_HEIGHT = 12;
 const UNBUBBLED_CLASS = 'rnm-callout-unbubbled';
@@ -58,153 +60,194 @@ const createEvent = (
     },
   } as any);
 
-export const Marker = ({
-  coordinate,
-  title,
-  description,
-  anchor,
-  zIndex,
-  rotate,
-  scale,
-  draggable,
-  onPress,
-  onDragStart,
-  onDragChange,
-  onDragEnd,
-  callout,
-  calloutOptions,
-  children,
-}: MarkerProps) => {
-  const { moveCamera, onCalloutClose, closeCallouts } = useMapContext();
-  const dragPositionRef = useRef<google.maps.LatLngLiteral | null>(null);
-  const [markerRef, markerElement] = useAdvancedMarkerRef();
-  const [infoWindowOpen, setInfoWindowOpen] = useState(false);
-  const calloutBubbled = calloutOptions?.bubbled ?? true;
-
-  const closeCallout = useCallback(() => setInfoWindowOpen(false), []);
-
-  useEffect(() => onCalloutClose(closeCallout), [onCalloutClose, closeCallout]);
-
-  useEffect(() => {
-    if (!calloutBubbled) injectUnbubbledStyle();
-  }, [calloutBubbled]);
-
-  const hasCallout = !!(callout || title);
-
-  const calloutContent = callout
-    ? isValidElement(callout)
-      ? callout
-      : React.createElement(callout)
-    : title
-    ? React.createElement(
-        'div',
-        { style: { fontSize: 14 } },
-        React.createElement('div', { style: { fontWeight: 500 } }, title),
-        description ? React.createElement('div', null, description) : null
-      )
-    : null;
-
-  const transforms: string[] = [];
-  if (rotate) transforms.push(`rotate(${rotate}deg)`);
-  if (scale && scale !== 1) transforms.push(`scale(${scale})`);
-
-  const handleClick = useCallback(
-    (e: google.maps.MapMouseEvent) => {
-      const pos = dragPositionRef.current;
-      const coord = pos
-        ? { latitude: pos.lat, longitude: pos.lng }
-        : coordinate;
-      moveCamera(coord);
-      onPress?.(createEvent(e, coordinate));
-      if (hasCallout) {
-        closeCallouts(closeCallout);
-        setInfoWindowOpen((prev) => !prev);
-      }
+export const Marker = forwardRef<MarkerRef, MarkerProps>(
+  (
+    {
+      coordinate,
+      title,
+      description,
+      anchor,
+      zIndex,
+      rotate,
+      scale,
+      centerOnPress = true,
+      draggable,
+      onPress,
+      onDragStart,
+      onDragChange,
+      onDragEnd,
+      callout,
+      calloutOptions,
+      children,
     },
-    [moveCamera, onPress, coordinate, hasCallout, closeCallouts, closeCallout]
-  );
-
-  const handleDragStart = useCallback(
-    (e: google.maps.MapMouseEvent) => {
-      const latLng = e.latLng;
-      if (latLng) {
-        dragPositionRef.current = { lat: latLng.lat(), lng: latLng.lng() };
-      }
-      onDragStart?.(createEvent(e, coordinate));
-    },
-    [onDragStart, coordinate]
-  );
-
-  const handleDrag = useCallback(
-    (e: google.maps.MapMouseEvent) => {
-      const latLng = e.latLng;
-      if (latLng) {
-        dragPositionRef.current = { lat: latLng.lat(), lng: latLng.lng() };
-      }
-      onDragChange?.(createEvent(e, coordinate));
-    },
-    [onDragChange, coordinate]
-  );
-
-  const handleDragEnd = useCallback(
-    (e: google.maps.MapMouseEvent) => {
-      const latLng = e.latLng;
-      if (latLng) {
-        dragPositionRef.current = { lat: latLng.lat(), lng: latLng.lng() };
-      }
-      onDragEnd?.(createEvent(e, coordinate));
-    },
-    [onDragEnd, coordinate]
-  );
-
-  useEffect(() => {
-    dragPositionRef.current = null;
-  }, [coordinate.latitude, coordinate.longitude]);
-
-  const latLngPosition = {
-    lat: coordinate.latitude,
-    lng: coordinate.longitude,
-  };
-
-  const position = dragPositionRef.current ?? latLngPosition;
-
-  return (
-    <>
-      <AdvancedMarker
-        ref={markerRef}
-        position={position}
-        title={title}
-        zIndex={zIndex}
-        anchorLeft={anchor ? toWebAnchor(anchor.x) : undefined}
-        anchorTop={anchor ? toWebAnchor(anchor.y) : undefined}
-        clickable
-        draggable={draggable}
-        onClick={handleClick}
-        onDragStart={handleDragStart}
-        onDrag={handleDrag}
-        onDragEnd={handleDragEnd}
-        style={
-          transforms.length > 0
-            ? { transform: transforms.join(' ') }
-            : undefined
+    ref
+  ) => {
+    const { moveCamera, onCalloutClose, closeCallouts } = useMapContext();
+    const dragPositionRef = useRef<google.maps.LatLngLiteral | null>(null);
+    const [markerRef, markerElement] = useAdvancedMarkerRef();
+    const [infoWindowOpen, setInfoWindowOpen] = useState(false);
+    const calloutBubbled = calloutOptions?.bubbled ?? true;
+    const calloutOffset = calloutOptions?.offset;
+
+    const closeCallout = useCallback(() => setInfoWindowOpen(false), []);
+
+    useEffect(
+      () => onCalloutClose(closeCallout),
+      [onCalloutClose, closeCallout]
+    );
+
+    useEffect(() => {
+      if (!calloutBubbled) injectUnbubbledStyle();
+    }, [calloutBubbled]);
+
+    const hasCallout = !!(callout || title);
+
+    useImperativeHandle(
+      ref,
+      () => ({
+        showCallout() {
+          if (hasCallout) {
+            closeCallouts(closeCallout);
+            setInfoWindowOpen(true);
+          }
+        },
+        hideCallout() {
+          setInfoWindowOpen(false);
+        },
+      }),
+      [hasCallout, closeCallouts, closeCallout]
+    );
+
+    const calloutContent = callout
+      ? isValidElement(callout)
+        ? callout
+        : React.createElement(callout)
+      : title
+      ? React.createElement(
+          'div',
+          { style: { fontSize: 14 } },
+          React.createElement('div', { style: { fontWeight: 500 } }, title),
+          description ? React.createElement('div', null, description) : null
+        )
+      : null;
+
+    const transforms: string[] = [];
+    if (rotate) transforms.push(`rotate(${rotate}deg)`);
+    if (scale && scale !== 1) transforms.push(`scale(${scale})`);
+
+    const handleClick = useCallback(
+      (e: google.maps.MapMouseEvent) => {
+        const pos = dragPositionRef.current;
+        const coord = pos
+          ? { latitude: pos.lat, longitude: pos.lng }
+          : coordinate;
+        if (centerOnPress) moveCamera(coord);
+        onPress?.(createEvent(e, coordinate));
+        if (hasCallout) {
+          closeCallouts(closeCallout);
+          setInfoWindowOpen((prev) => !prev);
+        }
+      },
+      [
+        centerOnPress,
+        moveCamera,
+        onPress,
+        coordinate,
+        hasCallout,
+        closeCallouts,
+        closeCallout,
+      ]
+    );
+
+    const handleDragStart = useCallback(
+      (e: google.maps.MapMouseEvent) => {
+        const latLng = e.latLng;
+        if (latLng) {
+          dragPositionRef.current = { lat: latLng.lat(), lng: latLng.lng() };
         }
-      >
-        {children}
-      </AdvancedMarker>
-      {calloutContent && infoWindowOpen && markerElement && (
-        <InfoWindow
-          anchor={markerElement}
-          pixelOffset={!calloutBubbled ? [0, CALLOUT_ARROW_HEIGHT] : undefined}
-          headerDisabled
-          onClose={() => setInfoWindowOpen(false)}
+        onDragStart?.(createEvent(e, coordinate));
+      },
+      [onDragStart, coordinate]
+    );
+
+    const handleDrag = useCallback(
+      (e: google.maps.MapMouseEvent) => {
+        const latLng = e.latLng;
+        if (latLng) {
+          dragPositionRef.current = { lat: latLng.lat(), lng: latLng.lng() };
+        }
+        onDragChange?.(createEvent(e, coordinate));
+      },
+      [onDragChange, coordinate]
+    );
+
+    const handleDragEnd = useCallback(
+      (e: google.maps.MapMouseEvent) => {
+        const latLng = e.latLng;
+        if (latLng) {
+          dragPositionRef.current = { lat: latLng.lat(), lng: latLng.lng() };
+        }
+        onDragEnd?.(createEvent(e, coordinate));
+      },
+      [onDragEnd, coordinate]
+    );
+
+    useEffect(() => {
+      dragPositionRef.current = null;
+    }, [coordinate.latitude, coordinate.longitude]);
+
+    const latLngPosition = {
+      lat: coordinate.latitude,
+      lng: coordinate.longitude,
+    };
+
+    const position = dragPositionRef.current ?? latLngPosition;
+
+    return (
+      <>
+        <AdvancedMarker
+          ref={markerRef}
+          position={position}
+          title={title}
+          zIndex={zIndex}
+          anchorLeft={anchor ? toWebAnchor(anchor.x) : undefined}
+          anchorTop={anchor ? toWebAnchor(anchor.y) : undefined}
+          clickable
+          draggable={draggable}
+          onClick={handleClick}
+          onDragStart={handleDragStart}
+          onDrag={handleDrag}
+          onDragEnd={handleDragEnd}
+          style={
+            transforms.length > 0
+              ? { transform: transforms.join(' ') }
+              : undefined
+          }
         >
-          {!calloutBubbled ? (
-            <div className={UNBUBBLED_CLASS}>{calloutContent}</div>
-          ) : (
-            calloutContent
-          )}
-        </InfoWindow>
-      )}
-    </>
-  );
-};
+          {children}
+        </AdvancedMarker>
+        {calloutContent && infoWindowOpen && markerElement && (
+          <InfoWindow
+            anchor={markerElement}
+            pixelOffset={
+              !calloutBubbled
+                ? [
+                    calloutOffset?.x ?? 0,
+                    CALLOUT_ARROW_HEIGHT + (calloutOffset?.y ?? 0),
+                  ]
+                : undefined
+            }
+            headerDisabled
+            onClose={() => setInfoWindowOpen(false)}
+          >
+            {!calloutBubbled ? (
+              <div className={UNBUBBLED_CLASS}>{calloutContent}</div>
+            ) : (
+              calloutContent
+            )}
+          </InfoWindow>
+        )}
+      </>
+    );
+  }
+);

package/src/components/TileOverlay.tsx

@@ -0,0 +1,44 @@
+import React from 'react';
+import { StyleSheet } from 'react-native';
+import LuggTileOverlayViewNativeComponent from '../fabric/LuggTileOverlayViewNativeComponent';
+import type { TileOverlayProps } from './TileOverlay.types';
+
+export type { TileOverlayProps } from './TileOverlay.types';
+
+export class TileOverlay extends React.PureComponent<TileOverlayProps> {
+  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 { urlTemplate, tileSize, opacity, bounds, zIndex, onPress } =
+      this.props;
+
+    return (
+      <LuggTileOverlayViewNativeComponent
+        style={this.getStyle(zIndex)}
+        urlTemplate={urlTemplate}
+        tileSize={tileSize}
+        opacity={opacity}
+        bounds={bounds}
+        tappable={!!onPress}
+        onTileOverlayPress={onPress}
+      />
+    );
+  }
+}
+
+const styles = StyleSheet.create({
+  overlay: {
+    position: 'absolute',
+    pointerEvents: 'none',
+  },
+});

package/src/components/TileOverlay.types.ts

@@ -0,0 +1,37 @@
+import type { Coordinate } from '../types';
+
+export interface TileOverlayBounds {
+  northeast: Coordinate;
+  southwest: Coordinate;
+}
+
+export interface TileOverlayProps {
+  /**
+   * URL template for tile images.
+   * Use `{x}`, `{y}`, `{z}` placeholders for tile coordinates and zoom level.
+   * @example "https://tile.openstreetmap.org/{z}/{x}/{y}.png"
+   */
+  urlTemplate: string;
+  /**
+   * Size of each tile in pixels
+   * @default 256
+   */
+  tileSize?: number;
+  /**
+   * Opacity of the tile overlay (0-1)
+   */
+  opacity?: number;
+  /**
+   * Restrict tiles to a geographic region.
+   * Tiles outside these bounds will not be loaded.
+   */
+  bounds?: TileOverlayBounds;
+  /**
+   * Z-index for layering
+   */
+  zIndex?: number;
+  /**
+   * Called when the tile overlay is tapped
+   */
+  onPress?: () => void;
+}

package/src/components/TileOverlay.web.tsx

@@ -0,0 +1,95 @@
+import { useCallback, useEffect, useRef } from 'react';
+import { useMapContext } from '../MapProvider.web';
+import type { TileOverlayProps } from './TileOverlay.types';
+
+export const TileOverlay = ({
+  urlTemplate,
+  tileSize = 256,
+  opacity = 1,
+  bounds,
+  zIndex = 0,
+  onPress,
+}: TileOverlayProps) => {
+  const { map } = useMapContext();
+  const overlayRef = useRef<google.maps.ImageMapType | null>(null);
+  const indexRef = useRef<number>(-1);
+
+  const handleClick = useCallback(() => {
+    onPress?.();
+  }, [onPress]);
+
+  // Cleanup on unmount
+  useEffect(() => {
+    return () => {
+      if (overlayRef.current && indexRef.current >= 0) {
+        map?.overlayMapTypes.removeAt(indexRef.current);
+      }
+      overlayRef.current = null;
+      indexRef.current = -1;
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  // Sync overlay with props
+  useEffect(() => {
+    if (!map) return;
+
+    // Remove old overlay
+    if (overlayRef.current && indexRef.current >= 0) {
+      map.overlayMapTypes.removeAt(indexRef.current);
+      overlayRef.current = null;
+      indexRef.current = -1;
+    }
+
+    if (!urlTemplate) return;
+
+    const imageMapType = new google.maps.ImageMapType({
+      getTileUrl: (coord, zoom) => {
+        if (bounds) {
+          const n = Math.pow(2, zoom);
+          const tileSWLat =
+            (Math.atan(Math.sinh(Math.PI * (1 - (2 * (coord.y + 1)) / n))) *
+              180) /
+            Math.PI;
+          const tileNELat =
+            (Math.atan(Math.sinh(Math.PI * (1 - (2 * coord.y) / n))) * 180) /
+            Math.PI;
+          const tileSWLng = (coord.x / n) * 360 - 180;
+          const tileNELng = ((coord.x + 1) / n) * 360 - 180;
+
+          if (
+            tileNELat < bounds.southwest.latitude ||
+            tileSWLat > bounds.northeast.latitude ||
+            tileNELng < bounds.southwest.longitude ||
+            tileSWLng > bounds.northeast.longitude
+          ) {
+            return null;
+          }
+        }
+
+        return urlTemplate
+          .replace('{x}', String(coord.x))
+          .replace('{y}', String(coord.y))
+          .replace('{z}', String(zoom));
+      },
+      tileSize: new google.maps.Size(tileSize, tileSize),
+      opacity,
+    });
+
+    const length = map.overlayMapTypes.getLength();
+    map.overlayMapTypes.insertAt(length, imageMapType);
+    overlayRef.current = imageMapType;
+    indexRef.current = length;
+  }, [
+    map,
+    urlTemplate,
+    tileSize,
+    opacity,
+    bounds,
+    zIndex,
+    onPress,
+    handleClick,
+  ]);
+
+  return null;
+};

package/src/components/index.ts

@@ -1,12 +1,15 @@
 export { Marker } from './Marker';
 export type {
   CalloutOptions,
+  MarkerRef,
   MarkerProps,
   MarkerPressEvent,
   MarkerDragEvent,
 } from './Marker.types';
 export { Polygon } from './Polygon';
 export type { PolygonProps } from './Polygon.types';
+export { Circle } from './Circle';
+export type { CircleProps } from './Circle.types';
 export { Polyline } from './Polyline';
 export type {
   PolylineProps,
@@ -15,3 +18,10 @@ export type {
 } from './Polyline.types';
 export { GeoJson } from './GeoJson';
 export type { GeoJsonProps } from './GeoJson.types';
+export { GroundOverlay } from './GroundOverlay';
+export type {
+  GroundOverlayProps,
+  GroundOverlayBounds,
+} from './GroundOverlay.types';
+export { TileOverlay } from './TileOverlay';
+export type { TileOverlayProps, TileOverlayBounds } from './TileOverlay.types';

package/src/components/index.web.ts

@@ -1,8 +1,17 @@
 export { Marker } from './Marker.web';
 export { Polygon } from './Polygon.web';
+export { Circle } from './Circle.web';
 export { Polyline } from './Polyline.web';
 export type { CalloutOptions, MarkerProps } from './Marker.types';
 export type { PolygonProps } from './Polygon.types';
+export type { CircleProps } from './Circle.types';
 export type { PolylineProps } from './Polyline.types';
 export { GeoJson } from './GeoJson';
 export type { GeoJsonProps } from './GeoJson.types';
+export { GroundOverlay } from './GroundOverlay.web';
+export type {
+  GroundOverlayProps,
+  GroundOverlayBounds,
+} from './GroundOverlay.types';
+export { TileOverlay } from './TileOverlay.web';
+export type { TileOverlayProps, TileOverlayBounds } from './TileOverlay.types';

package/src/fabric/LuggCalloutViewNativeComponent.ts

@@ -12,7 +12,7 @@ export interface Point {
 
 export interface NativeProps extends ViewProps {
   bubbled?: WithDefault<boolean, true>;
-  anchor?: Point;
+  offset?: Point;
 }
 
 export default codegenNativeComponent<NativeProps>(

package/src/fabric/LuggCircleViewNativeComponent.ts

@@ -0,0 +1,25 @@
+import { codegenNativeComponent } from 'react-native';
+import type { ViewProps, HostComponent, ColorValue } from 'react-native';
+import type {
+  Double,
+  DirectEventHandler,
+} from 'react-native/Libraries/Types/CodegenTypes';
+
+export interface Coordinate {
+  latitude: Double;
+  longitude: Double;
+}
+
+export interface NativeProps extends ViewProps {
+  center: Coordinate;
+  radius?: Double;
+  strokeColor?: ColorValue;
+  strokeWidth?: Double;
+  fillColor?: ColorValue;
+  tappable?: boolean;
+  onCirclePress?: DirectEventHandler<null>;
+}
+
+export default codegenNativeComponent<NativeProps>(
+  'LuggCircleView'
+) as HostComponent<NativeProps>;

package/src/fabric/LuggGroundOverlayViewNativeComponent.ts

@@ -0,0 +1,29 @@
+import { codegenNativeComponent } from 'react-native';
+import type { ViewProps, HostComponent } from 'react-native';
+import type {
+  Double,
+  DirectEventHandler,
+} from 'react-native/Libraries/Types/CodegenTypes';
+
+export interface Coordinate {
+  latitude: Double;
+  longitude: Double;
+}
+
+export interface Bounds {
+  northeast: Coordinate;
+  southwest: Coordinate;
+}
+
+export interface NativeProps extends ViewProps {
+  image: string;
+  bounds: Bounds;
+  opacity?: Double;
+  bearing?: Double;
+  tappable?: boolean;
+  onGroundOverlayPress?: DirectEventHandler<null>;
+}
+
+export default codegenNativeComponent<NativeProps>(
+  'LuggGroundOverlayView'
+) as HostComponent<NativeProps>;

package/src/fabric/LuggMapViewNativeComponent.ts

@@ -62,6 +62,10 @@ export interface ReadyEvent {}
 
 export interface NativeProps extends ViewProps {
   provider?: WithDefault<'google' | 'apple', 'google'>;
+  mapType?: WithDefault<
+    'standard' | 'satellite' | 'terrain' | 'hybrid' | 'muted-standard',
+    'standard'
+  >;
   mapId?: string;
   initialCoordinate?: Coordinate;
   initialZoom?: Double;
@@ -74,7 +78,11 @@ export interface NativeProps extends ViewProps {
   edgeInsets?: EdgeInsets;
   userLocationEnabled?: boolean;
   userLocationButtonEnabled?: boolean;
-  theme?: WithDefault<'light' | 'dark' | 'system', 'system'>;
+  poiEnabled?: boolean;
+  poiFilterMode?: WithDefault<'including' | 'excluding', 'including'>;
+  poiFilterCategories?: ReadonlyArray<string>;
+  theme?: WithDefault<'system' | 'light' | 'dark', 'system'>;
+  insetAdjustment?: WithDefault<'never' | 'automatic', 'never'>;
   onMapPress?: DirectEventHandler<PressEvent>;
   onMapLongPress?: DirectEventHandler<LongPressEvent>;
   onCameraMove?: DirectEventHandler<CameraMoveEvent>;