react-native-maplibre-lite 0.1.1 → 0.1.3

package/src/components/MapView.tsx

@@ -1,54 +1,74 @@
 import {
-  createContext,
-  forwardRef,
-  useCallback,
-  useContext,
-  useEffect,
-  useImperativeHandle,
-  useRef,
-  useState,
+    createContext,
+    forwardRef,
+    useContext,
+    useEffect,
+    useImperativeHandle,
+    useRef,
+    useState,
 } from 'react';
 
 import {
-  type StyleProp,
-  Platform,
-  View,
-  type ViewStyle,
+    type StyleProp,
+    Platform,
+    View,
+    type ViewStyle,
 } from 'react-native';
 import { WebView } from 'react-native-webview';
 
-import { maplibreHtmlMap } from '../webContent';
 import MapPlaceholder from './MapPlaceholder';
 import MapSelectPoint, { type MapSelectPointType } from './MapSelectPoint';
 import {
-  type EventParams,
-  type MarkerProps,
-  type PolygonProps,
-  type PolylineProps,
-  type SourcesProps,
+    type EventParams,
+    type MarkerProps,
+    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';
+
+interface UpdateProps {
+    center?: [number, number];
+    zoom?: number;
+    minZoom?: number;
+    maxZoom?: number;
+    zoomEnabled?: boolean;
+    scrollEnabled?: boolean;
+    mapStyle?: string;
+}
 
 interface MapViewProps {
     children?: React.ReactNode;
 
-    theme: 'light' | 'dark';
+
+    placeholderTheme?: 'light' | 'dark';
     center: [number, number];
     zoom: number;
 
+    debugMode?: boolean;
+    autoFitBounds?: boolean;
+    fitBoundsPadding?: number;
+    fitBoundsDuration?: number;
+    flyToDuration?: number;
+
     mapStyle: string;
     style: StyleProp<ViewStyle>;
     minZoom?: number;
     maxZoom?: number;
     zoomEnabled?: boolean;
     scrollEnabled?: boolean;
+    onReady?: () => void;
     onMoveStart?: (eventParams: EventParams) => void;
     onMoveEnd?: (eventParams: EventParams) => void;
     onZoomStart?: (eventParams: EventParams) => void;
@@ -66,6 +86,7 @@ interface MapViewProps {
 
 export type MapViewRef = {
     fitBounds: () => void;
+    flyTo: (center: [number, number], zoom: number) => void;
 };
 
 type MapViewRegistry = {
@@ -94,6 +115,8 @@ const webFunctionsString = [
     addPolygonWeb,
     removePolygonWeb,
     fitBoundsWeb,
+    flyToWeb,
+    updateWeb
 ].join('\n');
 
 const getBoundsFromCoords = (
@@ -122,7 +145,7 @@ const getBoundsFromCoords = (
 };
 
 export const MapView = forwardRef<MapViewRef, MapViewProps>((props, ref) => {
-    const webViewRef = useRef<any>(null);
+    const webViewRef = useRef<WebView | null>(null);
     const [inited, setInited] = useState(false);
     const [html, setHtml] = useState('');
 
@@ -135,18 +158,28 @@ export const MapView = forwardRef<MapViewRef, MapViewProps>((props, ref) => {
         ? 0.85
         : (performanceMode === 'balanced' && Platform.OS === 'android' ? 1 : undefined);
 
-    const sendToWebView = useCallback((message: { function: string; params: any }) => {
+    const sendToWebView = (message: { function: string; params: any }) => {
+        if (__DEV__) {
+            console.log('MapView: sendToWebView', message);
+        }
         webViewRef.current?.postMessage(JSON.stringify(message));
-    }, []);
+    };
+
+    const initMap = async () => {
+        if (__DEV__) {
+            console.log('MapView: initMap');
+            console.log('MapView: props.mapStyle', props.mapStyle);
+        }
+
+        const mapStyleText = await loadResources(props.mapStyle);
+        const mapStyle = JSON.parse(mapStyleText);
 
-    const initMap = useCallback(() => {
         sendToWebView({
             function: 'init',
             params: {
-                style: props.mapStyle,
+                mapStyle: mapStyle,
                 zoomEnabled: props.zoomEnabled ?? false,
                 scrollEnabled: props.scrollEnabled ?? false,
-                theme: props.theme,
                 center: props.center,
                 zoom: props.zoom,
                 minZoom: props.minZoom,
@@ -162,73 +195,143 @@ export const MapView = forwardRef<MapViewRef, MapViewProps>((props, ref) => {
                 turboWhileMoving: props.turboWhileMoving ?? (performanceMode === 'performance'),
             },
         });
-    }, [sendToWebView, props.zoomEnabled, props.scrollEnabled, props.theme, props.center, props.zoom, props.minZoom, props.maxZoom, props.mapStyle, performanceMode, props.pixelRatio, fallbackPixelRatio, props.turboWhileMoving]);
-
-    const addMarker = useCallback((propsMarker: MarkerProps) => {
-        if (propsMarker.latitude && propsMarker.longitude) {
-            coordsInMapRef.current[propsMarker.uniqueId] = [[propsMarker.longitude, propsMarker.latitude]];
-        }
+    };
 
+    const updateMarkerClickHandler = (propsMarker: MarkerProps) => {
         if (propsMarker.onPress) {
             markersClickHandlers.current[propsMarker.uniqueId] = propsMarker.onPress;
         } else {
             delete markersClickHandlers.current[propsMarker.uniqueId];
         }
+    };
+
+    const addMarker = (propsMarker: MarkerProps) => {
+        if (propsMarker.latitude != null && propsMarker.longitude != null && !propsMarker.ignoreFitBounds) {
+            coordsInMapRef.current[propsMarker.uniqueId] = [[propsMarker.longitude, propsMarker.latitude]];
+        }
+
+        updateMarkerClickHandler(propsMarker);
 
         sendToWebView({ function: 'addMarker', params: propsMarker });
-    }, [sendToWebView]);
+        scheduleAutoFitBounds();
+    };
 
-    const removeMarker = useCallback((propsMarker: MarkerProps) => {
+    const removeMarker = (propsMarker: MarkerProps) => {
         delete coordsInMapRef.current[propsMarker.uniqueId];
         delete markersClickHandlers.current[propsMarker.uniqueId];
         sendToWebView({ function: 'removeMarker', params: propsMarker });
-    }, [sendToWebView]);
+        scheduleAutoFitBounds();
+    };
 
-    const addPolyline = useCallback((propsPolyline: PolylineProps) => {
-        if (propsPolyline.coordinates) {
+    const addPolyline = (propsPolyline: PolylineProps) => {
+        if (propsPolyline.coordinates && !propsPolyline.ignoreFitBounds) {
             coordsInMapRef.current[propsPolyline.uniqueId] = propsPolyline.coordinates;
         }
         sendToWebView({ function: 'addPolyline', params: propsPolyline });
-    }, [sendToWebView]);
+        scheduleAutoFitBounds();
+    };
 
-    const removePolyline = useCallback((propsPolyline: PolylineProps) => {
+    const removePolyline = (propsPolyline: PolylineProps) => {
         delete coordsInMapRef.current[propsPolyline.uniqueId];
         sendToWebView({ function: 'removePolyline', params: propsPolyline });
-    }, [sendToWebView]);
+        scheduleAutoFitBounds();
+    };
 
-    const addPolygon = useCallback((propsPolygon: PolygonProps) => {
-        if (propsPolygon.coordinates) {
+    const addPolygon = (propsPolygon: PolygonProps) => {
+        if (propsPolygon.coordinates && !propsPolygon.ignoreFitBounds) {
             coordsInMapRef.current[propsPolygon.uniqueId] = propsPolygon.coordinates;
         }
         sendToWebView({ function: 'addPolygon', params: propsPolygon });
-    }, [sendToWebView]);
+        scheduleAutoFitBounds();
+    };
 
-    const removePolygon = useCallback((propsPolygon: PolygonProps) => {
+    const removePolygon = (propsPolygon: PolygonProps) => {
         delete coordsInMapRef.current[propsPolygon.uniqueId];
         sendToWebView({ function: 'removePolygon', params: propsPolygon });
-    }, [sendToWebView]);
+        scheduleAutoFitBounds();
+    };
+
+    const autoFitBoundsTimeoutRef = useRef<NodeJS.Timeout | null>(null);
+
+    const scheduleAutoFitBounds = () => {
+        if (!props.autoFitBounds) return;
+        if (autoFitBoundsTimeoutRef.current) {
+            clearTimeout(autoFitBoundsTimeoutRef.current);
+        }
+        autoFitBoundsTimeoutRef.current = setTimeout(() => {
+            fitBounds();
+        }, 1000);
+    };
 
-    const fitBounds = useCallback(() => {
+    useEffect(() => {
+        scheduleAutoFitBounds();
+    }, [props.autoFitBounds, props.fitBoundsPadding]);
+
+    const fitBounds = () => {
         const coords = Object.values(coordsInMapRef.current).flat();
-        if (coords.length === 0) return;
+        if (coords.length <= 1) return;
 
         const bounds = getBoundsFromCoords(coords);
-        sendToWebView({ function: 'fitBounds', params: { bounds } });
-    }, [sendToWebView]);
+        sendToWebView({ function: 'fitBounds', params: { bounds, padding: props.fitBoundsPadding ?? 40, duration: props.fitBoundsDuration ?? 500 } });
+    };
+
+    const flyTo = (center: [number, number], zoom: number) => {
+        sendToWebView({ function: 'flyTo', params: { center, zoom, duration: props.flyToDuration ?? 500 } });
+    };
 
     useImperativeHandle(ref, () => ({
         fitBounds,
+        flyTo,
     }), [fitBounds]);
 
+
+
+    const lastPropsRef = useRef<MapViewProps>(props);
+
+    useEffect(() => {
+        const updateProps: UpdateProps = {};
+
+        if (lastPropsRef.current.minZoom !== props.minZoom) {
+            updateProps.minZoom = props.minZoom;
+        }
+
+        if (lastPropsRef.current.maxZoom !== props.maxZoom) {
+            updateProps.maxZoom = props.maxZoom;
+        }
+
+        if (lastPropsRef.current.zoomEnabled !== props.zoomEnabled) {
+            updateProps.zoomEnabled = props.zoomEnabled;
+        }
+
+        if (lastPropsRef.current.scrollEnabled !== props.scrollEnabled) {
+            updateProps.scrollEnabled = props.scrollEnabled;
+        }
+
+        if (lastPropsRef.current.mapStyle !== props.mapStyle) {
+            updateProps.mapStyle = props.mapStyle;
+        }
+
+        lastPropsRef.current = props;
+
+        if (Object.keys(updateProps).length > 0) {
+            sendToWebView({ function: 'update', params: updateProps });
+        }
+    }, [props.minZoom, props.maxZoom, props.zoomEnabled, props.scrollEnabled, props.mapStyle]);
+
+
     useEffect(() => {
         if (html) return;
-        maplibreHtmlMap(webFunctionsString, props.sources).then(setHtml);
-    }, [html, props.sources]);
+        maplibreHtmlMap(webFunctionsString, props.sources, props.debugMode ?? false).then(setHtml);
+    }, []);
 
-    const onReceiveMessageFromWebView = useCallback((data: string) => {
+    const onReceiveMessageFromWebView = (data: string) => {
         try {
             const msg = JSON.parse(data);
 
+            if (__DEV__) {
+                console.log('MapView: event', msg);
+            }
+
             if (msg.type === 'event') {
                 switch (msg.event) {
                     case 'movestart':
@@ -253,6 +356,7 @@ export const MapView = forwardRef<MapViewRef, MapViewProps>((props, ref) => {
             }
 
             if (msg.type === 'inited') {
+                props.onReady?.();
                 setInited(true);
                 return;
             }
@@ -274,22 +378,20 @@ export const MapView = forwardRef<MapViewRef, MapViewProps>((props, ref) => {
                 console.warn('MapView: failed to parse WebView message', e);
             }
         }
-    }, [props.onMoveStart, props.onMoveEnd, props.onZoomStart, props.onZoomEnd, props.onIdle, initMap]);
+    };
 
     return (
         <View style={props.style}>
-            {!inited && (
-                <MapPlaceholder theme={props.theme} />
-            )}
 
             <MapViewContext.Provider
                 value={{
-                    addPolygon,
-                    removePolygon,
                     addMarker,
                     removeMarker,
+
                     addPolyline,
                     removePolyline,
+                    addPolygon,
+                    removePolygon,
                 }}
             >
                 <WebView
@@ -328,6 +430,10 @@ export const MapView = forwardRef<MapViewRef, MapViewProps>((props, ref) => {
                     </View>
                 )}
             </MapViewContext.Provider>
+            {!inited && (
+                <MapPlaceholder theme={props.placeholderTheme ?? 'light'} />
+            )}
+
         </View>
     );
 });

package/src/components/Marker.tsx

@@ -4,7 +4,7 @@ import {
 } from 'react';
 
 import { useMapViewContext } from './MapView';
-import { type MarkerProps } from './types';
+import type { MarkerProps } from './types';
 
 export const Marker = (props: MarkerProps) => {
     const { addMarker, removeMarker } = useMapViewContext();
@@ -19,13 +19,13 @@ export const Marker = (props: MarkerProps) => {
             addMarker(props);
             lastRenderProps.current = serialized;
         }
-    }, [props, addMarker]);
+    }, [props]);
 
     useEffect(() => {
         return () => {
             removeMarker(propsRef.current);
         };
-    }, [removeMarker]);
+    }, []);
 
     return null;
 };

package/src/components/Polygon.tsx

@@ -4,7 +4,7 @@ import {
 } from 'react';
 
 import { useMapViewContext } from './MapView';
-import { type PolygonProps } from './types';
+import type { PolygonProps } from './types';
 
 export const Polygon = (props: PolygonProps) => {
     const { addPolygon, removePolygon } = useMapViewContext();
@@ -19,13 +19,13 @@ export const Polygon = (props: PolygonProps) => {
             addPolygon(props);
             lastRenderProps.current = serialized;
         }
-    }, [props, addPolygon]);
+    }, [props]);
 
     useEffect(() => {
         return () => {
             removePolygon(propsRef.current);
         };
-    }, [removePolygon]);
+    }, []);
 
     return null;
 };

package/src/components/Polyline.tsx

@@ -19,13 +19,13 @@ export const Polyline = (props: PolylineProps) => {
             addPolyline(props);
             lastRenderProps.current = serialized;
         }
-    }, [props, addPolyline]);
+    }, [props]);
 
     useEffect(() => {
         return () => {
             removePolyline(propsRef.current);
         };
-    }, [removePolyline]);
+    }, []);
 
     return null;
 };

