@mapcomponents/react-maplibre 0.1.88 → 0.1.90

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # Change Log
 
+## [v0.1.89] - 2024-01-02
+
+### Fixed
+
+- ca2fe4e: fix AddLayerButton mbtiles useAddProtocol
+
 ## [v0.1.88] - 2023-12-22
 
 ### Added

package/dist/components/MlMeasureTool/MlMeasureTool.d.ts

@@ -18,7 +18,12 @@ interface MlMeasureToolProps {
         value: number;
         unit: string | undefined;
         geojson: GeoJSONObject;
+        geometries?: [];
     }) => void;
+    /**
+     * Callback function that is called by the end of drawing geometries.
+     */
+    onFinish?: () => void;
 }
 declare const MlMeasureTool: {
     (props: MlMeasureToolProps): JSX.Element;

package/dist/components/MlMultiMeasureTool/MlMultiMeasureTool.d.ts

@@ -0,0 +1,55 @@
+/// <reference types="react" />
+import { SxProps } from '@mui/material';
+import * as turf from '@turf/turf';
+import { GeoJSONObject } from '@turf/turf';
+export interface MlMultiMeasureToolProps {
+    /**
+     * Id of the target MapLibre instance in mapContext
+     */
+    mapId?: string;
+    /**
+     * Id of an existing layer in the mapLibre instance to help specify the layer order
+     * This layer will be visually beneath the layer with the "insertBeforeLayer" id.
+     */
+    insertBeforeLayer?: string;
+    /**
+     * Style attribute for the button-style
+     * https://mui.com/system/getting-started/the-sx-prop/
+     */
+    buttonStyleOverride?: SxProps;
+    /**
+     * String that specify if the Tool measures an area ("polygon") or length ("line")
+     */
+    measureType?: 'polygon' | 'line';
+    /**
+     * Boolean which decides if the user can switch between measure modes
+     */
+    multiType?: boolean;
+    /**
+     * String that dictates which unit of measurement is used
+     */
+    unit?: turf.Units;
+    /**
+     * Callback function that is called each time measurment geometry within has changed within MlMeasureTool.
+     * First parameter is the new GeoJson feature.
+     */
+    onChange?: (options: {
+        value: number;
+        unit: string | undefined;
+        geojson: GeoJSONObject;
+        geometries?: [];
+    }) => void;
+    /**
+     * Callback function that is called by the end of drawing geometries.
+     */
+    onFinish?: () => void;
+}
+declare const MlMultiMeasureTool: {
+    (props: MlMultiMeasureToolProps): JSX.Element;
+    defaultProps: {
+        mapId: undefined;
+        measureType: string;
+        buttonStyleOverride: {};
+    };
+};
+export default MlMultiMeasureTool;

package/dist/components/MlMultiMeasureTool/MlMultiMeasureTool.stories.d.ts

@@ -0,0 +1,16 @@
+/// <reference types="react" />
+declare const storyoptions: {
+    title: string;
+    component: {
+        (props: import("./MlMultiMeasureTool").MlMultiMeasureToolProps): JSX.Element;
+        defaultProps: {
+            mapId: undefined;
+            measureType: string;
+            buttonStyleOverride: {};
+        };
+    };
+    argTypes: {};
+    decorators: ((Story: any, context: any) => JSX.Element)[];
+};
+export default storyoptions;
+export declare const ExampleConfig: any;

package/dist/components/MlSketchTool/MlSketchTool.d.ts

@@ -1,4 +1,5 @@
 /// <reference types="react" />
+import { Feature } from '@turf/turf';
 import { SxProps } from '@mui/system/styleFunctionSx/styleFunctionSx';
 export interface MlSketchToolProps {
     /**
@@ -15,7 +16,18 @@ export interface MlSketchToolProps {
      * https://mui.com/system/getting-started/the-sx-prop/
      */
     buttonStyleOverride?: SxProps;
+    /**
+     * Callback function that is called each time GeoJson data has changed within MlSketchTool.
+     * First parameter contains all geometries in the `geometries` prop.
+     */
+    onChange?: (para: SketchStateType) => void;
 }
+type SketchStateType = {
+    selectedGeoJson?: Feature;
+    activeGeometryIndex?: number;
+    geometries: Feature[];
+    drawMode?: keyof MapboxDraw.Modes;
+};
 /**
  * Component template
  *

package/dist/hooks/useFeatureEditor/useFeatureEditor.d.ts

@@ -16,7 +16,7 @@ export interface useFeatureEditorProps {
      */
     geojson?: Feature;
     /**
-     * Callback function that is called each time the GeoJson data within has changed within MlFeatureEditor.
+     * Callback function that is called each time the GeoJson data has changed within MlFeatureEditor.
      * First parameter is the new GeoJson feature.
      */
     onChange?: (para: GeoJSONObject[]) => void;

package/dist/index.esm.js

@@ -2036,7 +2036,7 @@ function PdfForm(props) {
     ]);
     return (React__default["default"].createElement(React__default["default"].Fragment, null,
         React__default["default"].createElement(material.FormControl, { fullWidth: true, sx: formControlStyles },
-            React__default["default"].createElement(material.InputLabel, { id: "format-select-label" }, "Format"),
+            React__default["default"].createElement(material.InputLabel, { sx: { marginTop: '3px' }, id: "format-select-label" }, "Format"),
             React__default["default"].createElement(material.Select, { labelId: "format-select-label", id: "format-select", label: "Format", value: pdfContext.format, onChange: function (event) {
                     var _a;
                     (_a = pdfContext.setFormat) === null || _a === void 0 ? void 0 : _a.call(pdfContext, event.target.value);
@@ -2319,7 +2319,6 @@ function featureEditorStyle() {
  * GeoJson Feature editor that allows to create or manipulate GeoJson data
  */
 var useFeatureEditor = function (props) {
-    console.log(featureEditorStyle());
     var draw = React.useRef();
     var mapHook = useMap({
         mapId: props.mapId,
@@ -2908,8 +2907,9 @@ var MlMeasureTool = function (props) {
     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)
+                ? // for "polyong" mode calculate km²
+                    (turf__namespace.area(currentFeatures[0]) / 1000000) *
+                        getUnitSquareMultiplier(props.unit)
                 : turf__namespace.length(currentFeatures[0], { units: props.unit });
             if (typeof props.onChange === 'function') {
                 props.onChange({ value: result, unit: props.unit, geojson: currentFeatures[0] });
@@ -2936,12 +2936,14 @@ var MlMeasureTool = function (props) {
     }, [props.unit, currentFeatures]);
     return (React__default["default"].createElement(React__default["default"].Fragment, null,
         React__default["default"].createElement(MlFeatureEditor, { onChange: function (features) {
-                setCurrentFeatures(features);
-            }, mode: props.measureType === 'polygon' ? 'draw_polygon' : 'draw_line_string' }),
+                features && setCurrentFeatures(features);
+            }, mode: props.measureType === 'polygon' ? 'draw_polygon' : 'draw_line_string', onFinish: props.onFinish }),
         displayValue.value.toFixed(2),
         " ",
-        displayValue.label,
-        props.measureType === 'polygon' ? '²' : ''));
+        '',
+        React__default["default"].createElement(material.Typography, null,
+            displayValue.label,
+            props.measureType === 'polygon' ? ' ²' : '')));
 };
 MlMeasureTool.defaultProps = {
     mapId: undefined,
@@ -2950,9 +2952,9 @@ MlMeasureTool.defaultProps = {
 };
 
 var _g;
-function _extends$1() { _extends$1 = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$1.apply(this, arguments); }
+function _extends$2() { _extends$2 = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$2.apply(this, arguments); }
 var SvgCompassNeedle = function SvgCompassNeedle(props) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$1({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$2({
     width: 10,
     height: 40,
     viewBox: "0 0 10 40",
@@ -2970,10 +2972,10 @@ var SvgCompassNeedle = function SvgCompassNeedle(props) {
   }))));
 };
 
-var _circle, _path, _path2, _path3, _path4;
-function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+var _circle, _path$1, _path2$1, _path3, _path4;
+function _extends$1() { _extends$1 = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$1.apply(this, arguments); }
 var SvgCompassBackground = function SvgCompassBackground(props) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$1({
     width: 52,
     height: 53,
     viewBox: "0 0 52 53",
@@ -2986,10 +2988,10 @@ var SvgCompassBackground = function SvgCompassBackground(props) {
     fill: "white",
     stroke: "#009EE0",
     strokeWidth: 2
-  })), _path || (_path = /*#__PURE__*/React__namespace.createElement("path", {
+  })), _path$1 || (_path$1 = /*#__PURE__*/React__namespace.createElement("path", {
     d: "M26.4915 7.59161C26.3524 8.07338 25.6698 8.07338 25.5307 7.59161L24.2998 3.3276C24.2075 3.0079 24.4474 2.68893 24.7802 2.68893H27.242C27.5748 2.68893 27.8147 3.0079 27.7224 3.3276L26.4915 7.59161Z",
     fill: "#009EE0"
-  })), _path2 || (_path2 = /*#__PURE__*/React__namespace.createElement("path", {
+  })), _path2$1 || (_path2$1 = /*#__PURE__*/React__namespace.createElement("path", {
     d: "M25.5085 44.7598C25.6476 44.278 26.3302 44.278 26.4693 44.7598L27.7002 49.0238C27.7925 49.3435 27.5526 49.6625 27.2198 49.6625H24.758C24.4252 49.6625 24.1853 49.3435 24.2776 49.0238L25.5085 44.7598Z",
     fill: "#009EE0"
   })), _path3 || (_path3 = /*#__PURE__*/React__namespace.createElement("path", {
@@ -3423,6 +3425,22 @@ MlLayerMagnify.defaultProps = {
     magnifierStyle: {},
 };
 
+var _path, _path2;
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+var SvgIcononlyarrow = function SvgIcononlyarrow(props) {
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends({
+    viewBox: "0 0 47 30",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, props), _path || (_path = /*#__PURE__*/React__namespace.createElement("path", {
+    d: "M29.5 21.25L35.75 15L29.5 8.75V21.25Z",
+    fill: "#009EE0"
+  })), _path2 || (_path2 = /*#__PURE__*/React__namespace.createElement("path", {
+    d: "M17.5 8.75L11.25 15L17.5 21.25V8.75Z",
+    fill: "#009EE0"
+  })));
+};
+
 /**
  *	creates a split view of 2 synchronised maplibre instances
  */
@@ -3492,7 +3510,10 @@ var MlLayerSwipe = function (props) {
         document.removeEventListener('mouseup', onMouseUp);
     };
     function adjustWindowSize() {
-        var clipWidth = mapContext.maps[props.map2Id].getContainer().style.clip.split(',')[1].replace('px', '');
+        var clipWidth = mapContext.maps[props.map2Id]
+            .getContainer()
+            .style.clip.split(',')[1]
+            .replace('px', '');
         var canvasWidth = mapContext.maps[props.map1Id].getCanvas().getBoundingClientRect().width;
         if (parseFloat(clipWidth) < canvasWidth) {
             var newPosition = parseFloat(((clipWidth / canvasWidth) * 100).toFixed(2));
@@ -3510,7 +3531,13 @@ var MlLayerSwipe = function (props) {
             window.removeEventListener('resize', adjustWindowSize);
         };
     }, [mapContext]);
-    return (React__default["default"].createElement("div", { style: __assign({ position: 'absolute', left: swipeX + '%', top: '50%', borderRadius: '50%', width: '100px', height: '100px', background: '#0066ff', border: '3px solid #eaebf1', cursor: 'pointer', zIndex: '110', marginLeft: '-50px', marginTop: '-50px', textAlign: 'center', lineHeight: '91px', fontSize: '2em', color: '#fafafa', userSelect: 'none' }, props.buttonStyle), onTouchStart: onDown, onMouseDown: onDown }));
+    return (React__default["default"].createElement("div", { style: __assign({ position: 'absolute', left: swipeX + '%', top: '50%', borderRadius: '50%', width: '65px', height: '65px', background: 'rgba(234, 235, 241, 0.75)', border: '2px solid rgba(0, 158, 224, 0.75)', cursor: 'pointer', zIndex: '110', marginLeft: '-35px', marginTop: '-50px', textAlign: 'center', lineHeight: '91px', fontSize: '2em', color: '#fafafa', userSelect: 'none' }, props.buttonStyle), onTouchStart: onDown, onMouseDown: onDown },
+        React__default["default"].createElement(SvgIcononlyarrow, { color: "#0066ff", style: {
+                width: '65px',
+                height: '65px',
+                justifyContent: 'center',
+                zIndex: 1100,
+            } })));
 };
 MlLayerSwipe.defaultProps = {
     buttonStyle: {},
@@ -6438,6 +6465,8 @@ var PaperStyled = material.styled(material.Paper)({
     marginRight: '-21px',
     paddingLeft: '53px',
     borderRadius: '0px',
+    boxShadow: 'none',
+    backgroundColor: 'rgb(0, 0, 0, 0)',
 });
 var BoxStyled = material.styled(material.Box)({
     marginLeft: '61px',
@@ -6744,6 +6773,11 @@ var MlSketchTool = function (props) {
         geometries: [],
         drawMode: undefined,
     }), sketchState = _d[0], setSketchState = _d[1];
+    React.useEffect(function () {
+        if (!(typeof props.onChange === 'function'))
+            return;
+        props.onChange(sketchState);
+    }, [sketchState, props.onChange]);
     var buttonStyle = __assign({}, props.buttonStyleOverride);
     var buttonClickHandler = function (buttonDrawMode) {
         setSketchState(function (_state) { return ({
@@ -6812,7 +6846,7 @@ var MlSketchTool = function (props) {
             }, onFinish: function () {
                 setSketchState(function (_sketchState) { return (__assign(__assign({}, _sketchState), { drawMode: undefined, activeGeometryIndex: undefined, selectedGeoJson: undefined })); });
             } })),
-        React__default["default"].createElement(List__default["default"], { sx: { zIndex: 105 } },
+        React__default["default"].createElement(List__default["default"], { sx: { zIndex: 105, marginBottom: '-10px' } },
             sketchState.geometries.map(function (el) { return (React__default["default"].createElement(React__default["default"].Fragment, null,
                 React__default["default"].createElement(system.Box, { key: el.id, sx: { display: 'flex', flexDirection: 'column' } },
                     React__default["default"].createElement("br", null),
@@ -6820,6 +6854,7 @@ var MlSketchTool = function (props) {
                             '&:hover': {
                                 backgroundColor: 'rgb(177, 177, 177, 0.2)',
                             },
+                            marginTop: '25px',
                         }, onMouseOver: function () {
                             setHoveredGeometry(el);
                         }, onMouseLeave: function () {
@@ -6846,10 +6881,21 @@ var MlSketchTool = function (props) {
                                         setHoveredGeometry(undefined);
                                     } },
                                     React__default["default"].createElement(DeleteIcon__default["default"], null)))))))); }),
-            hoveredGeometry && (React__default["default"].createElement(MlGeoJsonLayer, { mapId: props.mapId, geojson: { type: 'FeatureCollection', features: [hoveredGeometry] }, type: 'line', layerId: 'highlightBorder', paint: {
-                    'line-color': '#dd9900',
-                    'line-opacity': 0.4,
-                    'line-width': 10,
+            hoveredGeometry && (React__default["default"].createElement(MlGeoJsonLayer, { mapId: props.mapId, geojson: { type: 'FeatureCollection', features: [hoveredGeometry] }, layerId: 'highlightBorder', defaultPaintOverrides: {
+                    circle: {
+                        'circle-color': '#dd9900',
+                        'circle-opacity': 0.4,
+                        'circle-radius': 10,
+                    },
+                    line: {
+                        'line-color': '#dd9900',
+                        'line-opacity': 0.4,
+                        'line-width': 10,
+                    },
+                    fill: {
+                        'fill-color': '#dd9900',
+                        'fill-opacity': 0.4
+                    },
                 } }))),
         sketchState.drawMode === 'simple_select' && (React__default["default"].createElement(material.Typography, { sx: { fontSize: '0.6em' } },
             "Edit ", (_b = (_a = sketchState.selectedGeoJson) === null || _a === void 0 ? void 0 : _a.geometry) === null || _b === void 0 ? void 0 :
@@ -8106,14 +8152,31 @@ var AddLayerPopup = function (props) {
 };
 AddLayerPopup.defaultProps = {};
 
+function AddProtocol(props) {
+    useAddProtocol({
+        protocol: props.protocol,
+        handler: props.handler,
+    });
+    return React__default["default"].createElement(React__default["default"].Fragment, null);
+}
 var AddLayerButton = function (props) {
     var _a = React__default["default"].useState(false), popupOpen = _a[0], setPopupOpen = _a[1];
-    var layerTypes = props.layerTypes || ['geojson', 'wms', 'mbtiles', 'csv', 'topojson', 'osm', 'gpx', 'kml', 'tcx'];
-    layerTypes.includes('mbtiles') && useAddProtocol({
-        protocol: 'mbtiles',
-        handler: mbTilesProtocolHandler,
-    });
+    var layerTypes = props.layerTypes || [
+        'geojson',
+        'wms',
+        'mbtiles',
+        'csv',
+        'topojson',
+        'osm',
+        'gpx',
+        'kml',
+        'tcx',
+    ];
     return (React__default["default"].createElement(React__default["default"].Fragment, null,
+        layerTypes.includes('mbtiles') && (React__default["default"].createElement(AddProtocol, __assign({}, {
+            protocol: 'mbtiles',
+            handler: mbTilesProtocolHandler,
+        }))),
         React__default["default"].createElement(material.Button, { variant: "contained", sx: __assign({ marginTop: '10px' }, props.sx), onClick: function () { return setPopupOpen(true); } },
             React__default["default"].createElement(PlaylistAddIcon__default["default"], null)),
         React__default["default"].createElement(AddLayerPopup, { open: popupOpen, setOpen: setPopupOpen, onComplete: props === null || props === void 0 ? void 0 : props.onComplete, layerTypes: layerTypes })));