@maplibre/maplibre-react-native 11.0.0-alpha.21 → 11.0.0-alpha.22

package/src/components/camera/NativeCameraModule.ts

@@ -13,8 +13,7 @@ type NativeViewPadding = {
 };
 
 type NativeViewState = {
-  longitude?: CodegenTypes.WithDefault<CodegenTypes.Double, -360>;
-  latitude?: CodegenTypes.WithDefault<CodegenTypes.Double, -360>;
+  center?: CodegenTypes.Double[];
 
   bounds?: CodegenTypes.Double[];
 

package/src/components/map-view/MapView.tsx

@@ -29,11 +29,14 @@ import MapViewNativeComponent, {
 import NativeMapViewModule from "./NativeMapViewModule";
 import { LogManager } from "../../modules/log/LogManager";
 import { type BaseProps } from "../../types/BaseProps";
-import type { Bounds } from "../../types/Bounds";
+import type { LngLat } from "../../types/LngLat";
+import type { LngLatBounds } from "../../types/LngLatBounds";
 import {
   type FilterExpression,
   type LightLayerStyle,
 } from "../../types/MapLibreRNStyles";
+import type { PixelPoint } from "../../types/PixelPoint";
+import type { PixelPointBounds } from "../../types/PixelPointBounds";
 import type { PressEvent } from "../../types/PressEvent";
 import type { ViewPadding } from "../../types/ViewPadding";
 import { isAndroid } from "../../utils";
@@ -76,12 +79,11 @@ export type OrnamentViewPosition =
   | { bottom: number; left: number };
 
 export type ViewState = {
-  longitude: number;
-  latitude: number;
+  center: LngLat;
   zoom: number;
   bearing: number;
   pitch: number;
-  bounds: Bounds;
+  bounds: LngLatBounds;
 };
 
 export type ViewStateChangeEvent = ViewState & {
@@ -90,7 +92,14 @@ export type ViewStateChangeEvent = ViewState & {
 };
 
 export type QueryRenderedFeaturesOptions = {
+  /**
+   * Filter expression to filter the queried features
+   */
   filter?: FilterExpression;
+
+  /**
+   * IDs of layers to query features from
+   */
   layers?: string[];
 };
 
@@ -103,7 +112,7 @@ export interface MapViewRef {
    *
    * @return Current center coordinates of the map
    */
-  getCenter(): Promise<Pick<ViewState, "longitude" | "latitude">>;
+  getCenter(): Promise<LngLat>;
 
   /**
    * Returns the current zoom level of the map
@@ -113,7 +122,7 @@ export interface MapViewRef {
    *
    * @return Current zoom level of the map
    */
-  getZoom(): Promise<ViewState["zoom"]>;
+  getZoom(): Promise<number>;
 
   /**
    * Returns the current bearing of the map
@@ -123,7 +132,7 @@ export interface MapViewRef {
    *
    * @return Current bearing of the map
    */
-  getBearing(): Promise<ViewState["bearing"]>;
+  getBearing(): Promise<number>;
 
   /**
    * Returns the current pitch of the map
@@ -133,7 +142,7 @@ export interface MapViewRef {
    *
    * @return Current pitch of the map
    */
-  getPitch(): Promise<ViewState["pitch"]>;
+  getPitch(): Promise<number>;
 
   /**
    * Returns the current bounds of the map
@@ -143,7 +152,7 @@ export interface MapViewRef {
    *
    * @return Current bounds of the map
    */
-  getBounds(): Promise<ViewState["bounds"]>;
+  getBounds(): Promise<LngLatBounds>;
 
   /**
    * Returns the current view state of the map
@@ -156,54 +165,81 @@ export interface MapViewRef {
   getViewState(): Promise<ViewState>;
 
   /**
-   * Converts a geographic coordinate to a pixel point of the view
+   * Converts geographic coordinates to pixel point of the view
    *
    * @example
    * await mapViewRef.current?.getPointInView([-37.817070, 144.949901]);
    *
-   * @param coordinate Geographic coordinate
+   * @param coordinates Geographic coordinate
    * @return Pixel point
    */
-  project(coordinate: {
-    longitude: number;
-    latitude: number;
-  }): Promise<{ locationX: number; locationY: number }>;
+  project(coordinates: LngLat): Promise<PixelPoint>;
 
   /**
-   * Converts a pixel point of the view to a geographic coordinate.
+   * Converts a pixel point of the view to geographic coordinates.
    *
    * @example
-   * await mapViewRef.current?.getCoordinateFromView([100, 100]);
+   * await mapViewRef.current?.getCoordinateFromView([280, 640]);
    *
    * @param point Pixel point
    * @return Geographic coordinate
    */
-  unproject(point: {
-    locationX: number;
-    locationY: number;
-  }): Promise<{ longitude: number; latitude: number }>;
+  unproject(point: PixelPoint): Promise<LngLat>;
 
   /**
-   * Returns an array of rendered map features.
+   * Query rendered features at a point
    *
    * @example
-   * await mapViewRef.current?.queryRenderedFeaturesAtPoint([30, 40], ['==', 'type', 'Point'], ['id1', 'id2'])
+   * await mapViewRef.current?.queryRenderedFeatures(
+   *   [240, 640],
+   *   {
+   *     filter: ["==", "type", "Point"],
+   *     layers: ["restaurants", "shops"],
+   *   },
+   * );
    *
-   * @param options.filter - A set of strings that correspond to the names of layers defined in the current style. Only the features contained in these layers are included in the returned array.
-   * @param options.layers - A array of layer id's to filter the features by
-   * @return FeatureCollection containing queried features
+   * @return Queried features
    */
   queryRenderedFeatures(
-    coordinate: { longitude: number; latitude: number },
+    pixelPoint: PixelPoint,
     options?: QueryRenderedFeaturesOptions,
-  ): Promise<GeoJSON.FeatureCollection>;
+  ): Promise<GeoJSON.Feature[]>;
+
+  /**
+   * Query rendered features within pixel bounds
+   *
+   * @example
+   * await mapViewRef.current?.queryRenderedFeatures(
+   *   [100, 100, 400, 400],
+   *   {
+   *     filter: ["==", "type", "Point"],
+   *     layers: ["restaurants", "shops"],
+   *   },
+   * );
+   *
+   * @return Queried features
+   */
   queryRenderedFeatures(
-    bounds: Bounds,
+    pixelPointBounds: PixelPointBounds,
     options?: QueryRenderedFeaturesOptions,
-  ): Promise<GeoJSON.FeatureCollection>;
+  ): Promise<GeoJSON.Feature[]>;
+
+  /**
+   * Query rendered features within the current viewport
+   *
+   * @example
+   * await mapViewRef.current?.queryRenderedFeatures(
+   *   {
+   *     filter: ["==", "type", "Point"],
+   *     layers: ["restaurants", "shops"],
+   *   },
+   * );
+   *
+   * @return Queried features
+   */
   queryRenderedFeatures(
     options?: QueryRenderedFeaturesOptions,
-  ): Promise<GeoJSON.FeatureCollection>;
+  ): Promise<GeoJSON.Feature[]>;
 
   /**
    * Takes snapshot of map with current tiles and returns a URI to the image
@@ -229,13 +265,14 @@ export interface MapViewRef {
   ): Promise<void>;
 
   /**
-   * Show the attribution action sheet, can be used to implement a
-   * custom attribution button
+   * Show the attribution dialog
+   *
+   * Can be used to implement a custom attribution button.
    */
   showAttribution(): Promise<void>;
 }
 
