fix: types of getPointInView and getCoordinateFromView

docs/content/components/general/map-view.md

@@ -39,30 +39,32 @@ MapView backed by MapLibre Native
 
 ### `getPointInView(coordinate)`
 
-Converts a geographic coordinate to a point in the given view’s coordinate system.
+Converts a geographic coordinate to a pixel point of the view.
 
 #### Arguments
 
-| Name         |        Type        | Required | Description                                            |
-| ------------ | :----------------: | :------: | ------------------------------------------------------ |
-| `coordinate` | `GeoJSON.Position` |  `Yes`   | A point expressed in the map view's coordinate system. |
+| Name         |        Type        | Required | Description           |
+| ------------ | :----------------: | :------: | --------------------- |
+| `coordinate` | `GeoJSON.Position` |  `Yes`   | Geographic coordinate |
 
 ```javascript
-const pointInView = await this._map.getPointInView([-37.81707, 144.949901]);
+const pointInView = await mapViewRef.current?.getPointInView([
+  -37.81707, 144.949901,
+]);
 ```
 
 ### `getCoordinateFromView(point)`
 
-Converts a point in the given view’s coordinate system to a geographic coordinate.
+Converts a pixel point of the view to a geographic coordinate.
 
 #### Arguments
 
-| Name    |  Type   | Required | Description                                              |
-| ------- | :-----: | :------: | -------------------------------------------------------- |
-| `point` | `Array` |  `Yes`   | A point expressed in the given view’s coordinate system. |
+| Name    |  Type   | Required | Description |
+| ------- | :-----: | :------: | ----------- |
+| `point` | `tuple` |  `Yes`   | undefined   |
 
 ```javascript
-const coordinate = await this._map.getCoordinateFromView([100, 100]);
+const coordinate = await mapViewRef.current?.getCoordinateFromView([100, 100]);
 ```
 
 ### `getVisibleBounds()`

docs/content/docs.json

@@ -2061,14 +2061,14 @@
     "methods": [
       {
         "name": "getPointInView",
-        "docblock": "Converts a geographic coordinate to a point in the given view’s coordinate system.\n\n@example\nconst pointInView = await this._map.getPointInView([-37.817070, 144.949901]);\n\n@param {number[]} coordinate - A point expressed in the map view's coordinate system.\n@return {Array}",
+        "docblock": "Converts a geographic coordinate to a pixel point of the view.\n\n@example\nconst pointInView = await mapViewRef.current?.getPointInView([-37.817070, 144.949901]);\n\n@param {GeoJSON.Position} coordinate Geographic coordinate\n@return {[x: number, y: number]} Pixel point",
         "modifiers": [
           "async"
         ],
         "params": [
           {
             "name": "coordinate",
-            "description": "A point expressed in the map view's coordinate system.",
+            "description": "Geographic coordinate",
             "type": {
               "name": "GeoJSON.Position"
             },
@@ -2080,31 +2080,39 @@
             "name": "Promise",
             "elements": [
               {
-                "name": "GeoJSON.Point"
+                "name": "tuple",
+                "raw": "[x: number, y: number]",
+                "elements": [
+                  {
+                    "name": "unknown"
+                  },
+                  {
+                    "name": "unknown"
+                  }
+                ]
               }
             ],
-            "raw": "Promise<GeoJSON.Point>"
+            "raw": "Promise<[x: number, y: number]>"
           }
         },
-        "description": "Converts a geographic coordinate to a point in the given view’s coordinate system.",
+        "description": "Converts a geographic coordinate to a pixel point of the view.",
         "examples": [
-          "\nconst pointInView = await this._map.getPointInView([-37.817070, 144.949901]);\n\n"
+          "\nconst pointInView = await mapViewRef.current?.getPointInView([-37.817070, 144.949901]);\n\n"
         ]
       },
       {
         "name": "getCoordinateFromView",
-        "docblock": "Converts a point in the given view’s coordinate system to a geographic coordinate.\n\n@example\nconst coordinate = await this._map.getCoordinateFromView([100, 100]);\n\n@param {number[]} point - A point expressed in the given view’s coordinate system.\n@return {Array}",
+        "docblock": "Converts a pixel point of the view to a geographic coordinate.\n\n@example\nconst coordinate = await mapViewRef.current?.getCoordinateFromView([100, 100]);\n\n@param {[x: number, y: number]} point Pixel point\n@return {GeoJSON.Position} Geographic coordinate",
         "modifiers": [
           "async"
         ],
         "params": [
           {
             "name": "point",
-            "description": "A point expressed in the given view’s coordinate system.",
+            "optional": false,
             "type": {
-              "name": "Array"
-            },
-            "optional": false
+              "name": "tuple"
+            }
           }
         ],
         "returns": {
@@ -2118,9 +2126,9 @@
             "raw": "Promise<GeoJSON.Position>"
           }
         },
