@mapcomponents/react-maplibre 0.1.69 → 0.1.70

package/src/contexts/MapComponentsProvider.test.js

@@ -1,260 +0,0 @@
-import React, { useContext } from "react";
-import MapContext from "./MapContext";
-import { MapComponentsProvider } from "./MapContext";
-import { mount } from "enzyme";
-
-const MapObjectTestBlock = ({ mapId }) => {
-	const mapContext = useContext(MapContext);
-
-	return (
-		<>
-			<button
-				className={"register_" + mapId}
-				onClick={() => {
-					mapContext.registerMap(mapId, { id: mapId });
-				}}
-			>
-				set {mapId}
-			</button>
-			<button
-				className={"remove_" + mapId}
-				onClick={() => {
-					mapContext.removeMap(mapId);
-				}}
-			>
-				set {mapId}
-			</button>
-			<div className={mapId + "_found"}>{mapContext.mapExists(mapId) ? "true" : "false"}</div>
-			<div className={mapId + "_id"}>
-				{mapContext.mapExists(mapId) ? mapContext.getMap(mapId).id : ""}
-			</div>
-			<div className={mapId + "_id_position_in_map_ids"}>{mapContext.mapIds.indexOf(mapId)}</div>
-		</>
-	);
-};
-
-const MapContextTestComponent = () => {
-	const mapContext = useContext(MapContext);
-
-	return (
-		<>
-			<div className="map_count">{mapContext.mapIds.length}</div>
-			<div className="typeof_map">{typeof mapContext.map}</div>
-			<button
-				className="set_anonymous_map"
-				onClick={() => {
-					mapContext.setMap({});
-				}}
-			>
-				set anonymous map
-			</button>
-			<button
-				className="remove_anonymous_map"
-				onClick={() => {
-					mapContext.removeMap();
-				}}
-			>
-				set anonymous map
-			</button>
-			<div className="anonymous_map_found">{mapContext.mapExists() ? "true" : "false"}</div>
-			<div className="get_anonymous_map">{mapContext.getMap() ? "true" : "false"}</div>
-
-			{["map_1", "map_2"].map((mapId) => (
-				<MapObjectTestBlock mapId={mapId} key={mapId} />
-			))}
-		</>
-	);
-};
-
-describe("MapComponentsProvider.setMap", () => {
-	it("should add an anonymous map object to mapContext", () => {
-		const wrapper = mount(
-			<MapComponentsProvider>
-				<MapContextTestComponent />
-			</MapComponentsProvider>
-		);
-
-		expect(wrapper.find(".typeof_map").text()).toEqual("undefined");
-		expect(wrapper.find(".map_count").text()).toEqual("0");
-
-		wrapper.find(".set_anonymous_map").simulate("click");
-
-		expect(wrapper.find(".typeof_map").text()).toEqual("object");
-		expect(wrapper.find(".map_count").text()).toEqual("1");
-	});
-});
-
-describe("MapComponentsProvider.getMap", () => {
-	it("should return the map object referenced by mapContext.map if no parameters are passed", () => {
-		const wrapper = mount(
-			<MapComponentsProvider>
-				<MapContextTestComponent />
-			</MapComponentsProvider>
-		);
-
-		expect(wrapper.find(".get_anonymous_map").text()).toEqual("false");
-
-		wrapper.find(".set_anonymous_map").simulate("click");
-
-		expect(wrapper.find(".get_anonymous_map").text()).toEqual("true");
-	});
-});
-
-describe("MapComponentsProvider.mapExists", () => {
-	it("should return true if an anonymous map object has been set using setMap", () => {
-		const wrapper = mount(
-			<MapComponentsProvider>
-				<MapContextTestComponent />
-			</MapComponentsProvider>
-		);
-
-		expect(wrapper.find(".typeof_map").text()).toEqual("undefined");
-		expect(wrapper.find(".map_count").text()).toEqual("0");
-		expect(wrapper.find(".anonymous_map_found").text()).toEqual("false");
-
-		wrapper.find(".set_anonymous_map").simulate("click");
-
-		expect(wrapper.find(".typeof_map").text()).toEqual("object");
-		expect(wrapper.find(".map_count").text()).toEqual("1");
-		expect(wrapper.find(".anonymous_map_found").text()).toEqual("true");
-	});
-
-	it("should return true if a map object has been registered using registerMap", () => {
-		const wrapper = mount(
-			<MapComponentsProvider>
-				<MapContextTestComponent />
-			</MapComponentsProvider>
-		);
-
-		expect(wrapper.find(".map_1_found").text()).toEqual("false");
-		expect(wrapper.find(".map_1_id_position_in_map_ids").text()).toEqual("-1");
-		expect(wrapper.find(".anonymous_map_found").text()).toEqual("false");
-
-		wrapper.find(".register_map_1").simulate("click");
-
-		expect(wrapper.find(".map_1_found").text()).toEqual("true");
-		expect(wrapper.find(".map_1_id").text()).toEqual("map_1");
-		expect(wrapper.find(".anonymous_map_found").text()).toEqual("true");
-	});
-});
-
-describe("MapComponentsProvider.registerMap", () => {
-	it("should register a map object with the id map_1 to mapContext", () => {
-		const wrapper = mount(
-			<MapComponentsProvider>
-				<MapContextTestComponent />
-			</MapComponentsProvider>
-		);
-
-		expect(wrapper.find(".map_1_found").text()).toEqual("false");
-		expect(wrapper.find(".map_1_id_position_in_map_ids").text()).toEqual("-1");
-
-		wrapper.find(".register_map_1").simulate("click");
-
-		expect(wrapper.find(".map_1_found").text()).toEqual("true");
-		expect(wrapper.find(".map_1_id").text()).toEqual("map_1");
-		expect(wrapper.find(".map_1_id_position_in_map_ids").text()).not.toEqual("-1");
-	});
-
-	it("should register a map object with the id map_1 and another on with the id map_2 to mapContext", () => {
-		const wrapper = mount(
-			<MapComponentsProvider>
-				<MapContextTestComponent />
-			</MapComponentsProvider>
-		);
-
-		expect(wrapper.find(".map_1_found").text()).toEqual("false");
-		expect(wrapper.find(".map_1_id_position_in_map_ids").text()).toEqual("-1");
-		expect(wrapper.find(".map_2_found").text()).toEqual("false");
-		expect(wrapper.find(".map_2_id_position_in_map_ids").text()).toEqual("-1");
-
-		wrapper.find(".register_map_1").simulate("click");
-		wrapper.find(".register_map_2").simulate("click");
-
-		expect(wrapper.find(".map_1_found").text()).toEqual("true");
-		expect(wrapper.find(".map_1_id").text()).toEqual("map_1");
-		expect(wrapper.find(".map_1_id_position_in_map_ids").text()).not.toEqual("-1");
-		expect(wrapper.find(".map_2_found").text()).toEqual("true");
-		expect(wrapper.find(".map_2_id").text()).toEqual("map_2");
-		expect(wrapper.find(".map_2_id_position_in_map_ids").text()).not.toEqual("-1");
-	});
-});
-
-describe("MapComponentsProvider.removeMap", () => {
-	it("should remove an anonymous map object from mapContext", () => {
-		const wrapper = mount(
-			<MapComponentsProvider>
-				<MapContextTestComponent />
-			</MapComponentsProvider>
-		);
-
-		expect(wrapper.find(".typeof_map").text()).toEqual("undefined");
-		expect(wrapper.find(".map_count").text()).toEqual("0");
-
-		wrapper.find(".set_anonymous_map").simulate("click");
-
-		expect(wrapper.find(".typeof_map").text()).toEqual("object");
-		expect(wrapper.find(".map_count").text()).toEqual("1");
-
-		wrapper.find(".remove_anonymous_map").simulate("click");
-
-		expect(wrapper.find(".typeof_map").text()).toEqual("undefined");
-		expect(wrapper.find(".map_count").text()).toEqual("0");
-	});
-
-	it("should remove a map object with the id map_1 from mapContext", () => {
-		const wrapper = mount(
-			<MapComponentsProvider>
-				<MapContextTestComponent />
-			</MapComponentsProvider>
-		);
-
-		expect(wrapper.find(".map_1_found").text()).toEqual("false");
-		expect(wrapper.find(".map_1_id_position_in_map_ids").text()).toEqual("-1");
-
-		wrapper.find(".register_map_1").simulate("click");
-
-		expect(wrapper.find(".map_1_found").text()).toEqual("true");
-		expect(wrapper.find(".map_1_id").text()).toEqual("map_1");
-		expect(wrapper.find(".map_1_id_position_in_map_ids").text()).not.toEqual("-1");
-
-		wrapper.find(".remove_map_1").simulate("click");
-
-		expect(wrapper.find(".map_1_found").text()).toEqual("false");
-		expect(wrapper.find(".map_1_id").text()).toEqual("");
-		expect(wrapper.find(".map_1_id_position_in_map_ids").text()).toEqual("-1");
-	});
-
-	it("should remove a map object with the id map_1 and another on with the id map_2 from mapContext", () => {
-		const wrapper = mount(
-			<MapComponentsProvider>
-				<MapContextTestComponent />
-			</MapComponentsProvider>
-		);
-
-		expect(wrapper.find(".map_1_found").text()).toEqual("false");
-		expect(wrapper.find(".map_1_id_position_in_map_ids").text()).toEqual("-1");
-		expect(wrapper.find(".map_2_found").text()).toEqual("false");
-		expect(wrapper.find(".map_2_id_position_in_map_ids").text()).toEqual("-1");
-
-		wrapper.find(".register_map_1").simulate("click");
-		wrapper.find(".register_map_2").simulate("click");
-
-		expect(wrapper.find(".map_1_found").text()).toEqual("true");
-		expect(wrapper.find(".map_1_id").text()).toEqual("map_1");
-		expect(wrapper.find(".map_1_id_position_in_map_ids").text()).not.toEqual("-1");
-		expect(wrapper.find(".map_2_found").text()).toEqual("true");
-		expect(wrapper.find(".map_2_id").text()).toEqual("map_2");
-		expect(wrapper.find(".map_2_id_position_in_map_ids").text()).not.toEqual("-1");
-
-		wrapper.find(".remove_map_1").simulate("click");
-		wrapper.find(".remove_map_2").simulate("click");
-
-		expect(wrapper.find(".map_1_found").text()).toEqual("false");
-		expect(wrapper.find(".map_1_id").text()).toEqual("");
-		expect(wrapper.find(".map_1_id_position_in_map_ids").text()).toEqual("-1");
-		expect(wrapper.find(".map_2_found").text()).toEqual("false");
-		expect(wrapper.find(".map_2_id").text()).toEqual("");
-		expect(wrapper.find(".map_2_id_position_in_map_ids").text()).toEqual("-1");
-	});
-});

