@lugg/maps 1.0.0-beta.0 → 1.0.0-beta.1

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

@@ -1,3 +1,3 @@
 import type { MarkerProps } from './Marker.types';
-export declare const Marker: ({ coordinate, title, anchor, zIndex, rotate, scale, draggable, onPress, onDragStart, onDragChange, onDragEnd, children, }: MarkerProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Marker: ({ coordinate, title, description, anchor, zIndex, rotate, scale, draggable, onPress, onDragStart, onDragChange, onDragEnd, callout, calloutOptions, children, }: MarkerProps) => import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=Marker.web.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Marker.web.d.ts","sourceRoot":"","sources":["../../../../src/components/Marker.web.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAqBlD,eAAO,MAAM,MAAM,GAAI,2HAapB,WAAW,4CAkFb,CAAC"}
+{"version":3,"file":"Marker.web.d.ts","sourceRoot":"","sources":["../../../../src/components/Marker.web.tsx"],"names":[],"mappings":"AAaA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AA+ClD,eAAO,MAAM,MAAM,GAAI,iKAgBpB,WAAW,4CAqIb,CAAC"}

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

@@ -1,5 +1,5 @@
 export { Marker } from './Marker';
-export type { MarkerProps, MarkerPressEvent, MarkerDragEvent, } from './Marker.types';
+export type { CalloutOptions, MarkerProps, MarkerPressEvent, MarkerDragEvent, } from './Marker.types';
 export { Polygon } from './Polygon';
 export type { PolygonProps } from './Polygon.types';
 export { Polyline } from './Polyline';

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,YAAY,EACV,WAAW,EACX,gBAAgB,EAChB,eAAe,GAChB,MAAM,gBAAgB,CAAC;AACxB,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AACpC,YAAY,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AACpD,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AACtC,YAAY,EACV,aAAa,EACb,cAAc,EACd,uBAAuB,GACxB,MAAM,kBAAkB,CAAC;AAC1B,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AACpC,YAAY,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,YAAY,EACV,cAAc,EACd,WAAW,EACX,gBAAgB,EAChB,eAAe,GAChB,MAAM,gBAAgB,CAAC;AACxB,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AACpC,YAAY,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AACpD,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AACtC,YAAY,EACV,aAAa,EACb,cAAc,EACd,uBAAuB,GACxB,MAAM,kBAAkB,CAAC;AAC1B,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AACpC,YAAY,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC"}

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

@@ -1,7 +1,7 @@
 export { Marker } from './Marker.web';
 export { Polygon } from './Polygon.web';
 export { Polyline } from './Polyline.web';
-export type { MarkerProps } from './Marker.types';
+export type { CalloutOptions, MarkerProps } from './Marker.types';
 export type { PolygonProps } from './Polygon.types';
 export type { PolylineProps } from './Polyline.types';
 export { GeoJson } from './GeoJson';

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

@@ -1 +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,OAAO,EAAE,MAAM,eAAe,CAAC;AACxC,OAAO,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AAC1C,YAAY,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAClD,YAAY,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AACpD,YAAY,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AACtD,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AACpC,YAAY,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC"}
+{"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,OAAO,EAAE,MAAM,eAAe,CAAC;AACxC,OAAO,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AAC1C,YAAY,EAAE,cAAc,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAClE,YAAY,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AACpD,YAAY,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AACtD,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AACpC,YAAY,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC"}

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

@@ -0,0 +1,13 @@
+import type { ViewProps, HostComponent } from 'react-native';
+import type { Double, WithDefault } from 'react-native/Libraries/Types/CodegenTypes';
+export interface Point {
+    x: Double;
+    y: Double;
+}
+export interface NativeProps extends ViewProps {
+    bubbled?: WithDefault<boolean, true>;
+    anchor?: Point;
+}
+declare const _default: HostComponent<NativeProps>;
+export default _default;
+//# sourceMappingURL=LuggCalloutViewNativeComponent.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"LuggCalloutViewNativeComponent.d.ts","sourceRoot":"","sources":["../../../../src/fabric/LuggCalloutViewNativeComponent.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,aAAa,EAAE,MAAM,cAAc,CAAC;AAC7D,OAAO,KAAK,EACV,MAAM,EACN,WAAW,EACZ,MAAM,2CAA2C,CAAC;AAEnD,MAAM,WAAW,KAAK;IACpB,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;CACX;AAED,MAAM,WAAW,WAAY,SAAQ,SAAS;IAC5C,OAAO,CAAC,EAAE,WAAW,CAAC,OAAO,EAAE,IAAI,CAAC,CAAC;IACrC,MAAM,CAAC,EAAE,KAAK,CAAC;CAChB;wBAII,aAAa,CAAC,WAAW,CAAC;AAF/B,wBAEgC"}

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

@@ -2,7 +2,7 @@ export { MapView } from './MapView';
 export { MapProvider } from './MapProvider';
 export type { MapProviderProps } from './MapProvider.types';
 export { Marker } from './components';
-export type { MarkerProps, MarkerPressEvent, MarkerDragEvent, } from './components';
+export type { CalloutOptions, MarkerProps, MarkerPressEvent, MarkerDragEvent, } from './components';
 export { Polygon } from './components';
 export type { PolygonProps } from './components';
 export { Polyline } from './components';
@@ -11,5 +11,5 @@ export { GeoJson } from './components';
 export type { GeoJsonProps } from './components';
 export type { MapViewProps, MapViewRef, MoveCameraOptions, FitCoordinatesOptions, SetEdgeInsetsOptions, CameraEventPayload, MapCameraEvent, MapPressEvent, } from './MapView.types';
 export type { MapProvider as MapProviderType, MapTheme, Coordinate, Point, EdgeInsets, PressEventPayload, } from './types';
-export type { GeoJSON, Feature, FeatureCollection, Geometry, Position, } from './components/GeoJson.types';
+export type { GeoJSON, Feature, FeatureCollection, FeatureProperties, Geometry, Position, } from './components/GeoJson.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,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAC5C,YAAY,EAAE,gBAAgB,EAAE,MAAM,qBAAqB,CAAC;AAC5D,OAAO,EAAE,MAAM,EAAE,MAAM,cAAc,CAAC;AACtC,YAAY,EACV,WAAW,EACX,gBAAgB,EAChB,eAAe,GAChB,MAAM,cAAc,CAAC;AACtB,OAAO,EAAE,OAAO,EAAE,MAAM,cAAc,CAAC;AACvC,YAAY,EAAE,YAAY,EAAE,MAAM,cAAc,CAAC;AACjD,OAAO,EAAE,QAAQ,EAAE,MAAM,cAAc,CAAC;AACxC,YAAY,EACV,aAAa,EACb,cAAc,EACd,uBAAuB,GACxB,MAAM,cAAc,CAAC;AACtB,OAAO,EAAE,OAAO,EAAE,MAAM,cAAc,CAAC;AACvC,YAAY,EAAE,YAAY,EAAE,MAAM,cAAc,CAAC;AACjD,YAAY,EACV,YAAY,EACZ,UAAU,EACV,iBAAiB,EACjB,qBAAqB,EACrB,oBAAoB,EACpB,kBAAkB,EAClB,cAAc,EACd,aAAa,GACd,MAAM,iBAAiB,CAAC;AACzB,YAAY,EACV,WAAW,IAAI,eAAe,EAC9B,QAAQ,EACR,UAAU,EACV,KAAK,EACL,UAAU,EACV,iBAAiB,GAClB,MAAM,SAAS,CAAC;AACjB,YAAY,EACV,OAAO,EACP,OAAO,EACP,iBAAiB,EACjB,QAAQ,EACR,QAAQ,GACT,MAAM,4BAA4B,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,OAAO,EAAE,MAAM,EAAE,MAAM,cAAc,CAAC;AACtC,YAAY,EACV,cAAc,EACd,WAAW,EACX,gBAAgB,EAChB,eAAe,GAChB,MAAM,cAAc,CAAC;AACtB,OAAO,EAAE,OAAO,EAAE,MAAM,cAAc,CAAC;AACvC,YAAY,EAAE,YAAY,EAAE,MAAM,cAAc,CAAC;AACjD,OAAO,EAAE,QAAQ,EAAE,MAAM,cAAc,CAAC;AACxC,YAAY,EACV,aAAa,EACb,cAAc,EACd,uBAAuB,GACxB,MAAM,cAAc,CAAC;AACtB,OAAO,EAAE,OAAO,EAAE,MAAM,cAAc,CAAC;AACvC,YAAY,EAAE,YAAY,EAAE,MAAM,cAAc,CAAC;AACjD,YAAY,EACV,YAAY,EACZ,UAAU,EACV,iBAAiB,EACjB,qBAAqB,EACrB,oBAAoB,EACpB,kBAAkB,EAClB,cAAc,EACd,aAAa,GACd,MAAM,iBAAiB,CAAC;AACzB,YAAY,EACV,WAAW,IAAI,eAAe,EAC9B,QAAQ,EACR,UAAU,EACV,KAAK,EACL,UAAU,EACV,iBAAiB,GAClB,MAAM,SAAS,CAAC;AACjB,YAAY,EACV,OAAO,EACP,OAAO,EACP,iBAAiB,EACjB,iBAAiB,EACjB,QAAQ,EACR,QAAQ,GACT,MAAM,4BAA4B,CAAC"}

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

@@ -2,7 +2,7 @@ export { MapView } from './MapView.web';
 export { MapProvider } from './MapProvider.web';
 export type { MapProviderProps } from './MapProvider.types';
 export { Marker } from './components/index.web';
-export type { MarkerProps } from './components/index.web';
+export type { CalloutOptions, MarkerProps } from './components/index.web';
 export { Polygon } from './components/index.web';
 export type { PolygonProps } from './components/index.web';
 export { Polyline } from './components/index.web';
@@ -11,5 +11,5 @@ export { GeoJson } from './components/index.web';
 export type { GeoJsonProps } from './components/index.web';
 export type { MapViewProps, MapViewRef, MoveCameraOptions, FitCoordinatesOptions, CameraEventPayload, } from './MapView.types';
 export type { MapProvider as MapProviderType, Coordinate, Point, EdgeInsets, } from './types';
-export type { GeoJSON, Feature, FeatureCollection, Geometry, Position, } from './components/GeoJson.types';
+export type { GeoJSON, Feature, FeatureCollection, FeatureProperties, Geometry, Position, } from './components/GeoJson.types';
 //# sourceMappingURL=index.web.d.ts.map

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

@@ -1 +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,OAAO,EAAE,MAAM,EAAE,MAAM,wBAAwB,CAAC;AAChD,YAAY,EAAE,WAAW,EAAE,MAAM,wBAAwB,CAAC;AAC1D,OAAO,EAAE,OAAO,EAAE,MAAM,wBAAwB,CAAC;AACjD,YAAY,EAAE,YAAY,EAAE,MAAM,wBAAwB,CAAC;AAC3D,OAAO,EAAE,QAAQ,EAAE,MAAM,wBAAwB,CAAC;AAClD,YAAY,EAAE,aAAa,EAAE,MAAM,wBAAwB,CAAC;AAC5D,OAAO,EAAE,OAAO,EAAE,MAAM,wBAAwB,CAAC;AACjD,YAAY,EAAE,YAAY,EAAE,MAAM,wBAAwB,CAAC;AAC3D,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;AACjB,YAAY,EACV,OAAO,EACP,OAAO,EACP,iBAAiB,EACjB,QAAQ,EACR,QAAQ,GACT,MAAM,4BAA4B,CAAC"}
+{"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,OAAO,EAAE,MAAM,EAAE,MAAM,wBAAwB,CAAC;AAChD,YAAY,EAAE,cAAc,EAAE,WAAW,EAAE,MAAM,wBAAwB,CAAC;AAC1E,OAAO,EAAE,OAAO,EAAE,MAAM,wBAAwB,CAAC;AACjD,YAAY,EAAE,YAAY,EAAE,MAAM,wBAAwB,CAAC;AAC3D,OAAO,EAAE,QAAQ,EAAE,MAAM,wBAAwB,CAAC;AAClD,YAAY,EAAE,aAAa,EAAE,MAAM,wBAAwB,CAAC;AAC5D,OAAO,EAAE,OAAO,EAAE,MAAM,wBAAwB,CAAC;AACjD,YAAY,EAAE,YAAY,EAAE,MAAM,wBAAwB,CAAC;AAC3D,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;AACjB,YAAY,EACV,OAAO,EACP,OAAO,EACP,iBAAiB,EACjB,iBAAiB,EACjB,QAAQ,EACR,QAAQ,GACT,MAAM,4BAA4B,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lugg/maps",
-  "version": "1.0.0-beta.0",
+  "version": "1.0.0-beta.1",
   "description": "Universal maps for React Native.",
   "main": "./lib/module/index.js",
   "types": "./lib/typescript/src/index.d.ts",
@@ -147,6 +147,7 @@
       "componentProvider": {
         "LuggMapView": "LuggMapView",
         "LuggMarkerView": "LuggMarkerView",
+        "LuggCalloutView": "LuggCalloutView",
         "LuggMapWrapperView": "LuggMapWrapperView",
         "LuggPolylineView": "LuggPolylineView",
         "LuggPolygonView": "LuggPolygonView"

package/src/MapProvider.web.tsx

@@ -2,11 +2,21 @@ import { createContext, useContext } from 'react';
 import { APIProvider } from '@vis.gl/react-google-maps';
 import type { MapProviderProps } from './MapProvider.types';
 
+type CalloutCloseListener = () => void;
+
 export const MapContext = createContext<{
   map: google.maps.Map | null;
   isDragging: boolean;
   moveCamera: (coordinate: { latitude: number; longitude: number }) => void;
-}>({ map: null, isDragging: false, moveCamera: () => {} });
+  onCalloutClose: (listener: CalloutCloseListener) => () => void;
+  closeCallouts: (except?: CalloutCloseListener) => void;
+}>({
+  map: null,
+  isDragging: false,
+  moveCamera: () => {},
+  onCalloutClose: () => () => {},
+  closeCallouts: () => {},
+});
 
 export const useMapContext = () => useContext(MapContext);
 

package/src/MapView.web.tsx

@@ -285,6 +285,23 @@ export const MapView = forwardRef<MapViewRef, MapViewProps>(function MapView(
   const longPressTimer = useRef<ReturnType<typeof setTimeout> | null>(null);
   const longPressFired = useRef(false);
 
+  const calloutListeners = useRef(new Set<() => void>()).current;
+  const onCalloutClose = useCallback(
+    (listener: () => void) => {
+      calloutListeners.add(listener);
+      return () => calloutListeners.delete(listener);
+    },
+    [calloutListeners]
+  );
+  const closeCallouts = useCallback(
+    (except?: () => void) => {
+      calloutListeners.forEach((l) => {
+        if (l !== except) l();
+      });
+    },
+    [calloutListeners]
+  );
+
   const getPoint = useCallback((domEvent?: Event) => {
     const el = containerRef.current as unknown as HTMLElement | null;
     if (!domEvent || !el) return { x: 0, y: 0 };
@@ -299,6 +316,7 @@ export const MapView = forwardRef<MapViewRef, MapViewProps>(function MapView(
         longPressFired.current = false;
         return;
       }
+      closeCallouts();
       const latLng = event.detail.latLng;
       if (!onPress || !latLng) return;
       onPress(
@@ -308,7 +326,7 @@ export const MapView = forwardRef<MapViewRef, MapViewProps>(function MapView(
         })
       );
     },
-    [onPress, getPoint]
+    [onPress, getPoint, closeCallouts]
   );
 
   const handleMouseDown = useCallback(
@@ -419,7 +437,13 @@ export const MapView = forwardRef<MapViewRef, MapViewProps>(function MapView(
 
   return (
     <MapContext.Provider
-      value={{ map, isDragging, moveCamera: panToCoordinate }}
+      value={{
+        map,
+        isDragging,
+        moveCamera: panToCoordinate,
+        onCalloutClose,
+        closeCallouts,
+      }}
     >
       <View ref={containerRef} style={style}>
         <Map

package/src/components/GeoJson.types.ts

@@ -56,11 +56,22 @@ export type Geometry =
   | MultiPolygon
   | GeometryCollection;
 
+export interface FeatureProperties {
+  'title'?: string;
+  'description'?: string;
+  'fill'?: string;
+  'fill-opacity'?: number;
+  'stroke'?: string;
+  'stroke-width'?: number;
+  'stroke-opacity'?: number;
+  [key: string]: unknown;
+}
+
 export interface Feature<G extends Geometry = Geometry> {
   type: 'Feature';
   id?: string | number;
   geometry: G;
-  properties: Record<string, any> | null;
+  properties: FeatureProperties | null;
 }
 
 export interface FeatureCollection<G extends Geometry = Geometry> {

package/src/components/Marker.tsx

@@ -1,9 +1,11 @@
-import React from 'react';
+import React, { isValidElement } from 'react';
 import { StyleSheet } from 'react-native';
 import LuggMarkerViewNativeComponent from '../fabric/LuggMarkerViewNativeComponent';
+import LuggCalloutViewNativeComponent from '../fabric/LuggCalloutViewNativeComponent';
 import type { MarkerProps } from './Marker.types';
 
 export type {
+  CalloutOptions,
   MarkerProps,
   MarkerPressEvent,
   MarkerDragEvent,
@@ -38,9 +40,19 @@ export class Marker extends React.PureComponent<MarkerProps> {
       onDragStart,
       onDragChange,
       onDragEnd,
+      callout,
+      calloutOptions,
       children,
     } = this.props;
 
+    const calloutContent = callout
+      ? isValidElement(callout)
+        ? callout
+        : React.createElement(callout)
+      : null;
+    const calloutBubbled = calloutOptions?.bubbled ?? true;
+    const calloutAnchor = calloutOptions?.anchor;
+
     return (
       <LuggMarkerViewNativeComponent
         style={this.getStyle(zIndex)}
@@ -59,6 +71,15 @@ export class Marker extends React.PureComponent<MarkerProps> {
         onMarkerDragEnd={onDragEnd}
       >
         {children}
+        {calloutContent && (
+          <LuggCalloutViewNativeComponent
+            style={calloutStyles.callout}
+            bubbled={calloutBubbled}
+            anchor={calloutAnchor}
+          >
+            {calloutContent}
+          </LuggCalloutViewNativeComponent>
+        )}
       </LuggMarkerViewNativeComponent>
     );
   }
@@ -70,3 +91,10 @@ const styles = StyleSheet.create({
     pointerEvents: 'box-none',
   },
 });
+
+const calloutStyles = StyleSheet.create({
+  callout: {
+    position: 'absolute',
+    pointerEvents: 'box-none',
+  },
+});

package/src/components/Marker.types.ts

@@ -1,10 +1,28 @@
-import type { ReactNode } from 'react';
+import type { ComponentType, ReactElement, ReactNode } from 'react';
 import type { NativeSyntheticEvent } from 'react-native';
 import type { Coordinate, Point, PressEventPayload } from '../types';
 
 export type MarkerPressEvent = NativeSyntheticEvent<PressEventPayload>;
 export type MarkerDragEvent = NativeSyntheticEvent<PressEventPayload>;
 
+export interface CalloutOptions {
+  /**
+   * Whether to wrap the callout in the native platform bubble.
+   * Set to `false` to render custom content directly without the native callout chrome.
+   *
+   * @default true
+   */
+  bubbled?: boolean;
+  /**
+   * Anchor point for the callout relative to the marker position.
+   * `{x: 0.5, y: 1}` places the bottom-center of the callout at the marker.
+   *
+   * @note Not supported on web.
+   * @default {x: 0.5, y: 1}
+   */
+  anchor?: Point;
+}
+
 export interface MarkerProps {
   /**
    * Name used for debugging purposes
@@ -68,6 +86,15 @@ export interface MarkerProps {
    * Called when marker drag ends
    */
   onDragEnd?: (event: MarkerDragEvent) => void;
+  /**
+   * Callout content displayed when marker is tapped.
+   * Pass a `ReactElement` for inline content or a `ComponentType` to be instantiated.
+   */
+  callout?: ComponentType<unknown> | ReactElement;
+  /**
+   * Callout configuration options.
+   */
+  calloutOptions?: CalloutOptions;
   /**
    * Custom marker view
    */

package/src/components/Marker.web.tsx

@@ -1,8 +1,44 @@
-import { useCallback, useEffect, useRef } from 'react';
-import { AdvancedMarker } from '@vis.gl/react-google-maps';
+import React, {
+  isValidElement,
+  useCallback,
+  useEffect,
+  useRef,
+  useState,
+} from 'react';
+import {
+  AdvancedMarker,
+  InfoWindow,
+  useAdvancedMarkerRef,
+} from '@vis.gl/react-google-maps';
 import { useMapContext } from '../MapProvider.web';
 import type { MarkerProps } from './Marker.types';
 
+const CALLOUT_ARROW_HEIGHT = 12;
+const UNBUBBLED_CLASS = 'rnm-callout-unbubbled';
+const UNBUBBLED_STYLE_ID = 'rnm-callout-unbubbled-style';
+
+function injectUnbubbledStyle() {
+  if (document.getElementById(UNBUBBLED_STYLE_ID)) return;
+  const style = document.createElement('style');
+  style.id = UNBUBBLED_STYLE_ID;
+  style.textContent = `
+    .gm-style-iw-c:has(.${UNBUBBLED_CLASS}) {
+      background: transparent !important;
+      box-shadow: none !important;
+      padding: 0 !important;
+      border-radius: 0 !important;
+    }
+    .gm-style-iw-d:has(.${UNBUBBLED_CLASS}) {
+      overflow: visible !important;
+    }
+    .gm-style-iw-t:has(.${UNBUBBLED_CLASS})::after,
+    .gm-style-iw-t:has(.${UNBUBBLED_CLASS}) .gm-style-iw-tc {
+      display: none !important;
+    }
+  `;
+  document.head.appendChild(style);
+}
+
 const toWebAnchor = (value: number) => `-${value * 100}%`;
 
 const createEvent = (
@@ -25,6 +61,7 @@ const createEvent = (
 export const Marker = ({
   coordinate,
   title,
+  description,
   anchor,
   zIndex,
   rotate,
@@ -34,10 +71,38 @@ export const Marker = ({
   onDragStart,
   onDragChange,
   onDragEnd,
+  callout,
+  calloutOptions,
   children,
 }: MarkerProps) => {
-  const { moveCamera } = useMapContext();
+  const { moveCamera, onCalloutClose, closeCallouts } = useMapContext();
   const dragPositionRef = useRef<google.maps.LatLngLiteral | null>(null);
+  const [markerRef, markerElement] = useAdvancedMarkerRef();
+  const [infoWindowOpen, setInfoWindowOpen] = useState(false);
+  const calloutBubbled = calloutOptions?.bubbled ?? true;
+
+  const closeCallout = useCallback(() => setInfoWindowOpen(false), []);
+
+  useEffect(() => onCalloutClose(closeCallout), [onCalloutClose, closeCallout]);
+
+  useEffect(() => {
+    if (!calloutBubbled) injectUnbubbledStyle();
+  }, [calloutBubbled]);
+
+  const hasCallout = !!(callout || title);
+
+  const calloutContent = callout
+    ? isValidElement(callout)
+      ? callout
+      : React.createElement(callout)
+    : title
+    ? React.createElement(
+        'div',
+        { style: { fontSize: 14 } },
+        React.createElement('div', { style: { fontWeight: 500 } }, title),
+        description ? React.createElement('div', null, description) : null
+      )
+    : null;
 
   const transforms: string[] = [];
   if (rotate) transforms.push(`rotate(${rotate}deg)`);
@@ -51,8 +116,12 @@ export const Marker = ({
         : coordinate;
       moveCamera(coord);
       onPress?.(createEvent(e, coordinate));
+      if (hasCallout) {
+        closeCallouts(closeCallout);
+        setInfoWindowOpen((prev) => !prev);
+      }
     },
-    [moveCamera, onPress, coordinate]
+    [moveCamera, onPress, coordinate, hasCallout, closeCallouts, closeCallout]
   );
 
   const handleDragStart = useCallback(
@@ -92,29 +161,50 @@ export const Marker = ({
     dragPositionRef.current = null;
   }, [coordinate.latitude, coordinate.longitude]);
 
-  const position = dragPositionRef.current ?? {
+  const latLngPosition = {
     lat: coordinate.latitude,
     lng: coordinate.longitude,
   };
 
+  const position = dragPositionRef.current ?? latLngPosition;
+
   return (
-    <AdvancedMarker
-      position={position}
-      title={title}
-      zIndex={zIndex}
-      anchorLeft={anchor ? toWebAnchor(anchor.x) : undefined}
-      anchorTop={anchor ? toWebAnchor(anchor.y) : undefined}
-      clickable
-      draggable={draggable}
-      onClick={handleClick}
-      onDragStart={handleDragStart}
-      onDrag={handleDrag}
-      onDragEnd={handleDragEnd}
-      style={
-        transforms.length > 0 ? { transform: transforms.join(' ') } : undefined
-      }
-    >
-      {children}
-    </AdvancedMarker>
+    <>
+      <AdvancedMarker
+        ref={markerRef}
+        position={position}
+        title={title}
+        zIndex={zIndex}
+        anchorLeft={anchor ? toWebAnchor(anchor.x) : undefined}
+        anchorTop={anchor ? toWebAnchor(anchor.y) : undefined}
+        clickable
+        draggable={draggable}
+        onClick={handleClick}
+        onDragStart={handleDragStart}
+        onDrag={handleDrag}
+        onDragEnd={handleDragEnd}
+        style={
+          transforms.length > 0
+            ? { transform: transforms.join(' ') }
+            : undefined
+        }
+      >
+        {children}
+      </AdvancedMarker>
+      {calloutContent && infoWindowOpen && markerElement && (
+        <InfoWindow
+          anchor={markerElement}
+          pixelOffset={!calloutBubbled ? [0, CALLOUT_ARROW_HEIGHT] : undefined}
+          headerDisabled
+          onClose={() => setInfoWindowOpen(false)}
+        >
+          {!calloutBubbled ? (
+            <div className={UNBUBBLED_CLASS}>{calloutContent}</div>
+          ) : (
+            calloutContent
+          )}
+        </InfoWindow>
+      )}
+    </>
   );
 };

package/src/components/index.ts

@@ -1,5 +1,6 @@
 export { Marker } from './Marker';
 export type {
+  CalloutOptions,
   MarkerProps,
   MarkerPressEvent,
   MarkerDragEvent,

package/src/components/index.web.ts

@@ -1,7 +1,7 @@
 export { Marker } from './Marker.web';
 export { Polygon } from './Polygon.web';
 export { Polyline } from './Polyline.web';
-export type { MarkerProps } from './Marker.types';
+export type { CalloutOptions, MarkerProps } from './Marker.types';
 export type { PolygonProps } from './Polygon.types';
 export type { PolylineProps } from './Polyline.types';
 export { GeoJson } from './GeoJson';

package/src/fabric/LuggCalloutViewNativeComponent.ts

@@ -0,0 +1,20 @@
+import { codegenNativeComponent } from 'react-native';
+import type { ViewProps, HostComponent } from 'react-native';
+import type {
+  Double,
+  WithDefault,
+} from 'react-native/Libraries/Types/CodegenTypes';
+
+export interface Point {
+  x: Double;
+  y: Double;
+}
+
+export interface NativeProps extends ViewProps {
+  bubbled?: WithDefault<boolean, true>;
+  anchor?: Point;
+}
+
+export default codegenNativeComponent<NativeProps>(
+  'LuggCalloutView'
+) as HostComponent<NativeProps>;

package/src/index.ts

@@ -3,6 +3,7 @@ export { MapProvider } from './MapProvider';
 export type { MapProviderProps } from './MapProvider.types';
 export { Marker } from './components';
 export type {
+  CalloutOptions,
   MarkerProps,
   MarkerPressEvent,
   MarkerDragEvent,
@@ -39,6 +40,7 @@ export type {
   GeoJSON,
   Feature,
   FeatureCollection,
+  FeatureProperties,
   Geometry,
   Position,
 } from './components/GeoJson.types';

package/src/index.web.ts

@@ -2,7 +2,7 @@ export { MapView } from './MapView.web';
 export { MapProvider } from './MapProvider.web';
 export type { MapProviderProps } from './MapProvider.types';
 export { Marker } from './components/index.web';
-export type { MarkerProps } from './components/index.web';
+export type { CalloutOptions, MarkerProps } from './components/index.web';
 export { Polygon } from './components/index.web';
 export type { PolygonProps } from './components/index.web';
 export { Polyline } from './components/index.web';
@@ -26,6 +26,7 @@ export type {
   GeoJSON,
   Feature,
   FeatureCollection,
+  FeatureProperties,
   Geometry,
   Position,
 } from './components/GeoJson.types';