@mapcomponents/react-maplibre 0.1.69 → 0.1.71

package/CHANGELOG.md

@@ -1,6 +1,29 @@
 # Change Log
 
 
+## [v0.1.71] - 2023-03-05
+
+### Fixed
+- e3178b5: fix Topbar sidebar defaults
+
+## [v0.1.70] - 2023-03-03
+
+### Fixed
+- 153b00d: fix react 18 compatibility issue. reset initializedRef if MapLibreMap is removed from react dom (#81) …
+
+### Added
+- TopToolbar and Sidebar component exports
+- cdc4b5b: add createPng & downloadPng function to useExportMap hook promise
+
+### Changed
+- cdc4b5b: adjust MlCreatePdfButton to use useExportMap hook
+- 6b6ce0c: update .npmignore to include all files & folders that aren't required in the module build
+
+## [v0.1.69] - 2023-02-07
+
+### Changed
+- readd dependencies to package.dependencies
+
 ## [v0.1.68] - 2023-02-07
 
 ### Added

package/README.md

@@ -31,7 +31,8 @@ Run the following commands in the terminal:
 
 1. `npx create-react-app {your-app-name} --template @mapcomponents/cra-template`
 2. `cd {your-app-name}`
-3. `yarn start`
+3. `yarn`
+4. `yarn start`
 
 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.
 
@@ -39,7 +40,7 @@ This will start a development server that serves the mapcomponents app on port 3
 
 In this case, navigate to your project folder in a terminal and execute the following steps:
 
-1. Add @mapcomponents/react-maplibre as a dependency to your project using `yarn add @mapcomponents/react-maplibre` or `npm i @mapcomponents/react-maplibre` depending on which package manager you prefer.
+1. Add @mapcomponents/react-maplibre as a dependency to your project using `yarn add @mapcomponents/react-maplibre`.
 2. Add the MapComponentsProvider (named export of this module) to your applications react-DOM where it makes sense. Only children of this component will be able to render a map canvas or interact with a maplibre-gl instance. Place it in the index.js entrypoint if your application is a dedicated map app and all components have a high probability to interact with the maplibre-gl instance. Place it somewhere higher in the JSX tree if the map constitutes only a small portion of your app and components outside of the MapComponentsProvider have no need to interact with the map instance.
 3. Add a MapLibreMap component to the react-DOM wherever the map canvas is supposed to be placed.
 

package/dist/components/MlComponentTemplate/MlComponentTemplate.d.ts

@@ -4,14 +4,9 @@ export interface MlComponentTemplateProps {
      * 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;
 }
 /**
- * Component template
+ * Component description
  *
  */
 declare const MlComponentTemplate: {

package/dist/components/MlCreatePdfButton/MlCreatePdfButton.d.ts

@@ -1,14 +1,14 @@
 /// <reference types="react" />
+import { createExportOptions } from 'src/hooks/useExportMap/lib';
 export interface MlCreatePdfButtonProps {
     /**
      * 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.
+     * Option overrides for the createExport function
      */
-    insertBeforeLayer?: string;
+    exportOptions?: createExportOptions;
 }
 /**
  * Renders a button that will create a PDF version of the current map view (dimensions adjusted to fit Din A4 Paper).

package/dist/components/MlCreatePdfForm/MlCreatePdfForm.d.ts

@@ -6,10 +6,15 @@ interface MlCreatePdfFormProps {
      * Id of the target MapLibre instance in mapContext
      */
     mapId?: string;
+    /**
+     * sx props that will be applied to the form control components
+     */
     formControlStyles?: SxProps;
+    /**
+     * Function that will be called before the PDF is created.
+     * Allowing to access and manipulate the jspdf instance before the PDF is created.
+     */
     onCreatePdf?: (options: createPdfResolverParams) => createPdfResolverParams;
-    excludeLayerIds?: Array<string>;
-    includeLayerIds?: Array<string>;
 }
 export type { MlCreatePdfFormProps };
 /**

package/dist/components/MlCreatePngButton/MlCreatePngButton.d.ts

@@ -0,0 +1,22 @@
+/// <reference types="react" />
+import { createExportOptions } from 'src/hooks/useExportMap/lib';
+export interface MlCreatePngButtonProps {
+    /**
+     * Id of the target MapLibre instance in mapContext
+     */
+    mapId?: string;
+    /**
+     * Option overrides for the createExport function
+     */
+    exportOptions?: createExportOptions;
+}
+/**
+ * Renders a button that will create a Png file of the current map view (dimensions adjusted to fit DIN A4 paper).
+ */
+declare const MlCreatePngButton: {
+    (props: MlCreatePngButtonProps): JSX.Element;
+    defaultProps: {
+        mapId: undefined;
+    };
+};
+export default MlCreatePngButton;

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

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

package/dist/components/MlGpxViewer/util/{MetadataDrawer.d.ts → Metadata.d.ts}

@@ -2,7 +2,6 @@
 import { MetadataType } from '../../../hooks/useGpx/useGpx';
 type Props = {
     metadata: MetadataType[];
-    open: boolean;
 };
-export default function MetadataDrawer(props: Props): JSX.Element;
+export default function Metadata(props: Props): JSX.Element;
 export {};

package/dist/components/MlGpxViewer/util/MlGpxDemoLoader.d.ts

@@ -1,7 +1,7 @@
 /// <reference types="react" />
 interface MlGpxDemoLoaderProps {
     open: boolean;
-    setOpen: (open: boolean) => void;
+    close: () => void;
     setGpx: (gpx: string | undefined) => void;
 }
 /**

package/dist/hooks/useExportMap/lib.d.ts

@@ -16,6 +16,7 @@ export type { createExportOptions };
 declare const createExport: (options: createExportOptions) => Promise<createExportResolverParams>;
 interface createExportResolverParams extends createExportOptions {
     createPdf: (_options?: createJsPdfOptions) => Promise<createPdfResolverParams>;
+    createPng: (_options?: createPngOptions) => Promise<createPngResolverParams>;
     renderMap: Map;
     hiddenContainer: HTMLDivElement;
 }
@@ -29,8 +30,22 @@ interface createPdfResolverParams extends createJsPdfOptions {
     pdf: jsPDF;
     downloadPdf: (_options?: downloadPdfOptions) => Promise<downloadPdfOptions>;
 }
-export type { createPdfResolverParams };
 interface downloadPdfOptions extends createJsPdfOptions {
     pdf: jsPDF;
 }
+export type { createPdfResolverParams };
+interface createPngOptions extends createExportOptions {
+    renderMap: Map;
+    hiddenContainer: HTMLDivElement;
+}
+export type { createPngOptions };
+interface createPngResolverParams extends createPngOptions {
+    png: string;
+    downloadPng: (_options?: downloadPngOptions) => Promise<downloadPngOptions>;
+}
+export type { createPngResolverParams };
+interface downloadPngOptions extends createPngOptions {
+    png: string;
+    name?: string;
+}
 export { createExport };

package/dist/index.d.ts

@@ -54,3 +54,5 @@ export { default as LayerListFolder } from './ui_components/LayerList/LayerListF
 export { default as LayerPropertyForm } from './ui_components/LayerList/util/LayerPropertyForm';
 export { default as LayerListItemVectorLayer } from './ui_components/LayerList/util/LayerListItemVectorLayer';
 export { default as ColorPicker } from './ui_components/LayerList/util/input/ColorPicker';
+export { default as TopToolbar } from './ui_components/TopToolbar';
+export { default as Sidebar } from './ui_components/Sidebar';