-interface MapViewProps extends BaseProps {
+export interface MapViewProps extends BaseProps {
   children?: ReactNode;
 
   /**
@@ -444,7 +481,7 @@ interface MapViewProps extends BaseProps {
  */
 export const MapView = memo(
   forwardRef<MapViewRef, MapViewProps>(
-    ({ androidView = "surface", style, testID, ...props }, ref) => {
+    ({ androidView = "surface", style, ...props }, ref) => {
       const [isReady, setIsReady] = useState(false);
 
       const nativeRef = useRef<
@@ -466,19 +503,17 @@ export const MapView = memo(
           NativeMapViewModule.getPitch(findNodeHandle(nativeRef.current)),
 
         getBounds: () =>
-          NativeMapViewModule.getBounds(
-            findNodeHandle(nativeRef.current),
-          ) as Promise<Bounds>,
+          NativeMapViewModule.getBounds(findNodeHandle(nativeRef.current)),
 
         getViewState: () =>
           NativeMapViewModule.getViewState(
             findNodeHandle(nativeRef.current),
           ) as Promise<ViewState>,
 
-        project: (coordinate) =>
+        project: (lngLat) =>
           NativeMapViewModule.project(
             findNodeHandle(nativeRef.current),
-            coordinate,
+            lngLat,
           ),
 
         unproject: (point) =>
@@ -488,40 +523,49 @@ export const MapView = memo(
           ),
 
         queryRenderedFeatures: async (
-          geometryOrOptions?:
-            | { longitude: number; latitude: number }
-            | Bounds
+          pixelPointOrPixelPointBoundsOrOptions?:
+            | PixelPoint
+            | PixelPointBounds
             | QueryRenderedFeaturesOptions,
           options?: QueryRenderedFeaturesOptions,
         ) => {
           if (
-            geometryOrOptions &&
-            "longitude" in geometryOrOptions &&
-            "latitude" in geometryOrOptions
+            pixelPointOrPixelPointBoundsOrOptions &&
+            Array.isArray(pixelPointOrPixelPointBoundsOrOptions) &&
+            ((value: PixelPoint | PixelPointBounds): value is PixelPoint =>
+              typeof value[0] === "number" && typeof value[1] === "number")(
+              pixelPointOrPixelPointBoundsOrOptions,
+            )
           ) {
-            return (await NativeMapViewModule.queryRenderedFeaturesWithCoordinate(
+            return await NativeMapViewModule.queryRenderedFeaturesWithPoint(
               findNodeHandle(nativeRef.current),
-              geometryOrOptions,
+              pixelPointOrPixelPointBoundsOrOptions,
               options?.layers ?? [],
               getFilter(options?.filter),
-            )) as GeoJSON.FeatureCollection;
-          } else if (Array.isArray(geometryOrOptions)) {
-            return (await NativeMapViewModule.queryRenderedFeaturesWithBounds(
+            );
+          } else if (
+            pixelPointOrPixelPointBoundsOrOptions &&
+            Array.isArray(pixelPointOrPixelPointBoundsOrOptions) &&
+            ((
+              value: PixelPoint | PixelPointBounds,
+            ): value is PixelPointBounds =>
+              Array.isArray(value[0]) && Array.isArray(value[1]))(
+              pixelPointOrPixelPointBoundsOrOptions,
+            )
+          ) {
+            return await NativeMapViewModule.queryRenderedFeaturesWithBounds(
               findNodeHandle(nativeRef.current),
-              geometryOrOptions,
+              pixelPointOrPixelPointBoundsOrOptions,
               options?.layers ?? [],
               getFilter(options?.filter),
-            )) as GeoJSON.FeatureCollection;
+            );
           } else {
-            return (await NativeMapViewModule.queryRenderedFeaturesWithBounds(
+            return await NativeMapViewModule.queryRenderedFeaturesWithBounds(
               findNodeHandle(nativeRef.current),
-              // TODO: Solve this natively
-              await NativeMapViewModule.getBounds(
-                findNodeHandle(nativeRef.current),
-              ),
-              options?.layers ?? [],
-              getFilter(options?.filter),
-            )) as GeoJSON.FeatureCollection;
+              null,
+              pixelPointOrPixelPointBoundsOrOptions?.layers ?? [],
+              getFilter(pixelPointOrPixelPointBoundsOrOptions?.filter),
+            );
           }
         },
 
@@ -592,7 +636,7 @@ export const MapView = memo(
         <View
           onLayout={() => setIsReady(true)}
           style={style ?? styles.flex1}
-          testID={mapView ? undefined : testID}
+          testID={nativeProps.testID ? `${nativeProps.testID}View` : undefined}
         >
           {mapView}
         </View>

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

@@ -24,15 +24,16 @@ type NativeOrnamentViewPosition = {
 };
 
 type NativePressEvent = {
-  longitude: CodegenTypes.Double;
-  latitude: CodegenTypes.Double;
-  locationX: CodegenTypes.Double;
-  locationY: CodegenTypes.Double;
+  lngLat: UnsafeMixed<
+    [longitude: CodegenTypes.Double, latitude: CodegenTypes.Double]
+  >;
+  point: UnsafeMixed<[x: CodegenTypes.Double, y: CodegenTypes.Double]>;
 };
 
 type NativeViewStateEvent = {
-  longitude: CodegenTypes.Double;
-  latitude: CodegenTypes.Double;
+  center: UnsafeMixed<
+    [longitude: CodegenTypes.Double, latitude: CodegenTypes.Double]
+  >;
   zoom: CodegenTypes.Double;
   bearing: CodegenTypes.Double;
   pitch: CodegenTypes.Double;

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

@@ -5,8 +5,7 @@ import {
 } from "react-native";
 
 type NativeViewState = {
-  longitude: CodegenTypes.Double;
-  latitude: CodegenTypes.Double;
+  center: CodegenTypes.Double[];
   zoom: CodegenTypes.Double;
   bearing: CodegenTypes.Double;
   pitch: CodegenTypes.Double;
@@ -14,10 +13,9 @@ type NativeViewState = {
 };
 
 export interface Spec extends TurboModule {
-  getCenter: (reactTag: CodegenTypes.Int32) => Promise<{
-    longitude: CodegenTypes.Double;
-    latitude: CodegenTypes.Double;
-  }>;
+  getCenter: (
+    reactTag: CodegenTypes.Int32,
+  ) => Promise<[longitude: CodegenTypes.Double, latitude: CodegenTypes.Double]>;
 
   getZoom: (reactTag: CodegenTypes.Int32) => Promise<CodegenTypes.Double>;
 
@@ -25,45 +23,42 @@ export interface Spec extends TurboModule {
 
   getPitch: (reactTag: CodegenTypes.Int32) => Promise<CodegenTypes.Double>;
 
-  getBounds: (reactTag: CodegenTypes.Int32) => Promise<CodegenTypes.Double[]>;
+  getBounds: (
+    reactTag: CodegenTypes.Int32,
+  ) => Promise<
+    [
+      west: CodegenTypes.Double,
+      south: CodegenTypes.Double,
+      east: CodegenTypes.Double,
+      north: 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;
-  }>;
+    lngLat: CodegenTypes.Double[],
+  ) => Promise<[x: CodegenTypes.Double, y: CodegenTypes.Double]>;
 
   unproject: (
     reactTag: CodegenTypes.Int32,
-    point: { locationX: CodegenTypes.Double; locationY: CodegenTypes.Double },
-  ) => Promise<{
-    longitude: CodegenTypes.Double;
-    latitude: CodegenTypes.Double;
-  }>;
+    pixelPoint: CodegenTypes.Double[],
+  ) => Promise<[longitude: CodegenTypes.Double, latitude: CodegenTypes.Double]>;
 
-  queryRenderedFeaturesWithCoordinate: (
+  queryRenderedFeaturesWithPoint: (
     reactTag: CodegenTypes.Int32,
-    coordinate: {
-      longitude: CodegenTypes.Double;
-      latitude: CodegenTypes.Double;
-    },
+    pixelPoint: CodegenTypes.Double[],
     layers: string[],
     filter: string[],
-  ) => Promise<object>;
+  ) => Promise<GeoJSON.Feature[]>;
 
   queryRenderedFeaturesWithBounds: (
     reactTag: CodegenTypes.Int32,
-    bounds: CodegenTypes.Double[],
+    pixelPointBounds: CodegenTypes.Double[][] | null,
     layers: string[],
     filter: string[],
-  ) => Promise<object>;
+  ) => Promise<GeoJSON.Feature[]>;
 
   setSourceVisibility: (
     reactTag: CodegenTypes.Int32,

package/src/index.ts

@@ -1,6 +1,9 @@
 export * from "./MLRNModule";
 
 export {
+  Camera,
+  type CameraProps,
+  type CameraRef,
   type CameraOptions,
   type CameraEasing,
   type CameraAnimationOptions,
@@ -10,15 +13,13 @@ export {
   type CameraBoundsStop,
   type CameraStop,
   type InitialViewState,
-  type CameraRef,
   type TrackUserLocation,
   type TrackUserLocationChangeEvent,
-  type CameraProps,
-  Camera,
 } from "./components/camera/Camera";
 
 export {
   MapView,
+  type MapViewProps,
   type MapViewRef,
   type ViewState,
   type ViewStateChangeEvent,
@@ -62,7 +63,8 @@ export { OfflineCreatePackOptions } from "./modules/offline/OfflineCreatePackOpt
 export { SnapshotManager } from "./modules/snapshot/SnapshotManager";
 export type { SnapshotInputOptions } from "./modules/snapshot/SnapshotOptions";
 
-export type { Bounds } from "./types/Bounds";
+export type { LngLat } from "./types/LngLat";
+export type { LngLatBounds } from "./types/LngLatBounds";
 export type {
   FillLayerStyle,
   LineLayerStyle,
@@ -76,6 +78,8 @@ export type {
   LightLayerStyle,
   Expression,
 } from "./types/MapLibreRNStyles";
+export type { PixelPoint } from "./types/PixelPoint";
+export type { PixelPointBounds } from "./types/PixelPointBounds";
 export type { PressEvent, PressEventWithFeatures } from "./types/PressEvent";
 export type { ViewPadding } from "./types/ViewPadding";
 

package/src/types/LngLat.ts

@@ -0,0 +1,4 @@
+/**
+ * Geographic coordinates
+ */
+export type LngLat = [longitude: number, latitude: number];

package/src/types/LngLatBounds.ts

@@ -0,0 +1,11 @@
+/**
+ * Represents bounds in geographic coordinates
+ *
+ * Uses order of south-west and north-east corners in flat style per GeoJSON RFC.
+ */
+export type LngLatBounds = [
+  west: number,
+  south: number,
+  east: number,
+  north: number,
+];

package/src/types/PixelPoint.ts

@@ -0,0 +1,4 @@
+/**
+ * Pixel coordinates
+ */
+export type PixelPoint = [x: number, y: number];

package/src/types/PixelPointBounds.ts

@@ -0,0 +1,9 @@
+/**
+ * Bounds in pixel coordinates
+ *
+ * Uses common order of top-left and bottom-right corners.
+ */
+export type PixelPointBounds = [
+  topLeft: [left: number, top: number],
+  bottomRight: [right: number, bottom: number],
+];

package/src/types/PressEvent.ts

@@ -1,17 +1,16 @@
-export interface PressEvent {
-  longitude: number;
-
-  latitude: number;
+import type { LngLat } from "./LngLat";
+import type { PixelPoint } from "./PixelPoint";
 
+export interface PressEvent {
   /**
-   * Touch origin X coordinate inside touchable area (relative to the element).
+   * Geographic coordinates of the touch event
    */
-  locationX: number;
+  lngLat: LngLat;
 
   /**
-   * Touch origin Y coordinate inside touchable area (relative to the element).
+   * Pixel point of the touch event within the elements' viewport
    */
-  locationY: number;
+  point: PixelPoint;
 }
 
 export interface PressEventWithFeatures extends PressEvent {

package/lib/commonjs/types/Bounds.js

@@ -1,2 +0,0 @@
-"use strict";
-//# sourceMappingURL=Bounds.js.map

package/lib/module/types/Bounds.js

@@ -1,2 +0,0 @@
-"use strict";
-//# sourceMappingURL=Bounds.js.map

package/lib/typescript/commonjs/src/types/Bounds.d.ts

@@ -1,2 +0,0 @@
-export type Bounds = [west: number, south: number, east: number, north: number];
-//# sourceMappingURL=Bounds.d.ts.map

package/lib/typescript/commonjs/src/types/Bounds.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"Bounds.d.ts","sourceRoot":"","sources":["../../../../../src/types/Bounds.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,MAAM,GAAG,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,CAAC,CAAC"}

package/lib/typescript/module/src/types/Bounds.d.ts

@@ -1,2 +0,0 @@
-export type Bounds = [west: number, south: number, east: number, north: number];
-//# sourceMappingURL=Bounds.d.ts.map

package/lib/typescript/module/src/types/Bounds.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"Bounds.d.ts","sourceRoot":"","sources":["../../../../../src/types/Bounds.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,MAAM,GAAG,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,CAAC,CAAC"}

package/src/types/Bounds.ts

@@ -1 +0,0 @@
-export type Bounds = [west: number, south: number, east: number, north: number];