react-native-maplibre-lite 0.1.3 → 0.1.5

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.3",
+  "version": "0.1.5",
   "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

@@ -1,42 +1,36 @@
 import {
-    createContext,
-    forwardRef,
-    useContext,
-    useEffect,
-    useImperativeHandle,
-    useRef,
-    useState,
+  createContext,
+  forwardRef,
+  useContext,
+  useEffect,
+  useImperativeHandle,
+  useRef,
+  useState,
 } from 'react';
 
 import {
-    type StyleProp,
-    Platform,
-    View,
-    type ViewStyle,
+  Platform,
+  type StyleProp,
+  View,
+  type ViewStyle,
 } from 'react-native';
 import { WebView } from 'react-native-webview';
 
 import MapPlaceholder from './MapPlaceholder';
 import MapSelectPoint, { type MapSelectPointType } from './MapSelectPoint';
 import {
-    type EventParams,
-    type MarkerProps,
-    type PolygonProps,
-    type PolylineProps,
-    type SourcesProps,
+  type EventParams,
+  type MapLiteWebError,
+  type MarkerProps,
+  type NavigatorInstructionParams,
+  type NavigatorLang,
+  type NavigatorPositionSetParams,
+  type NavigatorRouteSetParams,
+  type PolygonProps,
+  type PolylineProps,
 } 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,41 @@ 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;
+
+
+    developerLocalhostBundleUrl?: string;
 }
 
 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 +129,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 +157,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 +202,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 +292,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 +352,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 +379,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 +440,7 @@ export const MapView = forwardRef<MapViewRef, MapViewProps>((props, ref) => {
                     ref={webViewRef}
                     style={{ flex: 1, backgroundColor: 'transparent' }}
                     originWhitelist={['*']}
-                    source={{ html }}
+                    source={!!props.developerLocalhostBundleUrl ? { uri: props.developerLocalhostBundleUrl } : { 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,
 }