@mapcomponents/react-maplibre 0.1.56 → 0.1.58

package/src/components/MlGPXViewer/util/GeoJsonContext.ts

@@ -2,10 +2,10 @@ import React from "react";
 import { FeatureCollection } from '@turf/turf';
 
 type ContextProps = { 
-    data: FeatureCollection,
-    setData: Function,
-    getEmptyFeatureCollection: Function
-  };
+		data: FeatureCollection,
+		setData: Function,
+		getEmptyFeatureCollection: Function
+	};
 
 const GeoJsonContext = React.createContext<Partial<ContextProps>>({});
 

package/src/components/MlGPXViewer/util/GeoJsonProvider.tsx

@@ -3,23 +3,23 @@ import { GeoJsonContextProvider } from "./GeoJsonContext";
 import { FeatureCollection } from '@turf/turf';
 
 const GeoJsonProvider = ({ children }:{children:JSX.Element}) => {
-  const [data, setData] = useState<FeatureCollection>({
-    type: "FeatureCollection",
-    features: [],
-  });
-  const getEmptyFeatureCollection = () => {
-    return {
-      type: "FeatureCollection",
-      features: [],
-    };
-  };
-  const value = {
-    data,
-    setData,
-    getEmptyFeatureCollection,
-  };
+	const [data, setData] = useState<FeatureCollection>({
+		type: "FeatureCollection",
+		features: [],
+	});
+	const getEmptyFeatureCollection = () => {
+		return {
+			type: "FeatureCollection",
+			features: [],
+		};
+	};
+	const value = {
+		data,
+		setData,
+		getEmptyFeatureCollection,
+	};
 
-  return <GeoJsonContextProvider value={value}>{children}</GeoJsonContextProvider>;
+	return <GeoJsonContextProvider value={value}>{children}</GeoJsonContextProvider>;
 };
 
 export default GeoJsonProvider;

package/src/components/MlGeoJsonLayer/MlGeoJsonLayer.stories.js

@@ -9,58 +9,58 @@ import sample_polygon_geojson_1 from "./assets/sample_polygon_1.json";
 
 console.log(sample_polygon_geojson_1);
 const storyoptions = {
-  title: "MapComponents/MlGeoJsonLayer",
-  component: MlGeoJsonLayer,
-  argTypes: {
-  },
-  decorators: mapContextDecorator,
+	title: "MapComponents/MlGeoJsonLayer",
+	component: MlGeoJsonLayer,
+	argTypes: {
+	},
+	decorators: mapContextDecorator,
 };
 export default storyoptions;
 
 const Template = (props) => {
-  return (
-    <>
-      <MlGeoJsonLayer {...props} />
-    </>
-  );
+	return (
+		<>
+			<MlGeoJsonLayer {...props} />
+		</>
+	);
 };
 const LinestringTemplate = (props) => {
-  return (
-    <>
-      <MlGeoJsonLayer type="line" geojson={sample_geojson_1} />
-    </>
-  );
+	return (
+		<>
+			<MlGeoJsonLayer type="line" geojson={sample_geojson_1} />
+		</>
+	);
 };
 
 export const Linestring = LinestringTemplate.bind({});
 Linestring.parameters = {};
 Linestring.args = {
-  type:''
+	type:''
 };
 
 export const Polygon = Template.bind({});
 Polygon.parameters = {};
 Polygon.args = {
-  geojson: sample_polygon_geojson_1,
-  paint:{
-    "fill-color": 'rgba(120,20,80,.5)'
-  },
-  type:''
+	geojson: sample_polygon_geojson_1,
+	paint:{
+		"fill-color": 'rgba(120,20,80,.5)'
+	},
+	type:''
 };
 export const DefaultPaintOverrides = Template.bind({});
 DefaultPaintOverrides.parameters = {};
 DefaultPaintOverrides.args = {
-  defaultPaintOverrides: {
-    fill: {
-      "fill-color": "blue",
-    },
-    circle: {
-      "circle-color": "red",
-    },
-    line: {
-      "line-color": "orange",
-    },
-  },
-  geojson: sample_polygon_geojson_1,
-  type:''
+	defaultPaintOverrides: {
+		fill: {
+			"fill-color": "blue",
+		},
+		circle: {
+			"circle-color": "red",
+		},
+		line: {
+			"line-color": "black",
+		},
+	},
+	geojson: sample_polygon_geojson_1,
+	type:''
 };

