react-native-maplibre-lite 0.1.1

package/src/components/MapPlaceholder.tsx

@@ -0,0 +1,44 @@
+import { useEffect, useRef } from 'react';
+import { Animated, Image } from 'react-native';
+
+import { MAP_ASSETS } from '../assets/MAP_ASSETS';
+
+const MapPlaceholder = (props: { theme: 'dark' | 'light' }) => {
+    const opacityAnim = useRef(new Animated.Value(0.5)).current;
+
+    useEffect(() => {
+        const animate = () => {
+            Animated.sequence([
+                Animated.timing(opacityAnim, {
+                    toValue: 1,
+                    duration: 1000,
+                    useNativeDriver: true,
+                }),
+                Animated.timing(opacityAnim, {
+                    toValue: 0.5,
+                    duration: 1000,
+                    useNativeDriver: true,
+                }),
+            ]).start(() => animate());
+        };
+
+        animate();
+    }, [opacityAnim]);
+
+    return (
+        <Animated.Image
+            source={props.theme === 'dark' ? MAP_ASSETS.DARK_MAP_PLACEHOLDER : MAP_ASSETS.LIGHT_MAP_PLACEHOLDER}
+            style={{
+                position: 'absolute',
+                top: 0,
+                left: 0,
+                width: '100%',
+                height: '100%',
+                zIndex: 1000,
+                opacity: opacityAnim,
+            }}
+        />
+    );
+}
+
+export default MapPlaceholder;

package/src/components/MapSelectPoint.tsx

@@ -0,0 +1,131 @@
+import React, {
+  forwardRef,
+  useImperativeHandle,
+  useRef,
+} from 'react';
+
+import {
+  Animated,
+  StyleSheet,
+  View,
+} from 'react-native';
+
+export type MapSelectPointType = {
+  up: () => void;
+  down: () => void;
+};
+
+const BORDER_WIDTH_UP = 6;
+const BORDER_WIDTH_DOWN = 3;
+const UP_POSITION = 10;
+const DURATION = 200;
+
+type MapSelectPointProps = {
+  color?: string;
+  backgroundColor?: string;
+
+}
+
+export const MapSelectPoint = forwardRef<MapSelectPointType, MapSelectPointProps>(
+  (_props, ref) => {
+    const position = useRef<'up' | 'down'>('down');
+
+    const borderWidth = useRef(new Animated.Value(BORDER_WIDTH_DOWN)).current;
+    const shadowHeight = useRef(new Animated.Value(0)).current;
+    const shadowMarginTop = useRef(new Animated.Value(0)).current;
+    const handleMarginTop = useRef(new Animated.Value(0)).current;
+
+    useImperativeHandle(ref, () => ({
+      up: () => moveMarker('up'),
+      down: () => moveMarker('down'),
+    }));
+
+    const animateTo = (
+      animatedValue: Animated.Value,
+      toValue: number
+    ) => {
+      return Animated.timing(animatedValue, {
+        toValue,
+        duration: DURATION,
+        useNativeDriver: false,
+      });
+    };
+
+    const moveMarker = (direction: 'up' | 'down') => {
+      if (position.current === direction) return;
+      position.current = direction;
+
+      if (direction === 'up') {
+        Animated.parallel([
+          animateTo(borderWidth, BORDER_WIDTH_UP),
+          animateTo(shadowHeight, 4),
+          animateTo(shadowMarginTop, UP_POSITION),
+          animateTo(handleMarginTop, -UP_POSITION),
+        ]).start();
+      } else {
+        Animated.parallel([
+          animateTo(borderWidth, BORDER_WIDTH_DOWN),
+          animateTo(shadowHeight, 0),
+          animateTo(shadowMarginTop, 0),
+          animateTo(handleMarginTop, 0),
+        ]).start();
+      }
+    };
+
+    return (
+      <View style={styles.container}>
+        <Animated.View style={{ marginTop: handleMarginTop }}>
+          <View style={styles.center}>
+            <Animated.View
+              style={[
+                styles.circle,
+                {
+                  borderWidth: borderWidth,
+                  borderColor: _props.color,
+                  backgroundColor: _props.backgroundColor,
+                },
+              ]}
+            />
+            <View style={[styles.line, { backgroundColor: _props.color }]} />
+          </View>
+        </Animated.View>
+        <Animated.View
+          style={[
+            styles.shadow,
+            {
+              height: shadowHeight,
+              marginTop: shadowMarginTop,
+              backgroundColor: _props.color,
+            },
+          ]}
+        />
+      </View>
+    );
+  }
+);
+
+const styles = StyleSheet.create({
+  container: {
+    alignItems: 'center',
+  },
+  center: {
+    alignItems: 'center',
+  },
+  circle: {
+    borderRadius: 100,
+    width: 28,
+    height: 28,
+  },
+  line: {
+    width: 2,
+    height: 15,
+
+  },
+  shadow: {
+    opacity: 0.6,
+    width: 4,
+    borderRadius: 100,
+  },
+});
+
+export default MapSelectPoint;

