@lugg/maps 0.2.0-alpha.0 → 0.2.0-alpha.10

package/package.json

@@ -1,16 +1,22 @@
 {
   "name": "@lugg/maps",
-  "version": "0.2.0-alpha.0",
+  "version": "0.2.0-alpha.10",
   "description": "Universal maps for React Native.",
   "main": "./lib/module/index.js",
   "types": "./lib/typescript/src/index.d.ts",
   "exports": {
     ".": {
       "source": "./src/index.ts",
+      "react-native": "./lib/module/index.js",
+      "web": {
+        "types": "./lib/typescript/src/index.web.d.ts",
+        "default": "./lib/module/index.web.js"
+      },
       "types": "./lib/typescript/src/index.d.ts",
       "default": "./lib/module/index.js"
     },
-    "./package.json": "./package.json"
+    "./package.json": "./package.json",
+    "./app.plugin.js": "./app.plugin.js"
   },
   "files": [
     "src",
@@ -74,6 +80,7 @@
     "@release-it/conventional-changelog": "^10.0.1",
     "@types/jest": "^29.5.14",
     "@types/react": "^19.2.0",
+    "@vis.gl/react-google-maps": "^1.7.1",
     "commitlint": "^19.8.1",
     "del-cli": "^6.0.0",
     "eslint": "^9.35.0",
@@ -90,9 +97,15 @@
     "typescript": "^5.9.2"
   },
   "peerDependencies": {
+    "@vis.gl/react-google-maps": ">=1.0.0",
     "react": "*",
     "react-native": "*"
   },
+  "peerDependenciesMeta": {
+    "@vis.gl/react-google-maps": {
+      "optional": true
+    }
+  },
   "dependencies": {
     "@expo/config-plugins": "^9.0.0"
   },
@@ -129,11 +142,11 @@
     },
     "ios": {
       "componentProvider": {
-        "LuggMapsGoogleMapView": "LuggMapsGoogleMapView",
-        "LuggMapsAppleMapView": "LuggMapsAppleMapView",
-        "LuggMapsMarkerView": "LuggMapsMarkerView",
-        "LuggMapsWrapperView": "LuggMapsWrapperView",
-        "LuggMapsPolylineView": "LuggMapsPolylineView"
+        "LuggGoogleMapView": "LuggGoogleMapView",
+        "LuggAppleMapView": "LuggAppleMapView",
+        "LuggMarkerView": "LuggMarkerView",
+        "LuggMapWrapperView": "LuggMapWrapperView",
+        "LuggPolylineView": "LuggPolylineView"
       }
     }
   },

package/plugin/build/index.js

@@ -1,13 +1,13 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 const config_plugins_1 = require("@expo/config-plugins");
-const withMapsAndroid_1 = require("./withMapsAndroid");
-const withMapsIOS_1 = require("./withMapsIOS");
+const withLuggMapsAndroid_1 = require("./withLuggMapsAndroid");
+const withLuggMapsIOS_1 = require("./withLuggMapsIOS");
 const pkg = require('../../package.json');
 const withMaps = (config, props = {}) => {
     const { iosGoogleMapsApiKey, androidGoogleMapsApiKey } = props ?? {};
-    config = (0, withMapsIOS_1.withLuggMapsIOS)(config, { apiKey: iosGoogleMapsApiKey });
-    config = (0, withMapsAndroid_1.withLuggMapsAndroid)(config, { apiKey: androidGoogleMapsApiKey });
+    config = (0, withLuggMapsIOS_1.withLuggMapsIOS)(config, { apiKey: iosGoogleMapsApiKey });
+    config = (0, withLuggMapsAndroid_1.withLuggMapsAndroid)(config, { apiKey: androidGoogleMapsApiKey });
     return config;
 };
 exports.default = (0, config_plugins_1.createRunOncePlugin)(withMaps, pkg.name, pkg.version);

package/{lib/typescript/plugin/src/withMapsAndroid.d.ts → plugin/build/withLuggMapsAndroid.d.ts}

@@ -3,4 +3,3 @@ export interface MapsAndroidPluginProps {
     apiKey?: string;
 }
 export declare const withLuggMapsAndroid: ConfigPlugin<MapsAndroidPluginProps>;
-//# sourceMappingURL=withMapsAndroid.d.ts.map

