react-native-maplibre-lite 0.1.4 → 0.1.6

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,0+hzCAA4/4yC,CAAC"}
+{"version":3,"file":"webMapBuild.d.ts","sourceRoot":"","sources":["../../../../src/components/webMapBuild.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,QAAQ,y/qzCAAgyhzC,CAAC"}

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

@@ -5,5 +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, NavigatorInstructionParams, NavigatorLang, NavigatorLngLat, NavigatorPositionMode, NavigatorPositionSetParams, NavigatorRouteSetParams, PolygonProps, PolylineProps, } from './components/types';
+export type { EventParams, MapLiteWebError, MarkerProps, NavigatorChromeParams, NavigatorInstructionParams, NavigatorLang, NavigatorLngLat, NavigatorProfile, NavigatorPositionMode, NavigatorPositionSetParams, NavigatorRouteSetParams, PolygonProps, PolylineProps, } 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,0BAA0B,EAC1B,aAAa,EACb,eAAe,EACf,qBAAqB,EACrB,0BAA0B,EAC1B,uBAAuB,EACvB,YAAY,EACZ,aAAa,GAChB,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,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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-maplibre-lite",
-  "version": "0.1.4",
+  "version": "0.1.6",
   "description": "Lightweight MapLibre GL JS wrapper using WebView",
   "main": "./lib/module/index.js",
   "types": "./lib/typescript/src/index.d.ts",