package/src/components/MapView.tsx

@@ -0,0 +1,333 @@
+import {
+  createContext,
+  forwardRef,
+  useCallback,
+  useContext,
+  useEffect,
+  useImperativeHandle,
+  useRef,
+  useState,
+} from 'react';
+
+import {
+  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,
+} from './types';
+import addMarkerWeb from './webFunctions/addMarkerWeb';
+import addPolygonWeb from './webFunctions/addPolygonWeb';
+import addPolylineWeb from './webFunctions/addPolylineWeb';
+import fitBoundsWeb from './webFunctions/fitBoundsWeb';
+import initWeb from './webFunctions/initWeb';
+import removeMarkerWeb from './webFunctions/removeMarkerWeb';
+import removePolygonWeb from './webFunctions/removePolygonWeb';
+import removePolylineWeb from './webFunctions/removePolylineWeb';
+
+interface MapViewProps {
+    children?: React.ReactNode;
+
+    theme: 'light' | 'dark';
+    center: [number, number];
+    zoom: number;
+
+    mapStyle: string;
+    style: StyleProp<ViewStyle>;
+    minZoom?: number;
+    maxZoom?: number;
+    zoomEnabled?: boolean;
+    scrollEnabled?: boolean;
+    onMoveStart?: (eventParams: EventParams) => void;
+    onMoveEnd?: (eventParams: EventParams) => void;
+    onZoomStart?: (eventParams: EventParams) => void;
+    onZoomEnd?: (eventParams: EventParams) => void;
+    onIdle?: (eventParams: EventParams) => void;
+    showSelectPoint?: boolean;
+    selectPointColor?: string;
+    selectPointBackgroundColor?: string;
+    performanceMode?: 'quality' | 'balanced' | 'performance';
+    pixelRatio?: number;
+    turboWhileMoving?: boolean;
+
+    sources: SourcesProps;
+}
+
+export type MapViewRef = {
+    fitBounds: () => void;
+};
+
+type MapViewRegistry = {
+    addMarker: (propsMarker: MarkerProps) => void;
+    removeMarker: (propsMarker: MarkerProps) => void;
+    addPolyline: (propsPolyline: PolylineProps) => void;
+    removePolyline: (propsPolyline: PolylineProps) => void;
+    addPolygon: (propsPolygon: PolygonProps) => void;
+    removePolygon: (propsPolygon: PolygonProps) => void;
+};
+
+const MapViewContext = createContext<MapViewRegistry | null>(null);
+
+export const useMapViewContext = () => {
+    const ctx = useContext(MapViewContext);
+    if (!ctx) throw new Error('useMapViewContext must be used within <MapView>');
+    return ctx;
+};
+
+const webFunctionsString = [
+    initWeb,
+    addMarkerWeb,
+    removeMarkerWeb,
+    addPolylineWeb,
+    removePolylineWeb,
+    addPolygonWeb,
+    removePolygonWeb,
+    fitBoundsWeb,
+].join('\n');
+
+const getBoundsFromCoords = (
+    coords: [number, number][]
+): [[number, number], [number, number]] => {
+    if (!coords.length) {
+        throw new Error('Empty coordinates array');
+    }
+
+    let minLng = coords[0]![0];
+    let maxLng = coords[0]![0];
+    let minLat = coords[0]![1];
+    let maxLat = coords[0]![1];
+
+    for (const [lng, lat] of coords) {
+        if (lng < minLng) minLng = lng;
+        if (lng > maxLng) maxLng = lng;
+        if (lat < minLat) minLat = lat;
+        if (lat > maxLat) maxLat = lat;
+    }
+
+    return [
+        [minLng, minLat],
+        [maxLng, maxLat],
+    ];
+};
+
+export const MapView = forwardRef<MapViewRef, MapViewProps>((props, ref) => {
+    const webViewRef = useRef<any>(null);
+    const [inited, setInited] = useState(false);
+    const [html, setHtml] = useState('');
+
+    const coordsInMapRef = useRef<Record<string, [number, number][]>>({});
+    const markersClickHandlers = useRef<Record<string, () => void>>({});
+    const mapSelectPointRef = useRef<MapSelectPointType | null>(null);
+    const performanceMode = props.performanceMode ?? (Platform.OS === 'android' ? 'balanced' : 'quality');
+
+    const fallbackPixelRatio = performanceMode === 'performance'
+        ? 0.85
+        : (performanceMode === 'balanced' && Platform.OS === 'android' ? 1 : undefined);
+
+    const sendToWebView = useCallback((message: { function: string; params: any }) => {
+        webViewRef.current?.postMessage(JSON.stringify(message));
+    }, []);
+
+    const initMap = useCallback(() => {
+        sendToWebView({
+            function: 'init',
+            params: {
+                style: props.mapStyle,
+                zoomEnabled: props.zoomEnabled ?? false,
+                scrollEnabled: props.scrollEnabled ?? false,
+                theme: props.theme,
+                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'),
+            },
+        });
+    }, [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]];
+        }
+
+        if (propsMarker.onPress) {
+            markersClickHandlers.current[propsMarker.uniqueId] = propsMarker.onPress;
+        } else {
+            delete markersClickHandlers.current[propsMarker.uniqueId];
+        }
+
+        sendToWebView({ function: 'addMarker', params: propsMarker });
+    }, [sendToWebView]);
+
+    const removeMarker = useCallback((propsMarker: MarkerProps) => {
+        delete coordsInMapRef.current[propsMarker.uniqueId];
+        delete markersClickHandlers.current[propsMarker.uniqueId];
+        sendToWebView({ function: 'removeMarker', params: propsMarker });
+    }, [sendToWebView]);
+
+    const addPolyline = useCallback((propsPolyline: PolylineProps) => {
+        if (propsPolyline.coordinates) {
+            coordsInMapRef.current[propsPolyline.uniqueId] = propsPolyline.coordinates;
+        }
+        sendToWebView({ function: 'addPolyline', params: propsPolyline });
+    }, [sendToWebView]);
+
+    const removePolyline = useCallback((propsPolyline: PolylineProps) => {
+        delete coordsInMapRef.current[propsPolyline.uniqueId];
+        sendToWebView({ function: 'removePolyline', params: propsPolyline });
+    }, [sendToWebView]);
+
+    const addPolygon = useCallback((propsPolygon: PolygonProps) => {
+        if (propsPolygon.coordinates) {
+            coordsInMapRef.current[propsPolygon.uniqueId] = propsPolygon.coordinates;
+        }
+        sendToWebView({ function: 'addPolygon', params: propsPolygon });
+    }, [sendToWebView]);
+
+    const removePolygon = useCallback((propsPolygon: PolygonProps) => {
+        delete coordsInMapRef.current[propsPolygon.uniqueId];
+        sendToWebView({ function: 'removePolygon', params: propsPolygon });
+    }, [sendToWebView]);
+
+    const fitBounds = useCallback(() => {
+        const coords = Object.values(coordsInMapRef.current).flat();
+        if (coords.length === 0) return;
+
+        const bounds = getBoundsFromCoords(coords);
+        sendToWebView({ function: 'fitBounds', params: { bounds } });
+    }, [sendToWebView]);
+
+    useImperativeHandle(ref, () => ({
+        fitBounds,
+    }), [fitBounds]);
+
+    useEffect(() => {
+        if (html) return;
+        maplibreHtmlMap(webFunctionsString, props.sources).then(setHtml);
+    }, [html, props.sources]);
+
+    const onReceiveMessageFromWebView = useCallback((data: string) => {
+        try {
+            const msg = JSON.parse(data);
+
+            if (msg.type === 'event') {
+                switch (msg.event) {
+                    case 'movestart':
+                        mapSelectPointRef.current?.up();
+                        props.onMoveStart?.(msg.params);
+                        break;
+                    case 'moveend':
+                        props.onMoveEnd?.(msg.params);
+                        mapSelectPointRef.current?.down();
+                        break;
+                    case 'zoomstart':
+                        props.onZoomStart?.(msg.params);
+                        break;
+                    case 'zoomend':
+                        props.onZoomEnd?.(msg.params);
+                        break;
+                    case 'idle':
+                        props.onIdle?.(msg.params);
+                        break;
+                }
+                return;
+            }
+
+            if (msg.type === 'inited') {
+                setInited(true);
+                return;
+            }
+
+            if (msg.type === 'scriptReady') {
+                initMap();
+                return;
+            }
+
+            if (msg.type === 'markerClick') {
+                const handler = markersClickHandlers.current[msg.uniqueId];
+                if (typeof handler === 'function') {
+                    handler();
+                }
+                return;
+            }
+        } catch (e) {
+            if (__DEV__) {
+                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,
+                }}
+            >
+                <WebView
+                    ref={webViewRef}
+                    style={{ flex: 1, backgroundColor: 'transparent' }}
+                    originWhitelist={['*']}
+                    source={{ html }}
+                    onMessage={event => {
+                        onReceiveMessageFromWebView(event.nativeEvent.data);
+                    }}
+                    javaScriptEnabled
+                    domStorageEnabled
+                    scrollEnabled={false}
+                />
+
+                {inited && props.children}
+
+                {inited && props.showSelectPoint && (
+                    <View
+                        pointerEvents="none"
+                        style={{
+                            justifyContent: 'center',
+                            alignItems: 'center',
+                            position: 'absolute',
+                            top: 0,
+                            left: 0,
+                            width: '100%',
+                            height: '100%',
+                        }}
+                    >
+                        <MapSelectPoint
+                            ref={mapSelectPointRef}
+                            color={props.selectPointColor ?? '#000'}
+                            backgroundColor={props.selectPointBackgroundColor ?? '#fff'}
+                        />
+                    </View>
+                )}
+            </MapViewContext.Provider>
+        </View>
+    );
+});

