@mapcomponents/react-maplibre 0.1.57 → 0.1.59

package/src/components/MlFeatureEditor/lib/utils.js

@@ -3,49 +3,49 @@
  * and licensed under ISC
  */
 const drawUtils = {
-  getMatchingVertices: (vertex, featureId, allFeatures, map) => {
-    // number of decimals should probably be dynamic depending on zoom level
-    let decimals = 5;
-    let matchingVertices = [];
+	getMatchingVertices: (vertex, featureId, allFeatures, map) => {
+		// number of decimals should probably be dynamic depending on zoom level
+		let decimals = 5;
+		let matchingVertices = [];
 
-    let v_lng = vertex[0].toFixed(decimals);
-    let v_lat = vertex[1].toFixed(decimals);
+		let v_lng = vertex[0].toFixed(decimals);
+		let v_lat = vertex[1].toFixed(decimals);
 
-    for (var i = 0; i < allFeatures.length; i++) {
-      if (allFeatures[i].id !== featureId) {
-        for (var k = 0; k < allFeatures[i].geometry.coordinates.length; k++) {
-          for (var m = 0; m < allFeatures[i].geometry.coordinates[k].length; m++) {
-            if (
-              v_lng ===
-                allFeatures[i].geometry.coordinates[k][m][0].toFixed(decimals) &&
-              v_lat ===
-                allFeatures[i].geometry.coordinates[k][m][1].toFixed(decimals)
-            ) {
-              matchingVertices.push({
-                featureId: allFeatures[i].id,
-                coord_path: k + "." + m,
-                //feature: map.getFeature(allFeatures[i].id),
-                lng: allFeatures[i].geometry.coordinates[k][m][0],
-                lat: allFeatures[i].geometry.coordinates[k][m][1],
-              });
-            }
-          }
-        }
-      }
-    }
+		for (var i = 0; i < allFeatures.length; i++) {
+			if (allFeatures[i].id !== featureId) {
+				for (var k = 0; k < allFeatures[i].geometry.coordinates.length; k++) {
+					for (var m = 0; m < allFeatures[i].geometry.coordinates[k].length; m++) {
+						if (
+							v_lng ===
+								allFeatures[i].geometry.coordinates[k][m][0].toFixed(decimals) &&
+							v_lat ===
+								allFeatures[i].geometry.coordinates[k][m][1].toFixed(decimals)
+						) {
+							matchingVertices.push({
+								featureId: allFeatures[i].id,
+								coord_path: k + "." + m,
+								//feature: map.getFeature(allFeatures[i].id),
+								lng: allFeatures[i].geometry.coordinates[k][m][0],
+								lat: allFeatures[i].geometry.coordinates[k][m][1],
+							});
+						}
+					}
+				}
+			}
+		}
 
-    return matchingVertices;
-  },
-  getDrawInstance: (map) => {
-    for (var i = map._controls.length - 1; i >= 0; i--) {
-      if (
-        map._controls[i]?.modes?.SIMPLE_SELECT === "simple_select"
-      ) {
-        return map._controls[i];
-      }
-    }
-    return null;
-  },
+		return matchingVertices;
+	},
+	getDrawInstance: (map) => {
+		for (var i = map._controls.length - 1; i >= 0; i--) {
+			if (
+				map._controls[i]?.modes?.SIMPLE_SELECT === "simple_select"
+			) {
+				return map._controls[i];
+			}
+		}
+		return null;
+	},
 };
 
 export default drawUtils;

package/src/components/MlFillExtrusionLayer/MlFillExtrusionLayer.stories.js

@@ -5,20 +5,20 @@ import MlFillExtrusionLayer from "./MlFillExtrusionLayer";
 import mapContextDecorator from "../../decorators/MapContextDecorator";
 
 const storyoptions = {
-  title: "MapComponents/MlFillExtrusionLayer",
-  component: MlFillExtrusionLayer,
-  argTypes: {
-  },
-  decorators: mapContextDecorator,
+	title: "MapComponents/MlFillExtrusionLayer",
+	component: MlFillExtrusionLayer,
+	argTypes: {
+	},
+	decorators: mapContextDecorator,
 };
 export default storyoptions;
 
 const Template = (props) => {
-  
-  return (
-    <MlFillExtrusionLayer {...props} />
+	
+	return (
+		<MlFillExtrusionLayer {...props} />
 );
-  }
+	}
 
 export const ExampleConfig = Template.bind({});
 ExampleConfig.parameters = {};

package/src/components/MlFillExtrusionLayer/MlFillExtrusionLayer.test.js

