react-native-maps 1.21.0-alpha.98 → 1.21.0

package/src/MapView.types.ts

@@ -0,0 +1,212 @@
+import {ClickEvent, LatLng, Point, Region} from './sharedTypes';
+import {NativeSyntheticEvent} from 'react-native';
+
+// All types in this file are directly exported with the package for external
+// use.
+
+export type Camera = {
+  /**
+   * Apple Maps
+   */
+  altitude?: number;
+  center: LatLng;
+  heading: number;
+  pitch: number;
+
+  /**
+   * Google Maps
+   */
+  zoom?: number;
+};
+
+export type MapStyleElement = {
+  featureType?: string;
+  elementType?: string;
+  stylers: object[];
+};
+
+export type EdgePadding = {
+  top: number;
+  right: number;
+  bottom: number;
+  left: number;
+};
+
+export type MapType =
+  | 'hybrid'
+  | 'mutedStandard'
+  | 'none'
+  | 'satellite'
+  | 'standard'
+  | 'terrain'
+  | 'satelliteFlyover'
+  | 'hybridFlyover';
+
+export type MapTypes = {
+  STANDARD: 'standard';
+  SATELLITE: 'satellite';
+  HYBRID: 'hybrid';
+  TERRAIN: 'terrain';
+  NONE: 'none';
+  MUTEDSTANDARD: 'mutedStandard';
+  SATELLITE_FLYOVER: 'satelliteFlyover';
+  HYBRID_FLYOVER: 'hybridFlyover';
+};
+
+export type IndoorLevel = {
+  index: number;
+  name: string;
+  shortName: string;
+};
+
+export type ActiveIndoorLevel = {
+  activeLevelIndex: number;
+  name: string;
+  shortName: string;
+};
+
+export type IndoorLevelActivatedEvent = NativeSyntheticEvent<{
+  indoorLevel: ActiveIndoorLevel;
+}>;
+
+export type IndoorBuilding = {
+  underground: boolean;
+  activeLevelIndex: number;
+  levels: IndoorLevel[];
+};
+
+export type IndoorBuildingEvent = NativeSyntheticEvent<{
+  IndoorBuilding: IndoorBuilding;
+}>;
+
+export type KmlMarker = {
+  id: string;
+  title: string;
+  description: string;
+  coordinate: LatLng;
+  position: Point;
+};
+
+export type KmlMapEvent = NativeSyntheticEvent<{markers: KmlMarker[]}>;
+
+export type LongPressEvent = ClickEvent<{
+  /**
+   * @platform Android
+   */
+  action?: 'long-press';
+}>;
+
+export type PanDragEvent = ClickEvent;
+
+export type PoiClickEvent = NativeSyntheticEvent<{
+  placeId: string;
+  name: string;
+  coordinate: LatLng;
+
+  /**
+   * @platform Android
+   */
+  position?: Point;
+}>;
+
+export type MapPressEvent = ClickEvent<{
+  /**
+   * @platform Android
+   */
+  action?: 'press' | 'marker-press';
+}>;
+
+export type Details = {
+  isGesture?: boolean;
+};
+
+export type UserLocationChangeEvent = NativeSyntheticEvent<{
+  coordinate?: LatLng & {
+    altitude: number;
+    timestamp: number;
+    accuracy: number;
+    speed: number;
+    heading: number;
+
+    /**
+     * @platform iOS
+     */
+    altitudeAccuracy?: number;
+
+    /**
+     * @platform Android
+     */
+    isFromMockProvider?: boolean;
+  };
+
+  /**
+   * @platform iOS
+   */
+  error?: {
+    message: string;
+  };
+}>;
+
+export type ChangeEvent = NativeSyntheticEvent<{
+  continuous: boolean;
+  region: Region;
+  isGesture?: boolean;
+}>;
+
+export type FitToOptions = {
+  edgePadding?: EdgePadding;
+  animated?: boolean;
+};
+
+export type BoundingBox = {northEast: LatLng; southWest: LatLng};
+
+export type SnapshotOptions = {
+  /** optional, when omitted the view-width is used */
+  width?: number;
+  /** optional, when omitted the view-height is used */
+  height?: number;
+  /** __iOS only__, optional region to render */
+  region?: Region;
+  /** image formats, defaults to 'png' */
+  format?: 'png' | 'jpg';
+  /** image quality: 0..1 (only relevant for jpg, default: 1) */
+  quality?: number;
+  /** result types, defaults to 'file' */
+  result?: 'file' | 'base64';
+};
+
+export type Address = {
+  administrativeArea: string;
+  country: string;
+  countryCode: string;
+  locality: string;
+  name: string;
+  postalCode: string;
+  subAdministrativeArea: string;
+  subLocality: string;
+  thoroughfare: string;
+  subThoroughfare?: string;
+};
+
+export type CameraZoomRange = {
+  minCenterCoordinateDistance?: number;
+  maxCenterCoordinateDistance?: number;
+  animated?: boolean;
+};
+
+export type NativeCommandName =
+  | 'animateCamera'
+  | 'animateToRegion'
+  | 'coordinateForPoint'
+  | 'fitToCoordinates'
+  | 'fitToElements'
+  | 'fitToSuppliedMarkers'
+  | 'getAddressFromCoordinates'
+  | 'getCamera'
+  | 'getMapBoundaries'
+  | 'getMarkersFrames'
+  | 'pointForCoordinate'
+  | 'setCamera'
+  | 'setIndoorActiveLevelIndex'
+  | 'setMapBoundaries'
+  | 'takeSnapshot';

