@lugg/maps 0.2.0-alpha.6 → 0.2.0-alpha.8

package/lib/typescript/src/MapProvider.types.d.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;
+}
+//# sourceMappingURL=MapProvider.types.d.ts.map

package/lib/typescript/src/MapProvider.types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MapProvider.types.d.ts","sourceRoot":"","sources":["../../../src/MapProvider.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC;;GAEG;AACH,MAAM,WAAW,gBAAgB;IAC/B;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB;;OAEG;IACH,QAAQ,EAAE,SAAS,CAAC;CACrB"}

package/lib/typescript/src/MapProvider.web.d.ts

@@ -0,0 +1,3 @@
+import type { MapProviderProps } from './MapProvider.types';
+export declare function MapProvider({ apiKey, children }: MapProviderProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=MapProvider.web.d.ts.map

package/lib/typescript/src/MapProvider.web.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MapProvider.web.d.ts","sourceRoot":"","sources":["../../../src/MapProvider.web.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,qBAAqB,CAAC;AAE5D,wBAAgB,WAAW,CAAC,EAAE,MAAW,EAAE,QAAQ,EAAE,EAAE,gBAAgB,2CAEtE"}

package/lib/typescript/src/MapView.web.d.ts

@@ -0,0 +1,12 @@
+import { Component } from 'react';
+import type { MapViewProps, MapViewRef, MoveCameraOptions, FitCoordinatesOptions } from './MapView.types';
+import type { Coordinate } from './types';
+export declare class MapView extends Component<MapViewProps> implements MapViewRef {
+    static defaultProps: Partial<MapViewProps>;
+    private mapInstance;
+    private handleMapReady;
+    moveCamera(coordinate: Coordinate, options: MoveCameraOptions): void;
+    fitCoordinates(coordinates: Coordinate[], options?: FitCoordinatesOptions): void;
+    render(): import("react/jsx-runtime").JSX.Element;
+}
+//# sourceMappingURL=MapView.web.d.ts.map

package/lib/typescript/src/MapView.web.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MapView.web.d.ts","sourceRoot":"","sources":["../../../src/MapView.web.tsx"],"names":[],"mappings":"AAAA,OAAO,EAEL,SAAS,EAOV,MAAM,OAAO,CAAC;AAOf,OAAO,KAAK,EACV,YAAY,EACZ,UAAU,EACV,iBAAiB,EACjB,qBAAqB,EAEtB,MAAM,iBAAiB,CAAC;AACzB,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAsJ1C,qBAAa,OAAQ,SAAQ,SAAS,CAAC,YAAY,CAAE,YAAW,UAAU;IACxE,MAAM,CAAC,YAAY,EAAE,OAAO,CAAC,YAAY,CAAC,CAQxC;IAEF,OAAO,CAAC,WAAW,CAAgC;IAEnD,OAAO,CAAC,cAAc,CAEpB;IAEF,UAAU,CAAC,UAAU,EAAE,UAAU,EAAE,OAAO,EAAE,iBAAiB;IAgB7D,cAAc,CAAC,WAAW,EAAE,UAAU,EAAE,EAAE,OAAO,CAAC,EAAE,qBAAqB;IA0BzE,MAAM;CAoFP"}

package/lib/typescript/src/components/Marker.web.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+import type { MarkerProps } from './Marker';
+export declare class Marker extends React.Component<MarkerProps> {
+    render(): import("react/jsx-runtime").JSX.Element;
+}
+//# sourceMappingURL=Marker.web.d.ts.map

package/lib/typescript/src/components/Marker.web.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Marker.web.d.ts","sourceRoot":"","sources":["../../../../src/components/Marker.web.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;AAQ5C,qBAAa,MAAO,SAAQ,KAAK,CAAC,SAAS,CAAC,WAAW,CAAC;IACtD,MAAM;CAoBP"}

package/lib/typescript/src/components/Polyline.web.d.ts

@@ -0,0 +1,6 @@
+import { Component } from 'react';
+import type { PolylineProps } from './Polyline';
+export declare class Polyline extends Component<PolylineProps> {
+    render(): import("react/jsx-runtime").JSX.Element;
+}
+//# sourceMappingURL=Polyline.web.d.ts.map

package/lib/typescript/src/components/Polyline.web.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Polyline.web.d.ts","sourceRoot":"","sources":["../../../../src/components/Polyline.web.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,SAAS,EAMV,MAAM,OAAO,CAAC;AAEf,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,YAAY,CAAC;AAgMhD,qBAAa,QAAS,SAAQ,SAAS,CAAC,aAAa,CAAC;IACpD,MAAM;CAGP"}

package/lib/typescript/src/components/index.web.d.ts

@@ -0,0 +1,5 @@
+export { Marker } from './Marker.web';
+export { Polyline } from './Polyline.web';
+export type { MarkerProps } from './Marker';
+export type { PolylineProps } from './Polyline';
+//# sourceMappingURL=index.web.d.ts.map

package/lib/typescript/src/components/index.web.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.web.d.ts","sourceRoot":"","sources":["../../../../src/components/index.web.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,cAAc,CAAC;AACtC,OAAO,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AAC1C,YAAY,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;AAC5C,YAAY,EAAE,aAAa,EAAE,MAAM,YAAY,CAAC"}

package/lib/typescript/src/index.d.ts

@@ -1,5 +1,7 @@
 export { MapView } from './MapView';
+export { MapProvider } from './MapProvider';
+export type { MapProviderProps } from './MapProvider.types';
 export * from './components';
 export type { MapViewProps, MapViewRef, MoveCameraOptions, FitCoordinatesOptions, CameraEventPayload, } from './MapView.types';
-export type { MapProvider, Coordinate, Point, EdgeInsets } from './types';
+export type { MapProvider as MapProviderType, Coordinate, Point, EdgeInsets, } from './types';
 //# sourceMappingURL=index.d.ts.map

package/lib/typescript/src/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AACpC,cAAc,cAAc,CAAC;AAC7B,YAAY,EACV,YAAY,EACZ,UAAU,EACV,iBAAiB,EACjB,qBAAqB,EACrB,kBAAkB,GACnB,MAAM,iBAAiB,CAAC;AACzB,YAAY,EAAE,WAAW,EAAE,UAAU,EAAE,KAAK,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AACpC,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAC5C,YAAY,EAAE,gBAAgB,EAAE,MAAM,qBAAqB,CAAC;AAC5D,cAAc,cAAc,CAAC;AAC7B,YAAY,EACV,YAAY,EACZ,UAAU,EACV,iBAAiB,EACjB,qBAAqB,EACrB,kBAAkB,GACnB,MAAM,iBAAiB,CAAC;AACzB,YAAY,EACV,WAAW,IAAI,eAAe,EAC9B,UAAU,EACV,KAAK,EACL,UAAU,GACX,MAAM,SAAS,CAAC"}

package/lib/typescript/src/index.web.d.ts

@@ -0,0 +1,7 @@
+export { MapView } from './MapView.web';
+export { MapProvider } from './MapProvider.web';
+export type { MapProviderProps } from './MapProvider.types';
+export * from './components/index.web';
+export type { MapViewProps, MapViewRef, MoveCameraOptions, FitCoordinatesOptions, CameraEventPayload, } from './MapView.types';
+export type { MapProvider as MapProviderType, Coordinate, Point, EdgeInsets, } from './types';
+//# sourceMappingURL=index.web.d.ts.map

package/lib/typescript/src/index.web.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.web.d.ts","sourceRoot":"","sources":["../../../src/index.web.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,eAAe,CAAC;AACxC,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAChD,YAAY,EAAE,gBAAgB,EAAE,MAAM,qBAAqB,CAAC;AAC5D,cAAc,wBAAwB,CAAC;AACvC,YAAY,EACV,YAAY,EACZ,UAAU,EACV,iBAAiB,EACjB,qBAAqB,EACrB,kBAAkB,GACnB,MAAM,iBAAiB,CAAC;AACzB,YAAY,EACV,WAAW,IAAI,eAAe,EAC9B,UAAU,EACV,KAAK,EACL,UAAU,GACX,MAAM,SAAS,CAAC"}

package/package.json

@@ -1,12 +1,17 @@
 {
   "name": "@lugg/maps",
-  "version": "0.2.0-alpha.6",
+  "version": "0.2.0-alpha.8",
   "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"
     },
@@ -75,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",
@@ -91,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"
   },

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.web.tsx

