@mapcomponents/react-maplibre 0.1.90 → 0.1.92

package/CHANGELOG.md

@@ -1,6 +1,33 @@
 # Change Log
 
-## [v0.1.89] - 2024-01-02
+## [v0.1.92] - 2024-01-16
+
+### Fixed
+
+- fe33641: fix useSource hook to dynamically adjust to props.sourceId changes
+- fe33641: fix useMap hook to use less setState calls
+- fe33641: fix useLayer hook options.source prop to wait for the source to be added
+
+### Changed
+
+- fe33641: add MlGeoJsonLayer labelProp defaults to enable simply passing the property name to props.labelProp to get labels. 
+- fe33641: make label layer use the same source as the main layer.
+- fe33641: adjust MlGeoJsonLayer labelProp storybook demo to show the actual use of the property
+
+
+## [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/MlGeoJsonLayer/MlGeoJsonLayer.d.ts

@@ -21,7 +21,7 @@ export type MlGeoJsonLayerProps = {
     /**
      * GeoJSON data that is supposed to be rendered by this component.
      */
-    geojson: Feature | FeatureCollection | undefined;
+    geojson?: Feature | FeatureCollection | undefined;
     /**
      * Type of the layer that will be added to the MapLibre instance.
      * All types from LayerSpecification union type are supported except the type from
@@ -29,6 +29,7 @@ export type MlGeoJsonLayerProps = {
      */
     type?: Exclude<LayerSpecification['type'], RasterLayerSpecification['type']>;
     /**
+     * @deprecated The property should not be used. Please use the options.paint property instead. This will be removed in the next major release.
      * Paint property object, that is passed to the addLayer call.
      * Possible props depend on the layer type.
      * See https://maplibre.org/maplibre-gl-js-docs/style-spec/layers/
@@ -41,6 +42,7 @@ export type MlGeoJsonLayerProps = {
      */
     paint?: Exclude<LayerSpecification['paint'], RasterLayerSpecification['paint']>;
     /**
+     * @deprecated The property should not be used. Please use the options.layout property instead. This will be removed in the next major release.
      * Layout property object, that is passed to the addLayer call.
      * Possible props depend on the layer type.
      * See https://maplibre.org/maplibre-gl-js-docs/style-spec/layers/

package/dist/hooks/useSource.d.ts

@@ -1,6 +1,6 @@
-import { useMapType } from "./useMap";
-import MapLibreGlWrapper from "../components/MapLibreMap/lib/MapLibreGlWrapper";
-import { Source, SourceSpecification } from "maplibre-gl";
+import { useMapType } from './useMap';
+import MapLibreGlWrapper from '../components/MapLibreMap/lib/MapLibreGlWrapper';
+import { Source, SourceSpecification } from 'maplibre-gl';
 type useSourceType = {
     map: MapLibreGlWrapper | undefined;
     source: Source | undefined;

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);
@@ -1324,7 +1320,7 @@ useMapState.propTypes = {
 
 function useMap(props) {
     var mapContext = React.useContext(MapContext);
-    var _a = React.useState(), map = _a[0], setMap = _a[1];
+    var _a = React.useState({ map: undefined, ready: false }), state = _a[0], setState = _a[1];
     var mapState = useMapState({
         mapId: props === null || props === void 0 ? void 0 : props.mapId,
         watch: {
@@ -1338,7 +1334,6 @@ function useMap(props) {
     });
     var mapRef = React.useRef();
     var componentId = React.useRef(uuid.v4());
-    var _b = React.useState(false), mapIsReady = _b[0], setMapIsReady = _b[1];
     var cleanup = function () {
         if (mapRef.current) {
             mapRef.current.cleanup(componentId.current);
@@ -1347,7 +1342,6 @@ function useMap(props) {
     React.useEffect(function () {
         return function () {
             cleanup();
-            setMapIsReady(false);
             mapRef.current = undefined;
         };
     }, []);
@@ -1355,8 +1349,7 @@ function useMap(props) {
         var _a;
         if (mapRef.current && mapRef.current.cancelled === true) {
             mapRef.current = undefined;
-            setMap(undefined);
-            setMapIsReady(false);
+            setState({ map: undefined, ready: false });
         }
         if (mapRef.current || !mapContext.mapExists(props === null || props === void 0 ? void 0 : props.mapId))
             return;
@@ -1374,12 +1367,11 @@ function useMap(props) {
             }
         }
         mapRef.current = mapContext.getMap(props === null || props === void 0 ? void 0 : props.mapId);
-        setMap(mapRef.current);
-        setMapIsReady(true);
+        setState({ map: mapRef.current, ready: true });
     }, [mapContext.mapIds, mapState.layers, mapContext, props]);
     return {
-        map: map,
-        mapIsReady: mapIsReady,
+        map: state.map,
+        mapIsReady: state.ready,
         componentId: componentId.current,
         layers: mapState.layers,
         cleanup: cleanup,
@@ -2433,6 +2425,7 @@ var legalLayerTypes = [
     'background',
 ];
 function useLayer(props) {
+    var _a;
     var mapHook = useMap({
         mapId: props.mapId,
         waitForLayer: props.insertBeforeLayer,
@@ -2440,17 +2433,17 @@ function useLayer(props) {
     var layerTypeRef = React.useRef('');
     var layerPaintConfRef = React.useRef('');
     var layerLayoutConfRef = React.useRef('');
-    var _a = React.useState(), layer = _a[0], setLayer = _a[1];
+    var _b = React.useState(), layer = _b[0], setLayer = _b[1];
     var initializedRef = React.useRef(false);
     var layerId = React.useRef(props.layerId || (props.idPrefix ? props.idPrefix : 'Layer-') + mapHook.componentId);
     var createLayer = React.useCallback(function () {
-        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
         if (!mapHook.map || (mapHook === null || mapHook === void 0 ? void 0 : mapHook.map.cancelled))
             return;
         if (mapHook.map.map.getLayer(layerId.current)) {
             mapHook.cleanup();
         }
-        if (mapHook.map.map.getSource(layerId.current)) {
+        if (typeof ((_a = props === null || props === void 0 ? void 0 : props.options) === null || _a === void 0 ? void 0 : _a.source) !== 'string' && mapHook.map.map.getSource(layerId.current)) {
             mapHook.map.map.removeSource(layerId.current);
         }
         if (typeof props.options.source === 'string') {
@@ -2464,18 +2457,18 @@ function useLayer(props) {
         initializedRef.current = true;
         try {
             mapHook.map.addLayer(__assign(__assign(__assign(__assign({}, props.options), (props.geojson &&
-                (!((_a = props.options) === null || _a === void 0 ? void 0 : _a.source) ||
-                    (((_c = (_b = props.options) === null || _b === void 0 ? void 0 : _b.source) === null || _c === void 0 ? void 0 : _c.attribution) && !((_e = (_d = props.options) === null || _d === void 0 ? void 0 : _d.source) === null || _e === void 0 ? void 0 : _e.type))) // if either options.source isn't defined or only options.source.attribution is defined
+                (!((_b = props.options) === null || _b === void 0 ? void 0 : _b.source) ||
+                    (((_d = (_c = props.options) === null || _c === void 0 ? void 0 : _c.source) === null || _d === void 0 ? void 0 : _d.attribution) && !((_f = (_e = props.options) === null || _e === void 0 ? void 0 : _e.source) === null || _f === void 0 ? void 0 : _f.type))) // if either options.source isn't defined or only options.source.attribution is defined
                 ? {
                     source: {
                         type: 'geojson',
                         data: props.geojson,
-                        attribution: ((_f = props.options.source) === null || _f === void 0 ? void 0 : _f.attribution)
-                            ? (_g = props.options.source) === null || _g === void 0 ? void 0 : _g.attribution
+                        attribution: ((_g = props.options.source) === null || _g === void 0 ? void 0 : _g.attribution)
+                            ? (_h = props.options.source) === null || _h === void 0 ? void 0 : _h.attribution
                             : '',
                     },
                 }
-                : {})), (typeof ((_h = props.options) === null || _h === void 0 ? void 0 : _h.source) === 'string'
+                : {})), (typeof ((_j = props.options) === null || _j === void 0 ? void 0 : _j.source) === 'string'
                 ? {
                     source: props.options.source,
                 }
@@ -2506,8 +2499,8 @@ function useLayer(props) {
                 createLayer();
             }
         }, mapHook.componentId);
-        layerPaintConfRef.current = JSON.stringify((_j = props.options) === null || _j === void 0 ? void 0 : _j.paint);
-        layerLayoutConfRef.current = JSON.stringify((_k = props.options) === null || _k === void 0 ? void 0 : _k.layout);
+        layerPaintConfRef.current = JSON.stringify((_k = props.options) === null || _k === void 0 ? void 0 : _k.paint);
+        layerLayoutConfRef.current = JSON.stringify((_l = props.options) === null || _l === void 0 ? void 0 : _l.layout);
         layerTypeRef.current = props.options.type;
     }, [props, mapHook.map]);
     React.useEffect(function () {
@@ -2523,7 +2516,7 @@ function useLayer(props) {
             return;
         }
         createLayer();
-    }, [mapHook.map, props.options, createLayer]);
+    }, [mapHook.map, mapHook.mapIsReady, props.options, createLayer]);
     React.useEffect(function () {
         var _a, _b, _c, _d, _e, _f;
         if (((_a = mapHook.map) === null || _a === void 0 ? void 0 : _a.cancelled) === true ||
@@ -2578,6 +2571,29 @@ function useLayer(props) {
             mapHook.cleanup();
         };
     }, []);
+    React.useEffect(function () {
+        var _a, _b, _c, _d, _e, _f;
+        if (typeof ((_a = props === null || props === void 0 ? void 0 : props.options) === null || _a === void 0 ? void 0 : _a.source) !== 'string' ||
+            !mapHook.map ||
+            (typeof ((_b = props === null || props === void 0 ? void 0 : props.options) === null || _b === void 0 ? void 0 : _b.source) === 'string' &&
+                ((_d = (_c = mapHook === null || mapHook === void 0 ? void 0 : mapHook.map) === null || _c === void 0 ? void 0 : _c.getLayer) === null || _d === void 0 ? void 0 : _d.call(_c, layerId.current)) &&
+                ((_f = (_e = mapHook === null || mapHook === void 0 ? void 0 : mapHook.map) === null || _e === void 0 ? void 0 : _e.getSource) === null || _f === void 0 ? void 0 : _f.call(_e, props.options.source)))) {
+            return;
+        }
+        var findSourceHandler = function () {
+            var _a, _b, _c;
+            if (typeof ((_a = props === null || props === void 0 ? void 0 : props.options) === null || _a === void 0 ? void 0 : _a.source) === 'string' &&
+                ((_c = (_b = mapHook === null || mapHook === void 0 ? void 0 : mapHook.map) === null || _b === void 0 ? void 0 : _b.getSource) === null || _c === void 0 ? void 0 : _c.call(_b, props.options.source))) {
+                createLayer();
+            }
+        };
+        mapHook.map.on('sourcedata', findSourceHandler);
+        return function () {
+            if (mapHook === null || mapHook === void 0 ? void 0 : mapHook.map) {
+                mapHook.map.off('sourcedata', findSourceHandler);
+            }
+        };
+    }, [mapHook.map, (_a = props.options) === null || _a === void 0 ? void 0 : _a.source]);
     return {
         map: mapHook.map,
         layer: layer,
@@ -2684,6 +2700,66 @@ var getDefaulLayerTypeByGeometry = function (geojson) {
     return "fill";
 };
 
+function useSource(props) {
+    var _a;
+    var mapHook = useMap({
+        mapId: props.mapId,
+    });
+    var initializedRef = React.useRef(false);
+    var _b = React.useState(), source = _b[0], setSource = _b[1];
+    var sourceId = React.useRef(props.sourceId || (props.idPrefix ? props.idPrefix : 'Source-') + mapHook.componentId);
+    var createSource = React.useCallback(function () {
+        var _a;
+        if (!mapHook.map)
+            return;
+        initializedRef.current = true;
+        if (mapHook.map.map.getSource(sourceId.current)) {
+            mapHook.cleanup();
+        }
+        (_a = mapHook.map) === null || _a === void 0 ? void 0 : _a.addSource(sourceId.current, __assign({}, props.source), mapHook.componentId);
+        setSource(mapHook.map.map.getSource(sourceId.current));
+    }, [props, mapHook.map]);
+    React.useEffect(function () {
+        var _a, _b, _c, _d;
+        if (!initializedRef.current || !((_b = (_a = mapHook.map) === null || _a === void 0 ? void 0 : _a.map) === null || _b === void 0 ? void 0 : _b.getSource(props.sourceId)))
+            return;
+        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+        //@ts-ignore setData only exists on GeoJsonSource
+        (_d = (_c = mapHook.map.map.getSource(props.sourceId)) === null || _c === void 0 ? void 0 : _c.setData) === null || _d === void 0 ? void 0 : _d.call(_c, props.source.data);
+        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+        //@ts-ignore data only exists on GeoJsonSource
+    }, [(_a = props.source) === null || _a === void 0 ? void 0 : _a.data]);
+    React.useEffect(function () {
+        var _a, _b, _c;
+        if (((_c = (_b = (_a = mapHook === null || mapHook === void 0 ? void 0 : mapHook.map) === null || _a === void 0 ? void 0 : _a.map) === null || _b === void 0 ? void 0 : _b.getSource) === null || _c === void 0 ? void 0 : _c.call(_b, props.sourceId)) && props.sourceId === sourceId.current)
+            return;
+        sourceId.current = props.sourceId;
+        createSource();
+    }, [mapHook.map, props, createSource]);
+    //cleanup
+    React.useEffect(function () {
+        return function () {
+            var _a, _b, _c;
+            initializedRef.current = false;
+            if (mapHook.map && ((_c = (_b = (_a = mapHook.map) === null || _a === void 0 ? void 0 : _a.map) === null || _b === void 0 ? void 0 : _b.style) === null || _c === void 0 ? void 0 : _c._layers)) {
+                for (var _i = 0, _d = Object.entries(mapHook.map.map.style._layers); _i < _d.length; _i++) {
+                    var _e = _d[_i], layerId = _e[0], layer = _e[1];
+                    if (layer.source === sourceId.current) {
+                        mapHook.map.map.removeLayer(layerId);
+                    }
+                }
+                mapHook.map.map.removeSource(sourceId.current);
+            }
+        };
+    }, [mapHook.map]);
+    return {
+        map: mapHook.map,
+        source: source,
+        componentId: mapHook.componentId,
+        mapHook: mapHook,
+    };
+}
+
 /**
  * Adds source and layer to display GeoJSON data on the map.
  *
@@ -2692,14 +2768,28 @@ var getDefaulLayerTypeByGeometry = function (geojson) {
 var MlGeoJsonLayer = function (props) {
     var _a, _b, _c;
     var layerType = props.type || getDefaulLayerTypeByGeometry(props.geojson);
-    var layerId = props.layerId || 'MlGeoJsonLayer-' + uuid.v4();
-    var labelLayerId = "label-".concat(layerId);
-    // Use a useRef hook to reference the layer object to be able to access it later inside useEffect hooks
+    var layerId = React.useRef(props.layerId || 'MlGeoJsonLayer-' + uuid.v4());
+    var labelLayerId = "label-".concat(layerId.current);
+    React.useEffect(function () {
+        if (!props.layerId) {
+            layerId.current = 'MlGeoJsonLayer-' + uuid.v4();
+        }
+        else {
+            layerId.current = props.layerId;
+        }
+    }, [props.layerId]);
+    useSource({
+        mapId: props.mapId,
+        sourceId: layerId.current,
+        source: {
+            type: 'geojson',
+            data: props.geojson,
+        },
+    });
     useLayer({
         mapId: props.mapId,
-        layerId: props.layerId || 'MlGeoJsonLayer-' + uuid.v4(),
-        geojson: props.geojson,
-        options: __assign(__assign({}, props.options), { paint: __assign(__assign({}, (props.paint || getDefaultPaintPropsByType(layerType, props.defaultPaintOverrides))), (_a = props === null || props === void 0 ? void 0 : props.options) === null || _a === void 0 ? void 0 : _a.paint), layout: __assign(__assign({}, ((props === null || props === void 0 ? void 0 : props.layout) || {})), (_b = props === null || props === void 0 ? void 0 : props.options) === null || _b === void 0 ? void 0 : _b.layout), type: layerType }),
+        layerId: layerId.current,
+        options: __assign(__assign({ source: layerId.current }, props.options), { paint: __assign(__assign({}, (props.paint || getDefaultPaintPropsByType(layerType, props.defaultPaintOverrides))), (_a = props === null || props === void 0 ? void 0 : props.options) === null || _a === void 0 ? void 0 : _a.paint), layout: __assign(__assign({}, ((props === null || props === void 0 ? void 0 : props.layout) || {})), (_b = props === null || props === void 0 ? void 0 : props.options) === null || _b === void 0 ? void 0 : _b.layout), type: layerType }),
         insertBeforeLayer: props.insertBeforeLayer,
         onHover: props.onHover,
         onClick: props.onClick,
@@ -2708,9 +2798,11 @@ var MlGeoJsonLayer = function (props) {
     if (props.labelProp) {
         useLayer({
             mapId: props.mapId,
-            layerId: labelLayerId,
-            geojson: props.geojson,
-            options: __assign(__assign({ type: 'symbol' }, ((props === null || props === void 0 ? void 0 : props.labelOptions) ? props.labelOptions : {})), { layout: __assign({ 'text-field': "{".concat(props.labelProp, "}") }, (((_c = props === null || props === void 0 ? void 0 : props.labelOptions) === null || _c === void 0 ? void 0 : _c.layout) ? props.labelOptions.layout : {})), paint: {} }),
+            options: __assign(__assign({ source: props.labelProp ? layerId.current : undefined, id: labelLayerId, type: 'symbol', maxzoom: 24, minzoom: 1 }, ((props === null || props === void 0 ? void 0 : props.labelOptions) ? props.labelOptions : {})), { layout: __assign({ 'text-font': ['Open Sans Regular'], 'text-field': "{".concat(props.labelProp, "}") }, (((_c = props === null || props === void 0 ? void 0 : props.labelOptions) === null || _c === void 0 ? void 0 : _c.layout) ? props.labelOptions.layout : {})), paint: {
+                    'text-halo-width': 1,
+                    'text-halo-color': '#121212',
+                    'text-color': '#fefefe',
+                } }),
         });
     }
     return React__default["default"].createElement(React__default["default"].Fragment, null);
@@ -4583,64 +4675,6 @@ useLayerHoverPopup.defaultProps = {
     mapId: undefined,
 };
 
-function useSource(props) {
-    var _a;
-    var mapHook = useMap({
-        mapId: props.mapId,
-    });
-    var initializedRef = React.useRef(false);
-    var _b = React.useState(), source = _b[0], setSource = _b[1];
-    var sourceId = React.useRef(props.sourceId || (props.idPrefix ? props.idPrefix : "Source-") + mapHook.componentId);
-    var createSource = React.useCallback(function () {
-        var _a;
-        if (!mapHook.map)
-            return;
-        initializedRef.current = true;
-        if (mapHook.map.map.getSource(sourceId.current)) {
-            mapHook.cleanup();
-        }
-        (_a = mapHook.map) === null || _a === void 0 ? void 0 : _a.addSource(sourceId.current, __assign({}, props.source), mapHook.componentId);
-        setSource(mapHook.map.map.getSource(sourceId.current));
-    }, [props, mapHook.map]);
-    React.useEffect(function () {
-        if (!mapHook.map || initializedRef.current)
-            return;
-        createSource();
-    }, [mapHook.map, props, createSource]);
-    React.useEffect(function () {
-        var _a, _b, _c, _d;
-        if (!initializedRef.current || !((_b = (_a = mapHook.map) === null || _a === void 0 ? void 0 : _a.map) === null || _b === void 0 ? void 0 : _b.getSource(props.sourceId)))
-            return;
-        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-        //@ts-ignore setData only exists on GeoJsonSource
-        (_d = (_c = mapHook.map.map.getSource(props.sourceId)) === null || _c === void 0 ? void 0 : _c.setData) === null || _d === void 0 ? void 0 : _d.call(_c, props.source.data);
-        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-        //@ts-ignore data only exists on GeoJsonSource
-    }, [(_a = props.source) === null || _a === void 0 ? void 0 : _a.data]);
-    //cleanup
-    React.useEffect(function () {
-        return function () {
-            var _a, _b, _c;
-            initializedRef.current = false;
-            if (mapHook.map && ((_c = (_b = (_a = mapHook.map) === null || _a === void 0 ? void 0 : _a.map) === null || _b === void 0 ? void 0 : _b.style) === null || _c === void 0 ? void 0 : _c._layers)) {
-                for (var _i = 0, _d = Object.entries(mapHook.map.map.style._layers); _i < _d.length; _i++) {
-                    var _e = _d[_i], layerId = _e[0], layer = _e[1];
-                    if (layer.source === sourceId.current) {
-                        mapHook.map.map.removeLayer(layerId);
-                    }
-                }
-                mapHook.map.map.removeSource(sourceId.current);
-            }
-        };
-    }, [mapHook.map]);
-    return {
-        map: mapHook.map,
-        source: source,
-        componentId: mapHook.componentId,
-        mapHook: mapHook,
-    };
-}
-
 /**
  * MlGpxViewer visualizes a given GPX Track on the map
  */
@@ -7777,128 +7811,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,
@@ -7906,7 +7818,7 @@ var handlers = {
     gpx: XMLProtocolHandler,
     kml: XMLProtocolHandler,
     tcx: XMLProtocolHandler,
-    mbtiles: mbTilesProtocolHandler
+    //mbtiles: mbTilesProtocolHandler
 };
 var types = ['fill', 'line', 'circle'];
 function ProtocolHandlerLayerForm(props) {
@@ -8152,19 +8064,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',
@@ -8173,10 +8078,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 })));