react-native-maplibre-lite 0.1.1

package/src/components/webFunctions/addPolygonWeb.ts

@@ -0,0 +1,59 @@
+export default  /*js*/`
+
+if(functionName === 'addPolygon') {
+
+    var sourceId = params.uniqueId + '-polygons-source';
+    var fillLayerId = params.uniqueId + '-polygons-fill';
+    var strokeLayerId = params.uniqueId + '-polygons-stroke';
+
+    if(map.getLayer(strokeLayerId)) {
+        map.removeLayer(strokeLayerId);
+    }
+    if(map.getLayer(fillLayerId)) {
+        map.removeLayer(fillLayerId);
+    }
+    if(map.getSource(sourceId)) {
+        map.removeSource(sourceId);
+    }
+
+    map.addSource(sourceId, {
+        'type': 'geojson',
+        'data': {
+            'type': 'Feature',
+            'geometry': {
+                'type': 'Polygon',
+                'coordinates': [params.coordinates]
+            }
+        }
+    });
+
+    var fillPaint = {};
+    fillPaint['fill-color'] = params.fillColor || 'rgba(0,0,0,0)';
+    if(params.fillOpacity != null) fillPaint['fill-opacity'] = params.fillOpacity;
+    if(params.strokeColor) fillPaint['fill-outline-color'] = params.strokeColor;
+
+    map.addLayer({
+        'id': fillLayerId,
+        'type': 'fill',
+        'source': sourceId,
+        'layout': {},
+        'paint': fillPaint
+    });
+
+    if(params.strokeColor || params.strokeWidth) {
+        var linePaint = {};
+        if(params.strokeColor) linePaint['line-color'] = params.strokeColor;
+        if(params.strokeOpacity != null) linePaint['line-opacity'] = params.strokeOpacity;
+        if(params.strokeWidth != null) linePaint['line-width'] = params.strokeWidth;
+
+        map.addLayer({
+            'id': strokeLayerId,
+            'type': 'line',
+            'source': sourceId,
+            'layout': {},
+            'paint': linePaint
+        });
+    }
+
+}
+`

package/src/components/webFunctions/addPolylineWeb.ts

@@ -0,0 +1,45 @@
+export default  /*js*/`
+
+if(functionName === 'addPolyline') {
+
+   
+
+    var sourceId = params.uniqueId + '-polylines-source';
+    var layerId = params.uniqueId + '-polylines-layout';
+
+    if(map.getLayer(layerId)) {
+        map.removeLayer(layerId);
+    }
+
+    if(map.getSource(sourceId)) {
+        map.removeSource(sourceId);
+    }
+
+    map.addSource(sourceId, {
+        'type': 'geojson',
+        'data': {
+            'type': 'Feature',
+            'properties': {},
+            'geometry': {
+                'type': 'LineString',
+                'coordinates': params.coordinates
+            }
+        }
+    });
+
+    map.addLayer({
+        'id': layerId,
+        'type': 'line',
+        'source': sourceId,
+        'layout': {
+            'line-join': 'round',
+            'line-cap': 'round'
+        },
+        'paint': {
+            'line-color': params.color ?? '#000000',
+            'line-width': params.width ?? 4
+        }
+    });
+
+}
+`

package/src/components/webFunctions/fitBoundsWeb.ts

@@ -0,0 +1,8 @@
+export default  /*js*/`
+    if(functionName === 'fitBounds') {
+        map.fitBounds(params.bounds, {
+            padding: 40,
+            duration: 1000
+        });
+    }
+`;

package/src/components/webFunctions/initWeb.ts