package/src/components/types.ts

@@ -1,5 +1,6 @@
 
 export type MarkerProps = {
+    ignoreFitBounds?: boolean,
     uniqueId: string,
     onPress?: () => void,
     latitude: number,
@@ -9,6 +10,7 @@ export type MarkerProps = {
     iconUrl?: string,
     iconWidth?: number,
     iconHeight?: number,
+    html?: string,
 
 }
 
@@ -19,6 +21,7 @@ export type SourcesProps = {
 }
 
 export type PolygonProps = {
+    ignoreFitBounds?: boolean,
     uniqueId: string,
     coordinates: [number, number][],
     fillColor?: string,
@@ -30,6 +33,7 @@ export type PolygonProps = {
 }
 
 export type PolylineProps = {
+    ignoreFitBounds?: boolean,
     uniqueId: string,
     color?: string,
     width?: number,

package/src/components/utils.ts

@@ -0,0 +1,31 @@
+import AsyncStorage from '@react-native-async-storage/async-storage';
+
+const CACHE_VERSION = 'v1';
+
+export const loadResources = async (url: string) => {
+    const cacheKey = `${url}@${CACHE_VERSION}`;
+
+    try {
+        const stored = await AsyncStorage.getItem(cacheKey);
+        if (stored) {
+            return stored;
+        }
+    } catch (_) {
+        // cache miss — proceed to fetch
+    }
+
+    const response = await fetch(url);
+    if (!response.ok) {
+        throw new Error(`Failed to load resource: ${url} (${response.status})`);
+    }
+    const text = await response.text();
+
+    if (text) {
+        try {
+            await AsyncStorage.setItem(cacheKey, text);
+        } catch (_) {
+            // storage full or unavailable — non-fatal
+        }
+    }
+    return text;
+}

package/src/{webContent.ts → components/webContent.ts}

@@ -1,38 +1,7 @@
-import AsyncStorage from '@react-native-async-storage/async-storage';
+import type {SourcesProps} from './types';
+import {loadResources} from './utils';
 
-import type { SourcesProps } from './components/types';
-
-const CACHE_VERSION = 'v1';
-
-const loadResources = async (url: string) => {
-    const cacheKey = `${url}@${CACHE_VERSION}`;
-
-    try {
-        const stored = await AsyncStorage.getItem(cacheKey);
-        if (stored) {
-            return stored;
-        }
-    } catch (_) {
-        // cache miss — proceed to fetch
-    }
-
-    const response = await fetch(url);
-    if (!response.ok) {
-        throw new Error(`Failed to load resource: ${url} (${response.status})`);
-    }
-    const text = await response.text();
-
-    if (text) {
-        try {
-            await AsyncStorage.setItem(cacheKey, text);
-        } catch (_) {
-            // storage full or unavailable — non-fatal
-        }
-    }
-    return text;
-}
-
-export const maplibreHtmlMap = async (webFunctions: string, sources: SourcesProps) => {
+export const maplibreHtmlMap = async (webFunctions: string, sources: SourcesProps, debugMode: boolean) => {
     //Загружаем скрипты как текст
 
 
@@ -40,6 +9,10 @@ export const maplibreHtmlMap = async (webFunctions: string, sources: SourcesProp
     let maplibreCSS = await loadResources(sources.maplibreCSS);
     let pmtiles = await loadResources(sources.pmtilesJS);
 
+    console.log('MapLibre: maplibreJS', !!maplibreJS ? 'true' : 'false');
+    console.log('MapLibre: maplibreCSS', !!maplibreCSS ? 'true' : 'false');
+    console.log('MapLibre: pmtiles', !!pmtiles ? 'true' : 'false');
+
 
 
     return `<!DOCTYPE html>
@@ -127,11 +100,9 @@ var layouts = {};
 var map = null;
 
 try {
-    let protocol = new pmtiles.Protocol();
+    var protocol = new pmtiles.Protocol();
     maplibregl.addProtocol("pmtiles", protocol.tile);
-} catch (e) {
-    console.error('pmtiles init error:', e.message);
-}
+
   window.onload = function () {
         document.addEventListener("message", function (event) {
             receiveMessage(event.data);
@@ -145,7 +116,7 @@ try {
     }
 
 
-  const receiveMessage = (message) => {
+  function receiveMessage(message) {
 
       var data = JSON.parse(message);
 
@@ -163,6 +134,9 @@ try {
 ${webFunctions}
 
 } catch (e) {
+    if(${debugMode}){
+        alert('WebView function error: ' + functionName + ' ' + e.message);
+    }
     console.error('WebView function error:', functionName, e.message);
     window.ReactNativeWebView.postMessage(JSON.stringify({
         type: 'error',
@@ -174,7 +148,14 @@ ${webFunctions}
 }
     };
 
+} catch (e) {
+
+    if(${debugMode}){
+        alert('pmtiles init error: ' + e.message);
+    }
 
+  
+}
 </script>
 
 

package/src/components/webFunctions/addMarkerWeb.ts

@@ -2,18 +2,41 @@ export default  /*js*/`
 
                 if(functionName === 'addMarker') {
 
-                  
+
                     if(markers[params.uniqueId]){
                         markers[params.uniqueId].remove();
                         delete markers[params.uniqueId];
                     }
 
 
-                if(!params?.iconUrl){
+                    if(params && params.html){
+
+                          var el = document.createElement('div');
+                            el.className = 'marker';
+                            el.innerHTML = params.html;
+
+                            el.addEventListener('click', function() {
+                            window.ReactNativeWebView.postMessage(JSON.stringify({
+                                            type: 'markerClick',
+                                            uniqueId: params.uniqueId
+                                        }));
+                            });
+
+
+                        markers[params.uniqueId] = new maplibregl.Marker({element: el})
+                            .setLngLat([params.longitude, params.latitude])
+                            .addTo(map);
+
+                    return;
+
+                    }
+
+
+                if(!params || !params.iconUrl){
 
 
                     markers[params.uniqueId] = new maplibregl.Marker({
-                    color: params.color ?? undefined,
+                    color: (params.color != null) ? params.color : undefined,
                 }).setLngLat([params.longitude, params.latitude])
                 .addTo(map);
                 markers[params.uniqueId].getElement().addEventListener('click', function() {
@@ -28,13 +51,16 @@ export default  /*js*/`
         }else{
 
 
-        const el = document.createElement('div');
-        el.className = 'marker';
-        el.style.backgroundImage = 'url(' + params.iconUrl + ')';
-        el.style.width = params.iconWidth + 'px';
-        el.style.height = params.iconHeight + 'px';
+        var el2 = document.createElement('div');
+        el2.className = 'marker';
+        el2.style.backgroundImage = 'url(' + params.iconUrl + ')';
+        el2.style.backgroundSize = 'cover';
+        el2.style.backgroundPosition = 'center';
+        el2.style.backgroundRepeat = 'no-repeat';
+        el2.style.width = params.iconWidth + 'px';
+        el2.style.height = params.iconHeight + 'px';
 
-        el.addEventListener('click', () => {
+        el2.addEventListener('click', function() {
            window.ReactNativeWebView.postMessage(JSON.stringify({
                         type: 'markerClick',
                         uniqueId: params.uniqueId
@@ -42,7 +68,7 @@ export default  /*js*/`
         });
 
         
-        markers[params.uniqueId] = new maplibregl.Marker({element: el})
+        markers[params.uniqueId] = new maplibregl.Marker({element: el2})
             .setLngLat([params.longitude, params.latitude])
             .addTo(map);
 

package/src/components/webFunctions/addPolylineWeb.ts

@@ -36,8 +36,8 @@ if(functionName === 'addPolyline') {
             'line-cap': 'round'
         },
         'paint': {
-            'line-color': params.color ?? '#000000',
-            'line-width': params.width ?? 4
+            'line-color': (params.color != null) ? params.color : '#000000',
+            'line-width': (params.width != null) ? params.width : 4
         }
     });