package/src/MapView.web.ts

@@ -0,0 +1,2 @@
+//@ts-ignore
+export {default} from 'react-native-web/dist/modules/UnimplementedView';

package/src/MapViewNativeComponent.ts

@@ -0,0 +1,86 @@
+import type {HostComponent} from 'react-native';
+import codegenNativeCommands from 'react-native/Libraries/Utilities/codegenNativeCommands';
+import {NativeProps} from './MapView';
+import {Camera, EdgePadding} from './MapView.types';
+import {LatLng, Region} from './sharedTypes';
+
+export type MapViewNativeComponentType = HostComponent<NativeProps>;
+
+interface NativeCommands {
+  animateToRegion: (
+    viewRef: NonNullable<
+      React.RefObject<MapViewNativeComponentType>['current']
+    >,
+    region: Region,
+    duration: number,
+  ) => void;
+
+  setCamera: (
+    viewRef: NonNullable<
+      React.RefObject<MapViewNativeComponentType>['current']
+    >,
+    camera: Partial<Camera>,
+  ) => void;
+
+  animateCamera: (
+    viewRef: NonNullable<
+      React.RefObject<MapViewNativeComponentType>['current']
+    >,
+    camera: Partial<Camera>,
+    duration: number,
+  ) => void;
+
+  fitToElements: (
+    viewRef: NonNullable<
+      React.RefObject<MapViewNativeComponentType>['current']
+    >,
+    edgePadding: EdgePadding,
+    animated: boolean,
+  ) => void;
+
+  fitToSuppliedMarkers: (
+    viewRef: NonNullable<
+      React.RefObject<MapViewNativeComponentType>['current']
+    >,
+    markers: string[],
+    edgePadding: EdgePadding,
+    animated: boolean,
+  ) => void;
+
+  fitToCoordinates: (
+    viewRef: NonNullable<
+      React.RefObject<MapViewNativeComponentType>['current']
+    >,
+    coordinates: LatLng[],
+    edgePadding: EdgePadding,
+    animated: boolean,
+  ) => void;
+
+  setMapBoundaries: (
+    viewRef: NonNullable<
+      React.RefObject<MapViewNativeComponentType>['current']
+    >,
+    northEast: LatLng,
+    southWest: LatLng,
+  ) => void;
+
+  setIndoorActiveLevelIndex: (
+    viewRef: NonNullable<
+      React.RefObject<MapViewNativeComponentType>['current']
+    >,
+    activeLevelIndex: number,
+  ) => void;
+}
+
+export const Commands: NativeCommands = codegenNativeCommands<NativeCommands>({
+  supportedCommands: [
+    'animateToRegion',
+    'setCamera',
+    'animateCamera',
+    'fitToElements',
+    'fitToSuppliedMarkers',
+    'fitToCoordinates',
+    'setMapBoundaries',
+    'setIndoorActiveLevelIndex',
+  ],
+});

package/src/MapWMSTile.tsx

