fix: correct types in MapView (#268)

maplibre · May 13, 2024 · 0ea35c4 · 0ea35c4
1 parent d15d8a8
commit 0ea35c4
Show file tree

Hide file tree

Showing 4 changed files with 33 additions and 22 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -20,6 +20,7 @@ Fix: Duplicated Signature issue with Xcode 15 ([#238](https://github.com/maplibr
 Update download-style-spec.sh ([#163](https://github.com/maplibre/maplibre-react-native/pull/163))
 Update react-maplibre ([#34](https://github.com/maplibre/maplibre-react-native/issues/34))
 chore: update support libraries ([#121](https://github.com/maplibre/maplibre-react-native/pull/121)).
+fix: correct types in MapView ([#268])(https://github.com/maplibre/maplibre-react-native/pull/268))
 
 ## 10.0.0-alpha.1
 

diff --git a/docs/MapView.md b/docs/MapView.md
@@ -78,14 +78,14 @@ const visibleBounds = await this._map.getVisibleBounds();
 ```
 
 
-#### queryRenderedFeaturesAtPoint(coordinate[, filter][, layerIDs])
+#### queryRenderedFeaturesAtPoint(point[, filter][, layerIDs])
 
 Returns an array of rendered map features that intersect with a given point.
 
 ##### arguments
 | Name | Type | Required | Description  |
 | ---- | :--: | :------: | :----------: |
-| `coordinate` | `GeoJSON.Position` | `Yes` | A point expressed in the map view’s coordinate system. |
+| `point` | `tuple` | `Yes` | A point expressed in the map view’s coordinate system. |
 | `filter` | `FilterExpression` | `No` | 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. |
 | `layerIDs` | `Array` | `No` | A array of layer id's to filter the features by |
 

diff --git a/docs/docs.json b/docs/docs.json
@@ -2136,7 +2136,7 @@
       },
       {
         "name": "getVisibleBounds",
-        "docblock": "The coordinate bounds(ne, sw) visible in the users’s viewport.\n\n@example\nconst visibleBounds = await this._map.getVisibleBounds();\n\n@return {Array}",
+        "docblock": "The coordinate bounds(ne, sw) visible in the users’s viewport.\n\n@example\nconst visibleBounds = await this._map.getVisibleBounds();\n\n@return {VisibleBounds}",
         "modifiers": [
           "async"
         ],
@@ -2147,10 +2147,19 @@
             "name": "Promise",
             "elements": [
               {
-                "name": "Bounds"
+                "name": "tuple",
+                "raw": "[northEast: GeoJSON.Position, southWest: GeoJSON.Position]",
+                "elements": [
+                  {
+                    "name": "unknown"
+                  },
+                  {
+                    "name": "unknown"
+                  }
+                ]
               }
             ],
-            "raw": "Promise<Bounds>"
+            "raw": "Promise<VisibleBounds>"
           }
         },
         "description": "The coordinate bounds(ne, sw) visible in the users’s viewport.",
@@ -2160,16 +2169,16 @@
       },
       {
         "name": "queryRenderedFeaturesAtPoint",
-        "docblock": "Returns an array of rendered map features that intersect with a given point.\n\n@example\nthis._map.queryRenderedFeaturesAtPoint([30, 40], ['==', 'type', 'Point'], ['id1', 'id2'])\n\n@param  {Array<Number>} coordinate - A point expressed in the map view’s coordinate system.\n@param  {Array=} 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.\n@param  {Array=} layerIDs - A array of layer id's to filter the features by\n@return {GeoJSON.FeatureCollection}",
+        "docblock": "Returns an array of rendered map features that intersect with a given point.\n\n@example\nthis._map.queryRenderedFeaturesAtPoint([30, 40], ['==', 'type', 'Point'], ['id1', 'id2'])\n\n@typedef {number} ScreenPointX\n@typedef {number} ScreenPointY\n@param  {[ScreenPointX, ScreenPointY]} point - A point expressed in the map view’s coordinate system.\n@param  {Array=} 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.\n@param  {Array=} layerIDs - A array of layer id's to filter the features by\n@return {GeoJSON.FeatureCollection}",
         "modifiers": [
           "async"
         ],
         "params": [
           {
-            "name": "coordinate",
+            "name": "point",
             "description": "A point expressed in the map view’s coordinate system.",
             "type": {
-              "name": "GeoJSON.Position"
+              "name": "tuple"
             },
             "optional": false
           },

diff --git a/javascript/components/MapView.tsx b/javascript/components/MapView.tsx
@@ -42,14 +42,11 @@ export interface RegionPayload {
   heading: number;
   animated: boolean;
   isUserInteraction: boolean;
-  visibleBounds: GeoJSON.Position[];
+  visibleBounds: VisibleBounds;
   pitch: number;
 }
 
-interface Bounds {
-  ne: GeoJSON.Position;
-  sw: GeoJSON.Position;
-}
+type VisibleBounds = [northEast: GeoJSON.Position, southWest: GeoJSON.Position];
 
 interface MapViewProps extends BaseProps {
   /**
@@ -274,7 +271,7 @@ export interface MapViewState {
   isReady: boolean;
   width: number;
   height: number;
-  region: RegionPayload | null;
+  region: GeoJSON.Feature<GeoJSON.Point, RegionPayload> | null;
   isUserInteraction: boolean;
 }
 
@@ -444,10 +441,10 @@ class MapView extends NativeBridgeComponent(
    * @example
    * const visibleBounds = await this._map.getVisibleBounds();
    *
-   * @return {Array}
+   * @return {VisibleBounds}
    */
-  async getVisibleBounds(): Promise<Bounds> {
-    const res: {visibleBounds: Bounds} = await this._runNativeCommand(
+  async getVisibleBounds(): Promise<VisibleBounds> {
+    const res: {visibleBounds: VisibleBounds} = await this._runNativeCommand(
       'getVisibleBounds',
       this._nativeRef,
     );
@@ -460,25 +457,29 @@ class MapView extends NativeBridgeComponent(
    * @example
    * this._map.queryRenderedFeaturesAtPoint([30, 40], ['==', 'type', 'Point'], ['id1', 'id2'])
    *
-   * @param  {Array<Number>} coordinate - A point expressed in the map view’s coordinate system.
+   * @typedef {number} ScreenPointX
+   * @typedef {number} ScreenPointY
+   * @param  {[ScreenPointX, ScreenPointY]} point - A point expressed in the map view’s coordinate system.
    * @param  {Array=} 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  {Array=} layerIDs - A array of layer id's to filter the features by
    * @return {GeoJSON.FeatureCollection}
    */
   async queryRenderedFeaturesAtPoint(
-    coordinate: GeoJSON.Position,
+    point: [screenPointX: number, screenPointY: number],
     filter?: FilterExpression,
     layerIDs = [],
   ): Promise<GeoJSON.FeatureCollection> {
-    if (!coordinate || coordinate.length < 2) {
-      throw new Error('Must pass in valid coordinate[lng, lat]');
+    if (!point || point.length < 2) {
+      throw new Error(
+        "Must pass in valid point in the map view's cooridnate system[x, y]",
+      );
     }
 
     const res: {data: string | GeoJSON.FeatureCollection} =
       await this._runNativeCommand(
         'queryRenderedFeaturesAtPoint',
         this._nativeRef,
-        [coordinate, getFilter(filter), layerIDs],
+        [point, getFilter(filter), layerIDs],
       );
 
     if (isAndroid()) {