package/plugin/build/withLuggMapsAndroid.js

@@ -0,0 +1,15 @@
+"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/{lib/typescript/plugin/src/withMapsIOS.d.ts → plugin/build/withLuggMapsIOS.d.ts}

@@ -3,4 +3,3 @@ export interface MapsIOSPluginProps {
     apiKey?: string;
 }
 export declare const withLuggMapsIOS: ConfigPlugin<MapsIOSPluginProps>;
-//# sourceMappingURL=withMapsIOS.d.ts.map

package/plugin/build/withLuggMapsIOS.js

@@ -0,0 +1,27 @@
+"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;

package/plugin/build/withMapsAndroid.d.ts

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

package/plugin/build/withMapsIOS.d.ts

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

package/src/MapProvider.tsx

@@ -0,0 +1,10 @@
+import type { MapProviderProps } from './MapProvider.types';
+
+/**
+ * Provider component for map configuration.
+ * On web, wraps children with Google Maps APIProvider.
+ * On native, passes children through.
+ */
+export function MapProvider({ children }: MapProviderProps) {
+  return children;
+}

package/src/MapProvider.types.ts

@@ -0,0 +1,16 @@
+import type { ReactNode } from 'react';
+
+/**
+ * MapProvider props
+ */
+export interface MapProviderProps {
+  /**
+   * Google Maps API key
+   * @platform web
+   */
+  apiKey?: string;
+  /**
+   * Map children
+   */
+  children: ReactNode;
+}

package/src/MapProvider.web.tsx

@@ -0,0 +1,6 @@
+import { APIProvider } from '@vis.gl/react-google-maps';
+import type { MapProviderProps } from './MapProvider.types';
+
+export function MapProvider({ apiKey = '', children }: MapProviderProps) {
+  return <APIProvider apiKey={apiKey}>{children}</APIProvider>;
+}

package/src/MapView.tsx

@@ -1,12 +1,12 @@
 import React from 'react';
 import { Platform, StyleSheet } from 'react-native';
-import LuggMapsGoogleMapViewNativeComponent, {
+import LuggGoogleMapViewNativeComponent, {
   Commands as GoogleMapCommands,
-} from './fabric/LuggMapsGoogleMapViewNativeComponent';
-import LuggMapsAppleMapViewNativeComponent, {
+} from './fabric/LuggGoogleMapViewNativeComponent';
+import LuggAppleMapViewNativeComponent, {
   Commands as AppleMapCommands,
-} from './fabric/LuggMapsAppleMapViewNativeComponent';
-import LuggMapsWrapperViewNativeComponent from './fabric/LuggMapsWrapperViewNativeComponent';
+} from './fabric/LuggAppleMapViewNativeComponent';
+import LuggMapWrapperViewNativeComponent from './fabric/LuggMapWrapperViewNativeComponent';
 import type {
   MapViewProps,
   MapViewRef,
@@ -55,7 +55,8 @@ export class MapView
     const first = coordinates[0];
     if (!ref || !first) return;
 
-    const { padding = 0, duration = -1 } = options ?? {};
+    const { padding, duration = -1 } = options ?? {};
+    const { top = 0, left = 0, bottom = 0, right = 0 } = padding ?? {};
 
     if (coordinates.length === 1) {
       const zoom = this.props.initialZoom ?? 10;
@@ -63,7 +64,15 @@ export class MapView
       return;
     }
 
-    this.nativeCommands.fitCoordinates(ref, coordinates, padding, duration);
+    this.nativeCommands.fitCoordinates(
+      ref,
+      coordinates,
+      top,
+      left,
+      bottom,
+      right,
+      duration
+    );
   }
 
   render() {
@@ -72,21 +81,25 @@ export class MapView
       mapId,
       initialCoordinate,
       initialZoom,
+      minZoom,
+      maxZoom,
       zoomEnabled,
       scrollEnabled,
       rotateEnabled,
       pitchEnabled,
       padding,
+      userLocationEnabled,
       onCameraMove,
       onCameraIdle,
+      onReady,
       children,
       ...rest
     } = this.props;
 
     const NativeMapView =
       Platform.OS === 'ios' && provider === 'apple'