package/src/contexts/MapContext.tsx

@@ -1,106 +0,0 @@
-import React, { useState, useRef, ReactNode } from 'react';
-import MapLibreGlWrapper from '../components/MapLibreMap/lib/MapLibreGlWrapper';
-
-import { ThemeProvider as MUIThemeProvider } from '@mui/material/styles';
-import getTheme from '../ui_components/MapcomponentsTheme';
-
-export interface MapContextType {
-	mapIds: string[];
-	mapExists: (map_id: string | undefined) => boolean;
-	maps: MapLibreGlWrapper[];
-	map: MapLibreGlWrapper | undefined;
-	getMap: (map_id: string | undefined) => MapLibreGlWrapper;
-	setMap: (map: MapLibreGlWrapper) => void;
-	removeMap: (map_id: string | undefined) => void;
-	registerMap: (map_id: string | undefined, map: MapLibreGlWrapper) => void;
-}
-const MapContext = React.createContext({} as MapContextType);
-
-/**
- * MapComponentsProvider must be imported and wrapped around component where at least one of its child nodes requires access to a MapLibre-gl or openlayers instance that is registered in this mapContext.
-MapComponentsProvider must be used one level higher than the first use of MapContext.
- *
- * MapComponentsProvider requires at least one use of the MapLibreMap component somewhere down the component tree that will create the MapLibre-gl object and set the reference at MapContext.map. For MapLibre maps it is a good idea to provide a mapId attribute to the MapLibreMap Component even if you are only using a single map instance at start. It will make a later transition to using multiple instances within the same project much easier.
- */
-
-const MapComponentsProvider = ({ children }: { children: ReactNode }) => {
-	const [map, setMap] = useState<MapLibreGlWrapper | undefined>(undefined);
-	const [mapIds, setMapIds] = useState<[...string[]]>([]);
-	const mapIds_raw = useRef<[...string[]]>([]);
-	const maps = useRef<{ [key: string]: MapLibreGlWrapper }>({});
-
-	const removeMap = (mapId: string) => {
-		if (mapId) {
-			if (typeof maps.current[mapId] !== 'undefined') {
-				delete maps.current[mapId];
-			}
-			const mapIdIndex = mapIds_raw.current.indexOf(mapId);
-			if (mapIdIndex > -1) {
-				mapIds_raw.current.splice(mapIdIndex, 1);
-			}
-			setMapIds([...mapIds_raw.current]);
-
-			if (mapIds.length === 1 && map) {
-				setMap(undefined);
-			}
-		} else {
-			setMap(undefined);
-			removeMap('anonymous_map');
-		}
-	};
-
-	const setMapHandler = (mapInstance: MapLibreGlWrapper) => {
-		setMap(mapInstance);
-
-		if (mapIds.length === 0) {
-			const mapId = 'anonymous_map';
-			setMapIds([...mapIds, mapId]);
-			maps.current[mapId] = mapInstance;
-		}
-	};
-
-	const value = {
-		map: map,
-		setMap: setMapHandler,
-		maps: maps.current,
-		mapIds: mapIds,
-		registerMap: (mapId: string, mapInstance: MapLibreGlWrapper) => {
-			if (mapId && mapInstance) {
-				maps.current[mapId] = mapInstance;
-				mapIds_raw.current.push(mapId);
-				setMapIds([...mapIds_raw.current]);
-
-				if (!map) {
-					setMap(mapInstance);
-				}
-			}
-		},
-		removeMap,
-		mapExists: (mapId: string) => {
-			if (mapId && Object.keys(maps.current).indexOf(mapId) === -1) {
-				return false;
-			} else if (!mapId && !map) {
-				return false;
-			}
-			return true;
-		},
-		getMap: (mapId: string): MapLibreGlWrapper | null => {
-			if (mapId && mapIds.indexOf(mapId) !== -1) {
-				return maps.current[mapId];
-			} else if (!mapId && map) {
-				return map;
-			}
-
-			return null;
-		},
-	} as unknown as MapContextType;
-
-	return (
-		<MapContext.Provider value={value}>
-			<MUIThemeProvider theme={getTheme('light')}>{children}</MUIThemeProvider>
-		</MapContext.Provider>
-	);
-};
-
-export { MapComponentsProvider };
-export default MapContext;