package/src/components/Marker.tsx

@@ -0,0 +1,31 @@
+import {
+  useEffect,
+  useRef,
+} from 'react';
+
+import { useMapViewContext } from './MapView';
+import { type MarkerProps } from './types';
+
+export const Marker = (props: MarkerProps) => {
+    const { addMarker, removeMarker } = useMapViewContext();
+
+    const lastRenderProps = useRef<string>('');
+    const propsRef = useRef(props);
+    propsRef.current = props;
+
+    useEffect(() => {
+        const serialized = JSON.stringify(props);
+        if (lastRenderProps.current !== serialized) {
+            addMarker(props);
+            lastRenderProps.current = serialized;
+        }
+    }, [props, addMarker]);
+
+    useEffect(() => {
+        return () => {
+            removeMarker(propsRef.current);
+        };
+    }, [removeMarker]);
+
+    return null;
+};

package/src/components/Polygon.tsx

@@ -0,0 +1,31 @@
+import {
+  useEffect,
+  useRef,
+} from 'react';
+
+import { useMapViewContext } from './MapView';
+import { type PolygonProps } from './types';
+
+export const Polygon = (props: PolygonProps) => {
+    const { addPolygon, removePolygon } = useMapViewContext();
+
+    const lastRenderProps = useRef<string>('');
+    const propsRef = useRef(props);
+    propsRef.current = props;
+
+    useEffect(() => {
+        const serialized = JSON.stringify(props);
+        if (lastRenderProps.current !== serialized) {
+            addPolygon(props);
+            lastRenderProps.current = serialized;
+        }
+    }, [props, addPolygon]);
+
+    useEffect(() => {
+        return () => {
+            removePolygon(propsRef.current);
+        };
+    }, [removePolygon]);
+
+    return null;
+};

