@mapcomponents/react-maplibre 0.1.57 → 0.1.59

package/src/components/MlTransitionGeoJsonLayer/MlTransitionGeoJsonLayer.stories.js

@@ -3,7 +3,7 @@ import React, { useState, useContext, useRef, useEffect } from "react";
 import MlTransitionGeoJsonLayer from "./MlTransitionGeoJsonLayer";
 
 import mapContextDecorator from "../../decorators/MapContextDecorator";
-import MapContext from "../../contexts/MapContext";
+import useMap from "../../hooks/useMap";
 
 import sample_geojson_1 from "./assets/sample_1.json";
 import sample_geojson_2 from "./assets/sample_2.json";
@@ -11,42 +11,43 @@ import sample_polygon_geojson_1 from "./assets/sample_polygon_1.json";
 
 console.log(sample_polygon_geojson_1);
 const storyoptions = {
-  title: "MapComponents/MlTransitionGeoJsonLayer",
-  component: MlTransitionGeoJsonLayer,
-  argTypes: {
-    url: {},
-    layer: {},
-  },
-  decorators: mapContextDecorator,
+	title: "MapComponents/MlTransitionGeoJsonLayer",
+	component: MlTransitionGeoJsonLayer,
+	argTypes: {
+		url: {},
+		layer: {},
+	},
+	decorators: mapContextDecorator,
 };
 export default storyoptions;
 
 const LinestringTransitionTemplate = (props) => {
-  const mapContext = useContext(MapContext);
-  const [geojson, setGeojson] = useState(sample_geojson_1);
-  const initializedRef = useRef(false);
-
-  useEffect(() => {
-    if (!mapContext.getMap() || initializedRef.current) return;
-
-    initializedRef.current = true;
-    mapContext.getMap().setCenter({ lng: 7.137609868988648, lat: 50.74746799549129 });
-    mapContext.getMap().setZoom(9.5);
-
-    setTimeout(() => {
-      setGeojson(sample_geojson_2);
-    }, 4000);
-  }, [geojson, mapContext]);
-
-  return (
-    <>
-      <MlTransitionGeoJsonLayer type="line" geojson={geojson} transitionTime={2000} {...props} />
-    </>
-  );
+	const mapHook = useMap({mapId: 'map_1'});
+	const [geojson, setGeojson] = useState(sample_geojson_1);
+	const initializedRef = useRef(false);
+
+	useEffect(() => {
+		if (!mapHook.map || initializedRef.current) return;
+
+		console.log('Hello')
+		initializedRef.current = true;
+		mapHook.map.setCenter({ lng: 7.137609868988648, lat: 50.74746799549129 });
+		mapHook.map.setZoom(9.5);
+
+		setTimeout(() => {
+			setGeojson(sample_geojson_2);
+		}, 4000);
+	}, [geojson, mapHook.map]);
+
+	return (
+		<>
+			<MlTransitionGeoJsonLayer type="line" geojson={geojson} transitionTime={2000} {...props} />
+		</>
+	);
 };
 
 export const Linestring = LinestringTransitionTemplate.bind({});
 Linestring.parameters = {};
 Linestring.args = {
-  paint: { "line-color": "red", "line-width": 4 },
+	paint: { "line-color": "red", "line-width": 4 },
 };

package/src/components/MlTransitionGeoJsonLayer/MlTransitionGeoJsonLayer.test.js

@@ -7,14 +7,14 @@ import { uuid_regex } from "../../setupTests";
 const testComponent = <MlTransitionGeoJsonLayer type="line" geojson={geojson} />;
 
 layerRemovalTest(
-  "<MlTransitionGeoJsonLayer />",
-  testComponent,
-  new RegExp('^.*"MlGeoJsonLayer-' + uuid_regex + '".*$'),
-  "MlTransitionGeoJsonLayer-{uuid}"
+	"<MlTransitionGeoJsonLayer />",
+	testComponent,
+	new RegExp('^.*"MlGeoJsonLayer-' + uuid_regex + '".*$'),
+	"MlTransitionGeoJsonLayer-{uuid}"
 );
 sourceRemovalTest(
-  "<MlTransitionGeoJsonLayer />",
-  testComponent,
-  new RegExp('^.*"MlGeoJsonLayer-' + uuid_regex + '".*$'),
-  "MlTransitionGeoJsonLayer-{uuid}"
+	"<MlTransitionGeoJsonLayer />",
+	testComponent,
+	new RegExp('^.*"MlGeoJsonLayer-' + uuid_regex + '".*$'),
+	"MlTransitionGeoJsonLayer-{uuid}"
 );

