@mapcomponents/react-maplibre 0.1.80 → 0.1.82

package/CHANGELOG.md

@@ -1,6 +1,19 @@
 # Change Log
 
-## [v0.1.8] - 2023-06-01
+## [v0.1.82] - 2023-06-12
+
+### Fixed
+
+- b89794a: remove mbTilesProtocolHandler from export to remove sql.js dependency as it breaks app builds
+
+## [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,7 @@ 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 { 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');
@@ -90,6 +90,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);
@@ -738,7 +739,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 +1440,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 +4192,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 +6189,25 @@ 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 SimpleDataContext = /*#__PURE__*/React__default["default"].createContext({});
 var SimpleDataContextProvider = SimpleDataContext.Provider;
 
@@ -19932,6 +19952,7 @@ exports.TopToolbar = TopToolbar;
 exports.UploadButton = UploadButton;
 exports.WmsLayerForm = WmsLayerForm;
 exports.getTheme = getTheme;
+exports.useAddProtocol = useAddProtocol;
 exports.useCameraFollowPath = useCameraFollowPath;
 exports.useExportMap = useExportMap;
 exports.useFeatureEditor = useFeatureEditor;