@mapcomponents/react-maplibre 0.1.56 → 0.1.58

package/src/contexts/SimpleDataProvider.js

@@ -4,61 +4,61 @@ import { SimpleDataContextProvider } from "./SimpleDataContext";
 import * as d3 from "d3";
 
 const SimpleDataProvider = (props) => {
-  const [data, setData] = useState(null);
-  useEffect(() => {
-    if (!props.url) return;
+	const [data, setData] = useState(null);
+	useEffect(() => {
+		if (!props.url) return;
 
-    let data_promise = null;
-    if (props.format === "json") {
-      data_promise = d3.json(props.url);
-    } else if (props.format === "csv") {
-      data_promise = d3.csv(props.url);
-    } else if (props.format === "xml") {
-      data_promise = d3.xml(props.url);
-    }
+		let data_promise = null;
+		if (props.format === "json") {
+			data_promise = d3.json(props.url);
+		} else if (props.format === "csv") {
+			data_promise = d3.csv(props.url);
+		} else if (props.format === "xml") {
+			data_promise = d3.xml(props.url);
+		}
 
-    if (data_promise) {
-      data_promise.then((received_data) => {
-        if (props.format === "xml") {
-          if (props.nodeType) {
-            let dataTmp = [];
-            received_data.querySelectorAll(props.nodeType).forEach((el) => {
+		if (data_promise) {
+			data_promise.then((received_data) => {
+				if (props.format === "xml") {
+					if (props.nodeType) {
+						let dataTmp = [];
+						received_data.querySelectorAll(props.nodeType).forEach((el) => {
 
-              dataTmp.push(props.formatData(el));
-            });
-            setData(dataTmp);
-          }
-        } else {
-          if (props.data_property) {
-            received_data = received_data[props.data_property];
-          }
-          if (typeof props.formatData === "function") {
-            setData(received_data.map(props.formatData));
-          } else {
-            setData(received_data);
-          }
-        }
-        if (typeof props.onData === "function") {
-          props.onData();
-        }
-      });
-    }
-  }, [props.url, props]);
+							dataTmp.push(props.formatData(el));
+						});
+						setData(dataTmp);
+					}
+				} else {
+					if (props.data_property) {
+						received_data = received_data[props.data_property];
+					}
+					if (typeof props.formatData === "function") {
+						setData(received_data.map(props.formatData));
+					} else {
+						setData(received_data);
+					}
+				}
+				if (typeof props.onData === "function") {
+					props.onData();
+				}
+			});
+		}
+	}, [props.url, props]);
 
-  const value = {
-    data: data,
-    setData: setData,
-  };
+	const value = {
+		data: data,
+		setData: setData,
+	};
 
-  return (
-    <SimpleDataContextProvider value={value}>
-      {props.children}
-    </SimpleDataContextProvider>
-  );
+	return (
+		<SimpleDataContextProvider value={value}>
+			{props.children}
+		</SimpleDataContextProvider>
+	);
 };
 
 SimpleDataProvider.propTypes = {
-  children: PropTypes.node.isRequired,
+	children: PropTypes.node.isRequired,
 };
 
 export default SimpleDataProvider;

package/src/contexts/SimpleDataProvider.test.js

@@ -1,7 +1,7 @@
 import React, {useContext} from 'react';
 import SimpleDataContext from './SimpleDataContext';
 import SimpleDataProvider from './SimpleDataProvider';
-import {  waitFor } from '@testing-library/react';
+import {	waitFor } from '@testing-library/react';
 import {mount} from 'enzyme';
 import * as d3 from "d3";
 
@@ -11,11 +11,11 @@ jest.mock('d3');
 
 const SimpleDataContextTestComponent = () => {
 
-  const simpleDataContext = useContext(SimpleDataContext);
+	const simpleDataContext = useContext(SimpleDataContext);
 
-  return <>
-    <div className="data">{JSON.stringify(simpleDataContext.data)}</div>
-  </>;
+	return <>
+		<div className="data">{JSON.stringify(simpleDataContext.data)}</div>
+	</>;
 }
 
 const mockData = {id:12,title:'Testtitle'};
