@mapcomponents/react-maplibre 0.1.80 → 0.1.81

package/CHANGELOG.md

@@ -1,6 +1,13 @@
 # Change Log
 
-## [v0.1.8] - 2023-06-01
+## [v0.1.81] - 2023-06-12
+
+### Added
+
+- 2ba02ba: add useAddProtocol hook
+- 2ba02ba: add mbTilesProtocolHandler
+
+## [v0.1.80] - 2023-06-01
 
 ### Added
 

package/README.md

@@ -20,7 +20,7 @@ Use our Codesandbox template to quickly try out this library without any setup r
 
 ### **... a new project**
 
-The easiest way to start a new project using this framework is to bootstrap a react application using our [create-react-app-template](https://github.com/mapcomponents/react-map-components-maplibre-cra-template).
+The easiest way to start a new project using this framework is to bootstrap a react application using our [vite-template](https://github.com/mapcomponents/template).
 
 **Requirements:**
 
@@ -29,12 +29,12 @@ The easiest way to start a new project using this framework is to bootstrap a re
 
 Run the following commands in the terminal:
 
-1. `npx create-react-app {your-app-name} --template @mapcomponents/cra-template`
+1. `npx degit mapcomponents/template {your-app-name}`
 2. `cd {your-app-name}`
 3. `yarn`
-4. `yarn start`
+4. `yarn dev`
 
-This will start a development server that serves the mapcomponents app on port 3000 of your local machine as well as a browser tab with live reload enabled. This reloads the affected parts of the application if changes are detected to the corresponding files in the filesystem. Open the project folder in the IDE of your choice and start building your map client.
+This will start a development server that serves the mapcomponents app on port 5174 of your local machine as well as a browser tab with live reload enabled. This reloads the affected parts of the application if changes are detected to the corresponding files in the filesystem. Open the project folder in the IDE of your choice and start building your map client.
 
 ### **... an existing react project**
 

package/dist/hooks/useAddProtocol/useAddProtocol.d.ts

@@ -0,0 +1,23 @@
+import { Cancelable, RequestParameters, ResponseCallback } from 'maplibre-gl';
+export interface useAddProtocolProps {
+    /**
+     * the protocol string, for example `mbtiles`
+     * In this example the handler function is called for all tile requests that start with the string `mbtiles://`
+     */
+    protocol: string;
+    /**
+     * Custom load tile function that will be called when using a source that starts with a custom url schema.
+     */
+    handler: (requestParameters: RequestParameters, callback: ResponseCallback<any>) => Cancelable;
+}
+/**
+ * Enables the use of custom protocols (basically custom tile load functions) in the maplibre-gl-js library.
+ *
+ */
+declare const useAddProtocol: {
+    (props: useAddProtocolProps): {};
+    defaultProps: {
+        mapId: undefined;
+    };
+};
+export default useAddProtocol;

package/dist/hooks/useAddProtocol/useAddProtocol.stories.d.ts

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

package/dist/index.d.ts

@@ -49,6 +49,8 @@ export { default as useWms } from "./hooks/useWms";
 export { default as useFilterData } from "./components/MlTemporalController/utils/useFilterData";
 export { default as useLayerContext } from "./hooks/useLayerContext";
 export { default as useFeatureEditor } from "./hooks/useFeatureEditor";
+export { default as useAddProtocol } from "./hooks/useAddProtocol/useAddProtocol";
+export { mbTilesProtocolHandler } from "./protocol_handlers/mbtiles";
 export { MapComponentsProvider } from "./contexts/MapContext";
 export { default as MapContext } from "./contexts/MapContext";
 export { default as SimpleDataProvider } from "./contexts/SimpleDataProvider";

package/dist/index.esm.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var maplibreGl = require('maplibre-gl');
+var maplibregl = require('maplibre-gl');
 var React = require('react');
 var styles = require('@mui/material/styles');
 var uuid = require('uuid');
@@ -46,6 +46,8 @@ var PauseIcon = require('@mui/icons-material/Pause');
 var StopIcon = require('@mui/icons-material/Stop');
 var FastForwardIcon = require('@mui/icons-material/FastForward');
 var FastRewindIcon = require('@mui/icons-material/FastRewind');
+var initSqlJs = require('sql.js');
+var pako = require('pako');
 var d3 = require('d3');
 var TuneIcon = require('@mui/icons-material/Tune');
 var reactColor = require('react-color');
@@ -90,6 +92,7 @@ function _interopNamespace(e) {
     return Object.freeze(n);
 }
 
+var maplibregl__default = /*#__PURE__*/_interopDefaultLegacy(maplibregl);
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var React__namespace = /*#__PURE__*/_interopNamespace(React);
 var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
@@ -126,6 +129,8 @@ var PauseIcon__default = /*#__PURE__*/_interopDefaultLegacy(PauseIcon);
 var StopIcon__default = /*#__PURE__*/_interopDefaultLegacy(StopIcon);
 var FastForwardIcon__default = /*#__PURE__*/_interopDefaultLegacy(FastForwardIcon);
 var FastRewindIcon__default = /*#__PURE__*/_interopDefaultLegacy(FastRewindIcon);
+var initSqlJs__default = /*#__PURE__*/_interopDefaultLegacy(initSqlJs);
+var pako__namespace = /*#__PURE__*/_interopNamespace(pako);
 var d3__namespace = /*#__PURE__*/_interopNamespace(d3);
 var TuneIcon__default = /*#__PURE__*/_interopDefaultLegacy(TuneIcon);
 var ArrowCircleDownIcon__default = /*#__PURE__*/_interopDefaultLegacy(ArrowCircleDownIcon);
@@ -738,7 +743,7 @@ var MapLibreGlWrapper = /** @class */ (function () {
                         _a.sent();
                         _a.label = 2;
                     case 2:
-                        self.map = new maplibreGl.Map(props.mapOptions);
+                        self.map = new maplibregl.Map(props.mapOptions);
                         self.addNativeMaplibreFunctionsAndProps();
                         self.wrapper.refreshViewport();
                         self.wrapper.fire('viewportchange');
@@ -1439,7 +1444,7 @@ var createExport = function (options) {
         _loop_1(name_1);
     }
     // Create a new MapLibre-gl instance
-    var renderMap = new maplibreGl.Map({
+    var renderMap = new maplibregl.Map({
         container: container,
         center: options.map.map.getCenter(),
         zoom: options.map.map.getZoom(),
@@ -4191,7 +4196,7 @@ var useLayerHoverPopup = function (props) {
         mapId: props.mapId,
         waitForLayer: props.layerId,
     });
-    var popup = React.useRef(new maplibreGl.Popup({
+    var popup = React.useRef(new maplibregl.Popup({
         closeButton: false,
         closeOnClick: true,
     }));
@@ -6188,6 +6193,147 @@ var useLayerContext = function () {
     return layerContext;
 };
 
+/**
+ * Enables the use of custom protocols (basically custom tile load functions) in the maplibre-gl-js library.
+ *
+ */
+var useAddProtocol = function (props) {
+    React.useEffect(function () {
+        if (!props.protocol || typeof props.handler !== 'function')
+            return;
+        maplibregl__default["default"].addProtocol(props.protocol, props.handler);
+        return function () {
+            maplibregl__default["default"].removeProtocol(props.protocol);
+        };
+    }, []);
+    return {};
+};
+useAddProtocol.defaultProps = {
+    mapId: undefined,
+};
+
+var loadedMbtiles = {};
+var parseParams = function (url) {
+    var urlParts = url.split('://');
+    var mbtilesUrl = 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 = parseParams(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 SimpleDataContext = /*#__PURE__*/React__default["default"].createContext({});
 var SimpleDataContextProvider = SimpleDataContext.Provider;
 
@@ -19932,6 +20078,8 @@ exports.TopToolbar = TopToolbar;
 exports.UploadButton = UploadButton;
 exports.WmsLayerForm = WmsLayerForm;
 exports.getTheme = getTheme;
+exports.mbTilesProtocolHandler = mbTilesProtocolHandler;
+exports.useAddProtocol = useAddProtocol;
 exports.useCameraFollowPath = useCameraFollowPath;
 exports.useExportMap = useExportMap;
 exports.useFeatureEditor = useFeatureEditor;