@@ -6,10 +6,10 @@ import MlFillExtrusionLayer from "./MlFillExtrusionLayer";
 const testComponent = <MlFillExtrusionLayer />;
 
 let testParams = [
-  "<MlFillExtrusionLayer />",
-  testComponent,
-  new RegExp('^.*"MlFillExtrusionLayer-' + uuid_regex + '".*$'),
-  "MlFillExtrusionLayer-{uuid}",
+	"<MlFillExtrusionLayer />",
+	testComponent,
+	new RegExp('^.*"MlFillExtrusionLayer-' + uuid_regex + '".*$'),
+	"MlFillExtrusionLayer-{uuid}",
 ];
 
 layerRemovalTest(...testParams);

package/src/components/MlFillExtrusionLayer/MlFillExtrusionLayer.tsx

@@ -4,42 +4,42 @@ import { v4 as uuidv4 } from "uuid";
 import useLayer from "../../hooks/useLayer";
 
 interface MlFillExtrusionLayerProps {
-  /**
-   * 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
-   */
-  layerId?: string;
-  /**
-   * Paint properties of the config object that is passed to the MapLibreGl.addLayer call. All
-   * available properties are documented in the MapLibreGl documentation
-   * https://maplibre.org/maplibre-gl-js-docs/style-spec/layers/#fill-extrusion
-   */
-  paint?: object;
-  /**
-   * Source id of a vector tile source containing the geometries to use for this fill-extrusion
-   * layer.
-   * https://maplibre.org/maplibre-gl-js-docs/style-spec/layers/#source-layer
-   */
-  sourceId?: string;
-  /**
-   * Layer id from a vector tile source containing the geometries to use for this fill-extrusion
-   * layer.
-   * https://maplibre.org/maplibre-gl-js-docs/style-spec/layers/#source-layer
-   */
-  sourceLayer?: string;
-  /**
-   * This layer will be hidden for zoom levels lower than defined on this property
-   * https://maplibre.org/maplibre-gl-js-docs/style-spec/layers/#minzoom
-   */
-  minZoom?: number;
+	/**
+	 * 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
+	 */
+	layerId?: string;
+	/**
+	 * Paint properties of the config object that is passed to the MapLibreGl.addLayer call. All
+	 * available properties are documented in the MapLibreGl documentation
+	 * https://maplibre.org/maplibre-gl-js-docs/style-spec/layers/#fill-extrusion
+	 */
+	paint?: object;
+	/**
+	 * Source id of a vector tile source containing the geometries to use for this fill-extrusion
+	 * layer.
+	 * https://maplibre.org/maplibre-gl-js-docs/style-spec/layers/#source-layer
+	 */
+	sourceId?: string;
+	/**
+	 * Layer id from a vector tile source containing the geometries to use for this fill-extrusion
+	 * layer.
+	 * https://maplibre.org/maplibre-gl-js-docs/style-spec/layers/#source-layer
+	 */
+	sourceLayer?: string;
+	/**
+	 * This layer will be hidden for zoom levels lower than defined on this property
+	 * https://maplibre.org/maplibre-gl-js-docs/style-spec/layers/#minzoom
+	 */
+	minZoom?: number;
 }
 
 /**
@@ -47,39 +47,39 @@ interface MlFillExtrusionLayerProps {
  *
  */
 const MlFillExtrusionLayer = (props: MlFillExtrusionLayerProps) => {
-  useLayer({
-    mapId: props.mapId,
-    layerId: props.layerId || "MlFillExtrusionLayer-" + uuidv4(),
-    options: {
-      id: "",
-      type: "fill-extrusion",
-      source: props.sourceId || "openmaptiles",
-      "source-layer": props.sourceLayer || "building",
-      minzoom: props.minZoom || 14,
-      paint: {
-        ...props.paint,
-      },
-    },
-    insertBeforeFirstSymbolLayer: true,
-  });
+	useLayer({
+		mapId: props.mapId,
+		layerId: props.layerId || "MlFillExtrusionLayer-" + uuidv4(),
+		options: {
+			id: "",
+			type: "fill-extrusion",
+			source: props.sourceId || "openmaptiles",
+			"source-layer": props.sourceLayer || "building",
+			minzoom: props.minZoom || 14,
+			paint: {
+				...props.paint,
+			},
+		},
+		insertBeforeFirstSymbolLayer: true,
+	});
 
-  return <></>;
+	return <></>;
 };
 
 MlFillExtrusionLayer.defaultProps = {
-  mapId: undefined,
-  paint: {
-    "fill-extrusion-color": "hsl(196, 61%, 83%)",
-    "fill-extrusion-height": {
-      property: "render_height",
-      type: "identity",
-    },
-    "fill-extrusion-base": {
-      property: "render_min_height",
-      type: "identity",
-    },
-    "fill-extrusion-opacity": 1,
-  },
+	mapId: undefined,
+	paint: {
+		"fill-extrusion-color": "hsl(196, 61%, 83%)",
+		"fill-extrusion-height": {
+			property: "render_height",
+			type: "identity",
+		},
+		"fill-extrusion-base": {
+			property: "render_min_height",
+			type: "identity",
+		},
+		"fill-extrusion-opacity": 1,
+	},
 };
 
 export default MlFillExtrusionLayer;