@@ -24,45 +24,45 @@ const xmlMockData = (new DOMParser()).parseFromString('<?xml version="1.0" encod
 
 describe('SimpleDataProvider',() => {
 
-  it('should retrieve data and provide it through simpleDataContext.data (format: "csv")', async () => {
-    d3.csv.mockResolvedValue(mockData);
+	it('should retrieve data and provide it through simpleDataContext.data (format: "csv")', async () => {
+		d3.csv.mockResolvedValue(mockData);
 
-    const wrapper = mount(<SimpleDataProvider format="csv" url="test"><SimpleDataContextTestComponent /></SimpleDataProvider>);
+		const wrapper = mount(<SimpleDataProvider format="csv" url="test"><SimpleDataContextTestComponent /></SimpleDataProvider>);
 
-    await waitFor(() => expect(d3.csv).toHaveBeenCalledTimes(1))
+		await waitFor(() => expect(d3.csv).toHaveBeenCalledTimes(1))
 
-    expect(wrapper.find('.data').text()).toEqual(JSON.stringify(mockData));
-  });
+		expect(wrapper.find('.data').text()).toEqual(JSON.stringify(mockData));
+	});
 
-  it('should retrieve data and provide it through simpleDataContext.data (format: "xml")', async () => {
-    d3.xml.mockResolvedValue(xmlMockData);
+	it('should retrieve data and provide it through simpleDataContext.data (format: "xml")', async () => {
+		d3.xml.mockResolvedValue(xmlMockData);
 
-    const wrapper = mount(<SimpleDataProvider format="xml" nodeType="record" formatData={(record) => { return {id:record.querySelector('id').innerHTML,title:record.querySelector('title').innerHTML}}} url="test"><SimpleDataContextTestComponent /></SimpleDataProvider>);
+		const wrapper = mount(<SimpleDataProvider format="xml" nodeType="record" formatData={(record) => { return {id:record.querySelector('id').innerHTML,title:record.querySelector('title').innerHTML}}} url="test"><SimpleDataContextTestComponent /></SimpleDataProvider>);
 
-    await waitFor(() => expect(d3.xml).toHaveBeenCalledTimes(1))
+		await waitFor(() => expect(d3.xml).toHaveBeenCalledTimes(1))
 
-    expect(wrapper.find('.data').text()).toEqual('[{"id":"1","title":"Macey, Josephine, Robert, Clark"},{"id":"2","title":"Summer, Channing, Colette, Josephine"}]');
-  });
+		expect(wrapper.find('.data').text()).toEqual('[{"id":"1","title":"Macey, Josephine, Robert, Clark"},{"id":"2","title":"Summer, Channing, Colette, Josephine"}]');
+	});
 
-  it('should retrieve data and provide it through simpleDataContext.data (format: "json")', async () => {
-    d3.json.mockResolvedValue(mockData);
+	it('should retrieve data and provide it through simpleDataContext.data (format: "json")', async () => {
+		d3.json.mockResolvedValue(mockData);
 
-    const wrapper = mount(<SimpleDataProvider format="json" url="test"><SimpleDataContextTestComponent /></SimpleDataProvider>);
+		const wrapper = mount(<SimpleDataProvider format="json" url="test"><SimpleDataContextTestComponent /></SimpleDataProvider>);
 
-    await waitFor(() => expect(d3.json).toHaveBeenCalledTimes(1))
+		await waitFor(() => expect(d3.json).toHaveBeenCalledTimes(1))
 
-    expect(wrapper.find('.data').text()).toEqual(JSON.stringify(mockData));
-  });
+		expect(wrapper.find('.data').text()).toEqual(JSON.stringify(mockData));
+	});
 
-  it('should retrieve data and provide the content of the key props.dataProperty on the retrieved data through simpleDataContext.data (format: "json")', async () => {
-    d3.json.mockResolvedValue(nestedMockData);
+	it('should retrieve data and provide the content of the key props.dataProperty on the retrieved data through simpleDataContext.data (format: "json")', async () => {
+		d3.json.mockResolvedValue(nestedMockData);
 
-    const wrapper = mount(<SimpleDataProvider format="json" data_property="data" url="test"><SimpleDataContextTestComponent /></SimpleDataProvider>);
+		const wrapper = mount(<SimpleDataProvider format="json" data_property="data" url="test"><SimpleDataContextTestComponent /></SimpleDataProvider>);
 
-    await waitFor(() => expect(d3.json).toHaveBeenCalledTimes(1))
+		await waitFor(() => expect(d3.json).toHaveBeenCalledTimes(1))
 
-    expect(wrapper.find('.data').text()).toEqual(JSON.stringify(mockData));
-  });
+		expect(wrapper.find('.data').text()).toEqual(JSON.stringify(mockData));
+	});
 
 
 });

package/src/custom.d.tsx

@@ -1,26 +1,26 @@
 
 declare module "*.svg" {
-  const content: any;
-  export default content;
-  export { content as ReactComponent };
+	const content: any;
+	export default content;
+	export { content as ReactComponent };
 }
 declare module "*.js" {
-  const content: any;
-  export default content;
+	const content: any;
+	export default content;
 }
 
 //declare module '../index';
 type MapContextType= {
-  mapIds: [string?];
-  mapExists: Function;
-  maps: [];
-  map: any,
-  getMap: Function;
-  setMap: Function;
+	mapIds: [string?];
+	mapExists: Function;
+	maps: [];
+	map: any,
+	getMap: Function;
+	setMap: Function;
 };
 
 interface GeoJSON {
-  type: string,
-  features?: any
-  geometry?: any
+	type: string,
+	features?: any
+	geometry?: any
 }

package/src/decorators/MapContextDecorator.js

@@ -3,34 +3,32 @@ import React from "react";
 import { MapComponentsProvider } from "../index";
 import MapLibreMap from "../components/MapLibreMap/MapLibreMap";
 import "./style.css";
-import { createTheme, ThemeProvider } from "@mui/material/styles";
 import MlNavgiationTools from "../components/MlNavigationTools/MlNavigationTools";
-
-const theme = createTheme({});
+import ThemeWrapper from "./ThemeWrapper";
 
 const decorators = [
-  (Story) => (
-    <div className="fullscreen_map">
-      <ThemeProvider theme={theme}>
-        <MapComponentsProvider>
-          <Story />
-          <MapLibreMap
-            options={{
-              zoom: 14.5,
-              style: "https://wms.wheregroup.com/tileserver/style/osm-bright.json",
-              center: [7.0851268, 50.73884],
-            }}
-            mapId="map_1"
-          />
-          <MlNavgiationTools
-            sx={{ top: "10px", right: "5px" }}
-            showZoomButtons={false}
-            mapId="map_1"
-          />
-        </MapComponentsProvider>
-      </ThemeProvider>
-    </div>
-  ),
+	(Story) => (
+		<div className="fullscreen_map">
+			<ThemeWrapper>
+				<MapComponentsProvider>
+					<Story />
+					<MapLibreMap
+						options={{
+							zoom: 14.5,
+							style: "https://wms.wheregroup.com/tileserver/style/osm-bright.json",
+							center: [7.0851268, 50.73884],
+						}}
+						mapId="map_1"
+					/>
+					<MlNavgiationTools
+						sx={{ top: "10px", right: "5px" }}
+						showZoomButtons={false}
+						mapId="map_1"
+					/>
+				</MapComponentsProvider>
+			</ThemeWrapper>
+		</div>
+	),
 ];
 
 export default decorators;

package/src/decorators/MapContextDecoratorHooks.js

@@ -0,0 +1,34 @@
+import React from "react";
+
+import { MapComponentsProvider } from "../index";
+import MapLibreMap from "../components/MapLibreMap/MapLibreMap";
+import "./style.css";
+import MlNavgiationTools from "../components/MlNavigationTools/MlNavigationTools";
+import ThemeWrapper from "./ThemeWrapper";
+
+const decorators = [
+  (Story) => (
+    <div className="fullscreen_map">
+      <ThemeWrapper>
+        <MapComponentsProvider>
+          <Story />
+          <MapLibreMap
+            options={{
+              zoom: 14.5,
+              style: "https://wms.wheregroup.com/tileserver/style/osm-bright.json",
+              center: [7.0851268, 50.73884],
+            }}
+            mapId="map_1"
+          />
+          <MlNavgiationTools
+            sx={{ top: "10px", right: "5px" }}
+            showZoomButtons={false}
+            mapId="map_1"
+          />
+        </MapComponentsProvider>
+      </ThemeWrapper>
+    </div>
+  ),
+];
+
+export default decorators;

package/src/decorators/MultiMapContextDecorator.js

@@ -11,70 +11,70 @@ import MlNavgiationTools from "../components/MlNavigationTools/MlNavigationTools
 const theme = createTheme({});
 
 const decorators = [
-  (Story) => (
-    <div className="fullscreen_map">
-      <ThemeProvider theme={theme}>
-        <MapComponentsProvider>
-          <div
-            style={{
-              overflow: "hidden",
-              position: "absolute",
-              top: "0",
-              bottom: "0",
-              left: "0",
-              right: "0",
-            }}
-          >
-            <Story />
-            <div className="maps">
-              <MapLibreMap
-                mapId="map_1"
-                options={{
-                  //style: "mapbox://styles/mapbox/light-v10",
-                  //center: [-87.62712, 41.89033],
-                  zoom: 14.5,
-                  //pitch: 45,
-                  //style: "https://wms.wheregroup.com/tileserver/style/osm-bright.json",
-                  style: "https://wms.wheregroup.com/tileserver/style/osm-liberty.json",
-                  //center: [8.607, 53.1409349],
-                  //zoom: 13,
-                  center: [7.0851268, 50.73884],
-                  //maxBounds: [
-                  //  [1.40625, 43.452919],
-                  //  [17.797852, 55.973798],
-                  //],
-                }}
-              />
-              <MapLibreMap
-                mapId="map_2"
-                options={{
-                  //style: "mapbox://styles/mapbox/light-v10",
-                  //center: [-87.62712, 41.89033],
-                  zoom: 14.5,
-                  //pitch: 45,
-                  style: "https://wms.wheregroup.com/tileserver/style/osm-bright.json",
-                  //style: "https://wms.wheregroup.com/tileserver/style/osm-liberty.json",
-                  //center: [8.607, 53.1409349],
-                  //zoom: 13,
-                  center: [7.0851268, 50.73884],
-                  //maxBounds: [
-                  //  [1.40625, 43.452919],
-                  //  [17.797852, 55.973798],
-                  //],
-                }}
-              />
+	(Story) => (
+		<div className="fullscreen_map">
+			<ThemeProvider theme={theme}>
+				<MapComponentsProvider>
+					<div
+						style={{
+							overflow: "hidden",
+							position: "absolute",
+							top: "0",
+							bottom: "0",
+							left: "0",
+							right: "0",
+						}}
+					>
+						<Story />
+						<div className="maps">
+							<MapLibreMap
+								mapId="map_1"
+								options={{
+									//style: "mapbox://styles/mapbox/light-v10",
+									//center: [-87.62712, 41.89033],
+									zoom: 14.5,
+									//pitch: 45,
+									//style: "https://wms.wheregroup.com/tileserver/style/osm-bright.json",
+									style: "https://wms.wheregroup.com/tileserver/style/osm-liberty.json",
+									//center: [8.607, 53.1409349],
+									//zoom: 13,
+									center: [7.0851268, 50.73884],
+									//maxBounds: [
+									//	[1.40625, 43.452919],
+									//	[17.797852, 55.973798],
+									//],
+								}}
+							/>
+							<MapLibreMap
+								mapId="map_2"
+								options={{
+									//style: "mapbox://styles/mapbox/light-v10",
+									//center: [-87.62712, 41.89033],
+									zoom: 14.5,
+									//pitch: 45,
+									style: "https://wms.wheregroup.com/tileserver/style/osm-bright.json",
+									//style: "https://wms.wheregroup.com/tileserver/style/osm-liberty.json",
+									//center: [8.607, 53.1409349],
+									//zoom: 13,
+									center: [7.0851268, 50.73884],
+									//maxBounds: [
+									//	[1.40625, 43.452919],
+									//	[17.797852, 55.973798],
+									//],
+								}}
+							/>
 
-              <MlNavgiationTools
-                sx={{ top: "10px", right: "5px" }}
-                showZoomButtons={false}
-                mapId="map_1"
-              />
-            </div>
-          </div>
-        </MapComponentsProvider>
-      </ThemeProvider>
-    </div>
-  ),
+							<MlNavgiationTools
+								sx={{ top: "10px", right: "5px" }}
+								showZoomButtons={false}
+								mapId="map_1"
+							/>
+						</div>
+					</div>
+				</MapComponentsProvider>
+			</ThemeProvider>
+		</div>
+	),
 ];
 
 export default decorators;

package/src/decorators/NoNavToolsDecorator.js

@@ -9,23 +9,23 @@ import MlNavgiationTools from "../components/MlNavigationTools/MlNavigationTools
 const theme = createTheme({});
 
 const decorators = [
-  (Story) => (
-    <div className="fullscreen_map">
-      <ThemeProvider theme={theme}>
-        <MapComponentsProvider>
-          <Story />
-          <MapLibreMap
-            options={{
-              zoom: 14.5,
-              style: "https://wms.wheregroup.com/tileserver/style/osm-bright.json",
-              center: [7.0851268, 50.73884],
-            }}
-            mapId="map_1"
-          />
-        </MapComponentsProvider>
-      </ThemeProvider>
-    </div>
-  ),
+	(Story) => (
+		<div className="fullscreen_map">
+			<ThemeProvider theme={theme}>
+				<MapComponentsProvider>
+					<Story />
+					<MapLibreMap
+						options={{
+							zoom: 14.5,
+							style: "https://wms.wheregroup.com/tileserver/style/osm-bright.json",
+							center: [7.0851268, 50.73884],
+						}}
+						mapId="map_1"
+					/>
+				</MapComponentsProvider>
+			</ThemeProvider>
+		</div>
+	),
 ];
 
 export default decorators;

package/src/decorators/ThemeWrapper.jsx

@@ -0,0 +1,9 @@
+import React from "react";
+import { ThemeProvider } from "@mui/styles";
+import { createTheme } from "@mui/material";
+
+const theme = createTheme({});
+
+export default function ThemeWrapper(props) {
+	return <ThemeProvider theme={theme}>{props?.children}</ThemeProvider>;
+}

package/src/hooks/assets/pointWG.json

@@ -0,0 +1,13 @@
+{
+	"type": "Feature",
+	"geometry": {
+		"type": "Point",
+		"coordinates": [
+			7.0851268,
+			50.73884
+		],
+		"properties": {
+			"title": "Bonn"
+		}
+	}
+}

package/src/hooks/exportMap/index.ts

@@ -0,0 +1,30 @@
+import { useMemo } from 'react';
+import useMap from '../useMap';
+import { createExport, createExportOptions } from './lib';
+import MapLibreGlWrapper from '../../components/MapLibreMap/lib/MapLibreGlWrapper';
+
+interface exportMapProps {
+	/**
+	 * Id of the target MapLibre instance in mapContext
+	 */
+	mapId?: string;
+}
+
+export default function exportMap(props: exportMapProps) {
+	const mapHook = useMap({ mapId: props.mapId });
+
+	const _createExport = useMemo(() => {
+		if (mapHook.map) {
+			return (
+				options: Omit<createExportOptions, 'map'> & Partial<Pick<createExportOptions, 'map'>>
+			) => {
+				return createExport({ map: mapHook.map as MapLibreGlWrapper, ...options });
+			};
+		}
+		return;
+	}, [mapHook.map]);
+
+	return {
+		createExport: _createExport,
+	};
+}