react-native-maplibre-lite 0.1.3 → 0.1.4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +133 -45
- package/lib/module/components/MapView.js +55 -20
- package/lib/module/components/MapView.js.map +1 -1
- package/lib/module/components/webMapBuild.js +4 -0
- package/lib/module/components/webMapBuild.js.map +1 -0
- package/lib/typescript/src/components/MapView.d.ts +28 -2
- package/lib/typescript/src/components/MapView.d.ts.map +1 -1
- package/lib/typescript/src/components/types.d.ts +30 -5
- package/lib/typescript/src/components/types.d.ts.map +1 -1
- package/lib/typescript/src/components/webMapBuild.d.ts +2 -0
- package/lib/typescript/src/components/webMapBuild.d.ts.map +1 -0
- package/lib/typescript/src/index.d.ts +1 -1
- package/lib/typescript/src/index.d.ts.map +1 -1
- package/package.json +3 -2
- package/src/components/MapView.tsx +72 -33
- package/src/components/types.ts +37 -6
- package/src/components/webMapBuild.ts +4 -0
- package/src/index.tsx +13 -1
- package/lib/module/components/webContent.js +0 -159
- package/lib/module/components/webContent.js.map +0 -1
- package/lib/module/components/webFunctions/addMarkerWeb.js +0 -83
- package/lib/module/components/webFunctions/addMarkerWeb.js.map +0 -1
- package/lib/module/components/webFunctions/addPolygonWeb.js +0 -62
- package/lib/module/components/webFunctions/addPolygonWeb.js.map +0 -1
- package/lib/module/components/webFunctions/addPolylineWeb.js +0 -48
- package/lib/module/components/webFunctions/addPolylineWeb.js.map +0 -1
- package/lib/module/components/webFunctions/fitBoundsWeb.js +0 -15
- package/lib/module/components/webFunctions/fitBoundsWeb.js.map +0 -1
- package/lib/module/components/webFunctions/flyToWeb.js +0 -14
- package/lib/module/components/webFunctions/flyToWeb.js.map +0 -1
- package/lib/module/components/webFunctions/initWeb.js +0 -188
- package/lib/module/components/webFunctions/initWeb.js.map +0 -1
- package/lib/module/components/webFunctions/removeMarkerWeb.js +0 -12
- package/lib/module/components/webFunctions/removeMarkerWeb.js.map +0 -1
- package/lib/module/components/webFunctions/removePolygonWeb.js +0 -22
- package/lib/module/components/webFunctions/removePolygonWeb.js.map +0 -1
- package/lib/module/components/webFunctions/removePolylineWeb.js +0 -17
- package/lib/module/components/webFunctions/removePolylineWeb.js.map +0 -1
- package/lib/module/components/webFunctions/updateWeb.js +0 -78
- package/lib/module/components/webFunctions/updateWeb.js.map +0 -1
- package/lib/typescript/src/components/webContent.d.ts +0 -3
- package/lib/typescript/src/components/webContent.d.ts.map +0 -1
- package/lib/typescript/src/components/webFunctions/addMarkerWeb.d.ts +0 -3
- package/lib/typescript/src/components/webFunctions/addMarkerWeb.d.ts.map +0 -1
- package/lib/typescript/src/components/webFunctions/addPolygonWeb.d.ts +0 -3
- package/lib/typescript/src/components/webFunctions/addPolygonWeb.d.ts.map +0 -1
- package/lib/typescript/src/components/webFunctions/addPolylineWeb.d.ts +0 -3
- package/lib/typescript/src/components/webFunctions/addPolylineWeb.d.ts.map +0 -1
- package/lib/typescript/src/components/webFunctions/fitBoundsWeb.d.ts +0 -3
- package/lib/typescript/src/components/webFunctions/fitBoundsWeb.d.ts.map +0 -1
- package/lib/typescript/src/components/webFunctions/flyToWeb.d.ts +0 -2
- package/lib/typescript/src/components/webFunctions/flyToWeb.d.ts.map +0 -1
- package/lib/typescript/src/components/webFunctions/initWeb.d.ts +0 -3
- package/lib/typescript/src/components/webFunctions/initWeb.d.ts.map +0 -1
- package/lib/typescript/src/components/webFunctions/removeMarkerWeb.d.ts +0 -3
- package/lib/typescript/src/components/webFunctions/removeMarkerWeb.d.ts.map +0 -1
- package/lib/typescript/src/components/webFunctions/removePolygonWeb.d.ts +0 -3
- package/lib/typescript/src/components/webFunctions/removePolygonWeb.d.ts.map +0 -1
- package/lib/typescript/src/components/webFunctions/removePolylineWeb.d.ts +0 -3
- package/lib/typescript/src/components/webFunctions/removePolylineWeb.d.ts.map +0 -1
- package/lib/typescript/src/components/webFunctions/updateWeb.d.ts +0 -3
- package/lib/typescript/src/components/webFunctions/updateWeb.d.ts.map +0 -1
- package/src/components/webContent.ts +0 -163
- package/src/components/webFunctions/addMarkerWeb.ts +0 -80
- package/src/components/webFunctions/addPolygonWeb.ts +0 -59
- package/src/components/webFunctions/addPolylineWeb.ts +0 -45
- package/src/components/webFunctions/fitBoundsWeb.ts +0 -12
- package/src/components/webFunctions/flyToWeb.ts +0 -11
- package/src/components/webFunctions/initWeb.ts +0 -185
- package/src/components/webFunctions/removeMarkerWeb.ts +0 -9
- package/src/components/webFunctions/removePolygonWeb.ts +0 -19
- package/src/components/webFunctions/removePolylineWeb.ts +0 -14
- package/src/components/webFunctions/updateWeb.ts +0 -75
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"names":[],"sourceRoot":"../../../../src","sources":["components/webFunctions/removePolylineWeb.ts"],"mappings":";;AAAA,eAAgB,MAAM;AACtB;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,aAAa","ignoreList":[]}
|
|
@@ -1,78 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
|
|
3
|
-
export default /*js*/`
|
|
4
|
-
|
|
5
|
-
function centersAreEqual(a, b, epsilon = 1e-6) {
|
|
6
|
-
return (
|
|
7
|
-
Math.abs(a.lng - b[0]) < epsilon &&
|
|
8
|
-
Math.abs(a.lat - b[1]) < epsilon
|
|
9
|
-
);
|
|
10
|
-
}
|
|
11
|
-
|
|
12
|
-
if(functionName === 'update') {
|
|
13
|
-
|
|
14
|
-
/* if(params && params.center) {
|
|
15
|
-
var newCenter = params.center;
|
|
16
|
-
var currentCenter = map.getCenter();
|
|
17
|
-
|
|
18
|
-
if (!centersAreEqual(currentCenter, newCenter)) {
|
|
19
|
-
map.setCenter(newCenter);
|
|
20
|
-
}
|
|
21
|
-
}
|
|
22
|
-
|
|
23
|
-
if(params && params.zoom != null) {
|
|
24
|
-
var newZoom = params.zoom;
|
|
25
|
-
var currentZoom = map.getZoom();
|
|
26
|
-
|
|
27
|
-
if(currentZoom !== newZoom) {
|
|
28
|
-
map.setZoom(newZoom);
|
|
29
|
-
}
|
|
30
|
-
}*/
|
|
31
|
-
|
|
32
|
-
if(params && params.minZoom != null) {
|
|
33
|
-
var newMinZoom = params.minZoom;
|
|
34
|
-
var currentMinZoom = map.getMinZoom();
|
|
35
|
-
|
|
36
|
-
if(currentMinZoom !== newMinZoom) {
|
|
37
|
-
map.setMinZoom(newMinZoom);
|
|
38
|
-
}
|
|
39
|
-
}
|
|
40
|
-
|
|
41
|
-
if(params && params.maxZoom != null) {
|
|
42
|
-
var newMaxZoom = params.maxZoom;
|
|
43
|
-
var currentMaxZoom = map.getMaxZoom();
|
|
44
|
-
|
|
45
|
-
if(currentMaxZoom !== newMaxZoom) {
|
|
46
|
-
map.setMaxZoom(newMaxZoom);
|
|
47
|
-
}
|
|
48
|
-
}
|
|
49
|
-
|
|
50
|
-
if(params && params.zoomEnabled != null) {
|
|
51
|
-
if(params.zoomEnabled) {
|
|
52
|
-
map.doubleClickZoom.enable();
|
|
53
|
-
map.touchZoomRotate.enable();
|
|
54
|
-
map.dragRotate.enable();
|
|
55
|
-
} else {
|
|
56
|
-
map.doubleClickZoom.disable();
|
|
57
|
-
map.touchZoomRotate.disable();
|
|
58
|
-
map.dragRotate.disable();
|
|
59
|
-
}
|
|
60
|
-
}
|
|
61
|
-
|
|
62
|
-
if(params && params.scrollEnabled != null) {
|
|
63
|
-
if(params.scrollEnabled) {
|
|
64
|
-
map.scrollZoom.enable();
|
|
65
|
-
map.dragPan.enable();
|
|
66
|
-
} else {
|
|
67
|
-
map.scrollZoom.disable();
|
|
68
|
-
map.dragPan.disable();
|
|
69
|
-
}
|
|
70
|
-
}
|
|
71
|
-
|
|
72
|
-
if(params && params.mapStyle) {
|
|
73
|
-
map.setStyle(params.mapStyle);
|
|
74
|
-
}
|
|
75
|
-
|
|
76
|
-
}
|
|
77
|
-
`;
|
|
78
|
-
//# sourceMappingURL=updateWeb.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"names":[],"sourceRoot":"../../../../src","sources":["components/webFunctions/updateWeb.ts"],"mappings":";;AAAA,eAAe,MAAM;AACrB;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC","ignoreList":[]}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"webContent.d.ts","sourceRoot":"","sources":["../../../../src/components/webContent.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAC,YAAY,EAAC,MAAM,SAAS,CAAC;AAG1C,eAAO,MAAM,eAAe,GAAU,cAAc,MAAM,EAAE,SAAS,YAAY,EAAE,WAAW,OAAO,oBA+JpG,CAAC"}
|
|
@@ -1,3 +0,0 @@
|
|
|
1
|
-
declare const _default: "\n\n if(functionName === 'addMarker') {\n\n\n if(markers[params.uniqueId]){\n markers[params.uniqueId].remove();\n delete markers[params.uniqueId];\n }\n\n\n if(params && params.html){\n\n var el = document.createElement('div');\n el.className = 'marker';\n el.innerHTML = params.html;\n\n el.addEventListener('click', function() {\n window.ReactNativeWebView.postMessage(JSON.stringify({\n type: 'markerClick',\n uniqueId: params.uniqueId\n }));\n });\n\n\n markers[params.uniqueId] = new maplibregl.Marker({element: el})\n .setLngLat([params.longitude, params.latitude])\n .addTo(map);\n\n return;\n\n }\n\n\n if(!params || !params.iconUrl){\n\n\n markers[params.uniqueId] = new maplibregl.Marker({\n color: (params.color != null) ? params.color : undefined,\n }).setLngLat([params.longitude, params.latitude])\n .addTo(map);\n markers[params.uniqueId].getElement().addEventListener('click', function() {\n window.ReactNativeWebView.postMessage(JSON.stringify({\n type: 'markerClick',\n uniqueId: params.uniqueId\n }));\n });\n\n return;\n\n }else{\n\n\n var el2 = document.createElement('div');\n el2.className = 'marker';\n el2.style.backgroundImage = 'url(' + params.iconUrl + ')';\n el2.style.backgroundSize = 'cover';\n el2.style.backgroundPosition = 'center';\n el2.style.backgroundRepeat = 'no-repeat';\n el2.style.width = params.iconWidth + 'px';\n el2.style.height = params.iconHeight + 'px';\n\n el2.addEventListener('click', function() {\n window.ReactNativeWebView.postMessage(JSON.stringify({\n type: 'markerClick',\n uniqueId: params.uniqueId\n }));\n });\n\n \n markers[params.uniqueId] = new maplibregl.Marker({element: el2})\n .setLngLat([params.longitude, params.latitude])\n .addTo(map);\n\n return;\n\n }\n }\n\n ";
|
|
2
|
-
export default _default;
|
|
3
|
-
//# sourceMappingURL=addMarkerWeb.d.ts.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"addMarkerWeb.d.ts","sourceRoot":"","sources":["../../../../../src/components/webFunctions/addMarkerWeb.ts"],"names":[],"mappings":";AAAA,wBA+Ec"}
|
|
@@ -1,3 +0,0 @@
|
|
|
1
|
-
declare const _default: "\n\nif(functionName === 'addPolygon') {\n\n var sourceId = params.uniqueId + '-polygons-source';\n var fillLayerId = params.uniqueId + '-polygons-fill';\n var strokeLayerId = params.uniqueId + '-polygons-stroke';\n\n if(map.getLayer(strokeLayerId)) {\n map.removeLayer(strokeLayerId);\n }\n if(map.getLayer(fillLayerId)) {\n map.removeLayer(fillLayerId);\n }\n if(map.getSource(sourceId)) {\n map.removeSource(sourceId);\n }\n\n map.addSource(sourceId, {\n 'type': 'geojson',\n 'data': {\n 'type': 'Feature',\n 'geometry': {\n 'type': 'Polygon',\n 'coordinates': [params.coordinates]\n }\n }\n });\n\n var fillPaint = {};\n fillPaint['fill-color'] = params.fillColor || 'rgba(0,0,0,0)';\n if(params.fillOpacity != null) fillPaint['fill-opacity'] = params.fillOpacity;\n if(params.strokeColor) fillPaint['fill-outline-color'] = params.strokeColor;\n\n map.addLayer({\n 'id': fillLayerId,\n 'type': 'fill',\n 'source': sourceId,\n 'layout': {},\n 'paint': fillPaint\n });\n\n if(params.strokeColor || params.strokeWidth) {\n var linePaint = {};\n if(params.strokeColor) linePaint['line-color'] = params.strokeColor;\n if(params.strokeOpacity != null) linePaint['line-opacity'] = params.strokeOpacity;\n if(params.strokeWidth != null) linePaint['line-width'] = params.strokeWidth;\n\n map.addLayer({\n 'id': strokeLayerId,\n 'type': 'line',\n 'source': sourceId,\n 'layout': {},\n 'paint': linePaint\n });\n }\n\n}\n";
|
|
2
|
-
export default _default;
|
|
3
|
-
//# sourceMappingURL=addPolygonWeb.d.ts.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"addPolygonWeb.d.ts","sourceRoot":"","sources":["../../../../../src/components/webFunctions/addPolygonWeb.ts"],"names":[],"mappings":";AAAA,wBA0DC"}
|
|
@@ -1,3 +0,0 @@
|
|
|
1
|
-
declare const _default: "\n\nif(functionName === 'addPolyline') {\n\n \n\n var sourceId = params.uniqueId + '-polylines-source';\n var layerId = params.uniqueId + '-polylines-layout';\n\n if(map.getLayer(layerId)) {\n map.removeLayer(layerId);\n }\n\n if(map.getSource(sourceId)) {\n map.removeSource(sourceId);\n }\n\n map.addSource(sourceId, {\n 'type': 'geojson',\n 'data': {\n 'type': 'Feature',\n 'properties': {},\n 'geometry': {\n 'type': 'LineString',\n 'coordinates': params.coordinates\n }\n }\n });\n\n map.addLayer({\n 'id': layerId,\n 'type': 'line',\n 'source': sourceId,\n 'layout': {\n 'line-join': 'round',\n 'line-cap': 'round'\n },\n 'paint': {\n 'line-color': (params.color != null) ? params.color : '#000000',\n 'line-width': (params.width != null) ? params.width : 4\n }\n });\n\n}\n";
|
|
2
|
-
export default _default;
|
|
3
|
-
//# sourceMappingURL=addPolylineWeb.d.ts.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"addPolylineWeb.d.ts","sourceRoot":"","sources":["../../../../../src/components/webFunctions/addPolylineWeb.ts"],"names":[],"mappings":";AAAA,wBA4CC"}
|
|
@@ -1,3 +0,0 @@
|
|
|
1
|
-
declare const _default: "\n if(functionName === 'fitBounds') {\n\n var padding = (params && params.padding) ? params.padding : 40;\n var duration = (params && params.duration) ? params.duration : 500;\n\n map.fitBounds(params.bounds, {\n padding: padding,\n duration: duration\n });\n }\n";
|
|
2
|
-
export default _default;
|
|
3
|
-
//# sourceMappingURL=fitBoundsWeb.d.ts.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"fitBoundsWeb.d.ts","sourceRoot":"","sources":["../../../../../src/components/webFunctions/fitBoundsWeb.ts"],"names":[],"mappings":";AAAA,wBAWE"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"flyToWeb.d.ts","sourceRoot":"","sources":["../../../../../src/components/webFunctions/flyToWeb.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,QAAQ,uQAUpB,CAAC"}
|
|
@@ -1,3 +0,0 @@
|
|
|
1
|
-
declare const _default: "\n\n if(functionName === 'init') {\n\n function simplifyStyle(mapInstance, aggressive){\n if(!mapInstance) return;\n var style = mapInstance.getStyle();\n var layers = style && style.layers ? style.layers : [];\n for(var i = 0; i < layers.length; i++){\n var layer = layers[i];\n var layerId = layer.id;\n var layerType = layer.type;\n var shouldHide = false;\n\n // Keep labels (streets / addresses) visible \u2014 hide only expensive visual layers by default.\n if(layerType === 'fill-extrusion' || layerType === 'hillshade'){\n shouldHide = true;\n }\n\n if(layerType === 'symbol' && aggressive){\n var idLower = String(layerId || '').toLowerCase();\n var sourceLayerLower = String(layer['source-layer'] || '').toLowerCase();\n\n // Keep road + address/house number labels.\n var keepLabel =\n idLower.indexOf('road') !== -1 ||\n idLower.indexOf('street') !== -1 ||\n idLower.indexOf('housenumber') !== -1 ||\n idLower.indexOf('house_number') !== -1 ||\n idLower.indexOf('house-number') !== -1 ||\n idLower.indexOf('address') !== -1 ||\n sourceLayerLower.indexOf('housenumber') !== -1 ||\n sourceLayerLower.indexOf('house') !== -1 ||\n sourceLayerLower.indexOf('address') !== -1;\n\n // Hide most POI/other symbols in aggressive mode.\n var hideSymbol =\n idLower.indexOf('poi') !== -1 ||\n idLower.indexOf('transit') !== -1 ||\n idLower.indexOf('airport') !== -1 ||\n idLower.indexOf('rail') !== -1 ||\n idLower.indexOf('ferry') !== -1;\n\n if(!keepLabel && hideSymbol){\n shouldHide = true;\n }\n }\n\n if(aggressive && (layerType === 'line' || layerType === 'circle')){\n var layerIdLower = String(layerId || '').toLowerCase();\n if(\n layerIdLower.indexOf('road-label') !== -1 ||\n layerIdLower.indexOf('poi') !== -1 ||\n layerIdLower.indexOf('label') !== -1 ||\n layerIdLower.indexOf('boundary') !== -1 ||\n layerIdLower.indexOf('admin') !== -1\n ){\n shouldHide = true;\n }\n }\n\n if(shouldHide){\n try{\n mapInstance.setLayoutProperty(layerId, 'visibility', 'none');\n } catch (_) {}\n }\n }\n }\n\n function setOverlayLayersVisibility(mapInstance, visibility){\n if(!mapInstance) return;\n var style = mapInstance.getStyle();\n var layers = style && style.layers ? style.layers : [];\n for(var i = 0; i < layers.length; i++){\n var layer = layers[i];\n var layerId = String(layer.id || '');\n var isCustomOverlay =\n layerId.indexOf('-polylines-layout') !== -1 ||\n layerId.indexOf('-polygons-fill') !== -1 ||\n layerId.indexOf('-polygons-stroke') !== -1;\n\n if(isCustomOverlay){\n try{\n mapInstance.setLayoutProperty(layerId, 'visibility', visibility);\n } catch (_) {}\n }\n }\n }\n\n\n\n\n map = new maplibregl.Map({\n container: 'map',\n style: params.mapStyle,\n center: params.center,\n zoom: params.zoom,\n scrollZoom: params.scrollEnabled,\n doubleClickZoom: params.zoomEnabled,\n touchZoomRotate: params.zoomEnabled,\n minZoom: params.minZoom,\n maxZoom: params.maxZoom,\n dragPan: params.scrollEnabled,\n dragRotate: params.zoomEnabled,\n antialias: params.antialias ?? false,\n crossSourceCollisions: params.crossSourceCollisions ?? true,\n fadeDuration: params.fadeDuration ?? 120,\n pixelRatio: params.pixelRatio,\n renderWorldCopies: params.renderWorldCopies ?? true\n });\n\n if (typeof params.maxPitch === 'number') {\n map.setMaxPitch(params.maxPitch);\n }\n\n if (params.maxPitch === 0) {\n map.dragRotate.disable();\n map.touchZoomRotate.disableRotation();\n }\n\n\n\n function getEventParams(){\n if(!map) return {\n center: null,\n zoom: null\n }\n var center = map.getCenter(); \n var zoom = map.getZoom();\n\n\n return {\n center: center,\n zoom: zoom\n }\n }\n\n map.on('error', function(event){\n\n \n window.ReactNativeWebView.postMessage(JSON.stringify({ type: 'event', event: 'error', params: event }));\n })\n \n //movestart moveend\n map.on(\"movestart\", function(event){\n if(params.turboWhileMoving){\n setOverlayLayersVisibility(map, 'none');\n }\n window.ReactNativeWebView.postMessage(JSON.stringify({ type: 'event', event: 'movestart', params: getEventParams() }));\n })\n map.on(\"moveend\", function(event){\n if(params.turboWhileMoving){\n setOverlayLayersVisibility(map, 'visible');\n }\n window.ReactNativeWebView.postMessage(JSON.stringify({ type: 'event', event: 'moveend', params: getEventParams() }));\n })\n /*zoomstart zoomend*/\n map.on(\"zoomstart\", function(event){\n window.ReactNativeWebView.postMessage(JSON.stringify({ type: 'event', event: 'zoomstart', params: getEventParams() }));\n })\n map.on(\"zoomend\", function(event){\n window.ReactNativeWebView.postMessage(JSON.stringify({ type: 'event', event: 'zoomend', params: getEventParams() }));\n })\n \n\n map.on(\"idle\", function(event){\n window.ReactNativeWebView.postMessage(JSON.stringify({ type: 'event', event: 'idle', params: getEventParams() }));\n })\n \n \n \n\n\n map.on('load', function () {\n if(params.simplifyStyle){\n simplifyStyle(map, Boolean(params.aggressiveSimplifyStyle));\n }\n \n window.ReactNativeWebView.postMessage(JSON.stringify({ type: 'inited' }));\n });\n\n\n \n}\n";
|
|
2
|
-
export default _default;
|
|
3
|
-
//# sourceMappingURL=initWeb.d.ts.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"initWeb.d.ts","sourceRoot":"","sources":["../../../../../src/components/webFunctions/initWeb.ts"],"names":[],"mappings":";AAAA,wBAwLC"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"removeMarkerWeb.d.ts","sourceRoot":"","sources":["../../../../../src/components/webFunctions/removeMarkerWeb.ts"],"names":[],"mappings":";AAAA,wBAQa"}
|
|
@@ -1,3 +0,0 @@
|
|
|
1
|
-
declare const _default: "\n\nif(functionName === 'removePolygon') {\n var sourceId = params.uniqueId + '-polygons-source';\n var fillLayerId = params.uniqueId + '-polygons-fill';\n var strokeLayerId = params.uniqueId + '-polygons-stroke';\n\n if(map.getLayer(strokeLayerId)) {\n map.removeLayer(strokeLayerId);\n }\n if(map.getLayer(fillLayerId)) {\n map.removeLayer(fillLayerId);\n }\n if(map.getSource(sourceId)) {\n map.removeSource(sourceId);\n }\n\n}\n";
|
|
2
|
-
export default _default;
|
|
3
|
-
//# sourceMappingURL=removePolygonWeb.d.ts.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"removePolygonWeb.d.ts","sourceRoot":"","sources":["../../../../../src/components/webFunctions/removePolygonWeb.ts"],"names":[],"mappings":";AAAA,wBAkBC"}
|
|
@@ -1,3 +0,0 @@
|
|
|
1
|
-
declare const _default: "\n\n if(functionName === 'removePolyline') {\n var sourceId = params.uniqueId + '-polylines-source';\n var layerId = params.uniqueId + '-polylines-layout';\n\n if(map.getLayer(layerId)) {\n map.removeLayer(layerId);\n }\n if(map.getSource(sourceId)) {\n map.removeSource(sourceId);\n }\n }\n ";
|
|
2
|
-
export default _default;
|
|
3
|
-
//# sourceMappingURL=removePolylineWeb.d.ts.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"removePolylineWeb.d.ts","sourceRoot":"","sources":["../../../../../src/components/webFunctions/removePolylineWeb.ts"],"names":[],"mappings":";AAAA,wBAac"}
|
|
@@ -1,3 +0,0 @@
|
|
|
1
|
-
declare const _default: "\n\n function centersAreEqual(a, b, epsilon = 1e-6) {\n return (\n Math.abs(a.lng - b[0]) < epsilon &&\n Math.abs(a.lat - b[1]) < epsilon\n );\n }\n\n if(functionName === 'update') {\n\n /* if(params && params.center) {\n var newCenter = params.center;\n var currentCenter = map.getCenter();\n\n if (!centersAreEqual(currentCenter, newCenter)) {\n map.setCenter(newCenter);\n }\n }\n\n if(params && params.zoom != null) {\n var newZoom = params.zoom;\n var currentZoom = map.getZoom();\n\n if(currentZoom !== newZoom) {\n map.setZoom(newZoom);\n }\n }*/\n\n if(params && params.minZoom != null) {\n var newMinZoom = params.minZoom;\n var currentMinZoom = map.getMinZoom();\n\n if(currentMinZoom !== newMinZoom) {\n map.setMinZoom(newMinZoom);\n }\n }\n\n if(params && params.maxZoom != null) {\n var newMaxZoom = params.maxZoom;\n var currentMaxZoom = map.getMaxZoom();\n\n if(currentMaxZoom !== newMaxZoom) {\n map.setMaxZoom(newMaxZoom);\n }\n }\n\n if(params && params.zoomEnabled != null) {\n if(params.zoomEnabled) {\n map.doubleClickZoom.enable();\n map.touchZoomRotate.enable();\n map.dragRotate.enable();\n } else {\n map.doubleClickZoom.disable();\n map.touchZoomRotate.disable();\n map.dragRotate.disable();\n }\n }\n\n if(params && params.scrollEnabled != null) {\n if(params.scrollEnabled) {\n map.scrollZoom.enable();\n map.dragPan.enable();\n } else {\n map.scrollZoom.disable();\n map.dragPan.disable();\n }\n }\n\n if(params && params.mapStyle) {\n map.setStyle(params.mapStyle);\n }\n\n }\n";
|
|
2
|
-
export default _default;
|
|
3
|
-
//# sourceMappingURL=updateWeb.d.ts.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"updateWeb.d.ts","sourceRoot":"","sources":["../../../../../src/components/webFunctions/updateWeb.ts"],"names":[],"mappings":";AAAA,wBA0EE"}
|
|
@@ -1,163 +0,0 @@
|
|
|
1
|
-
import type {SourcesProps} from './types';
|
|
2
|
-
import {loadResources} from './utils';
|
|
3
|
-
|
|
4
|
-
export const maplibreHtmlMap = async (webFunctions: string, sources: SourcesProps, debugMode: boolean) => {
|
|
5
|
-
//Загружаем скрипты как текст
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
let maplibreJS = await loadResources(sources.maplibreJS);
|
|
9
|
-
let maplibreCSS = await loadResources(sources.maplibreCSS);
|
|
10
|
-
let pmtiles = await loadResources(sources.pmtilesJS);
|
|
11
|
-
|
|
12
|
-
console.log('MapLibre: maplibreJS', !!maplibreJS ? 'true' : 'false');
|
|
13
|
-
console.log('MapLibre: maplibreCSS', !!maplibreCSS ? 'true' : 'false');
|
|
14
|
-
console.log('MapLibre: pmtiles', !!pmtiles ? 'true' : 'false');
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
return `<!DOCTYPE html>
|
|
19
|
-
<html lang="">
|
|
20
|
-
|
|
21
|
-
<head>
|
|
22
|
-
<meta charset="utf-8" />
|
|
23
|
-
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
|
24
|
-
<title></title>
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
<script>${maplibreJS}</script>
|
|
28
|
-
|
|
29
|
-
<style>${maplibreCSS}</style>
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
<script>${pmtiles}</script>
|
|
33
|
-
|
|
34
|
-
<style>
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
html,
|
|
38
|
-
body {
|
|
39
|
-
|
|
40
|
-
overflow: hidden;
|
|
41
|
-
height: 100vh;
|
|
42
|
-
width: 100vw;
|
|
43
|
-
margin: 0;
|
|
44
|
-
padding: 0;
|
|
45
|
-
|
|
46
|
-
}
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
* {
|
|
51
|
-
-webkit-user-select: none;
|
|
52
|
-
-khtml-user-select: none;
|
|
53
|
-
-moz-user-select: none;
|
|
54
|
-
-ms-user-select: none;
|
|
55
|
-
user-select: none;
|
|
56
|
-
}
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
* {
|
|
60
|
-
-webkit-touch-callout: none;
|
|
61
|
-
-moz-touch-callout: none;
|
|
62
|
-
-ms-touch-callout: none;
|
|
63
|
-
touch-callout: none;
|
|
64
|
-
}
|
|
65
|
-
|
|
66
|
-
* {
|
|
67
|
-
-webkit-user-drag: none;
|
|
68
|
-
-moz-user-drag: none;
|
|
69
|
-
-ms-user-drag: none;
|
|
70
|
-
user-drag: none;
|
|
71
|
-
}
|
|
72
|
-
|
|
73
|
-
.maplibregl-ctrl-bottom-right {
|
|
74
|
-
display: none;
|
|
75
|
-
}
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
#map {
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
height: 100vh;
|
|
82
|
-
width: 100vw;
|
|
83
|
-
}
|
|
84
|
-
</style>
|
|
85
|
-
|
|
86
|
-
</head>
|
|
87
|
-
|
|
88
|
-
<body>
|
|
89
|
-
<div id="map"></div>
|
|
90
|
-
</body>
|
|
91
|
-
|
|
92
|
-
<script>
|
|
93
|
-
|
|
94
|
-
var markers = {};
|
|
95
|
-
var polylines = {};
|
|
96
|
-
var polygons = {};
|
|
97
|
-
var rectangles = {};
|
|
98
|
-
var layouts = {};
|
|
99
|
-
|
|
100
|
-
var map = null;
|
|
101
|
-
|
|
102
|
-
try {
|
|
103
|
-
var protocol = new pmtiles.Protocol();
|
|
104
|
-
maplibregl.addProtocol("pmtiles", protocol.tile);
|
|
105
|
-
|
|
106
|
-
window.onload = function () {
|
|
107
|
-
document.addEventListener("message", function (event) {
|
|
108
|
-
receiveMessage(event.data);
|
|
109
|
-
});
|
|
110
|
-
window.addEventListener("message", function (event) {
|
|
111
|
-
receiveMessage(event.data);
|
|
112
|
-
});
|
|
113
|
-
if (window.ReactNativeWebView) {
|
|
114
|
-
window.ReactNativeWebView.postMessage(JSON.stringify({ type: 'scriptReady' }));
|
|
115
|
-
}
|
|
116
|
-
}
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
function receiveMessage(message) {
|
|
120
|
-
|
|
121
|
-
var data = JSON.parse(message);
|
|
122
|
-
|
|
123
|
-
var functionName = data.function;
|
|
124
|
-
var params = data.params;
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
try{
|
|
133
|
-
|
|
134
|
-
${webFunctions}
|
|
135
|
-
|
|
136
|
-
} catch (e) {
|
|
137
|
-
if(${debugMode}){
|
|
138
|
-
alert('WebView function error: ' + functionName + ' ' + e.message);
|
|
139
|
-
}
|
|
140
|
-
console.error('WebView function error:', functionName, e.message);
|
|
141
|
-
window.ReactNativeWebView.postMessage(JSON.stringify({
|
|
142
|
-
type: 'error',
|
|
143
|
-
data: {
|
|
144
|
-
target: functionName,
|
|
145
|
-
message: String(e.message),
|
|
146
|
-
}
|
|
147
|
-
}));
|
|
148
|
-
}
|
|
149
|
-
};
|
|
150
|
-
|
|
151
|
-
} catch (e) {
|
|
152
|
-
|
|
153
|
-
if(${debugMode}){
|
|
154
|
-
alert('pmtiles init error: ' + e.message);
|
|
155
|
-
}
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
}
|
|
159
|
-
</script>
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
</html>`;
|
|
163
|
-
};
|
|
@@ -1,80 +0,0 @@
|
|
|
1
|
-
export default /*js*/`
|
|
2
|
-
|
|
3
|
-
if(functionName === 'addMarker') {
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
if(markers[params.uniqueId]){
|
|
7
|
-
markers[params.uniqueId].remove();
|
|
8
|
-
delete markers[params.uniqueId];
|
|
9
|
-
}
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
if(params && params.html){
|
|
13
|
-
|
|
14
|
-
var el = document.createElement('div');
|
|
15
|
-
el.className = 'marker';
|
|
16
|
-
el.innerHTML = params.html;
|
|
17
|
-
|
|
18
|
-
el.addEventListener('click', function() {
|
|
19
|
-
window.ReactNativeWebView.postMessage(JSON.stringify({
|
|
20
|
-
type: 'markerClick',
|
|
21
|
-
uniqueId: params.uniqueId
|
|
22
|
-
}));
|
|
23
|
-
});
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
markers[params.uniqueId] = new maplibregl.Marker({element: el})
|
|
27
|
-
.setLngLat([params.longitude, params.latitude])
|
|
28
|
-
.addTo(map);
|
|
29
|
-
|
|
30
|
-
return;
|
|
31
|
-
|
|
32
|
-
}
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
if(!params || !params.iconUrl){
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
markers[params.uniqueId] = new maplibregl.Marker({
|
|
39
|
-
color: (params.color != null) ? params.color : undefined,
|
|
40
|
-
}).setLngLat([params.longitude, params.latitude])
|
|
41
|
-
.addTo(map);
|
|
42
|
-
markers[params.uniqueId].getElement().addEventListener('click', function() {
|
|
43
|
-
window.ReactNativeWebView.postMessage(JSON.stringify({
|
|
44
|
-
type: 'markerClick',
|
|
45
|
-
uniqueId: params.uniqueId
|
|
46
|
-
}));
|
|
47
|
-
});
|
|
48
|
-
|
|
49
|
-
return;
|
|
50
|
-
|
|
51
|
-
}else{
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
var el2 = document.createElement('div');
|
|
55
|
-
el2.className = 'marker';
|
|
56
|
-
el2.style.backgroundImage = 'url(' + params.iconUrl + ')';
|
|
57
|
-
el2.style.backgroundSize = 'cover';
|
|
58
|
-
el2.style.backgroundPosition = 'center';
|
|
59
|
-
el2.style.backgroundRepeat = 'no-repeat';
|
|
60
|
-
el2.style.width = params.iconWidth + 'px';
|
|
61
|
-
el2.style.height = params.iconHeight + 'px';
|
|
62
|
-
|
|
63
|
-
el2.addEventListener('click', function() {
|
|
64
|
-
window.ReactNativeWebView.postMessage(JSON.stringify({
|
|
65
|
-
type: 'markerClick',
|
|
66
|
-
uniqueId: params.uniqueId
|
|
67
|
-
}));
|
|
68
|
-
});
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
markers[params.uniqueId] = new maplibregl.Marker({element: el2})
|
|
72
|
-
.setLngLat([params.longitude, params.latitude])
|
|
73
|
-
.addTo(map);
|
|
74
|
-
|
|
75
|
-
return;
|
|
76
|
-
|
|
77
|
-
}
|
|
78
|
-
}
|
|
79
|
-
|
|
80
|
-
`;
|
|
@@ -1,59 +0,0 @@
|
|
|
1
|
-
export default /*js*/`
|
|
2
|
-
|
|
3
|
-
if(functionName === 'addPolygon') {
|
|
4
|
-
|
|
5
|
-
var sourceId = params.uniqueId + '-polygons-source';
|
|
6
|
-
var fillLayerId = params.uniqueId + '-polygons-fill';
|
|
7
|
-
var strokeLayerId = params.uniqueId + '-polygons-stroke';
|
|
8
|
-
|
|
9
|
-
if(map.getLayer(strokeLayerId)) {
|
|
10
|
-
map.removeLayer(strokeLayerId);
|
|
11
|
-
}
|
|
12
|
-
if(map.getLayer(fillLayerId)) {
|
|
13
|
-
map.removeLayer(fillLayerId);
|
|
14
|
-
}
|
|
15
|
-
if(map.getSource(sourceId)) {
|
|
16
|
-
map.removeSource(sourceId);
|
|
17
|
-
}
|
|
18
|
-
|
|
19
|
-
map.addSource(sourceId, {
|
|
20
|
-
'type': 'geojson',
|
|
21
|
-
'data': {
|
|
22
|
-
'type': 'Feature',
|
|
23
|
-
'geometry': {
|
|
24
|
-
'type': 'Polygon',
|
|
25
|
-
'coordinates': [params.coordinates]
|
|
26
|
-
}
|
|
27
|
-
}
|
|
28
|
-
});
|
|
29
|
-
|
|
30
|
-
var fillPaint = {};
|
|
31
|
-
fillPaint['fill-color'] = params.fillColor || 'rgba(0,0,0,0)';
|
|
32
|
-
if(params.fillOpacity != null) fillPaint['fill-opacity'] = params.fillOpacity;
|
|
33
|
-
if(params.strokeColor) fillPaint['fill-outline-color'] = params.strokeColor;
|
|
34
|
-
|
|
35
|
-
map.addLayer({
|
|
36
|
-
'id': fillLayerId,
|
|
37
|
-
'type': 'fill',
|
|
38
|
-
'source': sourceId,
|
|
39
|
-
'layout': {},
|
|
40
|
-
'paint': fillPaint
|
|
41
|
-
});
|
|
42
|
-
|
|
43
|
-
if(params.strokeColor || params.strokeWidth) {
|
|
44
|
-
var linePaint = {};
|
|
45
|
-
if(params.strokeColor) linePaint['line-color'] = params.strokeColor;
|
|
46
|
-
if(params.strokeOpacity != null) linePaint['line-opacity'] = params.strokeOpacity;
|
|
47
|
-
if(params.strokeWidth != null) linePaint['line-width'] = params.strokeWidth;
|
|
48
|
-
|
|
49
|
-
map.addLayer({
|
|
50
|
-
'id': strokeLayerId,
|
|
51
|
-
'type': 'line',
|
|
52
|
-
'source': sourceId,
|
|
53
|
-
'layout': {},
|
|
54
|
-
'paint': linePaint
|
|
55
|
-
});
|
|
56
|
-
}
|
|
57
|
-
|
|
58
|
-
}
|
|
59
|
-
`
|
|
@@ -1,45 +0,0 @@
|
|
|
1
|
-
export default /*js*/`
|
|
2
|
-
|
|
3
|
-
if(functionName === 'addPolyline') {
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
var sourceId = params.uniqueId + '-polylines-source';
|
|
8
|
-
var layerId = params.uniqueId + '-polylines-layout';
|
|
9
|
-
|
|
10
|
-
if(map.getLayer(layerId)) {
|
|
11
|
-
map.removeLayer(layerId);
|
|
12
|
-
}
|
|
13
|
-
|
|
14
|
-
if(map.getSource(sourceId)) {
|
|
15
|
-
map.removeSource(sourceId);
|
|
16
|
-
}
|
|
17
|
-
|
|
18
|
-
map.addSource(sourceId, {
|
|
19
|
-
'type': 'geojson',
|
|
20
|
-
'data': {
|
|
21
|
-
'type': 'Feature',
|
|
22
|
-
'properties': {},
|
|
23
|
-
'geometry': {
|
|
24
|
-
'type': 'LineString',
|
|
25
|
-
'coordinates': params.coordinates
|
|
26
|
-
}
|
|
27
|
-
}
|
|
28
|
-
});
|
|
29
|
-
|
|
30
|
-
map.addLayer({
|
|
31
|
-
'id': layerId,
|
|
32
|
-
'type': 'line',
|
|
33
|
-
'source': sourceId,
|
|
34
|
-
'layout': {
|
|
35
|
-
'line-join': 'round',
|
|
36
|
-
'line-cap': 'round'
|
|
37
|
-
},
|
|
38
|
-
'paint': {
|
|
39
|
-
'line-color': (params.color != null) ? params.color : '#000000',
|
|
40
|
-
'line-width': (params.width != null) ? params.width : 4
|
|
41
|
-
}
|
|
42
|
-
});
|
|
43
|
-
|
|
44
|
-
}
|
|
45
|
-
`
|
|
@@ -1,12 +0,0 @@
|
|
|
1
|
-
export default /*js*/`
|
|
2
|
-
if(functionName === 'fitBounds') {
|
|
3
|
-
|
|
4
|
-
var padding = (params && params.padding) ? params.padding : 40;
|
|
5
|
-
var duration = (params && params.duration) ? params.duration : 500;
|
|
6
|
-
|
|
7
|
-
map.fitBounds(params.bounds, {
|
|
8
|
-
padding: padding,
|
|
9
|
-
duration: duration
|
|
10
|
-
});
|
|
11
|
-
}
|
|
12
|
-
`;
|