package/src/contexts/SimpleDataContext.js

@@ -1,6 +0,0 @@
-import React from "react";
-
-const SimpleDataContext = React.createContext({});
-
-export const SimpleDataContextProvider = SimpleDataContext.Provider;
-export default SimpleDataContext;

package/src/contexts/SimpleDataProvider.js

@@ -1,64 +0,0 @@
-import React, { useEffect, useState } from "react";
-import PropTypes from "prop-types";
-import { SimpleDataContextProvider } from "./SimpleDataContext";
-import * as d3 from "d3";
-
-const SimpleDataProvider = (props) => {
-	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);
-		}
-
-		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]);
-
-	const value = {
-		data: data,
-		setData: setData,
-	};
-
-	return (
-		<SimpleDataContextProvider value={value}>
-			{props.children}
-		</SimpleDataContextProvider>
-	);
-};
-
-SimpleDataProvider.propTypes = {
-	children: PropTypes.node.isRequired,
-};
-
-export default SimpleDataProvider;

package/src/contexts/SimpleDataProvider.test.js

@@ -1,68 +0,0 @@
-import React, {useContext} from 'react';
-import SimpleDataContext from './SimpleDataContext';
-import SimpleDataProvider from './SimpleDataProvider';
-import {	waitFor } from '@testing-library/react';
-import {mount} from 'enzyme';
-import * as d3 from "d3";
-
-
-jest.mock('d3');
-
-
-const SimpleDataContextTestComponent = () => {
-
-	const simpleDataContext = useContext(SimpleDataContext);
-
-	return <>
-		<div className="data">{JSON.stringify(simpleDataContext.data)}</div>
-	</>;
-}
-
-const mockData = {id:12,title:'Testtitle'};
-const nestedMockData = {data:mockData};
-const xmlMockData = (new DOMParser()).parseFromString('<?xml version="1.0" encoding="UTF-8" ?><records>	<record>		<id>1</id>		<title>Macey, Josephine, Robert, Clark</title>	</record>	<record>		<id>2</id>		<title>Summer, Channing, Colette, Josephine</title>	</record></records>',"text/xml");;
-
-describe('SimpleDataProvider',() => {
-
-	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>);
-
-		await waitFor(() => expect(d3.csv).toHaveBeenCalledTimes(1))
-
-		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);
-
-		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))
-
-		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);
-
-		const wrapper = mount(<SimpleDataProvider format="json" url="test"><SimpleDataContextTestComponent /></SimpleDataProvider>);
-
-		await waitFor(() => expect(d3.json).toHaveBeenCalledTimes(1))
-
-		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);
-
-		const wrapper = mount(<SimpleDataProvider format="json" data_property="data" url="test"><SimpleDataContextTestComponent /></SimpleDataProvider>);
-
-		await waitFor(() => expect(d3.json).toHaveBeenCalledTimes(1))
-
-		expect(wrapper.find('.data').text()).toEqual(JSON.stringify(mockData));
-	});
-
-
-});