@@ -0,0 +1,153 @@
+export default  /*js*/`
+
+  if(functionName === 'init') {
+
+            function simplifyStyle(mapInstance, aggressive){
+              if(!mapInstance) return;
+              var style = mapInstance.getStyle();
+              var layers = style && style.layers ? style.layers : [];
+              for(var i = 0; i < layers.length; i++){
+                var layer = layers[i];
+                var layerId = layer.id;
+                var layerType = layer.type;
+                var shouldHide = false;
+
+                if(layerType === 'symbol' || layerType === 'fill-extrusion' || layerType === 'hillshade'){
+                  shouldHide = true;
+                }
+
+                if(aggressive && (layerType === 'line' || layerType === 'circle')){
+                  var layerIdLower = String(layerId || '').toLowerCase();
+                  if(
+                    layerIdLower.indexOf('road-label') !== -1 ||
+                    layerIdLower.indexOf('poi') !== -1 ||
+                    layerIdLower.indexOf('label') !== -1 ||
+                    layerIdLower.indexOf('boundary') !== -1 ||
+                    layerIdLower.indexOf('admin') !== -1
+                  ){
+                    shouldHide = true;
+                  }
+                }
+
+                if(shouldHide){
+                  try{
+                    mapInstance.setLayoutProperty(layerId, 'visibility', 'none');
+                  } catch (_) {}
+                }
+              }
+            }
+
+            function setOverlayLayersVisibility(mapInstance, visibility){
+              if(!mapInstance) return;
+              var style = mapInstance.getStyle();
+              var layers = style && style.layers ? style.layers : [];
+              for(var i = 0; i < layers.length; i++){
+                var layer = layers[i];
+                var layerId = String(layer.id || '');
+                var isCustomOverlay =
+                  layerId.indexOf('-polylines-layout') !== -1 ||
+                  layerId.indexOf('-polygons-fill') !== -1 ||
+                  layerId.indexOf('-polygons-stroke') !== -1;
+
+                if(isCustomOverlay){
+                  try{
+                    mapInstance.setLayoutProperty(layerId, 'visibility', visibility);
+                  } catch (_) {}
+                }
+              }
+            }
+
+
+             map = new maplibregl.Map({
+            container: 'map',
+            style: params.style,
+              //Moscow coordinates
+              center: params.center, // starting position [lng, lat]
+              zoom: params.zoom, // starting zoom
+
+
+              // общий выключатель
+              zoomControl: params.zoomEnabled,
+              // точнее
+              scrollZoom: params.scrollEnabled,   // колесо мыши / трекпад
+              doubleClickZoom: params.zoomEnabled,
+              touchZoomRotate: params.zoomEnabled,
+              minZoom: params.minZoom,
+            maxZoom: params.maxZoom,
+            dragPan: params.scrollEnabled,   // запрет перетаскивания
+              dragRotate: params.zoomEnabled,
+              antialias: params.antialias ?? false,
+              crossSourceCollisions: params.crossSourceCollisions ?? true,
+              fadeDuration: params.fadeDuration ?? 120,
+              pixelRatio: params.pixelRatio,
+              renderWorldCopies: params.renderWorldCopies ?? true
+              });
+
+              if (typeof params.maxPitch === 'number') {
+                map.setMaxPitch(params.maxPitch);
+              }
+
+              if (params.maxPitch === 0) {
+                map.dragRotate.disable();
+                map.touchZoomRotate.disableRotation();
+              }
+
+
+
+                function getEventParams(){
+                    if(!map) return {
+                        center: null,
+                        zoom: null
+                    }
+                    var center = map.getCenter(); 
+                    var zoom = map.getZoom();
+
+
+                    return {
+                        center,
+                        zoom
+                    }
+                }
+                            
+              //movestart moveend
+              map.on("movestart",(event)=>{
+                if(params.turboWhileMoving){
+                  setOverlayLayersVisibility(map, 'none');
+                }
+                window.ReactNativeWebView.postMessage(JSON.stringify({ type: 'event', event: 'movestart', params: getEventParams() }));
+              })
+              map.on("moveend",(event)=>{
+                if(params.turboWhileMoving){
+                  setOverlayLayersVisibility(map, 'visible');
+                }
+                window.ReactNativeWebView.postMessage(JSON.stringify({ type: 'event', event: 'moveend', params: getEventParams() }));
+              })
+              /*zoomstart zoomend*/
+              map.on("zoomstart",(event)=>{
+                window.ReactNativeWebView.postMessage(JSON.stringify({ type: 'event', event: 'zoomstart', params: getEventParams() }));
+              })
+              map.on("zoomend",(event)=>{
+                window.ReactNativeWebView.postMessage(JSON.stringify({ type: 'event', event: 'zoomend', params: getEventParams() }));
+              })
+            
+
+              map.on("idle",(event)=>{
+                  window.ReactNativeWebView.postMessage(JSON.stringify({ type: 'event', event: 'idle', params: getEventParams() }));
+              })
+           
+          
+           
+
+
+              map.on('load', function () {
+                if(params.simplifyStyle){
+                  simplifyStyle(map, Boolean(params.aggressiveSimplifyStyle));
+                }
+            
+                window.ReactNativeWebView.postMessage(JSON.stringify({ type: 'inited' }));
+              });
+
+
+               
+}
+`

package/src/components/webFunctions/removeMarkerWeb.ts