package/src/components/MlFollowGps/MlFollowGps.stories.js

@@ -5,11 +5,11 @@ import MlFollowGps from "./MlFollowGps";
 import mapContextDecorator from "../../decorators/MapContextDecorator";
 
 const storyoptions = {
-  title: "MapComponents/MlFollowGps",
-  component: MlFollowGps,
-  argTypes: {
-  },
-  decorators: mapContextDecorator,
+	title: "MapComponents/MlFollowGps",
+	component: MlFollowGps,
+	argTypes: {
+	},
+	decorators: mapContextDecorator,
 };
 export default storyoptions;
 
@@ -18,5 +18,5 @@ const Template = (props) => <MlFollowGps {...props}/>;
 export const ExampleConfig = Template.bind({});
 ExampleConfig.parameters = {};
 ExampleConfig.args = {
-  followUserPosition: false
+	followUserPosition: false
 };

package/src/components/MlFollowGps/MlFollowGps.test.js

@@ -6,58 +6,58 @@ import MlFollowGps from "./MlFollowGps";
 import MapLibreMap from "./../MapLibreMap/MapLibreMap";
 
 const mockGeolocation = {
-  watchPosition: jest.fn(() => 1),
-  clearWatch: jest.fn(),
+	watchPosition: jest.fn(() => 1),
+	clearWatch: jest.fn(),
 };
 
 global.navigator.geolocation = mockGeolocation;
 
 const MlFollowGPSTestComponent = (props) => {
-  const [componentVisible, setComponentVisible] = useState(true);
-
-  return (
-    <>
-      <MapLibreMap />
-
-      {componentVisible && <MlFollowGps {...props} />}
-
-      <button
-        className="toggle_layer_visible"
-        onClick={() => {
-          setComponentVisible(!componentVisible);
-        }}
-      >
-        toggle component
-      </button>
-    </>
-  );
+	const [componentVisible, setComponentVisible] = useState(true);
+
+	return (
+		<>
+			<MapLibreMap />
+
+			{componentVisible && <MlFollowGps {...props} />}
+
+			<button
+				className="toggle_layer_visible"
+				onClick={() => {
+					setComponentVisible(!componentVisible);
+				}}
+			>
+				toggle component
+			</button>
+		</>
+	);
 };
 
 let testAttributes = {};
 
 describe("<MlFollowGps>", () => {
-  it("should call navigator.geolocation.watchPosition once", async () => {
-    const wrapper = mount(
-      <MapComponentsProvider>
-        <MlFollowGPSTestComponent {...testAttributes} />
-      </MapComponentsProvider>
-    );
-
-    wrapper.find("MlFollowGps button").simulate("click");
-    await waitFor(() => expect(mockGeolocation.watchPosition).toHaveBeenCalledTimes(1));
-  });
-
-  it("should call navigator.geolocation.clearWatch once, after MlFollowGPSButton has been pressed twice", async () => {
-    const wrapper = mount(
-      <MapComponentsProvider>
-        <MlFollowGPSTestComponent {...testAttributes} />
-      </MapComponentsProvider>
-    );
-
-    wrapper.find("MlFollowGps button").simulate("click");
-    wrapper.find("MlFollowGps button").simulate("click");
-    //wrapper.find(".toggle_layer_visible").simulate("click");
-
-    await waitFor(() => expect(mockGeolocation.clearWatch).toHaveBeenCalledTimes(1));
-  });
+	it("should call navigator.geolocation.watchPosition once", async () => {
+		const wrapper = mount(
+			<MapComponentsProvider>
+				<MlFollowGPSTestComponent {...testAttributes} />
+			</MapComponentsProvider>
+		);
+
+		wrapper.find("MlFollowGps button").simulate("click");
+		await waitFor(() => expect(mockGeolocation.watchPosition).toHaveBeenCalledTimes(1));
+	});
+
+	it("should call navigator.geolocation.clearWatch once, after MlFollowGPSButton has been pressed twice", async () => {
+		const wrapper = mount(
+			<MapComponentsProvider>
+				<MlFollowGPSTestComponent {...testAttributes} />
+			</MapComponentsProvider>
+		);
+
+		wrapper.find("MlFollowGps button").simulate("click");
+		wrapper.find("MlFollowGps button").simulate("click");
+		//wrapper.find(".toggle_layer_visible").simulate("click");
+
+		await waitFor(() => expect(mockGeolocation.clearWatch).toHaveBeenCalledTimes(1));
+	});
 });