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

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

@@ -11,11 +11,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;
 }
 /**

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

@@ -1 +1 @@
-{"version":3,"file":"MapView.types.d.ts","sourceRoot":"","sources":["../../../src/MapView.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,KAAK,EAAE,oBAAoB,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AACpE,OAAO,KAAK,EAAE,WAAW,EAAE,UAAU,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAEnE;;;GAGG;AACH,MAAM,WAAW,iBAAiB;IAChC,IAAI,EAAE,MAAM,CAAC;IACb,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AAED;;;;GAIG;AACH,MAAM,WAAW,qBAAqB;IACpC,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AAED;;GAEG;AACH,MAAM,WAAW,UAAU;IACzB,UAAU,CAAC,UAAU,EAAE,UAAU,EAAE,OAAO,EAAE,iBAAiB,GAAG,IAAI,CAAC;IACrE,cAAc,CACZ,WAAW,EAAE,UAAU,EAAE,EACzB,OAAO,CAAC,EAAE,qBAAqB,GAC9B,IAAI,CAAC;CACT;AAED;;GAEG;AACH,MAAM,WAAW,kBAAkB;IACjC,UAAU,EAAE,UAAU,CAAC;IACvB,IAAI,EAAE,MAAM,CAAC;IACb,OAAO,EAAE,OAAO,CAAC;CAClB;AAED;;GAEG;AACH,MAAM,WAAW,YAAa,SAAQ,SAAS;IAC7C;;;OAGG;IACH,QAAQ,CAAC,EAAE,WAAW,CAAC;IACvB;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,iBAAiB,CAAC,EAAE,UAAU,CAAC;IAC/B;;;OAGG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB;;;OAGG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB;;;OAGG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB;;;OAGG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB;;;OAGG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB;;OAEG;IACH,OAAO,CAAC,EAAE,UAAU,CAAC;IACrB;;;;OAIG;IACH,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B;;OAEG;IACH,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE,oBAAoB,CAAC,kBAAkB,CAAC,KAAK,IAAI,CAAC;IACzE;;OAEG;IACH,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE,oBAAoB,CAAC,kBAAkB,CAAC,KAAK,IAAI,CAAC;IACzE;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB;;OAEG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB"}
+{"version":3,"file":"MapView.types.d.ts","sourceRoot":"","sources":["../../../src/MapView.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,KAAK,EAAE,oBAAoB,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AACpE,OAAO,KAAK,EAAE,WAAW,EAAE,UAAU,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAEnE;;;GAGG;AACH,MAAM,WAAW,iBAAiB;IAChC,IAAI,EAAE,MAAM,CAAC;IACb,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AAED;;;GAGG;AACH,MAAM,WAAW,qBAAqB;IACpC,OAAO,CAAC,EAAE,UAAU,CAAC;IACrB,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AAED;;GAEG;AACH,MAAM,WAAW,UAAU;IACzB,UAAU,CAAC,UAAU,EAAE,UAAU,EAAE,OAAO,EAAE,iBAAiB,GAAG,IAAI,CAAC;IACrE,cAAc,CACZ,WAAW,EAAE,UAAU,EAAE,EACzB,OAAO,CAAC,EAAE,qBAAqB,GAC9B,IAAI,CAAC;CACT;AAED;;GAEG;AACH,MAAM,WAAW,kBAAkB;IACjC,UAAU,EAAE,UAAU,CAAC;IACvB,IAAI,EAAE,MAAM,CAAC;IACb,OAAO,EAAE,OAAO,CAAC;CAClB;AAED;;GAEG;AACH,MAAM,WAAW,YAAa,SAAQ,SAAS;IAC7C;;;OAGG;IACH,QAAQ,CAAC,EAAE,WAAW,CAAC;IACvB;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,iBAAiB,CAAC,EAAE,UAAU,CAAC;IAC/B;;;OAGG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB;;;OAGG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB;;;OAGG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB;;;OAGG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB;;;OAGG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB;;OAEG;IACH,OAAO,CAAC,EAAE,UAAU,CAAC;IACrB;;;;OAIG;IACH,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B;;OAEG;IACH,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE,oBAAoB,CAAC,kBAAkB,CAAC,KAAK,IAAI,CAAC;IACzE;;OAEG;IACH,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE,oBAAoB,CAAC,kBAAkB,CAAC,KAAK,IAAI,CAAC;IACzE;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB;;OAEG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB"}

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

@@ -0,0 +1,3 @@
+import type { MapViewProps, MapViewRef } from './MapView.types';
+export declare const MapView: import("react").ForwardRefExoticComponent<MapViewProps & import("react").RefAttributes<MapViewRef>>;
+//# 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":"AAkBA,OAAO,KAAK,EACV,YAAY,EACZ,UAAU,EAIX,MAAM,iBAAiB,CAAC;AAyEzB,eAAO,MAAM,OAAO,qGAyLlB,CAAC"}

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

@@ -22,6 +22,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
      */

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

