react-native-maplibre-lite 0.1.9 → 0.2.0

package/lib/typescript/src/components/webMapBuild.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"webMapBuild.d.ts","sourceRoot":"","sources":["../../../../src/components/webMapBuild.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,QAAQ,yxtzCAA68jzC,CAAC"}
+{"version":3,"file":"webMapBuild.d.ts","sourceRoot":"","sources":["../../../../src/components/webMapBuild.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,QAAQ,y/6zCAA6qxzC,CAAC"}

package/lib/typescript/src/index.d.ts

@@ -5,6 +5,6 @@ import { Polyline } from './components/Polyline';
 export { MapView, Marker, Polygon, Polyline };
 export default MapView;
 export type { MapViewRef } from './components/MapView';
-export type { EventParams, MapLiteWebError, MarkerProps, NavigatorChromeParams, NavigatorInstructionParams, NavigatorLang, NavigatorLngLat, NavigatorProfile, NavigatorPositionMode, NavigatorPositionSetParams, NavigatorRouteSetParams, PolygonProps, PolylineProps, } from './components/types';
+export type { EventParams, MapLiteFitBoundsParams, MapLiteFlyToParams, MapLiteInitParams, MapLiteMapErrorEventParams, MapLiteMapEventName, MapLiteSetNavigatorPointParams, MapLiteSetNavigatorPositionParams, MapLiteStyleSpecification, MapLiteUpdateParams, MapLiteWebError, MarkerProps, NativeToWebCommand, NavigatorChromeParams, NavigatorInstructionParams, NavigatorLang, NavigatorLngLat, NavigatorProfile, NavigatorPositionMode, NavigatorPositionSetParams, NavigatorRouteSetParams, PolygonProps, PolylineProps, WebToNativeMessage, } from './components/types';
 export { NAVIGATOR_PROFILE_IDS } from './components/types';
 //# sourceMappingURL=index.d.ts.map

package/lib/typescript/src/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,sBAAsB,CAAC;AAC/C,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAC7C,OAAO,EAAE,OAAO,EAAE,MAAM,sBAAsB,CAAC;AAC/C,OAAO,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAEjD,OAAO,EAAE,OAAO,EAAE,MAAM,EAAE,OAAO,EAAE,QAAQ,EAAE,CAAC;AAC9C,eAAe,OAAO,CAAC;AAEvB,YAAY,EAAE,UAAU,EAAE,MAAM,sBAAsB,CAAC;AACvD,YAAY,EACR,WAAW,EACX,eAAe,EACf,WAAW,EACX,qBAAqB,EACrB,0BAA0B,EAC1B,aAAa,EACb,eAAe,EACf,gBAAgB,EAChB,qBAAqB,EACrB,0BAA0B,EAC1B,uBAAuB,EACvB,YAAY,EACZ,aAAa,GAChB,MAAM,oBAAoB,CAAC;AAE5B,OAAO,EAAE,qBAAqB,EAAE,MAAM,oBAAoB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,sBAAsB,CAAC;AAC/C,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAC7C,OAAO,EAAE,OAAO,EAAE,MAAM,sBAAsB,CAAC;AAC/C,OAAO,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAEjD,OAAO,EAAE,OAAO,EAAE,MAAM,EAAE,OAAO,EAAE,QAAQ,EAAE,CAAC;AAC9C,eAAe,OAAO,CAAC;AAEvB,YAAY,EAAE,UAAU,EAAE,MAAM,sBAAsB,CAAC;AACvD,YAAY,EACR,WAAW,EACX,sBAAsB,EACtB,kBAAkB,EAClB,iBAAiB,EACjB,0BAA0B,EAC1B,mBAAmB,EACnB,8BAA8B,EAC9B,iCAAiC,EACjC,yBAAyB,EACzB,mBAAmB,EACnB,eAAe,EACf,WAAW,EACX,kBAAkB,EAClB,qBAAqB,EACrB,0BAA0B,EAC1B,aAAa,EACb,eAAe,EACf,gBAAgB,EAChB,qBAAqB,EACrB,0BAA0B,EAC1B,uBAAuB,EACvB,YAAY,EACZ,aAAa,EACb,kBAAkB,GACrB,MAAM,oBAAoB,CAAC;AAE5B,OAAO,EAAE,qBAAqB,EAAE,MAAM,oBAAoB,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-maplibre-lite",
-  "version": "0.1.9",
+  "version": "0.2.0",
   "description": "Lightweight MapLibre GL JS wrapper using WebView",
   "main": "./lib/module/index.js",
   "types": "./lib/typescript/src/index.d.ts",

package/src/components/MapView.tsx

@@ -23,8 +23,12 @@ import MapPlaceholder from './MapPlaceholder';
 import MapSelectPoint, { type MapSelectPointType } from './MapSelectPoint';
 import {
     type EventParams,
+    type MapLiteInitParams,
+    type MapLiteSetNavigatorPositionParams,
+    type MapLiteUpdateParams,
     type MapLiteWebError,
     type MarkerProps,
+    type NativeToWebCommand,
     type NavigatorChromeParams,
     type NavigatorInstructionParams,
     type NavigatorLang,
@@ -33,19 +37,11 @@ import {
     type NavigatorRouteSetParams,
     type PolygonProps,
     type PolylineProps,
+    type WebToNativeMessage,
 } from './types';
 import { loadResources } from './utils';
 import { MAP_HTML } from './webMapBuild';
 
-interface UpdateProps {
-    center?: [number, number];
-    zoom?: number;
-    minZoom?: number;
-    maxZoom?: number;
-    zoomEnabled?: boolean;
-    scrollEnabled?: boolean;
-    mapStyle?: string;
-}
 
 interface MapViewProps {
     children?: React.ReactNode;
@@ -122,7 +118,7 @@ export type MapViewRef = {
     /**
      * Обновить «текущую позицию» (GPS): snap / reroute / прибытие — на стороне WebView.
      */
-    setNavigatorPosition: (latitude: number, longitude: number) => void;
+    setNavigatorPosition: (latitude: number, longitude: number, accuracy?: number) => void;
     /** Режим «клик по карте = новая позиция» (удобно в dev). */
     pickNavigatorPosition: () => void;
 };
@@ -190,7 +186,7 @@ export const MapView = forwardRef<MapViewRef, MapViewProps>((props, ref) => {
         ? 0.85
         : (performanceMode === 'balanced' && Platform.OS === 'android' ? 1 : undefined);
 
-    const sendToWebView = (message: { function: string; params: any }) => {
+    const sendToWebView = (message: NativeToWebCommand) => {
         if (__DEV__) {
             console.log('MapView: sendToWebView', message);
         }
@@ -209,33 +205,31 @@ export const MapView = forwardRef<MapViewRef, MapViewProps>((props, ref) => {
         const mapStyleText = await loadResources(props.mapStyle);
         const mapStyle = JSON.parse(mapStyleText);
 
-        sendToWebView({
-            function: 'init',
-            params: {
-                mapStyle: mapStyle,
-                zoomEnabled: props.zoomEnabled ?? false,
-                scrollEnabled: props.scrollEnabled ?? false,
-                center: props.center,
-                zoom: props.zoom,
-                minZoom: props.minZoom,
-                maxZoom: props.maxZoom,
-                antialias: false,
-                crossSourceCollisions: performanceMode !== 'performance',
-                fadeDuration: performanceMode === 'performance' ? 0 : 120,
-                pixelRatio: props.pixelRatio ?? fallbackPixelRatio,
-                simplifyStyle: performanceMode !== 'quality',
-                aggressiveSimplifyStyle: performanceMode === 'performance',
-                maxPitch: performanceMode === 'performance' ? 0 : 45,
-                renderWorldCopies: performanceMode === 'quality',
-                turboWhileMoving: props.turboWhileMoving ?? (performanceMode === 'performance'),
-                debugMode: props.debugMode ?? false,
-                navigator: props.navigator === true,
-                graphhopperUrl: props.graphhopperUrl,
-                navigatorLang: props.navigatorLang,
-                navigatorProfile: props.navigatorProfile,
-                navigatorChrome: props.navigatorChrome,
-            },
-        });
+        const initParams: MapLiteInitParams = {
+            mapStyle: mapStyle,
+            zoomEnabled: props.zoomEnabled ?? false,
+            scrollEnabled: props.scrollEnabled ?? false,
+            center: props.center,
+            zoom: props.zoom,
+            minZoom: props.minZoom,
+            maxZoom: props.maxZoom,
+            antialias: false,
+            crossSourceCollisions: performanceMode !== 'performance',
+            fadeDuration: performanceMode === 'performance' ? 0 : 120,
+            pixelRatio: props.pixelRatio ?? fallbackPixelRatio,
+            simplifyStyle: performanceMode !== 'quality',
+            aggressiveSimplifyStyle: performanceMode === 'performance',
+            maxPitch: performanceMode === 'performance' ? 0 : 45,
+            renderWorldCopies: performanceMode === 'quality',
+            turboWhileMoving: props.turboWhileMoving ?? (performanceMode === 'performance'),
+            debugMode: props.debugMode ?? false,
+            navigator: props.navigator === true,
+            graphhopperUrl: props.graphhopperUrl,
+            navigatorLang: props.navigatorLang,
+            navigatorProfile: props.navigatorProfile,
+            navigatorChrome: props.navigatorChrome,
+        };
+        sendToWebView({ function: 'init', params: initParams });
     };
 
     const updateMarkerClickHandler = (propsMarker: MarkerProps) => {
@@ -328,8 +322,12 @@ export const MapView = forwardRef<MapViewRef, MapViewProps>((props, ref) => {
         sendToWebView({ function: 'advanceNavigatorInstruction', params: {} });
     };
 
-    const setNavigatorPosition = (latitude: number, longitude: number) => {
-        sendToWebView({ function: 'setNavigatorPosition', params: { latitude, longitude } });
+    const setNavigatorPosition = (latitude: number, longitude: number, accuracy?: number) => {
+        const params: MapLiteSetNavigatorPositionParams = { latitude, longitude };
+        if (typeof accuracy === 'number' && Number.isFinite(accuracy) && accuracy >= 0) {
+            params.accuracy = accuracy;
+        }
+        sendToWebView({ function: 'setNavigatorPosition', params });
     };
 
     const pickNavigatorPosition = () => {
@@ -350,7 +348,7 @@ export const MapView = forwardRef<MapViewRef, MapViewProps>((props, ref) => {
     const lastPropsRef = useRef<MapViewProps>(props);
 
     useEffect(() => {
-        const updateProps: UpdateProps = {};
+        const updateProps: MapLiteUpdateParams = {};
 
         if (lastPropsRef.current.minZoom !== props.minZoom) {
             updateProps.minZoom = props.minZoom;
@@ -369,7 +367,9 @@ export const MapView = forwardRef<MapViewRef, MapViewProps>((props, ref) => {
         }
 
         if (lastPropsRef.current.mapStyle !== props.mapStyle) {
-            updateProps.mapStyle = props.mapStyle;
+            void loadResources(props.mapStyle).then((mapStyleText) => {
+                sendToWebView({ function: 'update', params: { mapStyle: JSON.parse(mapStyleText) } });
+            });
         }
 
         lastPropsRef.current = props;
@@ -382,7 +382,7 @@ export const MapView = forwardRef<MapViewRef, MapViewProps>((props, ref) => {
 
     const onReceiveMessageFromWebView = (data: string) => {
         try {
-            const msg = JSON.parse(data);
+            const msg = JSON.parse(data) as WebToNativeMessage;
 
             if (__DEV__) {
                 console.log('MapView: event', msg);
@@ -392,20 +392,20 @@ export const MapView = forwardRef<MapViewRef, MapViewProps>((props, ref) => {
                 switch (msg.event) {
                     case 'movestart':
                         mapSelectPointRef.current?.up();
-                        props.onMoveStart?.(msg.params);
+                        props.onMoveStart?.(msg.params as EventParams);
                         break;
                     case 'moveend':
-                        props.onMoveEnd?.(msg.params);
+                        props.onMoveEnd?.(msg.params as EventParams);
                         mapSelectPointRef.current?.down();
                         break;
                     case 'zoomstart':
-                        props.onZoomStart?.(msg.params);
+                        props.onZoomStart?.(msg.params as EventParams);
                         break;
                     case 'zoomend':
-                        props.onZoomEnd?.(msg.params);
+                        props.onZoomEnd?.(msg.params as EventParams);
                         break;
                     case 'idle':
-                        props.onIdle?.(msg.params);
+                        props.onIdle?.(msg.params as EventParams);
                         break;
                     case 'navigatorRouteSet':
                         props.onNavigatorRouteSet?.(msg.params as NavigatorRouteSetParams);
@@ -421,7 +421,7 @@ export const MapView = forwardRef<MapViewRef, MapViewProps>((props, ref) => {
             }
 
             if (msg.type === 'error' && msg.data) {
-                props.onMapLiteError?.(msg.data as MapLiteWebError);
+                props.onMapLiteError?.(msg.data);
                 return;
             }
 
@@ -465,6 +465,7 @@ export const MapView = forwardRef<MapViewRef, MapViewProps>((props, ref) => {
 
                 const lat = position.coords.latitude;
                 const lng = position.coords.longitude;
+                const accuracy = position.coords.accuracy;
                 if (!Number.isFinite(lat) || !Number.isFinite(lng)) {
                     return;
                 }
@@ -475,9 +476,13 @@ export const MapView = forwardRef<MapViewRef, MapViewProps>((props, ref) => {
                 }
                 lastForwardedAt = now;
 
+                const params: MapLiteSetNavigatorPositionParams = { latitude: lat, longitude: lng };
+                if (typeof accuracy === 'number' && Number.isFinite(accuracy) && accuracy >= 0) {
+                    params.accuracy = accuracy;
+                }
                 sendToWebViewRef.current({
                     function: 'setNavigatorPosition',
-                    params: { latitude: lat, longitude: lng },
+                    params,
                 });
             },
             (error) => {

package/src/components/types.ts

@@ -35,12 +35,13 @@ export type PolylineProps = {
 
 }
 
+/** Web → RN: `postToNative` payload (`webProject/src/map/types.ts`). */
 export type EventParams = {
     center?: {
         lng: number,
-        lat: number
-    },
-    zoom?: number
+        lat: number,
+    } | null,
+    zoom?: number | null,
 }
 
 export type NavigatorLang = 'ru' | 'en'
@@ -116,4 +117,116 @@ export type NavigatorPositionSetParams = {
 export type MapLiteWebError = {
     target: string,
     message: string,
-}
+}
+
+/** Parsed MapLibre style JSON — `InitParams.mapStyle` / `UpdateParams.mapStyle` в WebView. */
+export type MapLiteStyleSpecification = Record<string, unknown>
+
+/** RN → Web: `init` (`MapLiteController.InitParams`). */
+export type MapLiteInitParams = {
+    mapStyle: MapLiteStyleSpecification,
+    center: [number, number],
+    zoom: number,
+    minZoom?: number,
+    maxZoom?: number,
+    zoomEnabled?: boolean,
+    scrollEnabled?: boolean,
+    antialias?: boolean,
+    crossSourceCollisions?: boolean,
+    fadeDuration?: number,
+    pixelRatio?: number,
+    simplifyStyle?: boolean,
+    aggressiveSimplifyStyle?: boolean,
+    maxPitch?: number,
+    renderWorldCopies?: boolean,
+    turboWhileMoving?: boolean,
+    debugMode?: boolean,
+    navigator?: boolean,
+    graphhopperUrl?: string,
+    navigatorLang?: NavigatorLang,
+    navigatorProfile?: NavigatorProfile | string,
+    navigatorChrome?: NavigatorChromeParams,
+}
+
+/** RN → Web: `update` (`MapLiteController.UpdateParams`). */
+export type MapLiteUpdateParams = {
+    minZoom?: number,
+    maxZoom?: number,
+    zoomEnabled?: boolean,
+    scrollEnabled?: boolean,
+    mapStyle?: MapLiteStyleSpecification,
+}
+
+/** RN → Web: `fitBounds`. */
+export type MapLiteFitBoundsParams = {
+    bounds: [[number, number], [number, number]],
+    padding?: number,
+    duration?: number,
+}
+
+/** RN → Web: `flyTo`. */
+export type MapLiteFlyToParams = {
+    center: [number, number],
+    zoom: number,
+    duration?: number,
+}
+
+/** RN → Web: `setNavigatorPoint`. */
+export type MapLiteSetNavigatorPointParams = {
+    latitude: number,
+    longitude: number,
+}
+
+/**
+ * RN → Web: `setNavigatorPosition`.
+ * `accuracy` (м) включает прод-режим off-route на стороне WebView.
+ */
+export type MapLiteSetNavigatorPositionParams = {
+    latitude: number,
+    longitude: number,
+    accuracy?: number,
+}
+
+/** RN → Web: JSON в `WebView.postMessage` (`webProject/src/map/MapLiteController.receive`). */
+export type NativeToWebCommand =
+    | { function: 'init', params: MapLiteInitParams }
+    | { function: 'update', params: MapLiteUpdateParams }
+    | { function: 'addMarker', params: MarkerProps }
+    | { function: 'removeMarker', params: MarkerProps }
+    | { function: 'addPolyline', params: PolylineProps }
+    | { function: 'removePolyline', params: PolylineProps }
+    | { function: 'addPolygon', params: PolygonProps }
+    | { function: 'removePolygon', params: PolygonProps }
+    | { function: 'fitBounds', params: MapLiteFitBoundsParams }
+    | { function: 'flyTo', params: MapLiteFlyToParams }
+    | { function: 'setNavigatorPoint', params: MapLiteSetNavigatorPointParams }
+    | { function: 'advanceNavigatorInstruction', params: Record<string, never> }
+    | { function: 'setNavigatorPosition', params: MapLiteSetNavigatorPositionParams }
+    | { function: 'pickNavigatorPosition', params: Record<string, never> }
+
+/** Web → RN: `postToNative` (`webProject/src/map/types.ts`). */
+export type WebToNativeMessage =
+    | { type: 'scriptReady' }
+    | { type: 'inited' }
+    | { type: 'event', event: string, params: unknown }
+    | { type: 'markerClick', uniqueId: string }
+    | {
+        type: 'error',
+        data: MapLiteWebError,
+    }
+
+/** Имена `event` в `{ type: 'event', event, params }` из WebView. */
+export type MapLiteMapEventName =
+    | 'movestart'
+    | 'moveend'
+    | 'zoomstart'
+    | 'zoomend'
+    | 'idle'
+    | 'error'
+    | 'navigatorRouteSet'
+    | 'navigatorInstruction'
+    | 'navigatorPositionSet'
+
+export type MapLiteMapErrorEventParams = {
+    message: string,
+}