@@ -0,0 +1,9 @@
+export default  /*js*/`
+
+                if(functionName === 'removeMarker') {
+                    if(markers[params.uniqueId]){
+                        markers[params.uniqueId].remove();
+                        delete markers[params.uniqueId];
+                    }
+                }
+            `

package/src/components/webFunctions/removePolygonWeb.ts

@@ -0,0 +1,19 @@
+export default  /*js*/`
+
+if(functionName === 'removePolygon') {
+    var sourceId = params.uniqueId + '-polygons-source';
+    var fillLayerId = params.uniqueId + '-polygons-fill';
+    var strokeLayerId = params.uniqueId + '-polygons-stroke';
+
+    if(map.getLayer(strokeLayerId)) {
+        map.removeLayer(strokeLayerId);
+    }
+    if(map.getLayer(fillLayerId)) {
+        map.removeLayer(fillLayerId);
+    }
+    if(map.getSource(sourceId)) {
+        map.removeSource(sourceId);
+    }
+
+}
+`

package/src/components/webFunctions/removePolylineWeb.ts

@@ -0,0 +1,14 @@
+export default  /*js*/`
+
+                if(functionName === 'removePolyline') {
+                    var sourceId = params.uniqueId + '-polylines-source';
+                    var layerId = params.uniqueId + '-polylines-layout';
+
+                    if(map.getLayer(layerId)) {
+                        map.removeLayer(layerId);
+                    }
+                    if(map.getSource(sourceId)) {
+                        map.removeSource(sourceId);
+                    }
+                }
+            `;

package/src/index.tsx

@@ -0,0 +1,10 @@
+import { MapView } from './components/MapView';
+import { Marker } from './components/Marker';
+import { Polygon } from './components/Polygon';
+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 } from './components/types';

package/src/webContent.ts

@@ -0,0 +1,182 @@
+import AsyncStorage from '@react-native-async-storage/async-storage';
+
+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) => {
+    //Загружаем скрипты как текст
+
+
+    let maplibreJS = await loadResources(sources.maplibreJS);
+    let maplibreCSS = await loadResources(sources.maplibreCSS);
+    let pmtiles = await loadResources(sources.pmtilesJS);
+
+
+
+    return `<!DOCTYPE html>
+<html lang="">
+
+<head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title></title>
+
+   
+    <script>${maplibreJS}</script>
+    
+    <style>${maplibreCSS}</style>
+
+
+    <script>${pmtiles}</script>
+
+    <style>
+
+
+    html,
+    body {
+    
+        overflow: hidden;
+        height: 100vh;
+        width: 100vw;
+        margin: 0;
+        padding: 0;
+
+    }
+
+
+
+    * {
+        -webkit-user-select: none;
+        -khtml-user-select: none;
+        -moz-user-select: none;
+        -ms-user-select: none;
+        user-select: none;
+    }
+
+
+    * {
+        -webkit-touch-callout: none;
+        -moz-touch-callout: none;
+        -ms-touch-callout: none;
+        touch-callout: none;
+    }
+
+    * {
+        -webkit-user-drag: none;
+        -moz-user-drag: none;
+        -ms-user-drag: none;
+        user-drag: none;
+    }
+
+    .maplibregl-ctrl-bottom-right {
+        display: none;
+    }
+
+
+     #map {
+   
+  
+        height: 100vh;
+        width: 100vw;
+    }
+</style>
+
+</head>
+
+<body>
+    <div id="map"></div>
+</body>
+
+<script>
+
+var markers = {};
+var polylines = {};
+var polygons = {};
+var rectangles = {};
+var layouts = {};
+
+var map = null;
+
+try {
+    let 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);
+        });
+        window.addEventListener("message", function (event) {
+            receiveMessage(event.data);
+        });
+         if (window.ReactNativeWebView) {
+            window.ReactNativeWebView.postMessage(JSON.stringify({ type: 'scriptReady' }));
+        }
+    }
+
+
+  const receiveMessage = (message) => {
+
+      var data = JSON.parse(message);
+
+      var functionName = data.function;
+      var params = data.params;
+
+
+
+
+
+
+
+      try{
+
+${webFunctions}
+
+} catch (e) {
+    console.error('WebView function error:', functionName, e.message);
+    window.ReactNativeWebView.postMessage(JSON.stringify({
+        type: 'error',
+        data: {
+            target: functionName,
+            message: String(e.message),
+        }
+    }));
+}
+    };
+
+
+</script>
+
+
+</html>`;
+};