package/src/custom.d.ts

@@ -1,4 +0,0 @@
-import { GeoJSONFeature } from "maplibre-gl";
-import { GeoJSONObject } from '@turf/turf';
-
-export type GeoJSON = (GeoJSONFeature & GeoJSONObject);

package/src/decorators/EmptyMapDecorator.js

@@ -1,38 +0,0 @@
-import React, { useMemo } from 'react';
-
-import { MapComponentsProvider } from '../index';
-import MapLibreMap from '../components/MapLibreMap/MapLibreMap';
-import './style.css';
-import MlNavgiationTools from '../components/MlNavigationTools/MlNavigationTools';
-import { ThemeProvider as MUIThemeProvider } from '@mui/material/styles';
-import getTheme from '../ui_components/MapcomponentsTheme';
-
-const decorators = [
-	(Story, context) => {
-		const theme = useMemo(() => getTheme(context?.globals?.theme), [context?.globals?.theme]);
-
-		return (
-			<div className="fullscreen_map">
-				<MapComponentsProvider>
-					<MUIThemeProvider theme={theme}>
-						<Story />
-						<MapLibreMap
-							mapId="map_1"
-							options={{
-								zoom: 12.5,
-								center: [7.0851268, 50.73884],
-							}}
-						/>
-						<MlNavgiationTools
-							sx={{ bottom: '25px', right: '5px' }}
-							showZoomButtons={false}
-							mapId="map_1"
-						/>
-					</MUIThemeProvider>
-				</MapComponentsProvider>
-			</div>
-		);
-	},
-];
-
-export default decorators;