-        "description": "Converts a point in the given view’s coordinate system to a geographic coordinate.",
+        "description": "Converts a pixel point of the view to a geographic coordinate.",
         "examples": [
-          "\nconst coordinate = await this._map.getCoordinateFromView([100, 100]);\n\n"
+          "\nconst coordinate = await mapViewRef.current?.getCoordinateFromView([100, 100]);\n\n"
         ]
       },
       {

packages/examples/src/examples/Map/PointInMapView.tsx

@@ -0,0 +1,50 @@
+import {
+  Camera,
+  MapView,
+  type MapViewRef,
+} from "@maplibre/maplibre-react-native";
+import { useRef, useState } from "react";
+import { Text } from "react-native";
+
+import { Bubble } from "../../components/Bubble";
+
+const styles = {
+  mapView: { flex: 1 },
+};
+
+export function PointInMapView() {
+  const mapViewRef = useRef<MapViewRef>(null);
+
+  const [point, setPoint] = useState<[number, number]>();
+
+  return (
+    <>
+      <MapView
+        ref={mapViewRef}
+        onPress={async (event) => {
+          if (event.geometry.type === "Point") {
+            const pointInView = await mapViewRef.current?.getPointInView(
+              event.geometry.coordinates,
+            );
+
+            setPoint(pointInView);
+          }
+        }}
+        style={styles.mapView}
+      >
+        <Camera zoomLevel={9} centerCoordinate={[-73.970895, 40.723279]} />
+      </MapView>
+
+      <Bubble>
+        {point ? (
+          <>
+            <Text key="x">x: {point[0]}</Text>
+            <Text key="y">y: {point[1]}</Text>
+          </>
+        ) : (
+          <Text>Touch map to see xy pixel location</Text>
+        )}
+      </Bubble>
+    </>
+  );
+}

src/components/MapView.tsx

@@ -250,8 +250,12 @@ interface NativeProps extends Omit<MapViewProps, "onPress" | "onLongPress"> {
 }
 
 export interface MapViewRef {
-  getPointInView: (coordinate: GeoJSON.Position) => Promise<GeoJSON.Point>;
-  getCoordinateFromView: (point: number[]) => Promise<GeoJSON.Position>;
+  getPointInView: (
+    coordinate: GeoJSON.Position,
+  ) => Promise<[x: number, y: number]>;
+  getCoordinateFromView: (
+    point: [x: number, y: number],
+  ) => Promise<GeoJSON.Position>;
   getVisibleBounds: () => Promise<VisibleBounds>;
   queryRenderedFeaturesAtPoint: (
     point: [screenPointX: number, screenPointY: number],
@@ -300,23 +304,23 @@ export const MapView = memo(
         ref,
         (): MapViewRef => ({
           /**
-           * Converts a geographic coordinate to a point in the given view’s coordinate system.
+           * Converts a geographic coordinate to a pixel point of the view.
            *
            * @example
-           * const pointInView = await this._map.getPointInView([-37.817070, 144.949901]);
+           * const pointInView = await mapViewRef.current?.getPointInView([-37.817070, 144.949901]);
            *
-           * @param {number[]} coordinate - A point expressed in the map view's coordinate system.
-           * @return {Array}
+           * @param {GeoJSON.Position} coordinate Geographic coordinate
+           * @return {[x: number, y: number]} Pixel point
            */
           getPointInView,
           /**
-           * Converts a point in the given view’s coordinate system to a geographic coordinate.
+           * Converts a pixel point of the view to a geographic coordinate.
            *
            * @example
-           * const coordinate = await this._map.getCoordinateFromView([100, 100]);
+           * const coordinate = await mapViewRef.current?.getCoordinateFromView([100, 100]);
            *
-           * @param {number[]} point - A point expressed in the given view’s coordinate system.
-           * @return {Array}
+           * @param {[x: number, y: number]} point Pixel point
+           * @return {GeoJSON.Position} Geographic coordinate
            */
           getCoordinateFromView,
           /**
@@ -485,22 +489,23 @@ export const MapView = memo(
 
       const getPointInView = async (
         coordinate: GeoJSON.Position,
-      ): Promise<GeoJSON.Point> => {
-        const res: { pointInView: GeoJSON.Point } = await _runNativeCommand(
-          "getPointInView",
-          _nativeRef.current,
-          [coordinate],
-        );
+      ): Promise<[x: number, y: number]> => {
+        const res: { pointInView: [x: number, y: number] } =
+          await _runNativeCommand("getPointInView", _nativeRef.current, [
+            coordinate,
+          ]);
+
         return res.pointInView;
       };
 
       const getCoordinateFromView = async (
-        point: number[],
+        point: [x: number, y: number],
       ): Promise<GeoJSON.Position> => {
         const res: { coordinateFromView: GeoJSON.Position } =
           await _runNativeCommand("getCoordinateFromView", _nativeRef.current, [
             point,
           ]);
+
         return res.coordinateFromView;
       };