@mapcomponents/react-maplibre 1.0.9 → 1.0.11

package/dist/index.esm.js

@@ -2007,9 +2007,9 @@ function featureEditorStyle() {
                 ['!=', 'mode', 'static'],
             ],
             paint: {
-                'fill-color': '#3bb2d0',
-                'fill-outline-color': '#3bb2d0',
-                'fill-opacity': 0.1,
+                'fill-color': '#009EE0',
+                'fill-outline-color': '#009EE0',
+                'fill-opacity': 0.3,
             },
         },
         {
@@ -2017,18 +2017,9 @@ function featureEditorStyle() {
             type: 'fill',
             filter: ['all', ['==', 'active', 'true'], ['==', '$type', 'Polygon']],
             paint: {
-                'fill-color': '#fbb03b',
-                'fill-outline-color': '#fbb03b',
-                'fill-opacity': 0.1,
-            },
-        },
-        {
-            id: 'gl-draw-polygon-midpoint',
-            type: 'circle',
-            filter: ['all', ['==', '$type', 'Point'], ['==', 'meta', 'midpoint']],
-            paint: {
-                'circle-radius': mediaIsMobile ? 7 : 5,
-                'circle-color': '#fbb03b',
+                'fill-color': '#009EE0',
+                'fill-outline-color': '#009EE0',
+                'fill-opacity': 0.2,
             },
         },
         {
@@ -2045,8 +2036,8 @@ function featureEditorStyle() {
                 'line-join': 'round',
             },
             paint: {
-                'line-color': '#3bb2d0',
-                'line-width': 2,
+                'line-color': '#009EE0',
+                'line-width': 3,
             },
         },
         {
@@ -2058,7 +2049,7 @@ function featureEditorStyle() {
                 'line-join': 'round',
             },
             paint: {
-                'line-color': '#fbb03b',
+                'line-color': '#009EE0',
                 'line-dasharray': [0.2, 2],
                 'line-width': 2,
             },
@@ -2077,8 +2068,8 @@ function featureEditorStyle() {
                 'line-join': 'round',
             },
             paint: {
-                'line-color': '#3bb2d0',
-                'line-width': 2,
+                'line-color': '#009EE0',
+                'line-width': 3,
             },
         },
         {
@@ -2090,11 +2081,22 @@ function featureEditorStyle() {
                 'line-join': 'round',
             },
             paint: {
-                'line-color': '#fbb03b',
+                'line-color': "#009EE0",
                 'line-dasharray': [0.2, 2],
                 'line-width': 2,
             },
         },
+        {
+            id: 'gl-draw-polygon-midpoint',
+            type: 'circle',
+            filter: ['all', ['==', '$type', 'Point'], ['==', 'meta', 'midpoint']],
+            paint: {
+                'circle-radius': mediaIsMobile ? 5 : 4,
+                'circle-color': '#ffffff',
+                'circle-stroke-color': '#009EE0',
+                'circle-stroke-width': 1
+            },
+        },
         {
             id: 'gl-draw-polygon-and-line-vertex-stroke-inactive',
             type: 'circle',
@@ -2110,7 +2112,9 @@ function featureEditorStyle() {
             filter: ['all', ['==', 'meta', 'vertex'], ['==', '$type', 'Point'], ['!=', 'mode', 'static']],
             paint: {
                 'circle-radius': mediaIsMobile ? 7 : 5,
-                'circle-color': '#fbb03b',
+                'circle-color': '#ffffff',
+                'circle-stroke-color': '#009EE0',
+                'circle-stroke-width': 1
             },
         },
         {
@@ -2126,7 +2130,7 @@ function featureEditorStyle() {
             paint: {
                 'circle-radius': mediaIsMobile ? 10 : 9,
                 'circle-opacity': 1,
-                'circle-color': '#fff',
+                'circle-color': '#009EE0',
             },
         },
         {
@@ -2141,7 +2145,7 @@ function featureEditorStyle() {
             ],
             paint: {
                 'circle-radius': mediaIsMobile ? 7.5 : 6.5,
-                'circle-color': '#3bb2d0',
+                'circle-color': '#009EE0',
             },
         },
         {
@@ -2169,7 +2173,7 @@ function featureEditorStyle() {
             ],
             paint: {
                 'circle-radius': mediaIsMobile ? 8.5 : 7.5,
-                'circle-color': '#fbb03b',
+                'circle-color': '#009EE0',
             },
         },
         {
@@ -2908,7 +2912,7 @@ var MlFollowGps = function (props) {
             ];
             var accurancyBounds = bbox(accuracyGeoJson);
             var contained = booleanContains(bboxPolygon(actualBounds), bboxPolygon(accurancyBounds));
-            if (contained === false) {
+            if (!contained) {
                 (_b = mapHook.map) === null || _b === void 0 ? void 0 : _b.fitBounds(accurancyBounds, {
                     padding: { top: 25, bottom: 25 },
                 });
@@ -2987,46 +2991,93 @@ var MlImageMarkerLayer = function (props) {
     return React__default.createElement(React__default.Fragment, null);
 };
 
-//const unitSquareConvert = {
-//	kilometers: 1,
-//	miles: 1 / 2.58998811,
-//};
-function getUnitSquareMultiplier(measureType) {
-    return measureType === 'miles' ? 1 / 2.58998811 : 1;
+function unitMultiplier(unit) {
+    switch (unit) {
+        case 'meters':
+            return 1;
+        case 'millimeters':
+            return 1000;
+        case 'centimeters':
+            return 100;
+        case 'kilometers':
+            return 0.001;
+        case 'miles':
+            return 1 / 1609.344; // Meters in Miles
+        case 'nauticalmiles':
+            return 1 / 1852; // Meters in Nautical Miles
+        case 'inches':
+            return 39.3701; // Meters in Inches
+        case 'yards':
+            return 1.09361; // Meters in Yards
+        case 'feet':
+            return 3.28084; // Meters in Feet
+        // case 'acres':
+        // 	return 1 / 4046.8564224; // Square meters in an acre
+        // case 'hectares':
+        // 	return 1 / 10000; // Square meters in a hectare
+        default:
+            return 1;
+    }
 }
-function getUnitLabel(measureType) {
-    return measureType === 'miles' ? 'mi' : 'km';
+function unitLabel(unit) {
+    switch (unit) {
+        case 'miles':
+            return 'mi';
+        case 'acres':
+            return 'ac';
+        case 'kilometers':
+            return 'km';
+        case 'meters':
+            return 'm';
+        case 'millimeters':
+            return 'mm';
+        case 'centimeters':
+            return 'cm';
+        case 'nauticalmiles':
+            return 'nm';
+        case 'inches':
+            return 'in';
+        case 'yards':
+            return 'yd';
+        case 'feet':
+            return 'ft';
+        case 'hectares':
+            return 'ha';
+        default:
+            return 'm';
+    }
 }
 var MlMeasureTool = function (props) {
     var _a = useState({ value: 0, label: '' }), displayValue = _a[0], setDisplayValue = _a[1];
     var _b = useState([]), currentFeatures = _b[0], setCurrentFeatures = _b[1];
     useEffect(function () {
         if (currentFeatures[0]) {
-            var result = props.measureType === 'polygon'
-                ? // for "polyong" mode calculate km²
-                    (turf.area(currentFeatures[0]) / 1000000) *
-                        getUnitSquareMultiplier(props.unit)
-                : turf.length(currentFeatures[0], { units: props.unit });
+            var result = 0;
+            if (props.measureType === 'polygon') {
+                // Calculate area in square meters
+                result = turf.area(currentFeatures[0]);
+                // Convert area depending on the unit (square meters -> selected area unit)
+                if (props.unit) {
+                    var unit = props.unit;
+                    if (unit === 'acres') {
+                        result = result / 4046.8564224;
+                    }
+                    else if (unit === 'hectares') {
+                        result = result / 10000;
+                    }
+                    else {
+                        result = result * Math.pow(unitMultiplier(props.unit), 2);
+                    }
+                }
+            }
+            else {
+                result = turf.length(currentFeatures[0], { units: props.unit });
+            }
             if (typeof props.onChange === 'function') {
                 props.onChange({ value: result, unit: props.unit, geojson: currentFeatures[0] });
             }
             if (result >= 0.1) {
-                setDisplayValue({ value: result, label: getUnitLabel(props.unit) });
-            }
-            else {
-                var label = 'm';
-                var value = result * 1000;
-                if (props.measureType === 'polygon') {
-                    value = result * 1000000;
-                }
-                if (getUnitLabel(props.unit) === 'mi') {
-                    label = 'Yard';
-                    value = result * 1760;
-                    if (props.measureType === 'polygon') {
-                        value = result * 3097600;
-                    }
-                }
-                setDisplayValue({ value: value, label: label });
+                setDisplayValue({ value: result, label: unitLabel(props.unit) });
             }
         }
     }, [props.unit, currentFeatures]);
@@ -3034,16 +3085,22 @@ var MlMeasureTool = function (props) {
         React__default.createElement(MlFeatureEditor, { onChange: function (features) {
                 features && setCurrentFeatures(features);
             }, mode: props.measureType === 'polygon' ? 'draw_polygon' : 'draw_line_string', onFinish: props.onFinish }),
-        displayValue.value.toFixed(2),
-        " ",
-        '',
-        displayValue.label,
-        displayValue.label && props.measureType === 'polygon' ? ' ²' : ''));
+        displayValue.value.toLocaleString('de-DE', {
+            minimumFractionDigits: 2,
+            maximumFractionDigits: 2,
+        }),
+        ' ',
+        unitLabel(props.unit),
+        displayValue.label &&
+            props.measureType === 'polygon' &&
+            !['hectares', 'acres'].includes(props.unit || '')
+            ? ' ²'
+            : ''));
 };
 MlMeasureTool.defaultProps = {
     mapId: undefined,
     measureType: 'line',
-    unit: 'kilometers',
+    unit: 'meters',
 };
 
 var ListStyled$3 = styled(List)({
@@ -3600,7 +3657,6 @@ var MlMultiMeasureTool = function (props) {
     var _d = useState(), measureState = _d[0], setMeasureState = _d[1];
     var _e = useState('kilometers'), selectedUnit = _e[0], setSelectedUnit = _e[1];
     var _f = useState([]), measureList = _f[0], setMeasureList = _f[1];
-    console.log(measureList);
     var _g = useState(false), reload = _g[0], setReload = _g[1];
     var unitSwitch = function () {
         if (selectedUnit === 'kilometers') {
@@ -3949,7 +4005,7 @@ var MlNavigationTools = function (props) {
         var targetPitch = mapHook.map.getPitch() !== 0 ? 0 : 60;
         mapHook.map.easeTo({ pitch: targetPitch });
     }, [mapHook.map]);
-    return (React__default.createElement(Box$2, { sx: __assign(__assign({ zIndex: 501, position: 'absolute', display: 'flex', flexDirection: 'column', right: mediaIsMobile ? '15px' : '25px', bottom: mediaIsMobile ? '20px' : '30px' }, (mediaIsMobile ? { margin: '80px 10px 50px 10px' } : { marginTop: '50px' })), props.sx) },
+    return (React__default.createElement(Box$2, { sx: __assign(__assign({ zIndex: 501, position: 'absolute', display: 'flex', flexDirection: 'column', right: mediaIsMobile ? '15px' : '25px', bottom: mediaIsMobile ? '20px' : '40px' }, (mediaIsMobile ? { margin: '80px 10px 50px 10px' } : { marginTop: '50px' })), props.sx) },
         React__default.createElement(MlNavigationCompass, null),
         props.show3DButton && (React__default.createElement(Button$1, { variant: "navtools", onClick: adjustPitch }, pitch < 29 ? '3D' : '2D')),
         props.showFollowGpsButton && React__default.createElement(MlFollowGps, null),
@@ -6194,13 +6250,13 @@ var MlWmsLoader = function (props) {
         var unprojected = mapHook.map.unproject([ev.point.x, ev.point.y]);
         var point = turf.point([unprojected.lng, unprojected.lat]);
         var buffered = turf.buffer(point, 50, { units: 'meters' });
-        var _bbox = turf.bbox(buffered);
-        var _sw = lngLatToMeters({ lng: _bbox[0], lat: _bbox[1] });
-        var _ne = lngLatToMeters({ lng: _bbox[2], lat: _bbox[3] });
-        var bbox = [_sw[0], _sw[1], _ne[0], _ne[1]];
+        var _bbox = buffered && turf.bbox(buffered);
+        var _sw = _bbox && lngLatToMeters({ lng: _bbox[0], lat: _bbox[1] });
+        var _ne = _bbox && lngLatToMeters({ lng: _bbox[2], lat: _bbox[3] });
+        var bbox = _sw && _ne && [_sw[0], _sw[1], _ne[0], _ne[1]];
         var _getFeatureInfoUrlParams = {
             REQUEST: 'GetFeatureInfo',
-            BBOX: bbox.join(','),
+            BBOX: bbox === null || bbox === void 0 ? void 0 : bbox.join(','),
             SERVICE: 'WMS',
             INFO_FORMAT: ((_b = (_a = capabilities === null || capabilities === void 0 ? void 0 : capabilities.Capability) === null || _a === void 0 ? void 0 : _a.Request) === null || _b === void 0 ? void 0 : _b.GetFeatureInfo.Format.indexOf('text/html')) !== -1
                 ? 'text/html'
@@ -7120,7 +7176,7 @@ var useCameraFollowPath = function (props) {
     var speed = useRef(props.speed);
     var timeoutId = useRef();
     var kmPerStep = props.kmPerStep || 0.01;
-    var routeDistance = turf.lineDistance(props.route);
+    var routeDistance = turf.length(props.route);
     var stepDuration = props.stepDuration || 70;
     var mapHook = useMap({
         mapId: props.mapId,