package/src/decorators/MapContextDecorator.js

@@ -1,39 +0,0 @@
-import React, { useMemo } from 'react';
-
-import { MapComponentsProvider } from '../index';
-import MapLibreMap from '../components/MapLibreMap/MapLibreMap';
-import './style.css';
-import MlNavgiationTools from '../components/MlNavigationTools/MlNavigationTools';
-import { ThemeProvider as MUIThemeProvider } from '@mui/material/styles';
-import getTheme from '../ui_components/MapcomponentsTheme';
-
-const decorators = [
-	(Story, context) => {
-		const theme = useMemo(() => getTheme(context?.globals?.theme), [context?.globals?.theme]);
-
-		return (
-			<div className="fullscreen_map">
-				<MapComponentsProvider>
-					<MUIThemeProvider theme={theme}>
-						<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={{ bottom: '25px', right: '5px' }}
-							showZoomButtons={false}
-							mapId="map_1"
-						/>
-					</MUIThemeProvider>
-				</MapComponentsProvider>
-			</div>
-		);
-	},
-];
-
-export default decorators;

package/src/decorators/MapContextDecoratorHooks.js

@@ -1,39 +0,0 @@
-import React, {  useMemo } from 'react';
-
-import { MapComponentsProvider } from "../index";
-import MapLibreMap from "../components/MapLibreMap/MapLibreMap";
-import "./style.css";
-import MlNavgiationTools from "../components/MlNavigationTools/MlNavigationTools";
-import { ThemeProvider as MUIThemeProvider } from '@mui/material/styles';
-import getTheme from '../ui_components/MapcomponentsTheme';
-
-const decorators = [
-	(Story, context) => {
-		const theme = useMemo(() => getTheme(context?.globals?.theme), [context?.globals?.theme]);
-
-		return (
-			<div className="fullscreen_map">
-				<MapComponentsProvider>
-					<MUIThemeProvider theme={theme}>
-						<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={{ bottom: '25px', right: '5px' }}
-							showZoomButtons={false}
-							mapId="map_1"
-						/>
-					</MUIThemeProvider>
-				</MapComponentsProvider>
-			</div>
-		);
-	},
-];
-
-export default decorators;