-        ? LuggMapsAppleMapViewNativeComponent
-        : LuggMapsGoogleMapViewNativeComponent;
+        ? LuggAppleMapViewNativeComponent
+        : LuggGoogleMapViewNativeComponent;
 
     return (
       <NativeMapView
@@ -95,15 +108,19 @@ export class MapView
         mapId={mapId}
         initialCoordinate={initialCoordinate}
         initialZoom={initialZoom}
+        minZoom={minZoom}
+        maxZoom={maxZoom}
         zoomEnabled={zoomEnabled}
         scrollEnabled={scrollEnabled}
         rotateEnabled={rotateEnabled}
         pitchEnabled={pitchEnabled}
         padding={padding}
+        userLocationEnabled={userLocationEnabled}
         onCameraMove={onCameraMove}
         onCameraIdle={onCameraIdle}
+        onReady={onReady}
       >
-        <LuggMapsWrapperViewNativeComponent style={StyleSheet.absoluteFill} />
+        <LuggMapWrapperViewNativeComponent style={StyleSheet.absoluteFill} />
         {children}
       </NativeMapView>
     );

package/src/MapView.types.ts

@@ -13,11 +13,10 @@ export interface MoveCameraOptions {
 
 /**
  * Options for fitting coordinates in view
- * @default padding 0
  * @default duration -1
  */
 export interface FitCoordinatesOptions {
-  padding?: number;
+  padding?: EdgeInsets;
   duration?: number;
 }
 
@@ -33,20 +32,12 @@ export interface MapViewRef {
 }
 
 /**
- * Camera move event data
- */
-export interface CameraMoveEvent {
-  coordinate: Coordinate;
-  zoom: number;
-  dragging: boolean;
-}
-
-/**
- * Camera idle event data
+ * Camera event payload
  */
-export interface CameraIdleEvent {
+export interface CameraEventPayload {
   coordinate: Coordinate;
   zoom: number;
+  gesture: boolean;
 }
 
 /**
@@ -71,6 +62,14 @@ export interface MapViewProps extends ViewProps {
    * @default 10
    */
   initialZoom?: number;
+  /**
+   * Minimum zoom level
+   */
+  minZoom?: number;
+  /**
+   * Maximum zoom level
+   */
+  maxZoom?: number;
   /**
    * Enable zoom gestures
    * @default true
@@ -95,14 +94,24 @@ export interface MapViewProps extends ViewProps {
    * Map content padding
    */
   padding?: EdgeInsets;
+  /**
+   * Show current user location on the map.
+   * Requires location permission to be granted, otherwise silently ignored.
+   * @default false
+   */
+  userLocationEnabled?: boolean;
   /**
    * Called when camera moves
    */
-  onCameraMove?: (event: NativeSyntheticEvent<CameraMoveEvent>) => void;
+  onCameraMove?: (event: NativeSyntheticEvent<CameraEventPayload>) => void;
   /**
    * Called when camera stops moving
    */
-  onCameraIdle?: (event: NativeSyntheticEvent<CameraIdleEvent>) => void;
+  onCameraIdle?: (event: NativeSyntheticEvent<CameraEventPayload>) => void;
+  /**
+   * Called when map is loaded and ready
+   */
+  onReady?: () => void;
   /**
    * Map children (markers, polylines, etc.)
    */

package/src/MapView.web.tsx

@@ -0,0 +1,319 @@
+import {
+  Children,
+  Component,
+  isValidElement,
+  useEffect,
+  useRef,
+  useState,
+  type CSSProperties,
+  type ReactElement,
+  type ReactNode,
+} from 'react';
+import type { NativeSyntheticEvent, ViewStyle } from 'react-native';
+import { View } from 'react-native';
+import { Map, useMap } from '@vis.gl/react-google-maps';
+import { Marker } from './components/Marker.web';
+import { Polyline } from './components/Polyline.web';
+
+import type {
+  MapViewProps,
+  MapViewRef,
+  MoveCameraOptions,
+  FitCoordinatesOptions,
+  CameraEventPayload,
+} from './MapView.types';
+import type { Coordinate } from './types';
+
+// Map-specific component types that render inside the Google Map
+const MAP_COMPONENT_TYPES = new Set([Marker, Polyline]);
+
+const isMapComponent = (child: ReactElement): boolean =>
+  MAP_COMPONENT_TYPES.has(child.type as typeof Marker | typeof Polyline);
+
+const createSyntheticEvent = <T,>(nativeEvent: T): NativeSyntheticEvent<T> =>
+  ({
+    nativeEvent,
+    currentTarget: null,
+    target: null,
+    bubbles: false,
+    cancelable: false,
+    defaultPrevented: false,
+    eventPhase: 0,
+    isTrusted: true,
+    preventDefault: () => {},
+    stopPropagation: () => {},
+    isDefaultPrevented: () => false,
+    isPropagationStopped: () => false,
+    persist: () => {},
+    timeStamp: Date.now(),
+    type: '',
+  } as unknown as NativeSyntheticEvent<T>);
+
+interface MapControllerProps {
+  onMapReady: (map: google.maps.Map) => void;
+  onCameraMove?: (event: NativeSyntheticEvent<CameraEventPayload>) => void;
+  onCameraIdle?: (event: NativeSyntheticEvent<CameraEventPayload>) => void;
+  onReady?: () => void;
+}
+
+interface UserLocationMarkerProps {
+  enabled?: boolean;
+}
+
+const userLocationDotStyle: CSSProperties = {
+  width: 16,
+  height: 16,
+  backgroundColor: '#4285F4',
+  border: '2px solid white',
+  borderRadius: '50%',
+  boxShadow: '0 1px 4px rgba(0,0,0,0.3)',
+};
+
+function UserLocationMarker({ enabled }: UserLocationMarkerProps) {
+  const [coordinate, setCoordinate] = useState<Coordinate | null>(null);
+
+  useEffect(() => {
+    if (!enabled) {
+      setCoordinate(null);
+      return;
+    }
+
+    let watchId: number | null = null;
+
+    const updateLocation = (position: GeolocationPosition) => {
+      setCoordinate({
+        latitude: position.coords.latitude,
+        longitude: position.coords.longitude,
+      });
+    };
+
+    navigator.geolocation.getCurrentPosition(updateLocation, () => {});
+    watchId = navigator.geolocation.watchPosition(updateLocation, () => {});
+
+    return () => {
+      if (watchId !== null) {
+        navigator.geolocation.clearWatch(watchId);
+      }
+    };
+  }, [enabled]);
+
+  if (!coordinate) return null;
+
+  return (
+    <Marker coordinate={coordinate} anchor={{ x: 0.5, y: 0.5 }}>
+      <div style={userLocationDotStyle} />
+    </Marker>
+  );
+}
+
+function MapController({
+  onMapReady,
+  onCameraMove,
+  onCameraIdle,
+  onReady,
+}: MapControllerProps) {
+  const map = useMap();
+  const readyFired = useRef(false);
+
+  useEffect(() => {
+    if (!map) return;
+    onMapReady(map);
+
+    if (!readyFired.current) {
+      readyFired.current = true;
+      onReady?.();
+    }
+  }, [map, onMapReady, onReady]);
+
+  useEffect(() => {
+    if (!map) return;
+
+    const createPayload = (gesture: boolean): CameraEventPayload => {
+      const center = map.getCenter();
+      return {
+        coordinate: {
+          latitude: center?.lat() ?? 0,
+          longitude: center?.lng() ?? 0,
+        },
+        zoom: map.getZoom() ?? 0,
+        gesture,
+      };
+    };
+
+    let isDragging = false;
+
+    const dragStartListener = map.addListener('dragstart', () => {
+      isDragging = true;
+    });
+
+    const dragEndListener = map.addListener('dragend', () => {
+      isDragging = false;
+    });
+
+    const centerListener = map.addListener('center_changed', () => {
+      onCameraMove?.(createSyntheticEvent(createPayload(isDragging)));
+    });
+
+    const idleListener = map.addListener('idle', () => {
+      onCameraIdle?.(createSyntheticEvent(createPayload(false)));
+    });
+
+    return () => {
+      google.maps.event.removeListener(dragStartListener);
+      google.maps.event.removeListener(dragEndListener);
+      google.maps.event.removeListener(centerListener);
+      google.maps.event.removeListener(idleListener);
+    };
+  }, [map, onCameraMove, onCameraIdle]);
+
+  return null;
+}
+
+export class MapView extends Component<MapViewProps> implements MapViewRef {
+  static defaultProps: Partial<MapViewProps> = {
+    provider: 'google',
+    mapId: 'DEMO_MAP_ID',
+    initialZoom: 10,
+    zoomEnabled: true,
+    scrollEnabled: true,
+    rotateEnabled: true,
+    pitchEnabled: true,
+  };
+
+  private mapInstance: google.maps.Map | null = null;
+
+  private handleMapReady = (map: google.maps.Map) => {
+    this.mapInstance = map;
+  };
+
+  moveCamera(coordinate: Coordinate, options: MoveCameraOptions) {
+    const map = this.mapInstance;
+    if (!map) return;
+
+    const { zoom, duration = -1 } = options;
+    const center = { lat: coordinate.latitude, lng: coordinate.longitude };
+
+    if (duration === 0) {
+      map.moveCamera({ center, zoom });
+    } else {
+      const currentZoom = map.getZoom();
+      const zoomChanged = zoom !== undefined && zoom !== currentZoom;
+
+      if (zoomChanged) {
+        map.setZoom(zoom);
+      }
+      map.panTo(center);
+    }
+  }
+
+  fitCoordinates(coordinates: Coordinate[], options?: FitCoordinatesOptions) {
+    const map = this.mapInstance;
+    const first = coordinates[0];
+    if (!map || !first) return;
+
+    const { padding, duration = -1 } = options ?? {};
+
+    if (coordinates.length === 1) {
+      const zoom = this.props.initialZoom ?? 10;
+      this.moveCamera(first, { zoom, duration });
+      return;
+    }
+
+    const bounds = new google.maps.LatLngBounds();
+    coordinates.forEach((coord) => {
+      bounds.extend({ lat: coord.latitude, lng: coord.longitude });
+    });
+
+    map.fitBounds(bounds, {
+      top: padding?.top ?? 0,
+      left: padding?.left ?? 0,
+      bottom: padding?.bottom ?? 0,
+      right: padding?.right ?? 0,
+    });
+  }
+
+  render() {
+    const {
+      mapId,
+      initialCoordinate,
+      initialZoom,
+      minZoom,
+      maxZoom,
+      zoomEnabled,
+      scrollEnabled,
+      pitchEnabled,
+      padding,
+      userLocationEnabled,
+      onCameraMove,
+      onCameraIdle,
+      onReady,
+      children,
+      style,
+    } = this.props;
+
+    const gestureHandling =
+      scrollEnabled === false && zoomEnabled === false
+        ? 'none'
+        : scrollEnabled === false
+        ? 'none'
+        : 'auto';
+
+    const defaultCenter = initialCoordinate
+      ? { lat: initialCoordinate.latitude, lng: initialCoordinate.longitude }
+      : undefined;
+
+    // Separate map children (Marker, Polyline) from overlay children (regular Views)
+    const mapChildren: ReactNode[] = [];
+    const overlayChildren: ReactNode[] = [];
+
+    Children.forEach(children, (child) => {
+      if (!isValidElement(child)) return;
+      if (isMapComponent(child)) {
+        mapChildren.push(child);
+      } else {
+        overlayChildren.push(child);
+      }
+    });
+
+    const mapContainerStyle: ViewStyle = {
+      position: 'absolute',
+      top: padding?.top ?? 0,
+      left: padding?.left ?? 0,
+      right: padding?.right ?? 0,
+      bottom: padding?.bottom ?? 0,
+    };
+
+    const mapStyle: CSSProperties = {
+      width: '100%',
+      height: '100%',
+    };
+
+    return (
+      <View style={style}>
+        <View style={mapContainerStyle}>
+          <Map
+            mapId={mapId}
+            defaultCenter={defaultCenter}
+            defaultZoom={initialZoom}
+            minZoom={minZoom}
+            maxZoom={maxZoom}
+            gestureHandling={gestureHandling}
+            disableDefaultUI
+            tilt={pitchEnabled === false ? 0 : undefined}
+            style={mapStyle}
+          >
+            <MapController
+              onMapReady={this.handleMapReady}
+              onCameraMove={onCameraMove}
+              onCameraIdle={onCameraIdle}
+              onReady={onReady}
+            />
+            <UserLocationMarker enabled={userLocationEnabled} />
+            {mapChildren}
+          </Map>
+        </View>
+        {overlayChildren}
+      </View>
+    );
+  }
+}