@mapcomponents/react-maplibre 0.1.57 → 0.1.59

package/src/components/MlLayer/MlLayer.tsx

@@ -4,27 +4,27 @@ import useLayer from "../../hooks/useLayer";
 import { Feature, FeatureCollection } from "@turf/turf";
 
 interface MlLayerProps {
-  /**
-   * Id of the target MapLibre instance in mapContext
-   */
-  mapId?: string;
-  /**
-   * The layerId of an existing layer this layer should be rendered visually beneath
-   * https://maplibre.org/maplibre-gl-js-docs/api/map/#map#addlayer - see "beforeId" property
-   */
-  insertBeforeLayer?: string;
-  /**
-   * Id of the layer that will be added by this component to the maplibre-gl instance
-   */
-  layerId?: string;
-  /**
-   * Javascript object that is passed the addLayer command as first parameter.
-   */
-  options?: any;
-  /**
-   * GeoJSON data that is supposed to be rendered by this component.
-   */
-  geojson?: Feature | FeatureCollection | undefined;
+	/**
+	 * Id of the target MapLibre instance in mapContext
+	 */
+	mapId?: string;
+	/**
+	 * The layerId of an existing layer this layer should be rendered visually beneath
+	 * https://maplibre.org/maplibre-gl-js-docs/api/map/#map#addlayer - see "beforeId" property
+	 */
+	insertBeforeLayer?: string;
+	/**
+	 * Id of the layer that will be added by this component to the maplibre-gl instance
+	 */
+	layerId?: string;
+	/**
+	 * Javascript object that is passed the addLayer command as first parameter.
+	 */
+	options?: any;
+	/**
+	 * GeoJSON data that is supposed to be rendered by this component.
+	 */
+	geojson?: Feature | FeatureCollection | undefined;
 }
 
 /**
@@ -33,22 +33,22 @@ interface MlLayerProps {
  * @category Map components 
  */
 const MlLayer = (props: MlLayerProps) => {
-  useLayer({
-    idPrefix: 'MlLayer-',
-    layerId: props.layerId,
-    mapId: props.mapId,
-    geojson: props.geojson,
-    options: {
-      type: "background",
-      paint: {
-        "background-color": "rgba(0,0,0,0)",
-      },
-      ...props.options,
-    },
-    insertBeforeLayer: props.insertBeforeLayer,
-  });
+	useLayer({
+		idPrefix: 'MlLayer-',
+		layerId: props.layerId,
+		mapId: props.mapId,
+		geojson: props.geojson,
+		options: {
+			type: "background",
+			paint: {
+				"background-color": "rgba(0,0,0,0)",
+			},
+			...props.options,
+		},
+		insertBeforeLayer: props.insertBeforeLayer,
+	});
 
-  return <></>;
+	return <></>;
 };
 
 export default MlLayer;

package/src/components/MlLayerMagnify/MlLayerMagnify.stories.js

@@ -6,29 +6,29 @@ import MlWmsLayer from "../MlWmsLayer/MlWmsLayer";
 import multiMapContextDecorator from "../../decorators/MultiMapContextDecorator";
 
 const storyoptions = {
-  title: "MapComponents/MlLayerMagnify",
-  component: MlLayerMagnify,
-  argTypes: {
-  },
-  decorators: multiMapContextDecorator,
+	title: "MapComponents/MlLayerMagnify",
+	component: MlLayerMagnify,
+	argTypes: {
+	},
+	decorators: multiMapContextDecorator,
 };
 export default storyoptions;
 
 const Template = (args) => (
-  <>
-    <MlWmsLayer
-      url="https://www.wms.nrw.de/geobasis/wms_nw_uraufnahme"
-      urlParameters={{
-        layers: "nw_uraufnahme_rw",
-      }}
-      sourceOptions={{
-        minzoom: 13,
-        maxzoom: 20,
-      }}
-      mapId={args.wmsLayerMapId}
-    />
-    <MlLayerMagnify map1Id="map_1" map2Id="map_2" magnifierRadius={args.magnifierRadius} />
-  </>
+	<>
+		<MlWmsLayer
+			url="https://www.wms.nrw.de/geobasis/wms_nw_uraufnahme"
+			urlParameters={{
+				layers: "nw_uraufnahme_rw",
+			}}
+			sourceOptions={{
+				minzoom: 13,
+				maxzoom: 20,
+			}}
+			mapId={args.wmsLayerMapId}
+		/>
+		<MlLayerMagnify map1Id="map_1" map2Id="map_2" magnifierRadius={args.magnifierRadius} />
+	</>
 );
 
 export const ExampleConfig = Template.bind({});
@@ -36,6 +36,6 @@ ExampleConfig.parameters = {
 
 };
 ExampleConfig.args = {
-  wmsLayerMapId: "map_2",
-  magnifierRadius: 200,
+	wmsLayerMapId: "map_2",
+	magnifierRadius: 200,
 };

