@mapcomponents/react-maplibre 1.0.9 → 1.0.10

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # Change Log
 
+## [v1.0.10] - 2025-02-13
+
+### Added
+
+- 3a5b6ca: add cypress test-setup
+- 4e346a2: add MlOgcApiFeatures components
+
+### Changed
+
+- a6ab82d: use @types/geojson throughout the whole project, replace turf geojson types
+- 3c16c31: improve MlFeatureEditor demo UX
+
 ## [v1.0.9] - 2024-11-20
 
 ### Added

package/dist/index.cjs.js

@@ -2031,9 +2031,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,
             },
         },
         {
@@ -2041,18 +2041,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,
             },
         },
         {
@@ -2069,8 +2060,8 @@ function featureEditorStyle() {
                 'line-join': 'round',
             },
             paint: {
-                'line-color': '#3bb2d0',
-                'line-width': 2,
+                'line-color': '#009EE0',
+                'line-width': 3,
             },
         },
         {
@@ -2082,7 +2073,7 @@ function featureEditorStyle() {
                 'line-join': 'round',
             },
             paint: {
-                'line-color': '#fbb03b',
+                'line-color': '#009EE0',
                 'line-dasharray': [0.2, 2],
                 'line-width': 2,
             },
@@ -2101,8 +2092,8 @@ function featureEditorStyle() {
                 'line-join': 'round',
             },
             paint: {
-                'line-color': '#3bb2d0',
-                'line-width': 2,
+                'line-color': '#009EE0',
+                'line-width': 3,
             },
         },
         {
@@ -2114,11 +2105,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',
@@ -2134,7 +2136,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
             },
         },
         {
@@ -2150,7 +2154,7 @@ function featureEditorStyle() {
             paint: {
                 'circle-radius': mediaIsMobile ? 10 : 9,
                 'circle-opacity': 1,
-                'circle-color': '#fff',
+                'circle-color': '#009EE0',
             },
         },
         {
@@ -2165,7 +2169,7 @@ function featureEditorStyle() {
             ],
             paint: {
                 'circle-radius': mediaIsMobile ? 7.5 : 6.5,
-                'circle-color': '#3bb2d0',
+                'circle-color': '#009EE0',
             },
         },
         {
@@ -2193,7 +2197,7 @@ function featureEditorStyle() {
             ],
             paint: {
                 'circle-radius': mediaIsMobile ? 8.5 : 7.5,
-                'circle-color': '#fbb03b',
+                'circle-color': '#009EE0',
             },
         },
         {
@@ -2932,7 +2936,7 @@ var MlFollowGps = function (props) {
             ];
             var accurancyBounds = turf.bbox(accuracyGeoJson);
             var contained = turf.booleanContains(turf.bboxPolygon(actualBounds), turf.bboxPolygon(accurancyBounds));
-            if (contained === false) {
+            if (!contained) {
                 (_b = mapHook.map) === null || _b === void 0 ? void 0 : _b.fitBounds(accurancyBounds, {
                     padding: { top: 25, bottom: 25 },
                 });
@@ -3011,46 +3015,93 @@ var MlImageMarkerLayer = function (props) {
     return React.createElement(React.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 = React.useState({ value: 0, label: '' }), displayValue = _a[0], setDisplayValue = _a[1];
     var _b = React.useState([]), currentFeatures = _b[0], setCurrentFeatures = _b[1];
     React.useEffect(function () {
         if (currentFeatures[0]) {
-            var result = props.measureType === 'polygon'
-                ? // for "polyong" mode calculate km²
-                    (turf__namespace.area(currentFeatures[0]) / 1000000) *
-                        getUnitSquareMultiplier(props.unit)
-                : turf__namespace.length(currentFeatures[0], { units: props.unit });
+            var result = 0;
+            if (props.measureType === 'polygon') {
+                // Calculate area in square meters
+                result = turf__namespace.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__namespace.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]);
@@ -3058,16 +3109,22 @@ var MlMeasureTool = function (props) {
         React.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 = material.styled(material.List)({
@@ -3624,7 +3681,6 @@ var MlMultiMeasureTool = function (props) {
     var _d = React.useState(), measureState = _d[0], setMeasureState = _d[1];
     var _e = React.useState('kilometers'), selectedUnit = _e[0], setSelectedUnit = _e[1];
     var _f = React.useState([]), measureList = _f[0], setMeasureList = _f[1];
-    console.log(measureList);
     var _g = React.useState(false), reload = _g[0], setReload = _g[1];
     var unitSwitch = function () {
         if (selectedUnit === 'kilometers') {
@@ -3973,7 +4029,7 @@ var MlNavigationTools = function (props) {
         var targetPitch = mapHook.map.getPitch() !== 0 ? 0 : 60;
         mapHook.map.easeTo({ pitch: targetPitch });
     }, [mapHook.map]);
-    return (React.createElement(Box, { 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.createElement(Box, { 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.createElement(MlNavigationCompass, null),
         props.show3DButton && (React.createElement(Button, { variant: "navtools", onClick: adjustPitch }, pitch < 29 ? '3D' : '2D')),
         props.showFollowGpsButton && React.createElement(MlFollowGps, null),
@@ -6218,13 +6274,13 @@ var MlWmsLoader = function (props) {
         var unprojected = mapHook.map.unproject([ev.point.x, ev.point.y]);
         var point = turf__namespace.point([unprojected.lng, unprojected.lat]);
         var buffered = turf__namespace.buffer(point, 50, { units: 'meters' });
-        var _bbox = turf__namespace.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__namespace.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'
@@ -7144,7 +7200,7 @@ var useCameraFollowPath = function (props) {
     var speed = React.useRef(props.speed);
     var timeoutId = React.useRef();
     var kmPerStep = props.kmPerStep || 0.01;
-    var routeDistance = turf__namespace.lineDistance(props.route);
+    var routeDistance = turf__namespace.length(props.route);
     var stepDuration = props.stepDuration || 70;
     var mapHook = useMap({
         mapId: props.mapId,