@maplibre/maplibre-react-native 10.4.0 → 11.0.0-alpha.10

package/src/components/map-view/MapViewNativeComponent.ts

@@ -0,0 +1,96 @@
+import {
+  codegenNativeComponent,
+  type CodegenTypes,
+  type ColorValue,
+  type HostComponent,
+  type ViewProps,
+} from "react-native";
+
+import type { UnsafeMixed } from "../../types/codegen/UnsafeMixed";
+
+type NativeViewPadding = {
+  top?: CodegenTypes.WithDefault<CodegenTypes.Int32, 0>;
+  right?: CodegenTypes.WithDefault<CodegenTypes.Int32, 0>;
+  bottom?: CodegenTypes.WithDefault<CodegenTypes.Int32, 0>;
+  left?: CodegenTypes.WithDefault<CodegenTypes.Int32, 0>;
+};
+
+type NativeOrnamentViewPosition = {
+  top?: CodegenTypes.WithDefault<CodegenTypes.Int32, -1>;
+  right?: CodegenTypes.WithDefault<CodegenTypes.Int32, -1>;
+  bottom?: CodegenTypes.WithDefault<CodegenTypes.Int32, -1>;
+  left?: CodegenTypes.WithDefault<CodegenTypes.Int32, -1>;
+};
+
+type NativePressEvent = {
+  longitude: CodegenTypes.Double;
+  latitude: CodegenTypes.Double;
+  locationX: CodegenTypes.Double;
+  locationY: CodegenTypes.Double;
+};
+
+type NativeViewStateEvent = {
+  longitude: CodegenTypes.Double;
+  latitude: CodegenTypes.Double;
+  zoom: CodegenTypes.Double;
+  bearing: CodegenTypes.Double;
+  pitch: CodegenTypes.Double;
+  bounds: UnsafeMixed<
+    [
+      west: CodegenTypes.Double,
+      south: CodegenTypes.Double,
+      east: CodegenTypes.Double,
+      north: CodegenTypes.Double,
+    ]
+  >;
+
+  animated: boolean;
+  userInteraction: boolean;
+};
+
+export interface NativeProps extends ViewProps {
+  mapStyle?: string;
+  contentInset?: NativeViewPadding;
+  preferredFramesPerSecond?: CodegenTypes.WithDefault<CodegenTypes.Int32, -1>;
+
+  dragPan?: CodegenTypes.WithDefault<boolean, true>;
+  touchAndDoubleTapZoom?: CodegenTypes.WithDefault<boolean, true>;
+  touchRotate?: CodegenTypes.WithDefault<boolean, true>;
+  touchPitch?: CodegenTypes.WithDefault<boolean, true>;
+
+  tintColor?: ColorValue | undefined;
+
+  attribution?: CodegenTypes.WithDefault<boolean, true>;
+  attributionPosition?: NativeOrnamentViewPosition;
+
+  logo?: CodegenTypes.WithDefault<boolean, true>;
+  logoPosition?: NativeOrnamentViewPosition;
+
+  compass?: CodegenTypes.WithDefault<boolean, false>;
+  compassPosition?: NativeOrnamentViewPosition;
+
+  onPress?: CodegenTypes.BubblingEventHandler<NativePressEvent>;
+  onLongPress?: CodegenTypes.BubblingEventHandler<NativePressEvent>;
+
+  onRegionWillChange?: CodegenTypes.DirectEventHandler<NativeViewStateEvent>;
+  onRegionIsChanging?: CodegenTypes.DirectEventHandler<NativeViewStateEvent>;
+  onRegionDidChange?: CodegenTypes.DirectEventHandler<NativeViewStateEvent>;
+
+  onWillStartLoadingMap?: CodegenTypes.DirectEventHandler<null>;
+  onDidFinishLoadingMap?: CodegenTypes.DirectEventHandler<null>;
+  onDidFailLoadingMap?: CodegenTypes.DirectEventHandler<null>;
+
+  onWillStartRenderingFrame?: CodegenTypes.DirectEventHandler<null>;
+  onDidFinishRenderingFrame?: CodegenTypes.DirectEventHandler<null>;
+  onDidFinishRenderingFrameFully?: CodegenTypes.DirectEventHandler<null>;
+
+  onWillStartRenderingMap?: CodegenTypes.DirectEventHandler<null>;
+  onDidFinishRenderingMap?: CodegenTypes.DirectEventHandler<null>;
+  onDidFinishRenderingMapFully?: CodegenTypes.DirectEventHandler<null>;
+
+  onDidFinishLoadingStyle?: CodegenTypes.DirectEventHandler<null>;
+}
+
+export default codegenNativeComponent<NativeProps>(
+  "MLRNMapView",
+) as HostComponent<NativeProps>;