package/src/components/MlLayerMagnify/MlLayerMagnify.test.js

@@ -7,80 +7,80 @@ import MapLibreMap from "./../MapLibreMap/MapLibreMap";
 import syncMove from "@mapbox/mapbox-gl-sync-move";
 // Mapbox sync-move mockup
 var mockSyncMoveMethods = {
-  cleanup: jest.fn(),
+	cleanup: jest.fn(),
 };
 
 jest.mock("@mapbox/mapbox-gl-sync-move", () => {
-  const originalModule = jest.requireActual("@mapbox/mapbox-gl-sync-move");
-  return {
-    __esModule: true,
-    ...originalModule,
-    default: () => mockSyncMoveMethods.cleanup,
-  };
+	const originalModule = jest.requireActual("@mapbox/mapbox-gl-sync-move");
+	return {
+		__esModule: true,
+		...originalModule,
+		default: () => mockSyncMoveMethods.cleanup,
+	};
 });
 
 const syncMoveObj = {
-  syncMove: syncMove,
+	syncMove: syncMove,
 };
 
 const TestComponent = (props) => {
-  const [layerVisible, setLayerVisible] = useState(true);
-  const [refreshTrigger, setRefreshTrigger] = useState(0);
-  const mapContext = useContext(MapContext);
+	const [layerVisible, setLayerVisible] = useState(true);
+	const [refreshTrigger, setRefreshTrigger] = useState(0);
+	const mapContext = useContext(MapContext);
 
-  return (
-    <>
-      <MapLibreMap mapId="map_1" />
-      <MapLibreMap mapId="map_2" />
+	return (
+		<>
+			<MapLibreMap mapId="map_1" />
+			<MapLibreMap mapId="map_2" />
 
-      {layerVisible && <MlLayerMagnify map1Id="map_1" map2Id="map_2" />}
+			{layerVisible && <MlLayerMagnify map1Id="map_1" map2Id="map_2" />}
 
-      <button
-        className="toggle_layer_visible"
-        onClick={() => {
-          setLayerVisible(!layerVisible);
-        }}
-      >
-        toggle layer visible
-      </button>
-      <button
-        className="trigger_refresh"
-        onClick={() => {
-          setRefreshTrigger(refreshTrigger + 1);
-        }}
-      >
-        refresh
-      </button>
-      <div className="layers_json">
-        {mapContext.map && refreshTrigger && JSON.stringify(mapContext.map.layers)}
-      </div>
-    </>
-  );
+			<button
+				className="toggle_layer_visible"
+				onClick={() => {
+					setLayerVisible(!layerVisible);
+				}}
+			>
+				toggle layer visible
+			</button>
+			<button
+				className="trigger_refresh"
+				onClick={() => {
+					setRefreshTrigger(refreshTrigger + 1);
+				}}
+			>
+				refresh
+			</button>
+			<div className="layers_json">
+				{mapContext.map && refreshTrigger && JSON.stringify(mapContext.map.layers)}
+			</div>
+		</>
+	);
 };
 
 const createWrapper = () =>
-  mount(
-    <MapComponentsProvider>
-      <TestComponent />
-    </MapComponentsProvider>
-  );
+	mount(
+		<MapComponentsProvider>
+			<TestComponent />
+		</MapComponentsProvider>
+	);
 
 describe("<MlLayerMagnify/>", () => {
-  //it("should add a MlLayerMagnify Component to that calls syncMaps with both available MapLibre instances once", async () => {
-  //  const spy = jest.spyOn(syncMoveObj, "syncMove");
-  //  const wrapper = createWrapper(TestComponent);
+	//it("should add a MlLayerMagnify Component to that calls syncMaps with both available MapLibre instances once", async () => {
+	//	const spy = jest.spyOn(syncMoveObj, "syncMove");
+	//	const wrapper = createWrapper(TestComponent);
 
-  //  expect(spy).toHaveBeenCalledTimes(1);
-  //});
+	//	expect(spy).toHaveBeenCalledTimes(1);
+	//});
 
-  it("should call the syncMaps cleanup function once when it is removed from reactDOM", async () => {
-    const wrapper = createWrapper(TestComponent);
+	it("should call the syncMaps cleanup function once when it is removed from reactDOM", async () => {
+		const wrapper = createWrapper(TestComponent);
 
-    //expect(syncMove).toHaveBeenCalledTimes(1);
+		//expect(syncMove).toHaveBeenCalledTimes(1);
 
-    wrapper.find(".toggle_layer_visible").simulate("click");
+		wrapper.find(".toggle_layer_visible").simulate("click");
 
-    //TODO: Fix cleanup test
-    expect(mockSyncMoveMethods.cleanup).toHaveBeenCalledTimes(1);
-  });
+		//TODO: Fix cleanup test
+		expect(mockSyncMoveMethods.cleanup).toHaveBeenCalledTimes(1);
+	});
 });