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

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>
+    );
+  }
+}

package/src/components/Marker.tsx

@@ -25,6 +25,10 @@ export interface MarkerProps {
    * Anchor point for custom marker views
    */
   anchor?: Point;
+  /**
+   * Z-index for marker ordering. Higher values render on top.
+   */
+  zIndex?: number;
   /**
    * Custom marker view
    */
@@ -33,12 +37,12 @@ export interface MarkerProps {
 
 export class Marker extends React.Component<MarkerProps> {
   render() {
-    const { name, coordinate, title, description, anchor, children } =
+    const { name, coordinate, title, description, anchor, zIndex, children } =
       this.props;
 
     return (
       <LuggMarkerViewNativeComponent
-        style={styles.marker}
+        style={[{ zIndex }, styles.marker]}
         name={name}
         coordinate={coordinate}
         title={title}

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>
+    );
+  }
+}

package/src/components/Polyline.tsx

@@ -21,6 +21,10 @@ export interface PolylineProps {
    * Animate the polyline with a snake effect
    */
   animated?: boolean;
+  /**
+   * Z-index for layering polylines
+   */
+  zIndex?: number;
 }
 
 export class Polyline extends React.Component<PolylineProps> {
@@ -30,11 +34,12 @@ export class Polyline extends React.Component<PolylineProps> {
       strokeColors,
       strokeWidth,
       animated = false,
+      zIndex,
     } = this.props;
 
     return (
       <LuggPolylineViewNativeComponent
-        style={styles.polyline}
+        style={[{ zIndex }, styles.polyline]}
         coordinates={coordinates}
         strokeColors={strokeColors}
         strokeWidth={strokeWidth}

package/src/components/Polyline.web.tsx

@@ -0,0 +1,222 @@
+import {
+  Component,
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from 'react';
+import { useMap } from '@vis.gl/react-google-maps';
+import type { PolylineProps } from './Polyline';
+
+const ANIMATION_DURATION = 1500;
+
+function interpolateColor(color1: string, color2: string, t: number): string {
+  const hex = (c: string) => parseInt(c, 16);
+  const r1 = hex(color1.slice(1, 3));
+  const g1 = hex(color1.slice(3, 5));
+  const b1 = hex(color1.slice(5, 7));
+  const r2 = hex(color2.slice(1, 3));
+  const g2 = hex(color2.slice(3, 5));
+  const b2 = hex(color2.slice(5, 7));
+
+  const r = Math.round(r1 + (r2 - r1) * t);
+  const g = Math.round(g1 + (g2 - g1) * t);
+  const b = Math.round(b1 + (b2 - b1) * t);
+
+  return `#${r.toString(16).padStart(2, '0')}${g
+    .toString(16)
+    .padStart(2, '0')}${b.toString(16).padStart(2, '0')}`;
+}
+
+function getGradientColor(colors: string[], position: number): string {
+  if (colors.length === 0) return '#000000';
+  if (colors.length === 1 || position <= 0) return colors[0]!;
+  if (position >= 1) return colors[colors.length - 1]!;
+
+  const scaledPos = position * (colors.length - 1);
+  const index = Math.floor(scaledPos);
+  const t = scaledPos - index;
+
+  return interpolateColor(colors[index]!, colors[index + 1]!, t);
+}
+
+function PolylineImpl({
+  coordinates,
+  strokeColors,
+  strokeWidth = 1,
+  animated,
+  zIndex,
+}: PolylineProps) {
+  const resolvedZIndex = zIndex ?? (animated ? 1 : 0);
+  const map = useMap();
+  const polylinesRef = useRef<google.maps.Polyline[]>([]);
+  const animationRef = useRef<number>(0);
+
+  const colors = useMemo(
+    () =>
+      strokeColors && strokeColors.length > 0
+        ? (strokeColors as string[])
+        : ['#000000'],
+    [strokeColors]
+  );
+
+  const hasGradient = colors.length > 1;
+
+  // Refs for animation loop access
+  const propsRef = useRef({
+    map,
+    colors,
+    strokeWidth,
+    hasGradient,
+    zIndex: resolvedZIndex,
+  });
+  const [mapReady, setMapReady] = useState(!!map);
+
+  useEffect(() => {
+    propsRef.current = {
+      map,
+      colors,
+      strokeWidth,
+      hasGradient,
+      zIndex: resolvedZIndex,
+    };
+    if (map && !mapReady) setMapReady(true);
+  }, [map, colors, strokeWidth, hasGradient, resolvedZIndex, mapReady]);
+
+  const updatePath = useCallback((path: google.maps.LatLngLiteral[]) => {
+    const {
+      map: currentMap,
+      colors: currentColors,
+      strokeWidth: currentStrokeWidth,
+      hasGradient: currentHasGradient,
+      zIndex: currentZIndex,
+    } = propsRef.current;
+    if (!currentMap || path.length < 2) return;
+
+    const neededSegments = currentHasGradient ? path.length - 1 : 1;
+    const existing = polylinesRef.current;
+
+    // Update or create segments
+    for (let i = 0; i < neededSegments; i++) {
+      const segmentPath = currentHasGradient ? [path[i]!, path[i + 1]!] : path;
+      const color = currentHasGradient
+        ? getGradientColor(currentColors, i / (path.length - 1))
+        : currentColors[0]!;
+
+      const segment = existing[i];
+      if (segment) {
+        segment.setPath(segmentPath);
+        segment.setOptions({ strokeColor: color });
+      } else {
+        existing.push(
+          new google.maps.Polyline({
+            path: segmentPath,
+            strokeColor: color,
+            strokeWeight: currentStrokeWidth,
+            strokeOpacity: 1,
+            zIndex: currentZIndex,
+            map: currentMap,
+          })
+        );
+      }
+    }
+
+    // Remove extra segments
+    for (let i = neededSegments; i < existing.length; i++) {
+      existing[i]?.setMap(null);
+    }
+    existing.length = neededSegments;
+  }, []);
+
+  // Cleanup on unmount
+  useEffect(() => {
+    const polylines = polylinesRef.current;
+    return () => {
+      cancelAnimationFrame(animationRef.current);
+      polylines.forEach((p) => p.setMap(null));
+    };
+  }, []);
+
+  // Main effect
+  useEffect(() => {
+    if (!propsRef.current.map || coordinates.length === 0) return;
+
+    const fullPath = coordinates.map((c) => ({
+      lat: c.latitude,
+      lng: c.longitude,
+    }));
+
+    cancelAnimationFrame(animationRef.current);
+
+    if (!animated) {
+      updatePath(fullPath);
+      return;
+    }
+
+    const totalPoints = fullPath.length;
+    const cycleDuration = ANIMATION_DURATION * 2;
+
+    const animate = (time: number) => {
+      const progress = (time % cycleDuration) / ANIMATION_DURATION;
+      const startIdx = progress <= 1 ? 0 : (progress - 1) * totalPoints;
+      const endIdx = progress <= 1 ? progress * totalPoints : totalPoints;
+
+      const partialPath: google.maps.LatLngLiteral[] = [];
+      const startFloor = Math.floor(startIdx);
+      const endFloor = Math.floor(endIdx);
+
+      // Start point (interpolated)
+      if (startFloor < totalPoints) {
+        const frac = startIdx - startFloor;
+        const from = fullPath[startFloor]!;
+        const to = fullPath[Math.min(startFloor + 1, totalPoints - 1)]!;
+        partialPath.push(
+          frac > 0
+            ? {
+                lat: from.lat + (to.lat - from.lat) * frac,
+                lng: from.lng + (to.lng - from.lng) * frac,
+              }
+            : from
+        );
+      }
+
+      // Middle points
+      for (
+        let i = startFloor + 1;
+        i <= Math.min(endFloor, totalPoints - 1);
+        i++
+      ) {
+        partialPath.push(fullPath[i]!);
+      }
+
+      // End point (interpolated)
+      if (endFloor < totalPoints - 1) {
+        const frac = endIdx - endFloor;
+        const from = fullPath[endFloor]!;
+        const to = fullPath[endFloor + 1]!;
+        if (frac > 0) {
+          partialPath.push({
+            lat: from.lat + (to.lat - from.lat) * frac,
+            lng: from.lng + (to.lng - from.lng) * frac,
+          });
+        }
+      }
+
+      updatePath(partialPath);
+      animationRef.current = requestAnimationFrame(animate);
+    };
+
+    animationRef.current = requestAnimationFrame(animate);
+
+    return () => cancelAnimationFrame(animationRef.current);
+  }, [coordinates, animated, hasGradient, updatePath, mapReady]);
+
+  return null;
+}
+
+export class Polyline extends Component<PolylineProps> {
+  render() {
+    return <PolylineImpl {...this.props} />;
+  }
+}

package/src/components/index.web.ts

@@ -0,0 +1,4 @@
+export { Marker } from './Marker.web';
+export { Polyline } from './Polyline.web';
+export type { MarkerProps } from './Marker';
+export type { PolylineProps } from './Polyline';

package/src/fabric/LuggAppleMapViewNativeComponent.ts

@@ -66,7 +66,10 @@ interface NativeCommands {
   fitCoordinates: (
     viewRef: React.ElementRef<ComponentType>,
     coordinates: Coordinate[],
-    padding: Double,
+    paddingTop: Double,
+    paddingLeft: Double,
+    paddingBottom: Double,
+    paddingRight: Double,
     duration: Double
   ) => void;
 }

package/src/fabric/LuggGoogleMapViewNativeComponent.ts

@@ -67,7 +67,10 @@ interface NativeCommands {
   fitCoordinates: (
     viewRef: React.ElementRef<ComponentType>,
     coordinates: Coordinate[],
-    padding: Double,
+    paddingTop: Double,
+    paddingLeft: Double,
+    paddingBottom: Double,
+    paddingRight: Double,
     duration: Double
   ) => void;
 }

package/src/index.ts

@@ -1,4 +1,6 @@
 export { MapView } from './MapView';
+export { MapProvider } from './MapProvider';
+export type { MapProviderProps } from './MapProvider.types';
 export * from './components';
 export type {
   MapViewProps,
@@ -7,4 +9,9 @@ export type {
   FitCoordinatesOptions,
   CameraEventPayload,
 } from './MapView.types';
-export type { MapProvider, Coordinate, Point, EdgeInsets } from './types';
+export type {
+  MapProvider as MapProviderType,
+  Coordinate,
+  Point,
+  EdgeInsets,
+} from './types';

package/src/index.web.ts

@@ -0,0 +1,17 @@
+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';