@@ -0,0 +1,148 @@
+import * as React from 'react';
+import {ViewProps} from 'react-native';
+
+import decorateMapComponent, {
+  USES_DEFAULT_IMPLEMENTATION,
+  SUPPORTED,
+  ProviderContext,
+  NativeComponent,
+  MapManagerCommand,
+  UIManagerCommand,
+} from './decorateMapComponent';
+
+export type MapWMSTileProps = ViewProps & {
+  /**
+   * The maximum native zoom level for this tile overlay i.e. the highest zoom level that the tile server provides.
+   * Tiles are auto-scaled for higher zoom levels.
+   *
+   * @platform iOS: Apple Maps only
+   * @platform Android: Supported
+   */
+  maximumNativeZ?: number;
+
+  /**
+   * The maximum zoom level for this tile overlay.
+   *
+   * @platform iOS: Supported
+   * @platform Android: Supported
+   */
+  maximumZ?: number;
+
+  /**
+   * The minimum zoom level for this tile overlay.
+   *
+   * @platform iOS: Supported
+   * @platform Android: Supported
+   */
+  minimumZ?: number;
+
+  /**
+   * In offline-mode tiles are not fetched from the tile servers, rather only tiles stored in the cache directory are used.
+   * Furthermore, automated tile scaling is activated: if tile at a desired zoom level is not found from the cache directory,
+   * then lower zoom level tile is used (up to 4 levels lower) and scaled.
+   *
+   * @default false
+   * @platform iOS: Apple Maps only
+   * @platform Android: Supported
+   */
+  offlineMode?: boolean;
+
+  /**
+   * Map layer opacity. Value between 0 - 1, with 0 meaning fully transparent.
+   *
+   * @platform iOS: Supported
+   * @platform Android: Supported
+   */
+  opacity?: number;
+
+  /**
+   * Corresponds to MKTileOverlay canReplaceMapContent i.e. if true then underlying iOS basemap is not shown.
+   *
+   * @default false
+   * @platform iOS: Apple Maps only
+   * @platform Android: Not supported
+   */
+  shouldReplaceMapContent?: boolean;
+
+  /**
+   * Defines maximum age in seconds for a cached tile before it's refreshed.
+   *
+   * NB! Refresh logic is "serve-stale-while-refresh"
+   * i.e. to ensure map availability a stale (over max age) tile is served
+   * while a tile refresh process is started in the background.
+   *
+   * @platform iOS: Apple Maps only
+   * @platform Android: Supported
+   */
+  tileCacheMaxAge?: number;
+
+  /**
+   * Enable caching of tiles in the specified directory.
+   * Directory can be specified either as a normal path or in URL format (`file://`).
+   *
+   * Tiles are stored in tileCachePath directory as `/{z}/{x}/{y}` i.e. in sub-directories 2-levels deep,
+   * filename is tile y-coordinate without any filetype-extension.
+   *
+   * NB! All cache management needs to be implemented by client e.g. deleting tiles to manage use of storage space etc.
+   *
+   * @platform iOS: Apple Maps only
+   * @platform Android: Supported
+   */
+  tileCachePath?: string;
+
+  /**
+   * Tile size, default size is 256 (for tiles of 256 _ 256 pixels).
+   * High-res (aka 'retina') tiles are 512 (tiles of 512 _ 512 pixels)
+   *
+   * @platform iOS: Supported
+   * @platform Android: Supported
+   */
+  tileSize?: number;
+
+  /**
+   * The url template of the map tileserver.
+   * (URLTile) The patterns {x} {y} {z} will be replaced at runtime.
+   * For example, http://c.tile.openstreetmap.org/{z}/{x}/{y}.png.
+   *
+   * It is also possible to refer to tiles in local filesystem with file:///top-level-directory/sub-directory/{z}/{x}/{y}.png URL-format.
+   * (WMSTile) The patterns {minX} {maxX} {minY} {maxY} {width} {height} will be replaced at runtime according to EPSG:900913 specification bounding box.
+   * For example, https://demo.geo-solutions.it/geoserver/tiger/wms?service=WMS&version=1.1.0&request=GetMap&layers=tiger:poi&styles=&bbox={minX},{minY},{maxX},{maxY}&width={width}&height={height}&srs=EPSG:900913&format=image/png&transparent=true&format_options=dpi:213.
+   *
+   * @platform iOS: Supported
+   * @platform Android: Supported
+   */
+  urlTemplate: string;
+
+  /**
+   * The order in which this tile overlay is drawn with respect to other overlays.
+   * An overlay with a larger z-index is drawn over overlays with smaller z-indices.
+   * The order of overlays with the same z-index is arbitrary.
+   *
+   * @platform iOS: Google Maps only
+   * @platform Android: Supported
+   */
+  zIndex?: number;
+};
+
+type NativeProps = MapWMSTileProps;
+
+export class MapWMSTile extends React.Component<MapWMSTileProps> {
+  // declaration only, as they are set through decorateMap
+  /// @ts-ignore
+  context!: React.ContextType<typeof ProviderContext>;
+  getNativeComponent!: () => NativeComponent<NativeProps>;
+  getMapManagerCommand!: (name: string) => MapManagerCommand;
+  getUIManagerCommand!: (name: string) => UIManagerCommand;
+
+  render() {
+    const AIRMapWMSTile = this.getNativeComponent();
+    return <AIRMapWMSTile {...this.props} />;
+  }
+}
+
+export default decorateMapComponent(MapWMSTile, 'WMSTile', {
+  google: {
+    ios: SUPPORTED,
+    android: USES_DEFAULT_IMPLEMENTATION,
+  },
+});