@@ -1 +1 @@
-{"version":3,"file":"Marker.d.ts","sourceRoot":"","sources":["../../../../src/components/Marker.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAGvC,OAAO,KAAK,EAAE,UAAU,EAAE,KAAK,EAAE,MAAM,UAAU,CAAC;AAElD,MAAM,WAAW,WAAW;IAC1B;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,UAAU,EAAE,UAAU,CAAC;IACvB;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;OAEG;IACH,MAAM,CAAC,EAAE,KAAK,CAAC;IACf;;OAEG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAED,qBAAa,MAAO,SAAQ,KAAK,CAAC,SAAS,CAAC,WAAW,CAAC;IACtD,MAAM;CAiBP"}
+{"version":3,"file":"Marker.d.ts","sourceRoot":"","sources":["../../../../src/components/Marker.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAGvC,OAAO,KAAK,EAAE,UAAU,EAAE,KAAK,EAAE,MAAM,UAAU,CAAC;AAElD,MAAM,WAAW,WAAW;IAC1B;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,UAAU,EAAE,UAAU,CAAC;IACvB;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;OAEG;IACH,MAAM,CAAC,EAAE,KAAK,CAAC;IACf;;OAEG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB;;OAEG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAED,qBAAa,MAAO,SAAQ,KAAK,CAAC,SAAS,CAAC,WAAW,CAAC;IACtD,MAAM;CAiBP"}

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

@@ -0,0 +1,3 @@
+import type { MarkerProps } from './Marker';
+export declare function Marker({ coordinate, title, anchor, zIndex, children, }: MarkerProps): 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":"AACA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;AAI5C,wBAAgB,MAAM,CAAC,EACrB,UAAU,EACV,KAAK,EACL,MAAM,EACN,MAAM,EACN,QAAQ,GACT,EAAE,WAAW,2CAYb"}

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

@@ -18,6 +18,10 @@ export interface PolylineProps {
      * Animate the polyline with a snake effect
      */
     animated?: boolean;
+    /**
+     * Z-index for layering polylines
+     */
+    zIndex?: number;
 }
 export declare class Polyline extends React.Component<PolylineProps> {
     render(): import("react/jsx-runtime").JSX.Element;

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

@@ -1 +1 @@
-{"version":3,"file":"Polyline.d.ts","sourceRoot":"","sources":["../../../../src/components/Polyline.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAG/C,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AAE3C,MAAM,WAAW,aAAa;IAC5B;;OAEG;IACH,WAAW,EAAE,UAAU,EAAE,CAAC;IAC1B;;OAEG;IACH,YAAY,CAAC,EAAE,UAAU,EAAE,CAAC;IAC5B;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,qBAAa,QAAS,SAAQ,KAAK,CAAC,SAAS,CAAC,aAAa,CAAC;IAC1D,MAAM;CAkBP"}
+{"version":3,"file":"Polyline.d.ts","sourceRoot":"","sources":["../../../../src/components/Polyline.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAG/C,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AAE3C,MAAM,WAAW,aAAa;IAC5B;;OAEG;IACH,WAAW,EAAE,UAAU,EAAE,CAAC;IAC1B;;OAEG;IACH,YAAY,CAAC,EAAE,UAAU,EAAE,CAAC;IAC5B;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;OAEG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,qBAAa,QAAS,SAAQ,KAAK,CAAC,SAAS,CAAC,aAAa,CAAC;IAC1D,MAAM;CAmBP"}

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

@@ -0,0 +1,3 @@
+import type { PolylineProps } from './Polyline';
+export declare function Polyline({ coordinates, strokeColors, strokeWidth, animated, zIndex, }: PolylineProps): null;
+//# 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":"AAEA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,YAAY,CAAC;AAkChD,wBAAgB,QAAQ,CAAC,EACvB,WAAW,EACX,YAAY,EACZ,WAAe,EACf,QAAQ,EACR,MAAM,GACP,EAAE,aAAa,QAsKf"}

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/fabric/LuggAppleMapViewNativeComponent.d.ts

@@ -46,7 +46,7 @@ export interface NativeProps extends ViewProps {
 type ComponentType = HostComponent<NativeProps>;
 interface NativeCommands {
     moveCamera: (viewRef: React.ElementRef<ComponentType>, latitude: Double, longitude: Double, zoom: Double, duration: Double) => void;
-    fitCoordinates: (viewRef: React.ElementRef<ComponentType>, coordinates: Coordinate[], padding: Double, duration: Double) => void;
+    fitCoordinates: (viewRef: React.ElementRef<ComponentType>, coordinates: Coordinate[], paddingTop: Double, paddingLeft: Double, paddingBottom: Double, paddingRight: Double, duration: Double) => void;
 }
 export declare const Commands: NativeCommands;
 declare const _default: ComponentType;

package/lib/typescript/src/fabric/LuggAppleMapViewNativeComponent.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"LuggAppleMapViewNativeComponent.d.ts","sourceRoot":"","sources":["../../../../src/fabric/LuggAppleMapViewNativeComponent.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,aAAa,EAAE,MAAM,cAAc,CAAC;AAC7D,OAAO,KAAK,EACV,MAAM,EACN,kBAAkB,EACnB,MAAM,2CAA2C,CAAC;AAEnD,MAAM,WAAW,UAAU;IACzB,QAAQ,EAAE,MAAM,CAAC;IACjB,SAAS,EAAE,MAAM,CAAC;CACnB;AAED,MAAM,WAAW,UAAU;IACzB,GAAG,EAAE,MAAM,CAAC;IACZ,IAAI,EAAE,MAAM,CAAC;IACb,MAAM,EAAE,MAAM,CAAC;IACf,KAAK,EAAE,MAAM,CAAC;CACf;AAED,MAAM,WAAW,eAAe;IAC9B,UAAU,EAAE;QACV,QAAQ,EAAE,MAAM,CAAC;QACjB,SAAS,EAAE,MAAM,CAAC;KACnB,CAAC;IACF,IAAI,EAAE,MAAM,CAAC;IACb,OAAO,EAAE,OAAO,CAAC;CAClB;AAED,MAAM,WAAW,eAAe;IAC9B,UAAU,EAAE;QACV,QAAQ,EAAE,MAAM,CAAC;QACjB,SAAS,EAAE,MAAM,CAAC;KACnB,CAAC;IACF,IAAI,EAAE,MAAM,CAAC;IACb,OAAO,EAAE,OAAO,CAAC;CAClB;AAED,MAAM,WAAW,UAAU;CAAG;AAE9B,MAAM,WAAW,WAAY,SAAQ,SAAS;IAC5C,iBAAiB,CAAC,EAAE,UAAU,CAAC;IAC/B,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,OAAO,CAAC,EAAE,UAAU,CAAC;IACrB,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B,YAAY,CAAC,EAAE,kBAAkB,CAAC,eAAe,CAAC,CAAC;IACnD,YAAY,CAAC,EAAE,kBAAkB,CAAC,eAAe,CAAC,CAAC;IACnD,OAAO,CAAC,EAAE,kBAAkB,CAAC,UAAU,CAAC,CAAC;CAC1C;AAED,KAAK,aAAa,GAAG,aAAa,CAAC,WAAW,CAAC,CAAC;AAEhD,UAAU,cAAc;IACtB,UAAU,EAAE,CACV,OAAO,EAAE,KAAK,CAAC,UAAU,CAAC,aAAa,CAAC,EACxC,QAAQ,EAAE,MAAM,EAChB,SAAS,EAAE,MAAM,EACjB,IAAI,EAAE,MAAM,EACZ,QAAQ,EAAE,MAAM,KACb,IAAI,CAAC;IACV,cAAc,EAAE,CACd,OAAO,EAAE,KAAK,CAAC,UAAU,CAAC,aAAa,CAAC,EACxC,WAAW,EAAE,UAAU,EAAE,EACzB,OAAO,EAAE,MAAM,EACf,QAAQ,EAAE,MAAM,KACb,IAAI,CAAC;CACX;AAED,eAAO,MAAM,QAAQ,gBAEnB,CAAC;wBAIE,aAAa;AAFlB,wBAEmB"}
+{"version":3,"file":"LuggAppleMapViewNativeComponent.d.ts","sourceRoot":"","sources":["../../../../src/fabric/LuggAppleMapViewNativeComponent.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,aAAa,EAAE,MAAM,cAAc,CAAC;AAC7D,OAAO,KAAK,EACV,MAAM,EACN,kBAAkB,EACnB,MAAM,2CAA2C,CAAC;AAEnD,MAAM,WAAW,UAAU;IACzB,QAAQ,EAAE,MAAM,CAAC;IACjB,SAAS,EAAE,MAAM,CAAC;CACnB;AAED,MAAM,WAAW,UAAU;IACzB,GAAG,EAAE,MAAM,CAAC;IACZ,IAAI,EAAE,MAAM,CAAC;IACb,MAAM,EAAE,MAAM,CAAC;IACf,KAAK,EAAE,MAAM,CAAC;CACf;AAED,MAAM,WAAW,eAAe;IAC9B,UAAU,EAAE;QACV,QAAQ,EAAE,MAAM,CAAC;QACjB,SAAS,EAAE,MAAM,CAAC;KACnB,CAAC;IACF,IAAI,EAAE,MAAM,CAAC;IACb,OAAO,EAAE,OAAO,CAAC;CAClB;AAED,MAAM,WAAW,eAAe;IAC9B,UAAU,EAAE;QACV,QAAQ,EAAE,MAAM,CAAC;QACjB,SAAS,EAAE,MAAM,CAAC;KACnB,CAAC;IACF,IAAI,EAAE,MAAM,CAAC;IACb,OAAO,EAAE,OAAO,CAAC;CAClB;AAED,MAAM,WAAW,UAAU;CAAG;AAE9B,MAAM,WAAW,WAAY,SAAQ,SAAS;IAC5C,iBAAiB,CAAC,EAAE,UAAU,CAAC;IAC/B,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,OAAO,CAAC,EAAE,UAAU,CAAC;IACrB,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B,YAAY,CAAC,EAAE,kBAAkB,CAAC,eAAe,CAAC,CAAC;IACnD,YAAY,CAAC,EAAE,kBAAkB,CAAC,eAAe,CAAC,CAAC;IACnD,OAAO,CAAC,EAAE,kBAAkB,CAAC,UAAU,CAAC,CAAC;CAC1C;AAED,KAAK,aAAa,GAAG,aAAa,CAAC,WAAW,CAAC,CAAC;AAEhD,UAAU,cAAc;IACtB,UAAU,EAAE,CACV,OAAO,EAAE,KAAK,CAAC,UAAU,CAAC,aAAa,CAAC,EACxC,QAAQ,EAAE,MAAM,EAChB,SAAS,EAAE,MAAM,EACjB,IAAI,EAAE,MAAM,EACZ,QAAQ,EAAE,MAAM,KACb,IAAI,CAAC;IACV,cAAc,EAAE,CACd,OAAO,EAAE,KAAK,CAAC,UAAU,CAAC,aAAa,CAAC,EACxC,WAAW,EAAE,UAAU,EAAE,EACzB,UAAU,EAAE,MAAM,EAClB,WAAW,EAAE,MAAM,EACnB,aAAa,EAAE,MAAM,EACrB,YAAY,EAAE,MAAM,EACpB,QAAQ,EAAE,MAAM,KACb,IAAI,CAAC;CACX;AAED,eAAO,MAAM,QAAQ,gBAEnB,CAAC;wBAIE,aAAa;AAFlB,wBAEmB"}

package/lib/typescript/src/fabric/LuggGoogleMapViewNativeComponent.d.ts

@@ -47,7 +47,7 @@ export interface NativeProps extends ViewProps {
 type ComponentType = HostComponent<NativeProps>;
 interface NativeCommands {
     moveCamera: (viewRef: React.ElementRef<ComponentType>, latitude: Double, longitude: Double, zoom: Double, duration: Double) => void;
-    fitCoordinates: (viewRef: React.ElementRef<ComponentType>, coordinates: Coordinate[], padding: Double, duration: Double) => void;
+    fitCoordinates: (viewRef: React.ElementRef<ComponentType>, coordinates: Coordinate[], paddingTop: Double, paddingLeft: Double, paddingBottom: Double, paddingRight: Double, duration: Double) => void;
 }
 export declare const Commands: NativeCommands;
 declare const _default: ComponentType;

package/lib/typescript/src/fabric/LuggGoogleMapViewNativeComponent.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"LuggGoogleMapViewNativeComponent.d.ts","sourceRoot":"","sources":["../../../../src/fabric/LuggGoogleMapViewNativeComponent.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,aAAa,EAAE,MAAM,cAAc,CAAC;AAC7D,OAAO,KAAK,EACV,MAAM,EACN,kBAAkB,EACnB,MAAM,2CAA2C,CAAC;AAEnD,MAAM,WAAW,UAAU;IACzB,QAAQ,EAAE,MAAM,CAAC;IACjB,SAAS,EAAE,MAAM,CAAC;CACnB;AAED,MAAM,WAAW,UAAU;IACzB,GAAG,EAAE,MAAM,CAAC;IACZ,IAAI,EAAE,MAAM,CAAC;IACb,MAAM,EAAE,MAAM,CAAC;IACf,KAAK,EAAE,MAAM,CAAC;CACf;AAED,MAAM,WAAW,eAAe;IAC9B,UAAU,EAAE;QACV,QAAQ,EAAE,MAAM,CAAC;QACjB,SAAS,EAAE,MAAM,CAAC;KACnB,CAAC;IACF,IAAI,EAAE,MAAM,CAAC;IACb,OAAO,EAAE,OAAO,CAAC;CAClB;AAED,MAAM,WAAW,eAAe;IAC9B,UAAU,EAAE;QACV,QAAQ,EAAE,MAAM,CAAC;QACjB,SAAS,EAAE,MAAM,CAAC;KACnB,CAAC;IACF,IAAI,EAAE,MAAM,CAAC;IACb,OAAO,EAAE,OAAO,CAAC;CAClB;AAED,MAAM,WAAW,UAAU;CAAG;AAE9B,MAAM,WAAW,WAAY,SAAQ,SAAS;IAC5C,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,iBAAiB,CAAC,EAAE,UAAU,CAAC;IAC/B,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,OAAO,CAAC,EAAE,UAAU,CAAC;IACrB,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B,YAAY,CAAC,EAAE,kBAAkB,CAAC,eAAe,CAAC,CAAC;IACnD,YAAY,CAAC,EAAE,kBAAkB,CAAC,eAAe,CAAC,CAAC;IACnD,OAAO,CAAC,EAAE,kBAAkB,CAAC,UAAU,CAAC,CAAC;CAC1C;AAED,KAAK,aAAa,GAAG,aAAa,CAAC,WAAW,CAAC,CAAC;AAEhD,UAAU,cAAc;IACtB,UAAU,EAAE,CACV,OAAO,EAAE,KAAK,CAAC,UAAU,CAAC,aAAa,CAAC,EACxC,QAAQ,EAAE,MAAM,EAChB,SAAS,EAAE,MAAM,EACjB,IAAI,EAAE,MAAM,EACZ,QAAQ,EAAE,MAAM,KACb,IAAI,CAAC;IACV,cAAc,EAAE,CACd,OAAO,EAAE,KAAK,CAAC,UAAU,CAAC,aAAa,CAAC,EACxC,WAAW,EAAE,UAAU,EAAE,EACzB,OAAO,EAAE,MAAM,EACf,QAAQ,EAAE,MAAM,KACb,IAAI,CAAC;CACX;AAED,eAAO,MAAM,QAAQ,gBAEnB,CAAC;wBAIE,aAAa;AAFlB,wBAEmB"}
+{"version":3,"file":"LuggGoogleMapViewNativeComponent.d.ts","sourceRoot":"","sources":["../../../../src/fabric/LuggGoogleMapViewNativeComponent.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,aAAa,EAAE,MAAM,cAAc,CAAC;AAC7D,OAAO,KAAK,EACV,MAAM,EACN,kBAAkB,EACnB,MAAM,2CAA2C,CAAC;AAEnD,MAAM,WAAW,UAAU;IACzB,QAAQ,EAAE,MAAM,CAAC;IACjB,SAAS,EAAE,MAAM,CAAC;CACnB;AAED,MAAM,WAAW,UAAU;IACzB,GAAG,EAAE,MAAM,CAAC;IACZ,IAAI,EAAE,MAAM,CAAC;IACb,MAAM,EAAE,MAAM,CAAC;IACf,KAAK,EAAE,MAAM,CAAC;CACf;AAED,MAAM,WAAW,eAAe;IAC9B,UAAU,EAAE;QACV,QAAQ,EAAE,MAAM,CAAC;QACjB,SAAS,EAAE,MAAM,CAAC;KACnB,CAAC;IACF,IAAI,EAAE,MAAM,CAAC;IACb,OAAO,EAAE,OAAO,CAAC;CAClB;AAED,MAAM,WAAW,eAAe;IAC9B,UAAU,EAAE;QACV,QAAQ,EAAE,MAAM,CAAC;QACjB,SAAS,EAAE,MAAM,CAAC;KACnB,CAAC;IACF,IAAI,EAAE,MAAM,CAAC;IACb,OAAO,EAAE,OAAO,CAAC;CAClB;AAED,MAAM,WAAW,UAAU;CAAG;AAE9B,MAAM,WAAW,WAAY,SAAQ,SAAS;IAC5C,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,iBAAiB,CAAC,EAAE,UAAU,CAAC;IAC/B,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,OAAO,CAAC,EAAE,UAAU,CAAC;IACrB,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B,YAAY,CAAC,EAAE,kBAAkB,CAAC,eAAe,CAAC,CAAC;IACnD,YAAY,CAAC,EAAE,kBAAkB,CAAC,eAAe,CAAC,CAAC;IACnD,OAAO,CAAC,EAAE,kBAAkB,CAAC,UAAU,CAAC,CAAC;CAC1C;AAED,KAAK,aAAa,GAAG,aAAa,CAAC,WAAW,CAAC,CAAC;AAEhD,UAAU,cAAc;IACtB,UAAU,EAAE,CACV,OAAO,EAAE,KAAK,CAAC,UAAU,CAAC,aAAa,CAAC,EACxC,QAAQ,EAAE,MAAM,EAChB,SAAS,EAAE,MAAM,EACjB,IAAI,EAAE,MAAM,EACZ,QAAQ,EAAE,MAAM,KACb,IAAI,CAAC;IACV,cAAc,EAAE,CACd,OAAO,EAAE,KAAK,CAAC,UAAU,CAAC,aAAa,CAAC,EACxC,WAAW,EAAE,UAAU,EAAE,EACzB,UAAU,EAAE,MAAM,EAClB,WAAW,EAAE,MAAM,EACnB,aAAa,EAAE,MAAM,EACrB,YAAY,EAAE,MAAM,EACpB,QAAQ,EAAE,MAAM,KACb,IAAI,CAAC;CACX;AAED,eAAO,MAAM,QAAQ,gBAEnB,CAAC;wBAIE,aAAa;AAFlB,wBAEmB"}

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,16 +1,22 @@
 {
   "name": "@lugg/maps",
-  "version": "0.2.0-alpha.1",
+  "version": "0.2.0-alpha.11",
   "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"
   },

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

@@ -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() {

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

package/src/MapView.web.tsx

@@ -0,0 +1,283 @@
+import {
+  Children,
+  forwardRef,
+  isValidElement,
+  useEffect,
+  useImperativeHandle,
+  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';
+
+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>);
+
+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 }: { enabled?: boolean }) {
+  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>
+  );
+}
+
+export const MapView = forwardRef<MapViewRef, MapViewProps>(function MapView(
+  props,
+  ref
+) {
+  const {
+    mapId = 'DEMO_MAP_ID',
+    initialCoordinate,
+    initialZoom = 10,
+    minZoom,
+    maxZoom,
+    zoomEnabled = true,
+    scrollEnabled = true,
+    pitchEnabled = true,
+    padding,
+    userLocationEnabled,
+    onCameraMove,
+    onCameraIdle,
+    onReady,
+    children,
+    style,
+  } = props;
+
+  const map = useMap();
+  const readyFired = useRef(false);
+
+  useImperativeHandle(
+    ref,
+    () => ({
+      moveCamera(coordinate: Coordinate, options: MoveCameraOptions) {
+        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 first = coordinates[0];
+        if (!map || !first) return;
+
+        const { padding: fitPadding, duration = -1 } = options ?? {};
+
+        if (coordinates.length === 1) {
+          this.moveCamera(first, { zoom: initialZoom, duration });
+          return;
+        }
+
+        const bounds = new google.maps.LatLngBounds();
+        coordinates.forEach((coord) => {
+          bounds.extend({ lat: coord.latitude, lng: coord.longitude });
+        });
+
+        map.fitBounds(bounds, {
+          top: fitPadding?.top ?? 0,
+          left: fitPadding?.left ?? 0,
+          bottom: fitPadding?.bottom ?? 0,
+          right: fitPadding?.right ?? 0,
+        });
+      },
+    }),
+    [map, initialZoom]
+  );
+
+  useEffect(() => {
+    if (map && !readyFired.current) {
+      readyFired.current = true;
+      onReady?.();
+    }
+  }, [map, 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;
+    let wasGesture = false;
+
+    const dragStartListener = map.addListener('dragstart', () => {
+      isDragging = true;
+      wasGesture = 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(wasGesture)));
+      wasGesture = 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]);
+
+  const gestureHandling =
+    scrollEnabled === false && zoomEnabled === false
+      ? 'none'
+      : scrollEnabled === false
+      ? 'none'
+      : 'auto';
+
+  const defaultCenter = initialCoordinate
+    ? { lat: initialCoordinate.latitude, lng: initialCoordinate.longitude }
+    : undefined;
+
+  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}
+        >
+          <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,24 @@
+import { AdvancedMarker } from '@vis.gl/react-google-maps';
+import type { MarkerProps } from './Marker';
+
+const toWebAnchor = (value: number) => `-${value * 100}%`;
+
+export function Marker({
+  coordinate,
+  title,
+  anchor,
+  zIndex,
+  children,
+}: MarkerProps) {
+  return (
+    <AdvancedMarker
+      position={{ lat: coordinate.latitude, lng: coordinate.longitude }}
+      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}