package/src/components/map-view/NativeMapViewModule.ts

@@ -0,0 +1,83 @@
+import {
+  type CodegenTypes,
+  type TurboModule,
+  TurboModuleRegistry,
+} from "react-native";
+
+type NativeViewState = {
+  longitude: CodegenTypes.Double;
+  latitude: CodegenTypes.Double;
+  zoom: CodegenTypes.Double;
+  bearing: CodegenTypes.Double;
+  pitch: CodegenTypes.Double;
+  bounds: CodegenTypes.Double[];
+};
+
+export interface Spec extends TurboModule {
+  getCenter: (reactTag: CodegenTypes.Int32) => Promise<{
+    longitude: CodegenTypes.Double;
+    latitude: CodegenTypes.Double;
+  }>;
+
+  getZoom: (reactTag: CodegenTypes.Int32) => Promise<CodegenTypes.Double>;
+
+  getBearing: (reactTag: CodegenTypes.Int32) => Promise<CodegenTypes.Double>;
+
+  getPitch: (reactTag: CodegenTypes.Int32) => Promise<CodegenTypes.Double>;
+
+  getBounds: (reactTag: CodegenTypes.Int32) => Promise<CodegenTypes.Double[]>;
+
+  getViewState: (reactTag: CodegenTypes.Int32) => Promise<NativeViewState>;
+
+  project: (
+    reactTag: CodegenTypes.Int32,
+    coordinate: {
+      longitude: CodegenTypes.Double;
+      latitude: CodegenTypes.Double;
+    },
+  ) => Promise<{
+    locationX: CodegenTypes.Double;
+    locationY: CodegenTypes.Double;
+  }>;
+
+  unproject: (
+    reactTag: CodegenTypes.Int32,
+    point: { locationX: CodegenTypes.Double; locationY: CodegenTypes.Double },
+  ) => Promise<{
+    longitude: CodegenTypes.Double;
+    latitude: CodegenTypes.Double;
+  }>;
+
+  queryRenderedFeaturesWithCoordinate: (
+    reactTag: CodegenTypes.Int32,
+    coordinate: {
+      longitude: CodegenTypes.Double;
+      latitude: CodegenTypes.Double;
+    },
+    layers: string[],
+    filter: string[],
+  ) => Promise<object>;
+
+  queryRenderedFeaturesWithBounds: (
+    reactTag: CodegenTypes.Int32,
+    bounds: CodegenTypes.Double[],
+    layers: string[],
+    filter: string[],
+  ) => Promise<object>;
+
+  setSourceVisibility: (
+    reactTag: CodegenTypes.Int32,
+    visible: boolean,
+    sourceId: string,
+    sourceLayerId: string | null,
+  ) => Promise<void>;
+
+  takeSnap: (
+    reactTag: CodegenTypes.Int32,
+    writeToDisk: boolean,
+  ) => Promise<string>;
+
+  showAttribution: (reactTag: CodegenTypes.Int32) => Promise<void>;
+}
+
+export default TurboModuleRegistry.getEnforcing<Spec>("MLRNMapViewModule");

package/src/components/sources/ImageSource.tsx

@@ -0,0 +1,68 @@
+import { type ReactNode } from "react";
+import { requireNativeComponent } from "react-native";
+
+import { useAbstractSource } from "../../hooks/useAbstractSource";
+import { type BaseProps } from "../../types/BaseProps";
+import {
+  cloneReactChildrenWithProps,
+  isNumber,
+  resolveImagePath,
+} from "../../utils";
+
+export const NATIVE_MODULE_NAME = "MLRNImageSource";
+
+export interface ImageSourceProps extends BaseProps {
+  /**
+   * A string that uniquely identifies the source.
+   */
+  id: string;
+  /**
+   * An HTTP(S) URL, absolute file URL, or local file URL to the source image.
+   * Gifs are currently not supported.
+   */
+  url?: number | string;
+  /**
+   * The top left, top right, bottom right, and bottom left coordinates for the image.
+   */
+  coordinates?: [
+    GeoJSON.Position,
+    GeoJSON.Position,
+    GeoJSON.Position,
+    GeoJSON.Position,
+  ];
+
+  children?: ReactNode;
+}
+
+type NativeProps = ImageSourceProps;
+
+const MLRNImageSource = requireNativeComponent<NativeProps>(NATIVE_MODULE_NAME);
+
+/**
+ * ImageSource is a content source that is used for a georeferenced raster image to be shown on the map.
+ * The georeferenced image scales and rotates as the user zooms and rotates the map
+ */
+export const ImageSource = (props: ImageSourceProps) => {
+  const { setNativeRef } = useAbstractSource<NativeProps>();
+
+  const _getURL = (): string | undefined => {
+    return isNumber(props.url) ? resolveImagePath(props.url) : props.url;
+  };
+
+  if (!props.url || !props.coordinates || !props.coordinates.length) {
+    return null;
+  }
+
+  const allProps = {
+    ...props,
+    url: _getURL(),
+  };
+
+  return (
+    <MLRNImageSource ref={setNativeRef} {...allProps}>
+      {cloneReactChildrenWithProps(allProps.children, {
+        sourceID: allProps.id,
+      })}
+    </MLRNImageSource>
+  );
+};