package/src/components/MlTransitionGeoJsonLayer/MlTransitionGeoJsonLayer.tsx

@@ -12,158 +12,158 @@ import { CircleLayerSpecification, FillLayerSpecification, LineLayerSpecificatio
 const msPerStep = 50;
 
 interface MlTransitionGeoJsonLayerProps {
-  /**
-   * Id of the target MapLibre instance in mapContext
-   */
-  mapId: string;
-  /**
-   * GeoJSON data that is supposed to be rendered by this component.
-   */
-  geojson: Feature | FeatureCollection | undefined;
-  /**
-   * Type of the layer that will be added to the MapLibre instance.
-   * Possible values: "line", "circle", "fill"
-   */
-  type?: "fill" | "line" | "circle";
-  /**
-   * Paint property object, that is passed to the addLayer call.
-   * Possible props depend on the layer type.
-   * https://maplibre.org/maplibre-gl-js-docs/style-spec/layers/#line
-   * https://maplibre.org/maplibre-gl-js-docs/style-spec/layers/#circle
-   * https://maplibre.org/maplibre-gl-js-docs/style-spec/layers/#fill
-   */
-  paint?: CircleLayerSpecification['paint'] | FillLayerSpecification['paint'] | LineLayerSpecification['paint'];
-  /**
-   * Layout property object, that is passed to the addLayer call.
-   * Possible props depend on the layer type.
-   * https://maplibre.org/maplibre-gl-js-docs/style-spec/layers/#line
-   * https://maplibre.org/maplibre-gl-js-docs/style-spec/layers/#circle
-   * https://maplibre.org/maplibre-gl-js-docs/style-spec/layers/#fill
-   */
-  layout?: CircleLayerSpecification['layout'] | FillLayerSpecification['layout'] | LineLayerSpecification['layout'];
-  /**
-   * Javascript object that is spread into the addLayer commands first parameter.
-   */
-  options?: CircleLayerSpecification | FillLayerSpecification | LineLayerSpecification;
-  /**
-   * Javascript object with optional properties "fill", "line", "circle" to override implicit layer type default paint properties.
-   */
-  defaultPaintOverrides?: { circle?: CircleLayerSpecification['paint'], fill?: FillLayerSpecification['paint'], line?: LineLayerSpecification['paint'] };
-  /**
-   * 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;
-  /**
-   * Hover event handler that is executed whenever a geometry rendered by this component is hovered.
-   */
-  onHover?: MapLayerMouseEvent;
-  /**
-   * Click event handler that is executed whenever a geometry rendered by this component is clicked.
-   */
-  onClick?: MapLayerMouseEvent;
-  /**
-   * Leave event handler that is executed whenever a geometry rendered by this component is
-   * left/unhovered.
-   */
-  onLeave?: MapLayerMouseEvent;
-  /**
-   * Creates transition animation whenever the geojson prop changes.
-   * Only works with layer type "line" and LineString GeoJSON data.
-   */
-  transitionTime: number;
+	/**
+	 * Id of the target MapLibre instance in mapContext
+	 */
+	mapId: string;
+	/**
+	 * GeoJSON data that is supposed to be rendered by this component.
+	 */
+	geojson: Feature | FeatureCollection | undefined;
+	/**
+	 * Type of the layer that will be added to the MapLibre instance.
+	 * Possible values: "line", "circle", "fill"
+	 */
+	type?: "fill" | "line" | "circle";
+	/**
+	 * Paint property object, that is passed to the addLayer call.
+	 * Possible props depend on the layer type.
+	 * https://maplibre.org/maplibre-gl-js-docs/style-spec/layers/#line
+	 * https://maplibre.org/maplibre-gl-js-docs/style-spec/layers/#circle
+	 * https://maplibre.org/maplibre-gl-js-docs/style-spec/layers/#fill
+	 */
+	paint?: CircleLayerSpecification['paint'] | FillLayerSpecification['paint'] | LineLayerSpecification['paint'];
+	/**
+	 * Layout property object, that is passed to the addLayer call.
+	 * Possible props depend on the layer type.
+	 * https://maplibre.org/maplibre-gl-js-docs/style-spec/layers/#line
+	 * https://maplibre.org/maplibre-gl-js-docs/style-spec/layers/#circle
+	 * https://maplibre.org/maplibre-gl-js-docs/style-spec/layers/#fill
+	 */
+	layout?: CircleLayerSpecification['layout'] | FillLayerSpecification['layout'] | LineLayerSpecification['layout'];
+	/**
+	 * Javascript object that is spread into the addLayer commands first parameter.
+	 */
+	options?: CircleLayerSpecification | FillLayerSpecification | LineLayerSpecification;
+	/**
+	 * Javascript object with optional properties "fill", "line", "circle" to override implicit layer type default paint properties.
+	 */
+	defaultPaintOverrides?: { circle?: CircleLayerSpecification['paint'], fill?: FillLayerSpecification['paint'], line?: LineLayerSpecification['paint'] };
+	/**
+	 * 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;
+	/**
+	 * Hover event handler that is executed whenever a geometry rendered by this component is hovered.
+	 */
+	onHover?: MapLayerMouseEvent;
+	/**
+	 * Click event handler that is executed whenever a geometry rendered by this component is clicked.
+	 */
+	onClick?: MapLayerMouseEvent;
+	/**
+	 * Leave event handler that is executed whenever a geometry rendered by this component is
+	 * left/unhovered.
+	 */
+	onLeave?: MapLayerMouseEvent;
+	/**
+	 * Creates transition animation whenever the geojson prop changes.
+	 * Only works with layer type "line" and LineString GeoJSON data.
+	 */
+	transitionTime: number;
 }
 
 /**
  * Adds source and layer of types "line", "fill" or "circle" to display GeoJSON data on the map.
  */
 const MlTransitionGeoJsonLayer = (props: MlTransitionGeoJsonLayerProps) => {
-  const { geojson, ...restProps } = props;
-
-  const mapHook = useMap({
-    mapId: props.mapId,
-    waitForLayer: props.insertBeforeLayer,
-  });
-  const initializedRef = useRef(false);
-
-  // transition effect variables
-  const oldGeojsonRef = useRef<Feature | FeatureCollection>();
-  const transitionInProgressRef = useRef(false);
-  const transitionTimeoutRef = useRef(undefined);
-  const currentTransitionStepRef = useRef(false);
-  const transitionGeojsonDataRef = useRef([]);
-  const transitionGeojsonCommonDataRef = useRef([]);
-  const [displayGeojson, setDisplayGeojson] = useState(
-    turf.featureCollection([])
-  );
-
-  useEffect(() => {
-    return () => {
-      // This is the cleanup function, it is called when this react component is removed from react-dom
-      if (transitionTimeoutRef.current) {
-        clearTimeout(transitionTimeoutRef.current);
-      }
-    };
-  }, []);
-
-  const transitionToGeojson = useCallback(() => {
-    _transitionToGeojson(
-      props,
-      transitionGeojsonCommonDataRef,
-      transitionGeojsonDataRef,
-      transitionInProgressRef,
-      oldGeojsonRef,
-      msPerStep,
-      currentTransitionStepRef,
-      mapHook.map,
-      transitionTimeoutRef,
-      setDisplayGeojson
-    );
-  }, [props, mapHook.map]);
-
-  useEffect(() => {
-    if (!mapHook.map || !initializedRef.current) return;
-
-    if (
-      typeof props.transitionTime !== "undefined" &&
-      props.type === "line" &&
-      oldGeojsonRef.current
-    ) {
-      transitionInProgressRef.current = false;
-      currentTransitionStepRef.current = false;
-      transitionGeojsonDataRef.current = [];
-      transitionGeojsonCommonDataRef.current = [];
-      transitionToGeojson();
-    }
-    oldGeojsonRef.current = props.geojson;
-  }, [mapHook.map, transitionToGeojson, props]);
-
-  const startTransition = useCallback(() => {
-    if (
-      props.type === "line" &&
-      typeof props.transitionTime !== "undefined" &&
-      props.transitionTime &&
-      typeof props.geojson !== "undefined" &&
-      JSON.stringify(oldGeojsonRef.current) !== JSON.stringify(props.geojson)
-    ) {
-      transitionToGeojson();
-      oldGeojsonRef.current = props.geojson;
-    }
-  }, [props, transitionToGeojson]);
-
-  useEffect(() => {
-    if (!mapHook.mapIsReady || !props.geojson) return;
-
-    initializedRef.current = true;
-
-    startTransition();
-  }, [mapHook.mapIsReady, startTransition, props]);
-
-  return (
-    <>
-      <MlGeoJsonLayer {...restProps} geojson={displayGeojson} />
-    </>
-  );
+	const { geojson, ...restProps } = props;
+
+	const mapHook = useMap({
+		mapId: props.mapId,
+		waitForLayer: props.insertBeforeLayer,
+	});
+	const initializedRef = useRef(false);
+
+	// transition effect variables
+	const oldGeojsonRef = useRef<Feature | FeatureCollection>();
+	const transitionInProgressRef = useRef(false);
+	const transitionTimeoutRef = useRef(undefined);
+	const currentTransitionStepRef = useRef(false);
+	const transitionGeojsonDataRef = useRef([]);
+	const transitionGeojsonCommonDataRef = useRef([]);
+	const [displayGeojson, setDisplayGeojson] = useState(
+		turf.featureCollection([])
+	);
+
+	useEffect(() => {
+		return () => {
+			// This is the cleanup function, it is called when this react component is removed from react-dom
+			if (transitionTimeoutRef.current) {
+				clearTimeout(transitionTimeoutRef.current);
+			}
+		};
+	}, []);
+
+	const transitionToGeojson = useCallback(() => {
+		_transitionToGeojson(
+			props,
+			transitionGeojsonCommonDataRef,
+			transitionGeojsonDataRef,
+			transitionInProgressRef,
+			oldGeojsonRef,
+			msPerStep,
+			currentTransitionStepRef,
+			mapHook.map,
+			transitionTimeoutRef,
+			setDisplayGeojson
+		);
+	}, [props, mapHook.map]);
+
+	useEffect(() => {
+		if (!mapHook.map || !initializedRef.current) return;
+
+		if (
+			typeof props.transitionTime !== "undefined" &&
+			props.type === "line" &&
+			oldGeojsonRef.current
+		) {
+			transitionInProgressRef.current = false;
+			currentTransitionStepRef.current = false;
+			transitionGeojsonDataRef.current = [];
+			transitionGeojsonCommonDataRef.current = [];
+			transitionToGeojson();
+		}
+		oldGeojsonRef.current = props.geojson;
+	}, [mapHook.map, transitionToGeojson, props]);
+
+	const startTransition = useCallback(() => {
+		if (
+			props.type === "line" &&
+			typeof props.transitionTime !== "undefined" &&
+			props.transitionTime &&
+			typeof props.geojson !== "undefined" &&
+			JSON.stringify(oldGeojsonRef.current) !== JSON.stringify(props.geojson)
+		) {
+			transitionToGeojson();
+			oldGeojsonRef.current = props.geojson;
+		}
+	}, [props, transitionToGeojson]);
+
+	useEffect(() => {
+		if (!mapHook.mapIsReady || !props.geojson) return;
+
+		initializedRef.current = true;
+
+		startTransition();
+	}, [mapHook.mapIsReady, startTransition, props]);
+
+	return (
+		<>
+			<MlGeoJsonLayer {...restProps} geojson={displayGeojson} />
+		</>
+	);
 };
 
 export default MlTransitionGeoJsonLayer;