@lugg/maps 1.0.0-beta.4 → 1.0.0-beta.5

package/src/components/Marker.web.tsx

@@ -1,7 +1,9 @@
 import React, {
+  forwardRef,
   isValidElement,
   useCallback,
   useEffect,
+  useImperativeHandle,
   useRef,
   useState,
 } from 'react';
@@ -11,7 +13,7 @@ import {
   useAdvancedMarkerRef,
 } from '@vis.gl/react-google-maps';
 import { useMapContext } from '../MapProvider.web';
-import type { MarkerProps } from './Marker.types';
+import type { MarkerProps, MarkerRef } from './Marker.types';
 
 const CALLOUT_ARROW_HEIGHT = 12;
 const UNBUBBLED_CLASS = 'rnm-callout-unbubbled';
@@ -58,153 +60,194 @@ const createEvent = (
     },
   } as any);
 
-export const Marker = ({
-  coordinate,
-  title,
-  description,
-  anchor,
-  zIndex,
-  rotate,
-  scale,
-  draggable,
-  onPress,
-  onDragStart,
-  onDragChange,
-  onDragEnd,
-  callout,
-  calloutOptions,
-  children,
-}: MarkerProps) => {
-  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)`);
-  if (scale && scale !== 1) transforms.push(`scale(${scale})`);
-
-  const handleClick = useCallback(
-    (e: google.maps.MapMouseEvent) => {
-      const pos = dragPositionRef.current;
-      const coord = pos
-        ? { latitude: pos.lat, longitude: pos.lng }
-        : coordinate;
-      moveCamera(coord);
-      onPress?.(createEvent(e, coordinate));
-      if (hasCallout) {
-        closeCallouts(closeCallout);
-        setInfoWindowOpen((prev) => !prev);
-      }
+export const Marker = forwardRef<MarkerRef, MarkerProps>(
+  (
+    {
+      coordinate,
+      title,
+      description,
+      anchor,
+      zIndex,
+      rotate,
+      scale,
+      centerOnPress = true,
+      draggable,
+      onPress,
+      onDragStart,
+      onDragChange,
+      onDragEnd,
+      callout,
+      calloutOptions,
+      children,
     },
-    [moveCamera, onPress, coordinate, hasCallout, closeCallouts, closeCallout]
-  );
-
-  const handleDragStart = useCallback(
-    (e: google.maps.MapMouseEvent) => {
-      const latLng = e.latLng;
-      if (latLng) {
-        dragPositionRef.current = { lat: latLng.lat(), lng: latLng.lng() };
-      }
-      onDragStart?.(createEvent(e, coordinate));
-    },
-    [onDragStart, coordinate]
-  );
-
-  const handleDrag = useCallback(
-    (e: google.maps.MapMouseEvent) => {
-      const latLng = e.latLng;
-      if (latLng) {
-        dragPositionRef.current = { lat: latLng.lat(), lng: latLng.lng() };
-      }
-      onDragChange?.(createEvent(e, coordinate));
-    },
-    [onDragChange, coordinate]
-  );
-
-  const handleDragEnd = useCallback(
-    (e: google.maps.MapMouseEvent) => {
-      const latLng = e.latLng;
-      if (latLng) {
-        dragPositionRef.current = { lat: latLng.lat(), lng: latLng.lng() };
-      }
-      onDragEnd?.(createEvent(e, coordinate));
-    },
-    [onDragEnd, coordinate]
-  );
-
-  useEffect(() => {
-    dragPositionRef.current = null;
-  }, [coordinate.latitude, coordinate.longitude]);
-
-  const latLngPosition = {
-    lat: coordinate.latitude,
-    lng: coordinate.longitude,
-  };
-
-  const position = dragPositionRef.current ?? latLngPosition;
-
-  return (
-    <>
-      <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
+    ref
+  ) => {
+    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 calloutOffset = calloutOptions?.offset;
+
+    const closeCallout = useCallback(() => setInfoWindowOpen(false), []);
+
+    useEffect(
+      () => onCalloutClose(closeCallout),
+      [onCalloutClose, closeCallout]
+    );
+
+    useEffect(() => {
+      if (!calloutBubbled) injectUnbubbledStyle();
+    }, [calloutBubbled]);
+
+    const hasCallout = !!(callout || title);
+
+    useImperativeHandle(
+      ref,
+      () => ({
+        showCallout() {
+          if (hasCallout) {
+            closeCallouts(closeCallout);
+            setInfoWindowOpen(true);
+          }
+        },
+        hideCallout() {
+          setInfoWindowOpen(false);
+        },
+      }),
+      [hasCallout, closeCallouts, closeCallout]
+    );
+
+    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)`);
+    if (scale && scale !== 1) transforms.push(`scale(${scale})`);
+
+    const handleClick = useCallback(
+      (e: google.maps.MapMouseEvent) => {
+        const pos = dragPositionRef.current;
+        const coord = pos
+          ? { latitude: pos.lat, longitude: pos.lng }
+          : coordinate;
+        if (centerOnPress) moveCamera(coord);
+        onPress?.(createEvent(e, coordinate));
+        if (hasCallout) {
+          closeCallouts(closeCallout);
+          setInfoWindowOpen((prev) => !prev);
+        }
+      },
+      [
+        centerOnPress,
+        moveCamera,
+        onPress,
+        coordinate,
+        hasCallout,
+        closeCallouts,
+        closeCallout,
+      ]
+    );
+
+    const handleDragStart = useCallback(
+      (e: google.maps.MapMouseEvent) => {
+        const latLng = e.latLng;
+        if (latLng) {
+          dragPositionRef.current = { lat: latLng.lat(), lng: latLng.lng() };
         }
-      >
-        {children}
-      </AdvancedMarker>
-      {calloutContent && infoWindowOpen && markerElement && (
-        <InfoWindow
-          anchor={markerElement}
-          pixelOffset={!calloutBubbled ? [0, CALLOUT_ARROW_HEIGHT] : undefined}
-          headerDisabled
-          onClose={() => setInfoWindowOpen(false)}
+        onDragStart?.(createEvent(e, coordinate));
+      },
+      [onDragStart, coordinate]
+    );
+
+    const handleDrag = useCallback(
+      (e: google.maps.MapMouseEvent) => {
+        const latLng = e.latLng;
+        if (latLng) {
+          dragPositionRef.current = { lat: latLng.lat(), lng: latLng.lng() };
+        }
+        onDragChange?.(createEvent(e, coordinate));
+      },
+      [onDragChange, coordinate]
+    );
+
+    const handleDragEnd = useCallback(
+      (e: google.maps.MapMouseEvent) => {
+        const latLng = e.latLng;
+        if (latLng) {
+          dragPositionRef.current = { lat: latLng.lat(), lng: latLng.lng() };
+        }
+        onDragEnd?.(createEvent(e, coordinate));
+      },
+      [onDragEnd, coordinate]
+    );
+
+    useEffect(() => {
+      dragPositionRef.current = null;
+    }, [coordinate.latitude, coordinate.longitude]);
+
+    const latLngPosition = {
+      lat: coordinate.latitude,
+      lng: coordinate.longitude,
+    };
+
+    const position = dragPositionRef.current ?? latLngPosition;
+
+    return (
+      <>
+        <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
+          }
         >
-          {!calloutBubbled ? (
-            <div className={UNBUBBLED_CLASS}>{calloutContent}</div>
-          ) : (
-            calloutContent
-          )}
-        </InfoWindow>
-      )}
-    </>
-  );
-};
+          {children}
+        </AdvancedMarker>
+        {calloutContent && infoWindowOpen && markerElement && (
+          <InfoWindow
+            anchor={markerElement}
+            pixelOffset={
+              !calloutBubbled
+                ? [
+                    calloutOffset?.x ?? 0,
+                    CALLOUT_ARROW_HEIGHT + (calloutOffset?.y ?? 0),
+                  ]
+                : undefined
+            }
+            headerDisabled
+            onClose={() => setInfoWindowOpen(false)}
+          >
+            {!calloutBubbled ? (
+              <div className={UNBUBBLED_CLASS}>{calloutContent}</div>
+            ) : (
+              calloutContent
+            )}
+          </InfoWindow>
+        )}
+      </>
+    );
+  }
+);