package/src/components/Polyline.tsx

@@ -0,0 +1,31 @@
+import {
+  useEffect,
+  useRef,
+} from 'react';
+
+import { useMapViewContext } from './MapView';
+import type { PolylineProps } from './types';
+
+export const Polyline = (props: PolylineProps) => {
+    const { addPolyline, removePolyline } = useMapViewContext();
+
+    const lastRenderProps = useRef<string>('');
+    const propsRef = useRef(props);
+    propsRef.current = props;
+
+    useEffect(() => {
+        const serialized = JSON.stringify(props);
+        if (lastRenderProps.current !== serialized) {
+            addPolyline(props);
+            lastRenderProps.current = serialized;
+        }
+    }, [props, addPolyline]);
+
+    useEffect(() => {
+        return () => {
+            removePolyline(propsRef.current);
+        };
+    }, [removePolyline]);
+
+    return null;
+};

package/src/components/types.ts

@@ -0,0 +1,46 @@
+
+export type MarkerProps = {
+    uniqueId: string,
+    onPress?: () => void,
+    latitude: number,
+    longitude: number,
+    color?: string,
+
+    iconUrl?: string,
+    iconWidth?: number,
+    iconHeight?: number,
+
+}
+
+export type SourcesProps = {
+    maplibreJS: string;
+    maplibreCSS: string;
+    pmtilesJS: string;
+}
+
+export type PolygonProps = {
+    uniqueId: string,
+    coordinates: [number, number][],
+    fillColor?: string,
+    fillOpacity?: number,
+    strokeColor?: string,
+    strokeOpacity?: number,
+    strokeWidth?: number,
+
+}
+
+export type PolylineProps = {
+    uniqueId: string,
+    color?: string,
+    width?: number,
+    coordinates: [number, number][],
+
+}
+
+export type EventParams = {
+    center?: {
+        lng: number,
+        lat: number
+    },
+    zoom?: number
+}

package/src/components/webFunctions/addMarkerWeb.ts

@@ -0,0 +1,54 @@
+export default  /*js*/`
+
+                if(functionName === 'addMarker') {
+
+                  
+                    if(markers[params.uniqueId]){
+                        markers[params.uniqueId].remove();
+                        delete markers[params.uniqueId];
+                    }
+
+
+                if(!params?.iconUrl){
+
+
+                    markers[params.uniqueId] = new maplibregl.Marker({
+                    color: params.color ?? undefined,
+                }).setLngLat([params.longitude, params.latitude])
+                .addTo(map);
+                markers[params.uniqueId].getElement().addEventListener('click', function() {
+                    window.ReactNativeWebView.postMessage(JSON.stringify({
+                        type: 'markerClick',
+                        uniqueId: params.uniqueId
+                    }));
+                });
+
+                return;
+
+        }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';
+
+        el.addEventListener('click', () => {
+           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;
+
+                }
+            }
+
+            `;