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

package/src/MapCallout.tsx

@@ -0,0 +1,77 @@
+import * as React from 'react';
+import {StyleSheet, ViewProps} from 'react-native';
+import decorateMapComponent, {
+  MapManagerCommand,
+  NativeComponent,
+  ProviderContext,
+  SUPPORTED,
+  UIManagerCommand,
+  USES_DEFAULT_IMPLEMENTATION,
+} from './decorateMapComponent';
+import {CalloutPressEvent} from './sharedTypes';
+
+export type MapCalloutProps = ViewProps & {
+  /**
+   * If `true`, clicks on transparent areas in callout will be passed to map.
+   *
+   * @default false
+   * @platform iOS: Supported
+   * @platform Android: Not supported
+   */
+  alphaHitTest?: boolean;
+
+  /**
+   * Callback that is called when the user presses on the callout
+   *
+   * @platform iOS: Apple Maps only
+   * @platform Android: Supported
+   */
+  onPress?: (event: CalloutPressEvent) => void;
+
+  /**
+   * If `false`, a default "tooltip" bubble window will be drawn around this callouts children.
+   * If `true`, the child views can fully customize their appearance, including any "bubble" like styles.
+   *
+   * @default false
+   * @platform iOS: Supported
+   * @platform Android: Supported
+   */
+  tooltip?: boolean;
+};
+
+type NativeProps = MapCalloutProps;
+
+export class MapCallout extends React.Component<MapCalloutProps> {
+  // 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 {tooltip = false, alphaHitTest = false} = this.props;
+    const AIRMapCallout = this.getNativeComponent();
+    return (
+      <AIRMapCallout
+        {...this.props}
+        tooltip={tooltip}
+        alphaHitTest={alphaHitTest}
+        style={[styles.callout, this.props.style]}
+      />
+    );
+  }
+}
+
+const styles = StyleSheet.create({
+  callout: {
+    position: 'absolute',
+  },
+});
+
+export default decorateMapComponent(MapCallout, 'Callout', {
+  google: {
+    ios: SUPPORTED,
+    android: USES_DEFAULT_IMPLEMENTATION,
+  },
+});

package/src/MapCalloutSubview.tsx

@@ -0,0 +1,64 @@
+import * as React from 'react';
+import {NativeSyntheticEvent, StyleSheet, ViewProps} from 'react-native';
+import decorateMapComponent, {
+  SUPPORTED,
+  NOT_SUPPORTED,
+  ProviderContext,
+  NativeComponent,
+  MapManagerCommand,
+  UIManagerCommand,
+} from './decorateMapComponent';
+import {Frame, Point} from './sharedTypes';
+
+export type MapCalloutSubviewProps = ViewProps & {
+  /**
+   * Callback that is called when the user presses on this subview inside callout
+   *
+   * @platform iOS: Supported
+   * @platform Android: Not supported
+   */
+  onPress?: (event: CalloutSubviewPressEvent) => void;
+};
+
+type NativeProps = MapCalloutSubviewProps;
+
+export class MapCalloutSubview extends React.Component<MapCalloutSubviewProps> {
+  // 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 AIRMapCalloutSubview = this.getNativeComponent();
+    return (
+      <AIRMapCalloutSubview
+        {...this.props}
+        style={[styles.calloutSubview, this.props.style]}
+      />
+    );
+  }
+}
+
+const styles = StyleSheet.create({
+  calloutSubview: {},
+});
+
+export default decorateMapComponent(MapCalloutSubview, 'CalloutSubview', {
+  google: {
+    ios: SUPPORTED,
+    android: NOT_SUPPORTED,
+  },
+});
+
+type CalloutSubviewPressEvent = NativeSyntheticEvent<{
+  /**
+   * Apple Maps: `callout-inside-press`
+   *
+   * Google Maps: `marker-inside-overlay-press`
+   */
+  action: 'callout-inside-press' | 'marker-inside-overlay-press';
+  frame: Frame;
+  id: string;
+  point: Point;
+}>;

package/src/MapCircle.tsx

