react-native-maplibre-lite 0.1.2 → 0.1.4

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

@@ -0,0 +1 @@
+{"version":3,"file":"webMapBuild.d.ts","sourceRoot":"","sources":["../../../../src/components/webMapBuild.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,QAAQ,0+hzCAA4/4yC,CAAC"}

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

@@ -5,5 +5,5 @@ import { Polyline } from './components/Polyline';
 export { MapView, Marker, Polygon, Polyline };
 export default MapView;
 export type { MapViewRef } from './components/MapView';
-export type { MarkerProps, PolygonProps, PolylineProps, EventParams, SourcesProps } from './components/types';
+export type { EventParams, MapLiteWebError, MarkerProps, NavigatorInstructionParams, NavigatorLang, NavigatorLngLat, NavigatorPositionMode, NavigatorPositionSetParams, NavigatorRouteSetParams, PolygonProps, PolylineProps, } 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,EAAE,WAAW,EAAE,YAAY,EAAE,aAAa,EAAE,WAAW,EAAE,YAAY,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,eAAe,EACf,WAAW,EACX,0BAA0B,EAC1B,aAAa,EACb,eAAe,EACf,qBAAqB,EACrB,0BAA0B,EAC1B,uBAAuB,EACvB,YAAY,EACZ,aAAa,GAChB,MAAM,oBAAoB,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-maplibre-lite",
-  "version": "0.1.2",
+  "version": "0.1.4",
   "description": "Lightweight MapLibre GL JS wrapper using WebView",
   "main": "./lib/module/index.js",
   "types": "./lib/typescript/src/index.d.ts",
@@ -98,7 +98,8 @@
     "preset": "react-native",
     "modulePathIgnorePatterns": [
       "<rootDir>/example/node_modules",
-      "<rootDir>/lib/"
+      "<rootDir>/lib/",
+      "<rootDir>/webProject/"
     ]
   },
   "commitlint": {

package/src/components/MapView.tsx

@@ -20,23 +20,17 @@ import MapPlaceholder from './MapPlaceholder';
 import MapSelectPoint, { type MapSelectPointType } from './MapSelectPoint';
 import {
     type EventParams,
+    type MapLiteWebError,
     type MarkerProps,
+    type NavigatorInstructionParams,
+    type NavigatorLang,
+    type NavigatorPositionSetParams,
+    type NavigatorRouteSetParams,
     type PolygonProps,
     type PolylineProps,
-    type SourcesProps,
 } from './types';
 import { loadResources } from './utils';
-import { maplibreHtmlMap } from './webContent';
-import addMarkerWeb from './webFunctions/addMarkerWeb';
-import addPolygonWeb from './webFunctions/addPolygonWeb';
-import addPolylineWeb from './webFunctions/addPolylineWeb';
-import fitBoundsWeb from './webFunctions/fitBoundsWeb';
-import { flyToWeb } from './webFunctions/flyToWeb';
-import initWeb from './webFunctions/initWeb';
-import removeMarkerWeb from './webFunctions/removeMarkerWeb';
-import removePolygonWeb from './webFunctions/removePolygonWeb';
-import removePolylineWeb from './webFunctions/removePolylineWeb';
-import updateWeb from './webFunctions/updateWeb';
+import { MAP_HTML } from './webMapBuild';
 
 interface UpdateProps {
     center?: [number, number];
@@ -81,12 +75,38 @@ interface MapViewProps {
     pixelRatio?: number;
     turboWhileMoving?: boolean;
 
-    sources: SourcesProps;
+    /**
+     * Включает режим навигатора в WebView (стрелка, маршрут GraphHopper, HUD).
+     * Должен совпадать с билдом `webMapBuild` / `MapLiteController`.
+     */
+    navigator?: boolean;
+    /**
+     * Базовый URL GraphHopper для маршрутов навигатора (без обязательного `/route`).
+     * Нужен для `setNavigatorPoint` и пересчёта маршрута.
+     */
+    graphhopperUrl?: string;
+    /** Язык HUD и инструкций навигатора. По умолчанию веб-часть использует `ru`. */
+    navigatorLang?: NavigatorLang;
+    onNavigatorRouteSet?: (params: NavigatorRouteSetParams) => void;
+    onNavigatorInstruction?: (params: NavigatorInstructionParams) => void;
+    onNavigatorPositionSet?: (params: NavigatorPositionSetParams) => void;
+    /** Ошибки команд WebView (`type: 'error'` из карты). */
+    onMapLiteError?: (err: MapLiteWebError) => void;
 }
 
 export type MapViewRef = {
     fitBounds: () => void;
     flyTo: (center: [number, number], zoom: number) => void;
+    /** Построить маршрут до точки (нужен `navigator: true` в MapView). */
+    setNavigatorPoint: (latitude: number, longitude: number) => void;
+    /** Следующая пошаговая инструкция (для отладки / ручного шага). */
+    advanceNavigatorInstruction: () => void;
+    /**
+     * Обновить «текущую позицию» (GPS): snap / reroute / прибытие — на стороне WebView.
+     */
+    setNavigatorPosition: (latitude: number, longitude: number) => void;
+    /** Режим «клик по карте = новая позиция» (удобно в dev). */
+    pickNavigatorPosition: () => void;
 };
 
 type MapViewRegistry = {
@@ -106,19 +126,6 @@ export const useMapViewContext = () => {
     return ctx;
 };
 
-const webFunctionsString = [
-    initWeb,
-    addMarkerWeb,
-    removeMarkerWeb,
-    addPolylineWeb,
-    removePolylineWeb,
-    addPolygonWeb,
-    removePolygonWeb,
-    fitBoundsWeb,
-    flyToWeb,
-    updateWeb
-].join('\n');
-
 const getBoundsFromCoords = (
     coords: [number, number][]
 ): [[number, number], [number, number]] => {
@@ -147,7 +154,6 @@ const getBoundsFromCoords = (
 export const MapView = forwardRef<MapViewRef, MapViewProps>((props, ref) => {
     const webViewRef = useRef<WebView | null>(null);
     const [inited, setInited] = useState(false);
-    const [html, setHtml] = useState('');
 
     const coordsInMapRef = useRef<Record<string, [number, number][]>>({});
     const markersClickHandlers = useRef<Record<string, () => void>>({});
@@ -193,6 +199,10 @@ export const MapView = forwardRef<MapViewRef, MapViewProps>((props, ref) => {
                 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,
             },
         });
     };
@@ -279,9 +289,29 @@ export const MapView = forwardRef<MapViewRef, MapViewProps>((props, ref) => {
         sendToWebView({ function: 'flyTo', params: { center, zoom, duration: props.flyToDuration ?? 500 } });
     };
 
+    const setNavigatorPoint = (latitude: number, longitude: number) => {
+        sendToWebView({ function: 'setNavigatorPoint', params: { latitude, longitude } });
+    };
+
+    const advanceNavigatorInstruction = () => {
+        sendToWebView({ function: 'advanceNavigatorInstruction', params: {} });
+    };
+
+    const setNavigatorPosition = (latitude: number, longitude: number) => {
+        sendToWebView({ function: 'setNavigatorPosition', params: { latitude, longitude } });
+    };
+
+    const pickNavigatorPosition = () => {
+        sendToWebView({ function: 'pickNavigatorPosition', params: {} });
+    };
+
     useImperativeHandle(ref, () => ({
         fitBounds,
         flyTo,
+        setNavigatorPoint,
+        advanceNavigatorInstruction,
+        setNavigatorPosition,
+        pickNavigatorPosition,
     }), [fitBounds]);
 
 
@@ -319,11 +349,6 @@ export const MapView = forwardRef<MapViewRef, MapViewProps>((props, ref) => {
     }, [props.minZoom, props.maxZoom, props.zoomEnabled, props.scrollEnabled, props.mapStyle]);
 
 
-    useEffect(() => {
-        if (html) return;
-        maplibreHtmlMap(webFunctionsString, props.sources, props.debugMode ?? false).then(setHtml);
-    }, []);
-
     const onReceiveMessageFromWebView = (data: string) => {
         try {
             const msg = JSON.parse(data);
@@ -351,10 +376,24 @@ export const MapView = forwardRef<MapViewRef, MapViewProps>((props, ref) => {
                     case 'idle':
                         props.onIdle?.(msg.params);
                         break;
+                    case 'navigatorRouteSet':
+                        props.onNavigatorRouteSet?.(msg.params as NavigatorRouteSetParams);
+                        break;
+                    case 'navigatorInstruction':
+                        props.onNavigatorInstruction?.(msg.params as NavigatorInstructionParams);
+                        break;
+                    case 'navigatorPositionSet':
+                        props.onNavigatorPositionSet?.(msg.params as NavigatorPositionSetParams);
+                        break;
                 }
                 return;
             }
 
+            if (msg.type === 'error' && msg.data) {
+                props.onMapLiteError?.(msg.data as MapLiteWebError);
+                return;
+            }
+
             if (msg.type === 'inited') {
                 props.onReady?.();
                 setInited(true);
@@ -398,7 +437,7 @@ export const MapView = forwardRef<MapViewRef, MapViewProps>((props, ref) => {
                     ref={webViewRef}
                     style={{ flex: 1, backgroundColor: 'transparent' }}
                     originWhitelist={['*']}
-                    source={{ html }}
+                    source={{ html: MAP_HTML }}
                     onMessage={event => {
                         onReceiveMessageFromWebView(event.nativeEvent.data);
                     }}

package/src/components/types.ts

@@ -14,12 +14,6 @@ export type MarkerProps = {
 
 }
 
-export type SourcesProps = {
-    maplibreJS: string;
-    maplibreCSS: string;
-    pmtilesJS: string;
-}
-
 export type PolygonProps = {
     ignoreFitBounds?: boolean,
     uniqueId: string,
@@ -47,4 +41,41 @@ export type EventParams = {
         lat: number
     },
     zoom?: number
+}
+
+export type NavigatorLang = 'ru' | 'en'
+
+/** [longitude, latitude] — как в GeoJSON / GraphHopper. */
+export type NavigatorLngLat = {
+    lng: number,
+    lat: number,
+}
+
+export type NavigatorRouteSetParams = {
+    destination: NavigatorLngLat,
+    distanceMeters?: number,
+    timeMs?: number,
+    pointsCount: number,
+    instructionsCount: number,
+}
+
+export type NavigatorInstructionParams = {
+    text: string,
+    streetName?: string,
+    sign: number,
+    distance: number,
+    time: number,
+}
+
+export type NavigatorPositionMode = 'noRoute' | 'arrived' | 'snapped' | 'rerouted'
+
+export type NavigatorPositionSetParams = {
+    point: NavigatorLngLat,
+    mode: NavigatorPositionMode,
+    distanceFromRouteMeters: number,
+}
+
+export type MapLiteWebError = {
+    target: string,
+    message: string,
 }