@mapcomponents/react-maplibre 0.1.89 → 0.1.91

package/CHANGELOG.md

@@ -1,6 +1,18 @@
 # Change Log
 
-## [v0.1.89] - 2024-01-02
+## [v0.1.91] - 2024-01-16
+
+### Fixed
+
+- 4775728: remove mbtiles protocol handler from build to fix sql.js error
+
+## [v0.1.90] - 2024-01-16 (broken)
+
+### Fixed
+
+- f40622f: fix build error suggesting marking sql.js as external
+
+## [v0.1.89] - 2024-01-02 (broken)
 
 ### Fixed
 

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

@@ -68,8 +68,6 @@ var csv2geojson = require('csv2geojson');
 var topojsonClient = require('topojson-client');
 var osm2geojson = require('osm2geojson-lite');
 var externParser = require('@tmcw/togeojson');
-var initSqlJs = require('sql.js');
-var pako = require('pako');
 var KeyboardArrowDownIcon = require('@mui/icons-material/KeyboardArrowDown');
 var KeyboardArrowUpIcon = require('@mui/icons-material/KeyboardArrowUp');
 var AppBar = require('@mui/material/AppBar');
@@ -161,8 +159,6 @@ var IndeterminateCheckBoxIcon__default = /*#__PURE__*/_interopDefaultLegacy(Inde
 var csv2geojson__namespace = /*#__PURE__*/_interopNamespace(csv2geojson);
 var osm2geojson__default = /*#__PURE__*/_interopDefaultLegacy(osm2geojson);
 var externParser__namespace = /*#__PURE__*/_interopNamespace(externParser);
-var initSqlJs__default = /*#__PURE__*/_interopDefaultLegacy(initSqlJs);
-var pako__namespace = /*#__PURE__*/_interopNamespace(pako);
 var KeyboardArrowDownIcon__default = /*#__PURE__*/_interopDefaultLegacy(KeyboardArrowDownIcon);
 var KeyboardArrowUpIcon__default = /*#__PURE__*/_interopDefaultLegacy(KeyboardArrowUpIcon);
 var AppBar__default = /*#__PURE__*/_interopDefaultLegacy(AppBar);
@@ -2036,7 +2032,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 +2315,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 +2903,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 +2932,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 +2948,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 +2968,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 +2984,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 +3421,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 +3506,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 +3527,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 +6461,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 +6769,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 +6842,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 +6850,7 @@ var MlSketchTool = function (props) {
                             '&:hover': {
                                 backgroundColor: 'rgb(177, 177, 177, 0.2)',
                             },
+                            marginTop: '25px',
                         }, onMouseOver: function () {
                             setHoveredGeometry(el);
                         }, onMouseLeave: function () {
@@ -6846,10 +6877,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 :
@@ -7731,128 +7773,6 @@ var XMLProtocolHandler = function (params, callback) {
     return { cancel: function () { } };
 };
 
-var loadedMbtiles = {};
-var parseTileParams = function (url) {
-    var urlParts = url.split('://');
-    var mbtilesUrl = urlParts.length > 2 ? urlParts[1] + '://' + urlParts[2] : urlParts[1];
-    var mbtilesParts = mbtilesUrl.split('/');
-    var mbtilesPartsLength = mbtilesParts.length;
-    var y = mbtilesParts.splice(mbtilesPartsLength - 1, 1)[0];
-    var x = mbtilesParts.splice(mbtilesPartsLength - 2, 1)[0];
-    var z = mbtilesParts.splice(mbtilesPartsLength - 3, 1)[0];
-    var filename = mbtilesParts.join('/');
-    return {
-        filename: filename,
-        z: z,
-        x: x,
-        y: y,
-    };
-};
-// mbtiles files are sqlite databases. This function loads the database and returns a handler
-// to work with sqlite databases in javascript we need to use sql.js.
-// to make this work in your project make sure to copy sql-wasm.wasm to the file root of your public folder and
-// add the following config to the externals prop of your webpack config
-// {externals: { fs: 'fs' }};
-var getMbtilesDbHandler = function (_a) {
-    var filename = _a.filename;
-    return __awaiter(void 0, void 0, void 0, function () {
-        var SQL, fetched, buf, db;
-        return __generator(this, function (_b) {
-            switch (_b.label) {
-                case 0:
-                    if (!!loadedMbtiles[filename]) return [3 /*break*/, 4];
-                    return [4 /*yield*/, initSqlJs__default["default"]()];
-                case 1:
-                    SQL = _b.sent();
-                    return [4 /*yield*/, fetch(filename)];
-                case 2:
-                    fetched = _b.sent();
-                    return [4 /*yield*/, fetched.arrayBuffer()];
-                case 3:
-                    buf = _b.sent();
-                    db = new SQL.Database(new Uint8Array(buf));
-                    loadedMbtiles[filename] = db;
-                    _b.label = 4;
-                case 4: return [2 /*return*/, loadedMbtiles[filename]];
-            }
-        });
-    });
-};
-/**
- * Example usage:
- * getBufferFromMbtiles({ filename: 'mbtiles/countries.mbtiles', z: '0', x: '0', y: '0' }).then(
- * 	(result) => {
- * 		console.log(result);
- * 	}
- * );
- */
-function getBufferFromMbtiles(params) {
-    return __awaiter(this, void 0, void 0, function () {
-        var db, query;
-        return __generator(this, function (_a) {
-            switch (_a.label) {
-                case 0: return [4 /*yield*/, getMbtilesDbHandler(params)];
-                case 1:
-                    db = _a.sent();
-                    query = 'SELECT tile_data FROM tiles WHERE zoom_level = ' +
-                        params.z +
-                        ' AND tile_column = ' +
-                        params.x +
-                        ' AND tile_row = ' +
-                        (Math.pow(2, parseInt(params.z)) - parseInt(params.y) - 1);
-                    return [2 /*return*/, new Promise(function (resolve, reject) {
-                            try {
-                                // some of the logic here was heavily inspired by
-                                // https://github.com/IsraelHikingMap/Site/blob/6aa2ec0cfb8891fa048b1d9e2a4fc7d4cbcc8c97/IsraelHiking.Web/src/application/services/database.service.ts
-                                var result = db.exec(query);
-                                if (result.length !== 1) {
-                                    reject(new Error('Tile not found.'));
-                                    return;
-                                }
-                                var resultData = result[0].values[0][0];
-                                var binData = void 0;
-                                var isGzipped = resultData[0] === 0x1f && resultData[1] === 0x8b;
-                                if (isGzipped) {
-                                    binData = pako__namespace.inflate(resultData);
-                                }
-                                else {
-                                    binData = resultData;
-                                }
-                                if (binData === null || binData === void 0 ? void 0 : binData.buffer) {
-                                    resolve(binData.buffer);
-                                }
-                                else {
-                                    reject(new Error('Tile not found.'));
-                                    return;
-                                }
-                            }
-                            catch (error) {
-                                reject(error);
-                            }
-                        })];
-            }
-        });
-    });
-}
-/**
- * Expects a tile url in the following format:
- *
- * 'mbtiles://mbtiles/countries.mbtiles/{z}/{x}/{y}'
- */
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-var mbTilesProtocolHandler = function (params, callback) {
-    var parsedParams = parseTileParams(params.url);
-    getBufferFromMbtiles(parsedParams).then(function (result) {
-        if (result) {
-            callback(null, result, null, null);
-        }
-        else {
-            callback(new Error('Tile not found'));
-        }
-    });
-    return { cancel: function () { } };
-};
-
 var handlers = {
     csv: CSVProtocolHandler,
     topojson: TopojsonProtocolHandler,
@@ -7860,7 +7780,7 @@ var handlers = {
     gpx: XMLProtocolHandler,
     kml: XMLProtocolHandler,
     tcx: XMLProtocolHandler,
-    mbtiles: mbTilesProtocolHandler
+    //mbtiles: mbTilesProtocolHandler
 };
 var types = ['fill', 'line', 'circle'];
 function ProtocolHandlerLayerForm(props) {
@@ -8106,19 +8026,12 @@ 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',
+        //'mbtiles',
         'csv',
         'topojson',
         'osm',
@@ -8127,10 +8040,6 @@ var AddLayerButton = function (props) {
         '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 })));