@@ -13,6 +13,7 @@
     "./package.json": "./package.json"
   },
   "files": [
+    "demo",
     "src",
     "lib",
     "android",
@@ -88,7 +89,9 @@
     "react-native": "*",
     "react-native-webview": "*",
     "@react-native-async-storage/async-storage": "*",
-    "@types/geojson": "*"
+    "@sayem314/react-native-keep-awake": "*",
+    "@types/geojson": "*",
+    "@react-native-community/geolocation": "*"
   },
   "workspaces": [
     "example"

package/src/components/MapView.tsx

@@ -1,29 +1,34 @@
 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 Geolocation from '@react-native-community/geolocation';
+import KeepAwake from '@sayem314/react-native-keep-awake';
+
 import MapPlaceholder from './MapPlaceholder';
 import MapSelectPoint, { type MapSelectPointType } from './MapSelectPoint';
 import {
     type EventParams,
     type MapLiteWebError,
     type MarkerProps,
+    type NavigatorChromeParams,
     type NavigatorInstructionParams,
     type NavigatorLang,
+    type NavigatorProfile,
     type NavigatorPositionSetParams,
     type NavigatorRouteSetParams,
     type PolygonProps,
@@ -87,11 +92,24 @@ interface MapViewProps {
     graphhopperUrl?: string;
     /** Язык HUD и инструкций навигатора. По умолчанию веб-часть использует `ru`. */
     navigatorLang?: NavigatorLang;
+    /**
+     * Профиль GraphHopper для маршрута (`profile` в API).
+     * Неизвестная строка или отсутствие — как `car`. Только при `navigator: true`.
+     */
+    navigatorProfile?: NavigatorProfile | string;
+    /**
+     * Navigator chrome: route line, arrow accent, HUD colors. All keys optional.
+     * Sent once in WebView `init` as `navigatorChrome`.
+     */
+    navigatorChrome?: NavigatorChromeParams;
     onNavigatorRouteSet?: (params: NavigatorRouteSetParams) => void;
     onNavigatorInstruction?: (params: NavigatorInstructionParams) => void;
     onNavigatorPositionSet?: (params: NavigatorPositionSetParams) => void;
     /** Ошибки команд WebView (`type: 'error'` из карты). */
     onMapLiteError?: (err: MapLiteWebError) => void;
+
+
+    developerLocalhostBundleUrl?: string;
 }
 
 export type MapViewRef = {
@@ -151,9 +169,17 @@ const getBoundsFromCoords = (
     ];
 };
 
+/** Минимальный интервал между отправками позиции в WebView (мост RN↔JS). */
+const NAVIGATOR_GPS_FORWARD_MIN_MS = 500;
+
 export const MapView = forwardRef<MapViewRef, MapViewProps>((props, ref) => {
     const webViewRef = useRef<WebView | null>(null);
     const [inited, setInited] = useState(false);
+    const initedRef = useRef(false);
+
+    useEffect(() => {
+        initedRef.current = inited;
+    }, [inited]);
 
     const coordsInMapRef = useRef<Record<string, [number, number][]>>({});
     const markersClickHandlers = useRef<Record<string, () => void>>({});
@@ -171,6 +197,9 @@ export const MapView = forwardRef<MapViewRef, MapViewProps>((props, ref) => {
         webViewRef.current?.postMessage(JSON.stringify(message));
     };
 
+    const sendToWebViewRef = useRef(sendToWebView);
+    sendToWebViewRef.current = sendToWebView;
+
     const initMap = async () => {
         if (__DEV__) {
             console.log('MapView: initMap');
@@ -203,6 +232,8 @@ export const MapView = forwardRef<MapViewRef, MapViewProps>((props, ref) => {
                 navigator: props.navigator === true,
                 graphhopperUrl: props.graphhopperUrl,
                 navigatorLang: props.navigatorLang,
+                navigatorProfile: props.navigatorProfile,
+                navigatorChrome: props.navigatorChrome,
             },
         });
     };
@@ -419,6 +450,56 @@ export const MapView = forwardRef<MapViewRef, MapViewProps>((props, ref) => {
         }
     };
 
+    useEffect(() => {
+        if (!props.navigator) {
+            return;
+        }
+
+        let lastForwardedAt = 0;
+
+        const watchId = Geolocation.watchPosition(
+            (position) => {
+                if (!initedRef.current) {
+                    return;
+                }
+
+                const lat = position.coords.latitude;
+                const lng = position.coords.longitude;
+                if (!Number.isFinite(lat) || !Number.isFinite(lng)) {
+                    return;
+                }
+
+                const now = Date.now();
+                if (now - lastForwardedAt < NAVIGATOR_GPS_FORWARD_MIN_MS) {
+                    return;
+                }
+                lastForwardedAt = now;
+
+                sendToWebViewRef.current({
+                    function: 'setNavigatorPosition',
+                    params: { latitude: lat, longitude: lng },
+                });
+            },
+            (error) => {
+                console.error('MapView: error watching position', error);
+            },
+            {
+                enableHighAccuracy: true,
+                /** Android: желаемый интервал обновлений от провайдера. */
+                interval: 1000,
+                fastestInterval: 1000,
+                /** iOS / часть сценариев: не слать, если сдвиг меньше N метров. */
+                distanceFilter: 1,
+                /** Не опираться на слишком старый кэш при запросе точки. */
+                maximumAge: 2000,
+            }
+        );
+
+        return () => {
+            Geolocation.clearWatch(watchId);
+        };
+    }, [props.navigator]);
+
     return (
         <View style={props.style}>
 
@@ -437,7 +518,7 @@ export const MapView = forwardRef<MapViewRef, MapViewProps>((props, ref) => {
                     ref={webViewRef}
                     style={{ flex: 1, backgroundColor: 'transparent' }}
                     originWhitelist={['*']}
-                    source={{ html: MAP_HTML }}
+                    source={!!props.developerLocalhostBundleUrl ? { uri: props.developerLocalhostBundleUrl } : { html: MAP_HTML }}
                     onMessage={event => {
                         onReceiveMessageFromWebView(event.nativeEvent.data);
                     }}
@@ -472,6 +553,7 @@ export const MapView = forwardRef<MapViewRef, MapViewProps>((props, ref) => {
             {!inited && (
                 <MapPlaceholder theme={props.placeholderTheme ?? 'light'} />
             )}
+            {!!props.navigator && <KeepAwake />}
 
         </View>
     );

package/src/components/types.ts

@@ -45,6 +45,44 @@ export type EventParams = {
 
 export type NavigatorLang = 'ru' | 'en'
 
+/**
+ * Navigator look-and-feel (route line, arrow accent, HUD). Passed to WebView `init` as `navigatorChrome`.
+ * All fields are optional; defaults match the built-in blue theme.
+ */
+export type NavigatorChromeParams = {
+    /** Accent in hex (`#rgb` / `#rrggbb`): map arrow gradient and maneuver icon tile in the HUD. */
+    accent?: string,
+    /** Main route line color (default was `#3b82f6`). */
+    routeLine?: string,
+    /** Wide route line underlay (default was `#1e3a8a`). */
+    routeOutline?: string,
+    /** HUD panel background: any valid CSS (`rgba(...)`, `linear-gradient(...)`, etc.). */
+    hudBackground?: string,
+    /** Primary text color on the HUD. */
+    hudForeground?: string,
+    /** Secondary text (street, summary, ETA); divider tone is derived from this when it is hex. */
+    hudMuted?: string,
+}
+
+/** Значения `profile` для GraphHopper `POST …/route` (см. документацию GH). */
+export const NAVIGATOR_PROFILE_IDS = [
+    'car',
+    'car_avoid_motorway',
+    'car_avoid_ferry',
+    'car_avoid_toll',
+    'small_truck',
+    'truck',
+    'scooter',
+    'foot',
+    'hike',
+    'bike',
+    'mtb',
+    'racingbike',
+    'ecargobike',
+] as const
+
+export type NavigatorProfile = (typeof NAVIGATOR_PROFILE_IDS)[number]
+
 /** [longitude, latitude] — как в GeoJSON / GraphHopper. */
 export type NavigatorLngLat = {
     lng: number,