@@ -0,0 +1,317 @@
+import {
+  Children,
+  Component,
+  isValidElement,
+  useEffect,
+  useRef,
+  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;
+  userLocationEnabled?: boolean;
+}
+
+function MapController({
+  onMapReady,
+  onCameraMove,
+  onCameraIdle,
+  onReady,
+  userLocationEnabled,
+}: MapControllerProps) {
+  const map = useMap();
+  const readyFired = useRef(false);
+  const userLocationMarker =
+    useRef<google.maps.marker.AdvancedMarkerElement | null>(null);
+
+  useEffect(() => {
+    if (!map) return;
+    onMapReady(map);
+
+    if (!readyFired.current) {
+      readyFired.current = true;
+      onReady?.();
+    }
+  }, [map, onMapReady, onReady]);
+
+  useEffect(() => {
+    if (!map || !userLocationEnabled) {
+      if (userLocationMarker.current) {
+        userLocationMarker.current.map = null;
+        userLocationMarker.current = null;
+      }
+      return;
+    }
+
+    let watchId: number | null = null;
+
+    const updateLocation = (position: GeolocationPosition) => {
+      const { latitude, longitude } = position.coords;
+      const pos = { lat: latitude, lng: longitude };
+
+      if (!userLocationMarker.current) {
+        const dot = document.createElement('div');
+        dot.style.width = '16px';
+        dot.style.height = '16px';
+        dot.style.backgroundColor = '#4285F4';
+        dot.style.border = '2px solid white';
+        dot.style.borderRadius = '50%';
+        dot.style.boxShadow = '0 1px 4px rgba(0,0,0,0.3)';
+
+        userLocationMarker.current =
+          new google.maps.marker.AdvancedMarkerElement({
+            map,
+            position: pos,
+            content: dot,
+          });
+      } else {
+        userLocationMarker.current.position = pos;
+      }
+    };
+
+    navigator.geolocation.getCurrentPosition(updateLocation, () => {});
+    watchId = navigator.geolocation.watchPosition(updateLocation, () => {});
+
+    return () => {
+      if (watchId !== null) {
+        navigator.geolocation.clearWatch(watchId);
+      }
+      if (userLocationMarker.current) {
+        userLocationMarker.current.map = null;
+        userLocationMarker.current = null;
+      }
+    };
+  }, [map, userLocationEnabled]);
+
+  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.panTo(center);
+      map.setZoom(zoom);
+    } else {
+      map.setCenter(center);
+      map.setZoom(zoom);
+    }
+  }
+
+  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}
+              userLocationEnabled={userLocationEnabled}
+            />
+            {mapChildren}
+          </Map>
+        </View>
+        {overlayChildren}
+      </View>
+    );
+  }
+}

package/src/components/Marker.web.tsx

@@ -0,0 +1,32 @@
+import React from 'react';
+import { AdvancedMarker } from '@vis.gl/react-google-maps';
+import type { MarkerProps } from './Marker';
+
+/**
+ * Converts point to % anchor for web.
+ * e.g. `0.5` to `-50%`
+ */
+const toWebAnchor = (value: number) => `-${value * 100}%`;
+
+export class Marker extends React.Component<MarkerProps> {
+  render() {
+    const { coordinate, title, anchor, zIndex, children } = this.props;
+
+    const position = {
+      lat: coordinate.latitude,
+      lng: coordinate.longitude,
+    };
+
+    return (
+      <AdvancedMarker
+        position={position}
+        title={title}
+        zIndex={zIndex}
+        anchorLeft={anchor ? toWebAnchor(anchor.x) : undefined}
+        anchorTop={anchor ? toWebAnchor(anchor.y) : undefined}
+      >
+        {children}
+      </AdvancedMarker>
+    );
+  }
+}