package/src/components/sources/RasterSource.tsx

@@ -0,0 +1,112 @@
+import { type ReactNode } from "react";
+import { NativeModules, requireNativeComponent } from "react-native";
+
+import { useAbstractSource } from "../../hooks/useAbstractSource";
+import { useOnce } from "../../hooks/useOnce";
+import { type BaseProps } from "../../types/BaseProps";
+import { cloneReactChildrenWithProps } from "../../utils";
+
+const MLRNModule = NativeModules.MLRNModule;
+
+export const NATIVE_MODULE_NAME = "MLRNRasterSource";
+
+const isTileTemplateUrl = (url?: string): url is string =>
+  !!url &&
+  (url.includes("{z}") || url.includes("{bbox-") || url.includes("{quadkey}"));
+
+interface RasterSourceProps extends BaseProps {
+  /**
+   * A string that uniquely identifies the source.
+   */
+  id: string;
+  /**
+   * A URL to a TileJSON configuration file describing the source’s contents and other metadata.
+   */
+  url?: string;
+  /**
+   * An array of tile URL templates. If multiple endpoints are specified, clients may use any combination of endpoints.
+   * Example: https://example.com/raster-tiles/{z}/{x}/{y}.png
+   */
+  tileUrlTemplates?: string[];
+  /**
+   * An unsigned integer that specifies the minimum zoom level at which to display tiles from the source.
+   * The value should be between 0 and 22, inclusive, and less than
+   * maxZoomLevel, if specified. The default value for this option is 0.
+   */
+  minZoomLevel?: number;
+  /**
+   * An unsigned integer that specifies the maximum zoom level at which to display tiles from the source.
+   * The value should be between 0 and 22, inclusive, and less than
+   * minZoomLevel, if specified. The default value for this option is 22.
+   */
+  maxZoomLevel?: number;
+  /**
+   * Size of the map tiles.
+   * Mapbox urls default to 256, all others default to 512.
+   */
+  tileSize?: number;
+  /**
+   * Influences the y direction of the tile coordinates. (tms inverts y axis)
+   */
+  tms?: boolean;
+  /**
+   * An HTML or literal text string defining the buttons to be displayed in an action sheet when the
+   * source is part of a map view’s style and the map view’s attribution button is pressed.
+   */
+  attribution?: string;
+
+  children?: ReactNode;
+}
+
+type NativeProps = RasterSourceProps;
+
+const MLRNRasterSource =
+  requireNativeComponent<NativeProps>(NATIVE_MODULE_NAME);
+
+/**
+ * RasterSource is a map content source that supplies raster image tiles to be shown on the map.
+ * The location of and metadata about the tiles are defined either by an option dictionary
+ * or by an external file that conforms to the TileJSON specification.
+ */
+export const RasterSource = ({
+  id = MLRNModule.StyleSource.DefaultSourceID,
+  ...props
+}: RasterSourceProps) => {
+  useOnce(() => {
+    if (props.url && props.tileUrlTemplates) {
+      console.warn(
+        `RasterSource 'url' property contains a Tile URL Template, but is intended for a StyleJSON URL. Please migrate your VectorSource to use: \`tileUrlTemplates=["${props.url}"]\` instead.`,
+      );
+    }
+  });
+
+  const { setNativeRef } = useAbstractSource<NativeProps>();
+
+  let { url, tileUrlTemplates } = props;
+
+  // Swapping url for tileUrlTemplates to provide backward compatiblity
+  // when RasterSource supported only tile url as url prop
+  if (isTileTemplateUrl(url)) {
+    tileUrlTemplates = [url];
+    url = undefined;
+  }
+  const allProps = {
+    ...props,
+    id,
+    url,
+    tileUrlTemplates,
+    minZoomLevel: props.minZoomLevel,
+    maxZoomLevel: props.maxZoomLevel,
+    tileSize: props.tileSize,
+    tms: props.tms,
+    attribution: props.attribution,
+  };
+
+  return (
+    <MLRNRasterSource ref={setNativeRef} {...allProps}>
+      {cloneReactChildrenWithProps(props.children, {
+        sourceID: id,
+      })}
+    </MLRNRasterSource>
+  );
+};