package/src/components/MlGeoJsonLayer/MlGeoJsonLayer.test.js

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

package/src/components/MlGeoJsonLayer/MlGeoJsonLayer.tsx

@@ -12,67 +12,67 @@ import { Feature, FeatureCollection } from "@turf/turf";
 import { LineLayerSpecification, CircleLayerSpecification, FillLayerSpecification,MapLayerMouseEvent, LayerSpecification } from "maplibre-gl";
 
 type MlGeoJsonLayerProps = {
-  /**
-   * Id of the target MapLibre instance in mapContext
-   */
-  mapId?: string;
-  /**
-   * 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.
-   * This layer will not be added to the maplibre-gl instance until a layer with an 
-   * id that matches the value of insertBeforeLayer is created.
-   */
-  insertBeforeLayer?: string;
-  /**
-   * Id of the new layer and source that are added to the MapLibre instance
-   */
-  layerId?: 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'] };
-  /**
-   * 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;
+	/**
+	 * Id of the target MapLibre instance in mapContext
+	 */
+	mapId?: string;
+	/**
+	 * 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.
+	 * This layer will not be added to the maplibre-gl instance until a layer with an 
+	 * id that matches the value of insertBeforeLayer is created.
+	 */
+	insertBeforeLayer?: string;
+	/**
+	 * Id of the new layer and source that are added to the MapLibre instance
+	 */
+	layerId?: 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'] };
+	/**
+	 * 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;
 }
 
 /**
@@ -81,30 +81,30 @@ type MlGeoJsonLayerProps = {
  * @component
  */
 const MlGeoJsonLayer = (props: MlGeoJsonLayerProps) => {
-  const layerType = props.type || getDefaulLayerTypeByGeometry(props.geojson);
-  // Use a useRef hook to reference the layer object to be able to access it later inside useEffect hooks
-  useLayer({
-    mapId: props.mapId,
-    layerId: props.layerId || "MlGeoJsonLayer-" + uuidv4(),
-    geojson: props.geojson,
-    options: {
-      paint:
-        props.paint ||
-        getDefaultPaintPropsByType(
-          layerType,
-          props.defaultPaintOverrides
-        ),
-      layout: props.layout || {},
-      ...props.options,
-      type: layerType as LayerSpecification['type'],
-    },
-    insertBeforeLayer: props.insertBeforeLayer,
-    onHover: props.onHover,
-    onClick: props.onClick,
-    onLeave: props.onLeave,
-  });
+	const layerType = props.type || getDefaulLayerTypeByGeometry(props.geojson);
+	// Use a useRef hook to reference the layer object to be able to access it later inside useEffect hooks
+	useLayer({
+		mapId: props.mapId,
+		layerId: props.layerId || "MlGeoJsonLayer-" + uuidv4(),
+		geojson: props.geojson,
+		options: {
+			paint:
+				props.paint ||
+				getDefaultPaintPropsByType(
+					layerType,
+					props.defaultPaintOverrides
+				),
+			layout: props.layout || {},
+			...props.options,
+			type: layerType as LayerSpecification['type'],
+		},
+		insertBeforeLayer: props.insertBeforeLayer,
+		onHover: props.onHover,
+		onClick: props.onClick,
+		onLeave: props.onLeave,
+	});
 
-  return (<></>);
+	return (<></>);
 };
 
 

package/src/components/MlGeoJsonLayer/util/getDefaultLayerTypeByGeometry.ts

@@ -2,30 +2,30 @@ import { Feature, FeatureCollection } from "@turf/turf";
 import { LayerSpecification } from "maplibre-gl";
 
 const mapGeometryTypesToLayerTypes = {
-  Position: "circle",
-  Point: "circle",
-  MultiPoint: "circle",
-  LineString: "line",
-  MultiLineString: "line",
-  Polygon: "fill",
-  MultiPolygon: "fill",
-  GeometryCollection: "circle",
+	Position: "circle",
+	Point: "circle",
+	MultiPoint: "circle",
+	LineString: "line",
+	MultiLineString: "line",
+	Polygon: "fill",
+	MultiPolygon: "fill",
+	GeometryCollection: "circle",
 };
 
 const getDefaulLayerTypeByGeometry: Function = (
-  geojson: Feature | FeatureCollection
+	geojson: Feature | FeatureCollection
 ): LayerSpecification['type'] => {
-  if (geojson?.type === "Feature") {
-    return mapGeometryTypesToLayerTypes?.[geojson?.geometry?.type]
-      ? mapGeometryTypesToLayerTypes[geojson.geometry.type]
-      : "circle";
-  }
-  if (geojson?.type === "FeatureCollection") {
-    if (geojson.features.length) {
-      return getDefaulLayerTypeByGeometry(geojson.features[0]);
-    }
-    return "circle";
-  }
-  return "fill";
+	if (geojson?.type === "Feature") {
+		return mapGeometryTypesToLayerTypes?.[geojson?.geometry?.type]
+			? mapGeometryTypesToLayerTypes[geojson.geometry.type]
+			: "circle";
+	}
+	if (geojson?.type === "FeatureCollection") {
+		if (geojson.features.length) {
+			return getDefaulLayerTypeByGeometry(geojson.features[0]);
+		}
+		return "circle";
+	}
+	return "fill";
 };
 export default getDefaulLayerTypeByGeometry;

package/src/components/MlGeoJsonLayer/util/getDefaultPaintPropsByType.ts

@@ -1,31 +1,31 @@
 const getDefaultPaintPropsByType:Function = (type:string, defaultPaintOverrides:any):any => {
-  switch (type) {
-    case "fill":
-      if (defaultPaintOverrides?.fill) {
-        return defaultPaintOverrides.fill;
-      }
-      return {
-        "fill-color": "rgba(10,240,256,0.6)",
-      };
-    case "line":
-      if (defaultPaintOverrides?.line) {
-        return defaultPaintOverrides.line;
-      }
-      return {
-        "line-color": "rgb(203,211,2)",
-        "line-width": 5,
-      };
-    case "circle":
-    default:
-      if (defaultPaintOverrides?.circle) {
-        return defaultPaintOverrides.circle;
-      }
-      return {
-        "circle-color": "rgba(10,240,256,0.8)",
-        "circle-stroke-color": "#fff",
-        "circle-stroke-width": 2,
-      };
-  }
+	switch (type) {
+		case "fill":
+			if (defaultPaintOverrides?.fill) {
+				return defaultPaintOverrides.fill;
+			}
+			return {
+				"fill-color": "rgba(10,240,256,0.6)",
+			};
+		case "line":
+			if (defaultPaintOverrides?.line) {
+				return defaultPaintOverrides.line;
+			}
+			return {
+				"line-color": "rgb(203,211,2)",
+				"line-width": 5,
+			};
+		case "circle":
+		default:
+			if (defaultPaintOverrides?.circle) {
+				return defaultPaintOverrides.circle;
+			}
+			return {
+				"circle-color": "rgba(10,240,256,0.8)",
+				"circle-stroke-color": "#fff",
+				"circle-stroke-width": 2,
+			};
+	}
 };
 
 export default getDefaultPaintPropsByType;

package/src/components/MlGeojsonLayerWithSource/MlGeojsonLayerWithSource.doc.de.md

@@ -0,0 +1,3 @@
+# Component Beschreibung
+
+Beschreibungstext

package/src/components/MlGeojsonLayerWithSource/MlGeojsonLayerWithSource.meta_.json

@@ -0,0 +1,15 @@
+{
+  "name": "MlGeojsonLayerWithSource",
+  "title": "",
+  "description": "",
+  "i18n": {
+    "de": {
+      "title": "",
+      "description": ""
+    }
+  },
+  "tags": [],
+  "category": "",
+  "type": "component",
+  "price": 0
+}

package/src/components/MlGeojsonLayerWithSource/MlGeojsonLayerWithSource.stories.js

@@ -0,0 +1,19 @@
+import React from "react";
+
+import MlGeojsonLayerWithSource from "./MlGeojsonLayerWithSource";
+
+import mapContextDecorator from "../../decorators/MapContextDecorator";
+
+const storyoptions = {
+  title: "MapComponents/MlGeojsonLayerWithSource",
+  component: MlGeojsonLayerWithSource,
+  argTypes: {
+  },
+  decorators: mapContextDecorator,
+};
+export default storyoptions;
+
+const Template = () => <MlGeojsonLayerWithSource />;
+
+export const ExampleConfig = Template.bind({});
+ExampleConfig.args = { mapId: "map_1" };

package/src/components/MlGeojsonLayerWithSource/MlGeojsonLayerWithSource.tsx

@@ -0,0 +1,128 @@
+import React, { useRef, useEffect } from "react";
+import useMap from "../../hooks/useMap";
+import useLayer from "../../hooks/useLayer";
+import useSource from "../../hooks/useSource";
+
+interface MlGeojsonLayerWithSourceProps {
+  /**
+   * Id of the target MapLibre instance in mapContext
+   */
+  mapId?: string;
+  /**
+   * 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;
+}
+
+/**
+ * MlGeojsonLayerWithSource
+ *
+ */
+const MlGeojsonLayerWithSource = (props: MlGeojsonLayerWithSourceProps) => {
+  const Spiekeroog = {
+    type: "Feature",
+    geometry: {
+      type: "Polygon",
+      coordinates: [
+        [
+          [7.678070068359375, 53.77276133960687],
+          [7.665367126464845, 53.76190478322587],
+          [7.66794204711914, 53.75439486837337],
+          [7.682018280029297, 53.75104541932613],
+          [7.683563232421874, 53.752567929273795],
+          [7.6895713806152335, 53.75784553654847],
+          [7.694721221923828, 53.765253366367],
+          [7.697296142578124, 53.76555776977467],
+          [7.696952819824219, 53.76190478322587],
+          [7.702102661132812, 53.7634268995759],
+          [7.74038314819336, 53.760179651329416],
+          [7.7458763122558585, 53.7626151110553],
+          [7.76956558227539, 53.76413720165758],
+          [7.796001434326172, 53.77002209954434],
+          [7.801666259765624, 53.77113810781356],
+          [7.801666259765624, 53.77235553754314],
+          [7.806129455566406, 53.77306568858016],
+          [7.815742492675781, 53.775703287246394],
+          [7.819690704345703, 53.77752921999979],
+          [7.81951904296875, 53.77955794100295],
+          [7.8172874450683585, 53.78026797018521],
+          [7.785530090332031, 53.780166538180396],
+          [7.756175994873047, 53.78067369575275],
+          [7.754802703857421, 53.7819922767562],
+          [7.7398681640625, 53.78189084891923],
+          [7.725791931152345, 53.78168799250984],
+          [7.71686553955078, 53.77986224069494],
+          [7.709827423095702, 53.78087655706549],
+          [7.695751190185547, 53.78036940194483],
+          [7.687854766845703, 53.778340720169446],
+          [7.678070068359375, 53.77276133960687],
+        ],
+      ],
+    },
+  };
+
+  const mapHook = useMap({
+    mapId: props.mapId,
+    waitForLayer: props.insertBeforeLayer,
+  });
+
+  const initializedRef = useRef(false);
+
+  const sourceId = "geojson-source-island";
+  useSource({
+    mapId: props.mapId,
+    sourceId: sourceId,
+    source: {
+      type: "geojson",
+      data: Spiekeroog,
+    },
+  });
+
+  useLayer({
+    mapId: props.mapId,
+    layerId: "Spiekeroog-area",
+    source: sourceId,
+    options: {
+      id: "layer1",
+      source: sourceId,
+      type: "fill",
+      paint: {
+        "fill-color": "green",
+        "fill-opacity": 0.5,
+      },
+    },
+  });
+
+  useLayer({
+    mapId: props.mapId,
+    layerId: "Spiekeroog-points",
+    source: sourceId,
+    options: {
+      id: "Spiekeroog-points",
+      source: sourceId,
+      type: "circle",
+      paint: {
+        "circle-radius": 4,
+        "circle-color": "green",
+      },
+    },
+  });
+
+  useEffect(() => {
+    if (!mapHook.map || initializedRef.current) return;
+    // the MapLibre-gl instance (mapHook.map) is accessible here
+    // initialize the layer and add it to the MapLibre-gl instance or do something else with it
+    initializedRef.current = true;
+
+    mapHook.map.map.setCenter([7.7388381958, 53.7732685866]);
+    mapHook.map.map.setZoom(11);
+  }, [mapHook.map, props.mapId]);
+
+  return <></>;
+};
+
+MlGeojsonLayerWithSource.defaultProps = {
+  mapId: "map_1",
+};
+export default MlGeojsonLayerWithSource;