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

package/src/components/TileOverlay.web.tsx

@@ -1,95 +1,97 @@
-import { useCallback, useEffect, useRef } from 'react';
+import { memo, useCallback, useEffect, useRef } from 'react';
 import { useMapContext } from '../MapProvider.web';
 import type { TileOverlayProps } from './TileOverlay.types';
 
-export const TileOverlay = ({
-  urlTemplate,
-  tileSize = 256,
-  opacity = 1,
-  bounds,
-  zIndex = 0,
-  onPress,
-}: TileOverlayProps) => {
-  const { map } = useMapContext();
-  const overlayRef = useRef<google.maps.ImageMapType | null>(null);
-  const indexRef = useRef<number>(-1);
+export const TileOverlay = memo(
+  ({
+    urlTemplate,
+    tileSize = 256,
+    opacity = 1,
+    bounds,
+    zIndex = 0,
+    onPress,
+  }: TileOverlayProps) => {
+    const { map } = useMapContext();
+    const overlayRef = useRef<google.maps.ImageMapType | null>(null);
+    const indexRef = useRef<number>(-1);
 
-  const handleClick = useCallback(() => {
-    onPress?.();
-  }, [onPress]);
+    const handleClick = useCallback(() => {
+      onPress?.();
+    }, [onPress]);
 
-  // Cleanup on unmount
-  useEffect(() => {
-    return () => {
-      if (overlayRef.current && indexRef.current >= 0) {
-        map?.overlayMapTypes.removeAt(indexRef.current);
-      }
-      overlayRef.current = null;
-      indexRef.current = -1;
-    };
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
+    // Cleanup on unmount
+    useEffect(() => {
+      return () => {
+        if (overlayRef.current && indexRef.current >= 0) {
+          map?.overlayMapTypes.removeAt(indexRef.current);
+        }
+        overlayRef.current = null;
+        indexRef.current = -1;
+      };
+      // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
 
-  // Sync overlay with props
-  useEffect(() => {
-    if (!map) return;
+    // Sync overlay with props
+    useEffect(() => {
+      if (!map) return;
 
-    // Remove old overlay
-    if (overlayRef.current && indexRef.current >= 0) {
-      map.overlayMapTypes.removeAt(indexRef.current);
-      overlayRef.current = null;
-      indexRef.current = -1;
-    }
+      // Remove old overlay
+      if (overlayRef.current && indexRef.current >= 0) {
+        map.overlayMapTypes.removeAt(indexRef.current);
+        overlayRef.current = null;
+        indexRef.current = -1;
+      }
 
-    if (!urlTemplate) return;
+      if (!urlTemplate) return;
 
-    const imageMapType = new google.maps.ImageMapType({
-      getTileUrl: (coord, zoom) => {
-        if (bounds) {
-          const n = Math.pow(2, zoom);
-          const tileSWLat =
-            (Math.atan(Math.sinh(Math.PI * (1 - (2 * (coord.y + 1)) / n))) *
-              180) /
-            Math.PI;
-          const tileNELat =
-            (Math.atan(Math.sinh(Math.PI * (1 - (2 * coord.y) / n))) * 180) /
-            Math.PI;
-          const tileSWLng = (coord.x / n) * 360 - 180;
-          const tileNELng = ((coord.x + 1) / n) * 360 - 180;
+      const imageMapType = new google.maps.ImageMapType({
+        getTileUrl: (coord, zoom) => {
+          if (bounds) {
+            const n = Math.pow(2, zoom);
+            const tileSWLat =
+              (Math.atan(Math.sinh(Math.PI * (1 - (2 * (coord.y + 1)) / n))) *
+                180) /
+              Math.PI;
+            const tileNELat =
+              (Math.atan(Math.sinh(Math.PI * (1 - (2 * coord.y) / n))) * 180) /
+              Math.PI;
+            const tileSWLng = (coord.x / n) * 360 - 180;
+            const tileNELng = ((coord.x + 1) / n) * 360 - 180;
 
-          if (
-            tileNELat < bounds.southwest.latitude ||
-            tileSWLat > bounds.northeast.latitude ||
-            tileNELng < bounds.southwest.longitude ||
-            tileSWLng > bounds.northeast.longitude
-          ) {
-            return null;
+            if (
+              tileNELat < bounds.southwest.latitude ||
+              tileSWLat > bounds.northeast.latitude ||
+              tileNELng < bounds.southwest.longitude ||
+              tileSWLng > bounds.northeast.longitude
+            ) {
+              return null;
+            }
           }
-        }
 
-        return urlTemplate
-          .replace('{x}', String(coord.x))
-          .replace('{y}', String(coord.y))
-          .replace('{z}', String(zoom));
-      },
-      tileSize: new google.maps.Size(tileSize, tileSize),
-      opacity,
-    });
+          return urlTemplate
+            .replace('{x}', String(coord.x))
+            .replace('{y}', String(coord.y))
+            .replace('{z}', String(zoom));
+        },
+        tileSize: new google.maps.Size(tileSize, tileSize),
+        opacity,
+      });
 
-    const length = map.overlayMapTypes.getLength();
-    map.overlayMapTypes.insertAt(length, imageMapType);
-    overlayRef.current = imageMapType;
-    indexRef.current = length;
-  }, [
-    map,
-    urlTemplate,
-    tileSize,
-    opacity,
-    bounds,
-    zIndex,
-    onPress,
-    handleClick,
-  ]);
+      const length = map.overlayMapTypes.getLength();
+      map.overlayMapTypes.insertAt(length, imageMapType);
+      overlayRef.current = imageMapType;
+      indexRef.current = length;
+    }, [
+      map,
+      urlTemplate,
+      tileSize,
+      opacity,
+      bounds,
+      zIndex,
+      onPress,
+      handleClick,
+    ]);
 
-  return null;
-};
+    return null;
+  }
+);

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
  */