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

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

@@ -7,6 +7,8 @@ export type {
 } 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 +17,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/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/LuggTileOverlayViewNativeComponent.ts

@@ -0,0 +1,30 @@
+import { codegenNativeComponent } from 'react-native';
+import type { ViewProps, HostComponent } from 'react-native';
+import type {
+  Double,
+  Int32,
+  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 {
+  urlTemplate: string;
+  tileSize?: Int32;
+  opacity?: Double;
+  bounds?: Bounds;
+  tappable?: boolean;
+  onTileOverlayPress?: DirectEventHandler<null>;
+}
+
+export default codegenNativeComponent<NativeProps>(
+  'LuggTileOverlayView'
+) as HostComponent<NativeProps>;

package/src/index.ts

@@ -10,6 +10,8 @@ export type {
 } from './components';
 export { Polygon } from './components';
 export type { PolygonProps } from './components';
+export { Circle } from './components';
+export type { CircleProps } from './components';
 export { Polyline } from './components';
 export type {
   PolylineProps,
@@ -18,6 +20,10 @@ export type {
 } from './components';
 export { GeoJson } from './components';
 export type { GeoJsonProps } from './components';
+export { GroundOverlay } from './components';
+export type { GroundOverlayProps, GroundOverlayBounds } from './components';
+export { TileOverlay } from './components';
+export type { TileOverlayProps, TileOverlayBounds } from './components';
 export type {
   MapViewProps,
   MapViewRef,

package/src/index.web.ts

@@ -5,10 +5,22 @@ export { Marker } from './components/index.web';
 export type { CalloutOptions, MarkerProps } from './components/index.web';
 export { Polygon } from './components/index.web';
 export type { PolygonProps } from './components/index.web';
+export { Circle } from './components/index.web';
+export type { CircleProps } from './components/index.web';
 export { Polyline } from './components/index.web';
 export type { PolylineProps } from './components/index.web';
 export { GeoJson } from './components/index.web';
 export type { GeoJsonProps } from './components/index.web';
+export { GroundOverlay } from './components/index.web';
+export type {
+  GroundOverlayProps,
+  GroundOverlayBounds,
+} from './components/index.web';
+export { TileOverlay } from './components/index.web';
+export type {
+  TileOverlayProps,
+  TileOverlayBounds,
+} from './components/index.web';
 export type {
   MapViewProps,
   MapViewRef,