package/src/ProviderConstants.ts

@@ -0,0 +1,2 @@
+export const PROVIDER_DEFAULT = undefined;
+export const PROVIDER_GOOGLE = 'google';

package/src/createFabricMap.tsx

@@ -0,0 +1,253 @@
+import React, {forwardRef, useImperativeHandle, useRef} from 'react';
+import {findNodeHandle} from 'react-native';
+import type {LatLng, Point, Region} from './sharedTypes';
+import type {
+  Address,
+  Camera,
+  EdgePadding,
+  SnapshotOptions,
+} from './MapView.types';
+import NativeAirMapsModule, {MapBoundaries} from './specs/NativeAirMapsModule';
+import {MapFabricNativeProps} from './specs/NativeComponentMapView';
+
+export type FabricMapViewProps = MapFabricNativeProps;
+
+export interface FabricMapHandle {
+  getCamera: () => Promise<Camera>;
+  setCamera: (camera: Partial<Camera>) => void;
+  animateToRegion: (region: Region, duration: number) => void;
+  animateCamera: (camera: Partial<Camera>, duration: number) => void;
+  getMarkersFrames: (onlyVisible: boolean) => Promise<unknown>;
+  fitToElements: (edgePadding: EdgePadding, animated: boolean) => void;
+
+  fitToSuppliedMarkers: (
+    markers: string[],
+    edgePadding: EdgePadding,
+    animated: boolean,
+  ) => void;
+
+  fitToCoordinates: (
+    coordinates: LatLng[],
+    edgePadding: EdgePadding,
+    animated: boolean,
+  ) => void;
+
+  getMapBoundaries: () => Promise<MapBoundaries>;
+  takeSnapshot: (config: SnapshotOptions) => Promise<string>;
+  getAddressFromCoordinates: (coordinate: LatLng) => Promise<Address>;
+  getPointForCoordinate: (coordinate: LatLng) => Promise<Point>;
+  getCoordinateForPoint: (point: Point) => Promise<LatLng>;
+  setIndoorActiveLevelIndex: (activeLevelIndex: number) => void;
+}
+
+const createFabricMap = (ViewComponent: React.ComponentType, Commands: any) => {
+  return forwardRef<FabricMapHandle, FabricMapViewProps>((props, ref) => {
+    const fabricRef = useRef<React.ElementRef<typeof ViewComponent>>(null);
+
+    useImperativeHandle(ref, () => ({
+      async getMarkersFrames(onlyVisible: boolean) {
+        if (fabricRef.current) {
+          return NativeAirMapsModule.getMarkersFrames(
+            findNodeHandle(fabricRef.current) ?? -1,
+            onlyVisible,
+          );
+        } else {
+          throw new Error(
+            'getMarkersFrames is only supported on iOS with Fabric.',
+          );
+        }
+      },
+      async getCoordinateForPoint(point: Point) {
+        if (fabricRef.current) {
+          return NativeAirMapsModule.getCoordinateForPoint(
+            findNodeHandle(fabricRef.current) ?? -1,
+            point,
+          );
+        } else {
+          throw new Error(
+            'getCoordinateForPoint is only supported on iOS with Fabric.',
+          );
+        }
+      },
+      async getPointForCoordinate(coordinate: LatLng) {
+        if (fabricRef.current) {
+          return NativeAirMapsModule.getPointForCoordinate(
+            findNodeHandle(fabricRef.current) ?? -1,
+            coordinate,
+          );
+        } else {
+          throw new Error(
+            'getPointForCoordinate is not supported on this platform.',
+          );
+        }
+      },
+      async getAddressFromCoordinates(coordinate: LatLng) {
+        if (fabricRef.current) {
+          return NativeAirMapsModule.getAddressFromCoordinates(
+            findNodeHandle(fabricRef.current) ?? -1,
+            coordinate,
+          );
+        } else {
+          throw new Error(
+            'getAddressFromCoordinates is not supported on this platform',
+          );
+        }
+      },
+      async takeSnapshot(config: SnapshotOptions) {
+        if (fabricRef.current) {
+          return NativeAirMapsModule.takeSnapshot(
+            findNodeHandle(fabricRef.current) ?? -1,
+            JSON.stringify(config),
+          );
+        } else {
+          throw new Error('takeSnapshot is only supported on iOS with Fabric.');
+        }
+      },
+      async getCamera() {
+        if (fabricRef.current) {
+          return NativeAirMapsModule.getCamera(
+            findNodeHandle(fabricRef.current) ?? -1,
+          );
+        } else {
+          throw new Error('getCamera is only supported on iOS with Fabric.');
+        }
+      },
+      async getMapBoundaries() {
+        if (fabricRef.current) {
+          return NativeAirMapsModule.getMapBoundaries(
+            findNodeHandle(fabricRef.current) ?? -1,
+          );
+        } else {
+          throw new Error(
+            'getMapBoundaries is only supported on iOS with Fabric.',
+          );
+        }
+      },
+      animateToRegion(region: Region, duration: number) {
+        if (fabricRef.current) {
+          try {
+            Commands.animateToRegion(
+              fabricRef.current,
+              JSON.stringify(region),
+              duration,
+            );
+          } catch (error) {
+            throw new Error('Failed to animateToRegion');
+          }
+        } else {
+          throw new Error(
+            'animateToRegion is only supported on iOS with Fabric.',
+          );
+        }
+      },
+      fitToElements(edgePadding: EdgePadding, animated: boolean) {
+        if (fabricRef.current) {
+          try {
+            Commands.fitToElements(
+              fabricRef.current,
+              JSON.stringify(edgePadding),
+              animated,
+            );
+          } catch (error) {
+            throw new Error('Failed to fitToElements');
+          }
+        } else {
+          throw new Error(
+            'fitToElements is only supported on iOS with Fabric.',
+          );
+        }
+      },
+      fitToSuppliedMarkers(
+        markers: string[],
+        edgePadding: EdgePadding,
+        animated: boolean,
+      ) {
+        if (fabricRef.current) {
+          try {
+            Commands.fitToSuppliedMarkers(
+              fabricRef.current,
+              JSON.stringify(markers),
+              JSON.stringify(edgePadding),
+              animated,
+            );
+          } catch (error) {
+            throw new Error('Failed to fitToSuppliedMarkers');
+          }
+        } else {
+          throw new Error(
+            'fitToSuppliedMarkers is only supported on iOS with Fabric.',
+          );
+        }
+      },
+      animateCamera(camera: Partial<Camera>, duration: number) {
+        if (fabricRef.current) {
+          try {
+            Commands.animateCamera(
+              fabricRef.current,
+              JSON.stringify(camera),
+              duration,
+            );
+          } catch (error) {
+            throw new Error('Failed to animateCamera');
+          }
+        } else {
+          throw new Error(
+            'animateCamera is only supported on iOS with Fabric.',
+          );
+        }
+      },
+      fitToCoordinates(
+        coordinates: LatLng[],
+        edgePadding: EdgePadding,
+        animated: boolean,
+      ) {
+        if (fabricRef.current) {
+          try {
+            Commands.fitToCoordinates(
+              fabricRef.current,
+              JSON.stringify(coordinates),
+              JSON.stringify(edgePadding),
+              animated,
+            );
+          } catch (error) {
+            throw new Error('Failed to fitToCoordinates');
+          }
+        } else {
+          throw new Error(
+            'fitToCoordinates is only supported on iOS with Fabric.',
+          );
+        }
+      },
+      setIndoorActiveLevelIndex(activeLevelIndex: number) {
+        if (fabricRef.current) {
+          try {
+            Commands.setIndoorActiveLevelIndex(
+              fabricRef.current,
+              activeLevelIndex,
+            );
+          } catch (error) {
+            console.error('Failed to set camera:', error);
+          }
+        } else {
+          console.warn('setIndoorActiveLevelIndex is not supported.');
+        }
+      },
+      setCamera(camera: Partial<Camera>) {
+        if (fabricRef.current) {
+          try {
+            Commands.setCamera(fabricRef.current, JSON.stringify(camera));
+          } catch (error) {
+            console.error('Failed to set camera:', error);
+          }
+        } else {
+          console.warn('setCamera is not supported');
+        }
+      },
+    }));
+
+    // @ts-ignore
+    return <ViewComponent {...props} ref={fabricRef} />;
+  });
+};
+
+export default createFabricMap;