@lugg/maps 1.0.0-beta.2 → 1.0.0-beta.20

package/src/components/TileOverlay.web.tsx

@@ -0,0 +1,97 @@
+import { memo, useCallback, useEffect, useRef } from 'react';
+import { useMapContext } from '../MapProvider.web';
+import type { TileOverlayProps } from './TileOverlay.types';
+
+export const TileOverlay = memo(
+  ({
+    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,19 +62,30 @@ 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;
   minZoom?: Double;
   maxZoom?: Double;
-  zoomEnabled?: boolean;
-  scrollEnabled?: boolean;
-  rotateEnabled?: boolean;
-  pitchEnabled?: boolean;
+  zoomEnabled?: WithDefault<boolean, true>;
+  scrollEnabled?: WithDefault<boolean, true>;
+  rotateEnabled?: WithDefault<boolean, true>;
+  pitchEnabled?: WithDefault<boolean, true>;
+  compassEnabled?: WithDefault<boolean, true>;
+  staticMode?: boolean;
+  staticKey?: string;
   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>;

package/src/fabric/LuggMarkerViewNativeComponent.ts

@@ -1,4 +1,4 @@
-import { codegenNativeComponent } from 'react-native';
+import { codegenNativeComponent, codegenNativeCommands } from 'react-native';
 import type { ViewProps, HostComponent } from 'react-native';
 import type {
   Double,
@@ -25,6 +25,7 @@ export interface NativeProps extends ViewProps {
   rotate?: WithDefault<Double, 0>;
   scale?: WithDefault<Double, 1>;
   rasterize?: WithDefault<boolean, true>;
+  centerOnPress?: WithDefault<boolean, true>;
   draggable?: WithDefault<boolean, false>;
   onMarkerPress?: DirectEventHandler<{
     coordinate: {
@@ -68,6 +69,17 @@ export interface NativeProps extends ViewProps {
   }>;
 }
 
+type ComponentType = HostComponent<NativeProps>;
+
+interface NativeCommands {
+  showCallout: (viewRef: React.ElementRef<ComponentType>) => void;
+  hideCallout: (viewRef: React.ElementRef<ComponentType>) => void;
+}
+
+export const Commands = codegenNativeCommands<NativeCommands>({
+  supportedCommands: ['showCallout', 'hideCallout'],
+});
+
 export default codegenNativeComponent<NativeProps>(
   'LuggMarkerView'
-) as HostComponent<NativeProps>;
+) as ComponentType;

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

@@ -4,12 +4,15 @@ export type { MapProviderProps } from './MapProvider.types';
 export { Marker } from './components';
 export type {
   CalloutOptions,
+  MarkerRef,
   MarkerProps,
   MarkerPressEvent,
   MarkerDragEvent,
 } 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 +21,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,
@@ -27,10 +34,14 @@ export type {
   CameraEventPayload,
   MapCameraEvent,
   MapPressEvent,
+  MapType,
+  MapTheme,
+  InsetAdjustment,
+  PoiCategory,
+  PoiFilter,
 } from './MapView.types';
 export type {
   MapProvider as MapProviderType,
-  MapTheme,
   Coordinate,
   Point,
   EdgeInsets,

package/src/index.web.ts

@@ -5,16 +5,31 @@ 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,
   MoveCameraOptions,
   FitCoordinatesOptions,
   CameraEventPayload,
+  MapType,
+  PoiCategory,
+  PoiFilter,
 } from './MapView.types';
 export type {
   MapProvider as MapProviderType,

package/src/types.ts

@@ -29,11 +29,6 @@ export interface EdgeInsets {
   right: number;
 }
 
-/**
- * Map theme
- */
-export type MapTheme = 'light' | 'dark' | 'system';
-
 /**
  * Press event payload
  */

package/plugin/build/withMapsAndroid.d.ts

@@ -1,5 +0,0 @@
-import { type ConfigPlugin } from '@expo/config-plugins';
-export interface MapsAndroidPluginProps {
-  apiKey?: string;
-}
-export declare const withLuggMapsAndroid: ConfigPlugin<MapsAndroidPluginProps>;

package/plugin/build/withMapsAndroid.js

@@ -1,15 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.withLuggMapsAndroid = void 0;
-const config_plugins_1 = require("@expo/config-plugins");
-const withLuggMapsAndroid = (config, { apiKey }) => {
-    if (!apiKey) {
-        return config;
-    }
-    return (0, config_plugins_1.withAndroidManifest)(config, (c) => {
-        const mainApplication = config_plugins_1.AndroidConfig.Manifest.getMainApplicationOrThrow(c.modResults);
-        config_plugins_1.AndroidConfig.Manifest.addMetaDataItemToMainApplication(mainApplication, 'com.google.android.geo.API_KEY', apiKey);
-        return c;
-    });
-};
-exports.withLuggMapsAndroid = withLuggMapsAndroid;

package/plugin/build/withMapsIOS.d.ts

@@ -1,5 +0,0 @@
-import { type ConfigPlugin } from '@expo/config-plugins';
-export interface MapsIOSPluginProps {
-  apiKey?: string;
-}
-export declare const withLuggMapsIOS: ConfigPlugin<MapsIOSPluginProps>;

package/plugin/build/withMapsIOS.js

@@ -1,27 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.withLuggMapsIOS = void 0;
-const config_plugins_1 = require("@expo/config-plugins");
-const withLuggMapsIOS = (config, { apiKey }) => {
-    if (!apiKey) {
-        return config;
-    }
-    config = (0, config_plugins_1.withInfoPlist)(config, (c) => {
-        c.modResults.GMSApiKey = apiKey;
-        return c;
-    });
-    config = (0, config_plugins_1.withAppDelegate)(config, (c) => {
-        const contents = c.modResults.contents;
-        // Add import for GoogleMaps
-        if (!contents.includes('import GoogleMaps')) {
-            c.modResults.contents = contents.replace(/(import (?:UIKit|Expo))/, '$1\nimport GoogleMaps');
-        }
-        // Add GMSServices.provideAPIKey call
-        if (!c.modResults.contents.includes('GMSServices.provideAPIKey')) {
-            c.modResults.contents = c.modResults.contents.replace(/(func application\([^)]+\)[^{]*\{)/, `$1\n    GMSServices.provideAPIKey("${apiKey}")\n`);
-        }
-        return c;
-    });
-    return config;
-};
-exports.withLuggMapsIOS = withLuggMapsIOS;