@lugg/maps 0.2.0-alpha.17 → 0.2.0-alpha.19

package/src/components/Marker.tsx

@@ -29,6 +29,23 @@ export interface MarkerProps {
    * Z-index for marker ordering. Higher values render on top.
    */
   zIndex?: number;
+  /**
+   * Rotation angle in degrees clockwise from north.
+   * @default 0
+   */
+  rotate?: number;
+  /**
+   * Scale factor for the marker.
+   * @default 1
+   */
+  scale?: number;
+  /**
+   * Rasterize custom marker view to bitmap for better performance.
+   * Set to false if you need live view updates (e.g., animations).
+   * @platform ios, android
+   * @default true
+   */
+  rasterize?: boolean;
   /**
    * Custom marker view
    */
@@ -37,8 +54,18 @@ export interface MarkerProps {
 
 export class Marker extends React.Component<MarkerProps> {
   render() {
-    const { name, coordinate, title, description, anchor, zIndex, children } =
-      this.props;
+    const {
+      name,
+      coordinate,
+      title,
+      description,
+      anchor,
+      zIndex,
+      rotate = 0,
+      scale = 1,
+      rasterize = true,
+      children,
+    } = this.props;
 
     return (
       <LuggMarkerViewNativeComponent
@@ -48,6 +75,9 @@ export class Marker extends React.Component<MarkerProps> {
         title={title}
         description={description}
         anchor={anchor}
+        rotate={rotate}
+        scale={scale}
+        rasterize={rasterize}
       >
         {children}
       </LuggMarkerViewNativeComponent>

package/src/components/Marker.web.tsx

@@ -8,8 +8,14 @@ export function Marker({
   title,
   anchor,
   zIndex,
+  rotate,
+  scale,
   children,
 }: MarkerProps) {
+  const transforms: string[] = [];
+  if (rotate) transforms.push(`rotate(${rotate}deg)`);
+  if (scale && scale !== 1) transforms.push(`scale(${scale})`);
+
   return (
     <AdvancedMarker
       position={{ lat: coordinate.latitude, lng: coordinate.longitude }}
@@ -17,6 +23,9 @@ export function Marker({
       zIndex={zIndex}
       anchorLeft={anchor ? toWebAnchor(anchor.x) : undefined}
       anchorTop={anchor ? toWebAnchor(anchor.y) : undefined}
+      style={
+        transforms.length > 0 ? { transform: transforms.join(' ') } : undefined
+      }
     >
       {children}
     </AdvancedMarker>

package/src/components/Polyline.web.tsx

@@ -1,6 +1,5 @@
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
-import { useMap } from '@vis.gl/react-google-maps';
-import { useMapId } from '../MapProvider.web';
+import { useMapContext } from '../MapProvider.web';
 import type { PolylineProps } from './Polyline';
 
 const ANIMATION_DURATION = 1500;
@@ -43,10 +42,10 @@ export function Polyline({
   zIndex,
 }: PolylineProps) {
   const resolvedZIndex = zIndex ?? (animated ? 1 : 0);
-  const mapId = useMapId();
-  const map = useMap(mapId);
+  const { map, isDragging } = useMapContext();
   const polylinesRef = useRef<google.maps.Polyline[]>([]);
   const animationRef = useRef<number>(0);
+  const isPausedRef = useRef(false);
 
   const colors = useMemo(
     () =>
@@ -133,6 +132,11 @@ export function Polyline({
     };
   }, []);
 
+  // Pause/resume animation during drag
+  useEffect(() => {
+    isPausedRef.current = isDragging;
+  }, [isDragging]);
+
   // Main effect
   useEffect(() => {
     if (!propsRef.current.map || coordinates.length === 0) return;
@@ -153,6 +157,11 @@ export function Polyline({
     const cycleDuration = ANIMATION_DURATION * 2;
 
     const animate = (time: number) => {
+      if (isPausedRef.current) {
+        animationRef.current = requestAnimationFrame(animate);
+        return;
+      }
+
       const progress = (time % cycleDuration) / ANIMATION_DURATION;
       const startIdx = progress <= 1 ? 0 : (progress - 1) * totalPoints;
       const endIdx = progress <= 1 ? progress * totalPoints : totalPoints;

package/src/fabric/LuggMarkerViewNativeComponent.ts

@@ -1,6 +1,9 @@
 import { codegenNativeComponent } from 'react-native';
 import type { ViewProps, HostComponent } from 'react-native';
-import type { Double } from 'react-native/Libraries/Types/CodegenTypes';
+import type {
+  Double,
+  WithDefault,
+} from 'react-native/Libraries/Types/CodegenTypes';
 
 export interface Coordinate {
   latitude: Double;
@@ -18,6 +21,9 @@ export interface NativeProps extends ViewProps {
   title?: string;
   description?: string;
   anchor?: Point;
+  rotate?: WithDefault<Double, 0>;
+  scale?: WithDefault<Double, 1>;
+  rasterize?: WithDefault<boolean, true>;
 }
 
 export default codegenNativeComponent<NativeProps>(