package/src/components/index.ts

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

package/src/fabric/LuggCalloutViewNativeComponent.ts

@@ -12,7 +12,7 @@ export interface Point {
 
 export interface NativeProps extends ViewProps {
   bubbled?: WithDefault<boolean, true>;
-  anchor?: Point;
+  offset?: Point;
 }
 
 export default codegenNativeComponent<NativeProps>(

package/src/fabric/LuggMapViewNativeComponent.ts

@@ -62,6 +62,10 @@ export interface ReadyEvent {}
 
 export interface NativeProps extends ViewProps {
   provider?: WithDefault<'google' | 'apple', 'google'>;
+  mapType?: WithDefault<
+    'standard' | 'satellite' | 'terrain' | 'hybrid' | 'muted-standard',
+    'standard'
+  >;
   mapId?: string;
   initialCoordinate?: Coordinate;
   initialZoom?: Double;
@@ -74,7 +78,11 @@ export interface NativeProps extends ViewProps {
   edgeInsets?: EdgeInsets;
   userLocationEnabled?: boolean;
   userLocationButtonEnabled?: boolean;
-  theme?: WithDefault<'light' | 'dark' | 'system', 'system'>;
+  poiEnabled?: boolean;
+  poiFilterMode?: WithDefault<'including' | 'excluding', 'including'>;
+  poiFilterCategories?: ReadonlyArray<string>;
+  theme?: WithDefault<'system' | 'light' | 'dark', 'system'>;
+  insetAdjustment?: WithDefault<'never' | 'automatic', 'never'>;
   onMapPress?: DirectEventHandler<PressEvent>;
   onMapLongPress?: DirectEventHandler<LongPressEvent>;
   onCameraMove?: DirectEventHandler<CameraMoveEvent>;

package/src/fabric/LuggMarkerViewNativeComponent.ts

@@ -1,4 +1,4 @@
-import { codegenNativeComponent } from 'react-native';
+import { codegenNativeComponent, codegenNativeCommands } from 'react-native';
 import type { ViewProps, HostComponent } from 'react-native';
 import type {
   Double,
@@ -25,6 +25,7 @@ export interface NativeProps extends ViewProps {
   rotate?: WithDefault<Double, 0>;
   scale?: WithDefault<Double, 1>;
   rasterize?: WithDefault<boolean, true>;
+  centerOnPress?: WithDefault<boolean, true>;
   draggable?: WithDefault<boolean, false>;
   onMarkerPress?: DirectEventHandler<{
     coordinate: {
@@ -68,6 +69,17 @@ export interface NativeProps extends ViewProps {
   }>;
 }
 
+type ComponentType = HostComponent<NativeProps>;
+
+interface NativeCommands {
+  showCallout: (viewRef: React.ElementRef<ComponentType>) => void;
+  hideCallout: (viewRef: React.ElementRef<ComponentType>) => void;
+}
+
+export const Commands = codegenNativeCommands<NativeCommands>({
+  supportedCommands: ['showCallout', 'hideCallout'],
+});
+
 export default codegenNativeComponent<NativeProps>(
   'LuggMarkerView'
-) as HostComponent<NativeProps>;
+) as ComponentType;

package/src/index.ts

@@ -4,6 +4,7 @@ export type { MapProviderProps } from './MapProvider.types';
 export { Marker } from './components';
 export type {
   CalloutOptions,
+  MarkerRef,
   MarkerProps,
   MarkerPressEvent,
   MarkerDragEvent,
@@ -33,10 +34,14 @@ export type {
   CameraEventPayload,
   MapCameraEvent,
   MapPressEvent,
+  MapType,
+  MapTheme,
+  InsetAdjustment,
+  PoiCategory,
+  PoiFilter,
 } from './MapView.types';
 export type {
   MapProvider as MapProviderType,
-  MapTheme,
   Coordinate,
   Point,
   EdgeInsets,

package/src/index.web.ts

@@ -27,6 +27,9 @@ export type {
   MoveCameraOptions,
   FitCoordinatesOptions,
   CameraEventPayload,
+  MapType,
+  PoiCategory,
+  PoiFilter,
 } from './MapView.types';
 export type {
   MapProvider as MapProviderType,

package/src/types.ts

@@ -29,11 +29,6 @@ export interface EdgeInsets {
   right: number;
 }
 
-/**
- * Map theme
- */
-export type MapTheme = 'light' | 'dark' | 'system';
-
 /**
  * Press event payload
  */