@@ -0,0 +1,162 @@
+import * as React from 'react';
+import {View, ViewProps} from 'react-native';
+import decorateMapComponent, {
+  USES_DEFAULT_IMPLEMENTATION,
+  SUPPORTED,
+  ProviderContext,
+  NativeComponent,
+  MapManagerCommand,
+  UIManagerCommand,
+} from './decorateMapComponent';
+import {LatLng, LineCapType, LineJoinType} from './sharedTypes';
+
+export type MapCircleProps = ViewProps & {
+  /**
+   * The coordinates of the center of the circle.
+   *
+   * @platform iOS: Supported
+   * @platform Android: Supported
+   */
+  center: LatLng;
+
+  /**
+   * The fill color to use for the path.
+   *
+   * @default `#000`, `rgba(r,g,b,0.5)`
+   * @platform iOS: Supported
+   * @platform Android: Supported
+   */
+  fillColor?: string;
+
+  /**
+   * The line cap style to apply to the open ends of the path
+   *
+   * @default `round`
+   * @platform iOS: Apple Maps only
+   * @platform Android: Not supported
+   */
+  lineCap?: LineCapType;
+
+  /**
+   * An array of numbers specifying the dash pattern to use for the path.
+   * The array contains one or more numbers that indicate the lengths (measured in points)
+   * of the line segments and gaps in the pattern.
+   * The values in the array alternate, starting with the first line segment length,
+   * followed by the first gap length, followed by the second line segment length, and so on.
+   *
+   * @platform iOS: Apple Maps only
+   * @platform Android: Not supported
+   */
+  lineDashPattern?: number[];
+
+  /**
+   * The offset (in points) at which to start drawing the dash pattern.
+   * Use this property to start drawing a dashed line partway through a segment or gap.
+   * For example, a phase value of 6 for the patter 5-2-3-2 would cause drawing to begin in the middle of the first gap.
+   *
+   * @default 0
+   * @platform iOS: Apple Maps only
+   * @platform Android: Not supported
+   */
+  lineDashPhase?: number;
+
+  /**
+   * The line join style to apply to corners of the path.
+   *
+   * @platform iOS: Apple Maps only
+   * @platform Android: Not supported
+   */
+  lineJoin?: LineJoinType;
+
+  /**
+   * The limiting value that helps avoid spikes at junctions between connected line segments.
+   * The miter limit helps you avoid spikes in paths that use the `miter` `lineJoin` style.
+   * If the ratio of the miter length—that is, the diagonal length of the miter join—to the line thickness exceeds the miter limit,
+   * the joint is converted to a bevel join.
+   * The default miter limit is 10, which results in the conversion of miters whose angle at the joint is less than 11 degrees.
+   *
+   * @default 10
+   * @platform iOS: Apple Maps only
+   * @platform Android: Not supported
+   */
+  miterLimit?: number;
+
+  /**
+   * The radius of the circle to be drawn (in meters)
+   *
+   * @platform iOS: Supported
+   * @platform Android: Supported
+   */
+  radius: number;
+
+  /**
+   * The stroke color to use for the path.
+   *
+   * @default `#000`, `rgba(r,g,b,0.5)`
+   * @platform iOS: Supported
+   * @platform Android: Supported
+   */
+  strokeColor?: string;
+
+  /**
+   * The stroke width to use for the path.
+   *
+   * @default 1
+   * @platform iOS: Supported
+   * @platform Android: Supported
+   */
+  strokeWidth?: number;
+
+  /**
+   * 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.
+   *
+   * @default 0
+   * @platform iOS: Google Maps only
+   * @platform Android: Supported
+   */
+  zIndex?: number;
+};
+
+type NativeProps = MapCircleProps & {ref: React.RefObject<View | null>};
+
+export class MapCircle extends React.Component<MapCircleProps> {
+  // 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;
+
+  private circle: NativeProps['ref'];
+
+  constructor(props: MapCircleProps) {
+    super(props);
+    this.circle = React.createRef<View>();
+  }
+
+  setNativeProps(props: Partial<NativeProps>) {
+    this.circle.current?.setNativeProps(props);
+  }
+
+  render() {
+    const {strokeColor = '#000', strokeWidth = 1} = this.props;
+    const AIRMapCircle = this.getNativeComponent();
+    return (
+      <AIRMapCircle
+        {...this.props}
+        strokeColor={strokeColor}
+        strokeWidth={strokeWidth}
+        ref={this.circle}
+      />
+    );
+  }
+}
+
+export default decorateMapComponent(MapCircle, 'Circle', {
+  google: {
+    ios: SUPPORTED,
+    android: USES_DEFAULT_IMPLEMENTATION,
+  },
+});

package/src/MapHeatmap.tsx

@@ -0,0 +1,125 @@
+import * as React from 'react';
+import {processColor, ProcessedColorValue, View, ViewProps} from 'react-native';
+import decorateMapComponent, {
+  MapManagerCommand,
+  NativeComponent,
+  ProviderContext,
+  SUPPORTED,
+  UIManagerCommand,
+  USES_DEFAULT_IMPLEMENTATION,
+} from './decorateMapComponent';
+import {LatLng} from './sharedTypes';
+import {Modify} from './sharedTypesInternal';
+
+export type MapHeatmapProps = ViewProps & {
+  gradient?: {
+    /**
+     * Resolution of color map -- number corresponding to the number of steps colors are interpolated into.
+     *
+     * @default 256
+     * @platform iOS: Google Maps only
+     * @platform Android: Supported
+     */
+    colorMapSize: number;
+
+    /**
+     * Colors (one or more) to used for gradient.
+     *
+     * @platform iOS: Google Maps only
+     * @platform Android: Supported
+     */
+    colors: string[];
+
+    /**
+     * Array of floating point values from 0 to 1 representing where each color starts.
+     *
+     * Array length must be equal to `colors` array length.
+     *
+     * @platform iOS: Google Maps only
+     * @platform Android: Supported
+     */
+    startPoints: number[];
+  };
+
+  /**
+   * The opacity of the heatmap.
+   *
+   * @default 0.7
+   * @platform iOS: Google Maps only
+   * @platform Android: Supported
+   */
+  opacity?: number;
+
+  /**
+   * Array of heatmap entries to apply towards density.
+   *
+   * @platform iOS: Google Maps only
+   * @platform Android: Supported
+   */
+  points?: WeightedLatLng[];
+
+  /**
+   * The radius of the heatmap points in pixels, between 10 and 50.
+   *
+   * @default 20
+   * @platform iOS: Google Maps only
+   * @platform Android: Supported
+   */
+  radius?: number;
+};
+
+type NativeProps = Modify<
+  MapHeatmapProps,
+  {
+    gradient?: Modify<
+      MapHeatmapProps['gradient'],
+      {colors: (ProcessedColorValue | null | undefined)[]}
+    >;
+  }
+> & {
+  ref: React.RefObject<View | null>;
+};
+
+export class MapHeatmap extends React.Component<MapHeatmapProps | null> {
+  // 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;
+
+  private heatmap: NativeProps['ref'];
+
+  constructor(props: MapHeatmapProps) {
+    super(props);
+    this.heatmap = React.createRef<View>();
+  }
+
+  setNativeProps(props: Partial<NativeProps>) {
+    this.heatmap.current?.setNativeProps(props);
+  }
+
+  render() {
+    const AIRMapHeatmap = this.getNativeComponent();
+    const propGradient = this.props?.gradient;
+    let gradient: NativeProps['gradient'];
+    if (propGradient) {
+      const colors = propGradient.colors.map(c => processColor(c));
+      gradient = {...propGradient, colors};
+    }
+    return (
+      <AIRMapHeatmap {...this.props} gradient={gradient} ref={this.heatmap} />
+    );
+  }
+}
+
+export default decorateMapComponent(MapHeatmap, 'Heatmap', {
+  google: {
+    ios: SUPPORTED,
+    android: USES_DEFAULT_IMPLEMENTATION,
+  },
+});
+
+type WeightedLatLng = LatLng & {
+  weight?: number;
+};

package/src/MapLocalTile.tsx

@@ -0,0 +1,60 @@
+import * as React from 'react';
+import {ViewProps} from 'react-native';
+
+import decorateMapComponent, {
+  USES_DEFAULT_IMPLEMENTATION,
+  SUPPORTED,
+  ProviderContext,
+  NativeComponent,
+  MapManagerCommand,
+  UIManagerCommand,
+} from './decorateMapComponent';
+
+export type MapLocalTileProps = ViewProps & {
+  /**
+   * @platform iOS: Apple Maps only
+   * @platform Android: Supported
+   */
+  pathTemplate: string;
+
+  /**
+   * @platform iOS: Apple Maps only
+   * @platform Android: Supported
+   */
+  tileSize?: number;
+
+  /**
+   * Set to true to use pathTemplate to open files from Android's AssetManager. The default is false.
+   * @platform android
+   */
+  useAssets?: boolean;
+
+  /**
+   * @platform iOS: Not supported
+   * @platform Android: Supported
+   */
+  zIndex?: number;
+};
+
+type NativeProps = MapLocalTileProps;
+
+export class MapLocalTile extends React.Component<MapLocalTileProps> {
+  // 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 AIRMapLocalTile = this.getNativeComponent();
+    return <AIRMapLocalTile {...this.props} />;
+  }
+}
+
+export default decorateMapComponent(MapLocalTile, 'LocalTile', {
+  google: {
+    ios: SUPPORTED,
+    android: USES_DEFAULT_IMPLEMENTATION,
+  },
+});