@mapcomponents/ra-geospatial 1.0.3 → 1.5.0-2

package/src/components/GeospatialInputMap.tsx

@@ -1,176 +1,187 @@
-import React, { useContext, useEffect, useRef, useState } from "react";
-import { InputProps, useInput, useRecordContext } from "react-admin";
-import {
-  stringify as wellknownStringify,
-  parse as wellknownParse,
-  GeoJSONGeometry,
-  GeoJSONFeature,
-  GeoJSONPoint,
-} from "wellknown";
+import React, { useEffect, useState } from 'react';
+import { InputProps, useInput, useRecordContext } from 'react-admin';
+import { parse as wellknownParse, stringify as wellknownStringify } from 'wellknown';
+
 import {
-  useMap,
-  MapLibreMap,
-  MlFeatureEditor,
-  MlGeoJsonLayer,
-} from "@mapcomponents/react-maplibre";
-import { LngLatLike } from "maplibre-gl";
-import { feature, centroid } from "@turf/turf";
-import { Feature } from "@turf/helpers";
+	MapLibreMap,
+	MlFeatureEditor,
+	MlGeoJsonLayer,
+	useMap,
+} from '@mapcomponents/react-maplibre';
+import { LngLatLike } from 'maplibre-gl';
+import { centroid, feature } from '@turf/turf';
+import { Feature } from '@turf/helpers';
+import { Geometry } from 'geojson';
 
 export interface GeospatialInputMapProps extends InputProps<any> {
-  MapLibreMapProps?: unknown;
-  geometrytype?: "point" | "line" | "polygon";
-  embeddedMap?: boolean;
-  mapId?: string;
+	MapLibreMapProps?: React.ComponentProps<typeof MapLibreMap>;
+	geometrytype?: 'point' | 'line' | 'polygon';
+	embeddedMap?: boolean;
+	mapId?: string;
 }
 
 function GeospatialInputMap(props: GeospatialInputMapProps) {
-  const source = props?.source;
-  const record = useRecordContext();
-  const mapHook = useMap({mapId:props?.mapId});
-
-  const [geojson, setGeojson] = useState<typeof feature>();
-  const [oldGeoJson, setOldGeoJson] = useState<typeof feature>();
-  const {
-    field: { name, onChange, ...rest },
-    fieldState,
-    formState,
-    isRequired,
-  } = useInput(props);
-
-  useEffect(() => {
-    if (typeof record === "undefined" || !record[source]) return;
-
-    let _geoJson = {
-      type: "Feature",
-      properties: {},
-      geometry: wellknownParse(record[source]),
-    };
-
-    setGeojson(_geoJson as unknown as typeof feature);
-    setOldGeoJson(_geoJson as unknown as typeof feature);
-  }, [record, props.source]);
-
-  useEffect(() => {
-    if (!mapHook.map) return;
-
-    if (typeof record !== "undefined" && record[source]) {
-      const _center = centroid(
-        wellknownParse(record[source]) as typeof Feature
-      );
-
-      if (_center?.geometry?.coordinates) {
-        mapHook.map.setCenter(_center.geometry.coordinates as LngLatLike);
-      }
-    }
-  }, [mapHook.map]);
-
-  return (
-    <>
-      {props.embeddedMap && (
-        <MapLibreMap
-          options={{
-            zoom: 14.5,
-            style:
-              "https://wms.wheregroup.com/tileserver/style/klokantech-basic.json",
-            center: [7.0851268, 50.73884],
-          }}
-          style={{ width: "100%", height: "400px" }}
-        />
-      )}
-
-      {props.type === "point" && (
-        <>
-          {oldGeoJson && (
-            <MlGeoJsonLayer
-              mapId={props?.mapId}
-              geojson={oldGeoJson as typeof feature}
-              paint={{
-                "circle-radius": 8,
-                "circle-color": "#6f6f96",
-                "circle-stroke-color": "white",
-                "circle-stroke-width": 3,
-                "circle-opacity": 0.8,
-              }}
-              type="circle"
-              insertBeforeLayer="gl-draw-polygon-fill-inactive.cold"
-            />
-          )}
-
-          <MlFeatureEditor
-            mapId={props?.mapId}
-            geojson={geojson as typeof feature}
-            mode={geojson ? "custom_select" : "draw_point"}
-            onChange={(_geojson) => {
-              if (typeof _geojson[0] !== "undefined") {
-                onChange(wellknownStringify(_geojson[0] as GeoJSONGeometry));
-              }
-            }}
-          />
-        </>
-      )}
-      {props.type === "polygon" && (
-        <>
-          {oldGeoJson && (
-            <MlGeoJsonLayer
-              mapId={props?.mapId}
-              geojson={oldGeoJson as typeof feature}
-              paint={{
-                "fill-color": "#6f6f96",
-                "fill-opacity": 0.6,
-              }}
-              type="fill"
-              insertBeforeLayer="gl-draw-polygon-fill-inactive.cold"
-            />
-          )}
-
-          <MlFeatureEditor
-            mapId={props?.mapId}
-            geojson={geojson as typeof feature}
-            mode={geojson ? "custom_select" : "draw_polygon"}
-            onChange={(_geojson) => {
-              if (typeof _geojson[0] !== "undefined") {
-                onChange(wellknownStringify(_geojson[0] as GeoJSONGeometry));
-              }
-            }}
-          />
-        </>
-      )}
-      {props.type === "line" && (
-        <>
-          {oldGeoJson && (
-            <MlGeoJsonLayer
-              mapId={props?.mapId}
-              geojson={oldGeoJson as typeof feature}
-              paint={{
-                "line-width": 6,
-                "line-color": "#6f6f96",
-                "line-opacity": 0.6,
-              }}
-              type="line"
-              insertBeforeLayer="gl-draw-polygon-fill-inactive.cold"
-            />
-          )}
-
-          <MlFeatureEditor
-            mapId={props?.mapId}
-            geojson={geojson as typeof feature}
-            mode={geojson ? "custom_select" : "draw_line_string"}
-            onChange={(_geojson) => {
-              if (typeof _geojson[0] !== "undefined") {
-                onChange(wellknownStringify(_geojson[0] as GeoJSONGeometry));
-              }
-            }}
-          />
-        </>
-      )}
-    </>
-  );
+	const source = props?.source;
+	const record = useRecordContext();
+	const mapHook = useMap({ mapId: props?.mapId });
+
+	const [geojson, setGeojson] = useState<typeof feature>();
+	const [oldGeoJson, setOldGeoJson] = useState<typeof feature>();
+	const input = useInput(props);
+
+	const {
+		field: { onChange },
+	} = input;
+
+	useEffect(() => {
+		if (typeof record === 'undefined' || !record[source]) return;
+
+		const _geoJson = {
+			type: 'Feature',
+			properties: {},
+			geometry: wellknownParse(record[source]),
+		};
+
+		setGeojson(_geoJson as unknown as typeof feature);
+		setOldGeoJson(_geoJson as unknown as typeof feature);
+	}, [record, props.source]);
+
+	useEffect(() => {
+		if (!mapHook.map) return;
+
+		if (typeof record !== 'undefined' && record[source]) {
+			const _center = centroid(wellknownParse(record[source]) as typeof Feature);
+
+			if (_center?.geometry?.coordinates) {
+				mapHook.map.setCenter(_center.geometry.coordinates as LngLatLike);
+			}
+		}
+	}, [mapHook.map]);
+
+	return (
+		<>
+			{props.embeddedMap && (
+				<MapLibreMap
+					{...props?.MapLibreMapProps}
+					options={{
+						zoom: 14,
+						style: 'https://wms.wheregroup.com/tileserver/style/klokantech-basic.json',
+						center:
+							Array.isArray(props?.MapLibreMapProps?.options?.center) &&
+							props.MapLibreMapProps.options.center.length === 2
+								? [
+										props.MapLibreMapProps.options.center[0],
+										props.MapLibreMapProps.options.center[1],
+									]
+								: [0, 0],
+						...props?.MapLibreMapProps?.options,
+					}}
+					style={{
+						width: '100%',
+						height: '400px',
+						...props?.MapLibreMapProps?.style,
+					}}
+				/>
+			)}
+
+			{props.type === 'point' && (
+				<>
+					{oldGeoJson && (
+						<MlGeoJsonLayer
+							mapId={props?.mapId}
+							geojson={oldGeoJson as typeof feature}
+							options={{
+								paint: {
+									'circle-radius': 8,
+									'circle-color': '#6f6f96',
+									'circle-stroke-color': 'white',
+									'circle-stroke-width': 3,
+									'circle-opacity': 0.8,
+								},
+							}}
+							type="circle"
+							insertBeforeLayer="gl-draw-polygon-fill-inactive.cold"
+						/>
+					)}
+
+					<MlFeatureEditor
+						mapId={props?.mapId}
+						geojson={geojson as typeof feature}
+						mode={geojson ? 'simple_select' : 'draw_point'}
+						onChange={(_geojson) => {
+							if (typeof _geojson[0] !== 'undefined') {
+								onChange(wellknownStringify(_geojson[0] as unknown as Geometry));
+							}
+						}}
+					/>
+				</>
+			)}
+			{props.type === 'polygon' && (
+				<>
+					{oldGeoJson && (
+						<MlGeoJsonLayer
+							mapId={props?.mapId}
+							geojson={oldGeoJson as typeof feature}
+							options={{
+								paint: {
+									'fill-color': '#6f6f96',
+									'fill-opacity': 0.6,
+								},
+							}}
+							type="fill"
+							insertBeforeLayer="gl-draw-polygon-fill-inactive.cold"
+						/>
+					)}
+
+					<MlFeatureEditor
+						mapId={props?.mapId}
+						geojson={geojson as typeof feature}
+						mode={geojson ? 'simple_select' : 'draw_polygon'}
+						onChange={(_geojson) => {
+							if (typeof _geojson[0] !== 'undefined') {
+								onChange(wellknownStringify(_geojson[0] as unknown as Geometry));
+							}
+						}}
+					/>
+				</>
+			)}
+			{props.type === 'line' && (
+				<>
+					{oldGeoJson && (
+						<MlGeoJsonLayer
+							mapId={props?.mapId}
+							geojson={oldGeoJson as typeof feature}
+							options={{
+								paint: {
+									'line-width': 6,
+									'line-color': '#6f6f96',
+									'line-opacity': 0.6,
+								},
+							}}
+							type="line"
+							insertBeforeLayer="gl-draw-polygon-fill-inactive.cold"
+						/>
+					)}
+
+					<MlFeatureEditor
+						mapId={props?.mapId}
+						geojson={geojson as typeof feature}
+						mode={geojson ? 'simple_select' : 'draw_line_string'}
+						onChange={(_geojson) => {
+							if (typeof _geojson[0] !== 'undefined') {
+								onChange(wellknownStringify(_geojson[0] as unknown as Geometry));
+							}
+						}}
+					/>
+				</>
+			)}
+		</>
+	);
 }
 
 GeospatialInputMap.defaultProps = {
-  type: "point",
-  embeddedMap: true,
+	type: 'point',
+	embeddedMap: true,
 };
 
 export default GeospatialInputMap;

package/src/components/GeospatialShow.stories.tsx

@@ -0,0 +1,84 @@
+import type { Meta } from '@storybook/react-vite';
+import GeospatialShow from './GeospatialShow';
+import { ReactAdminDefaultDecorator } from '../decorators/ReactAdminDefaultDecorator';
+import { PoiShow, PoiShowWebGis } from '../ra_components/Poi';
+import { PropertyShow, PropertyShowWebGis } from '../ra_components/Property';
+import { RouteShow, RouteShowWebGis } from '../ra_components/Route';
+import GisLayout from '../layout/GisLayout';
+
+const meta = {
+	component: GeospatialShow,
+	title: 'MapComponents/GeospatialShow',
+	decorators: [ReactAdminDefaultDecorator],
+} satisfies Meta<typeof GeospatialShow>;
+
+export default meta;
+
+export const PoisShow = PoiShow.bind({});
+
+PoisShow.args = {
+	primary: true,
+	embeddedMap: true,
+};
+
+PoisShow.parameters = {
+	name: 'pois',
+};
+
+export const PropertiesShow = PropertyShow.bind({});
+
+PropertiesShow.args = {
+	primary: true,
+	embeddedMap: true,
+};
+
+PropertiesShow.parameters = {
+	name: 'properties',
+};
+
+export const RoutesShow = RouteShow.bind({});
+
+RoutesShow.args = {
+	primary: true,
+	embeddedMap: true,
+};
+
+RoutesShow.parameters = {
+	name: 'routes',
+};
+
+export const PoisShowGIS = PoiShowWebGis.bind({});
+
+PoisShowGIS.args = {
+	primary: true,
+	embeddedMap: false,
+};
+
+PoisShowGIS.parameters = {
+	name: 'pois',
+	layout: GisLayout,
+};
+
+export const PropertiesShowGIS = PropertyShowWebGis.bind({});
+
+PropertiesShowGIS.args = {
+	primary: true,
+	embeddedMap: false,
+};
+
+PropertiesShowGIS.parameters = {
+	name: 'properties',
+	layout: GisLayout,
+};
+
+export const RoutesShowGIS = RouteShowWebGis.bind({});
+
+RoutesShowGIS.args = {
+	primary: true,
+	embeddedMap: false,
+};
+
+RoutesShowGIS.parameters = {
+	name: 'routes',
+	layout: GisLayout,
+};

package/src/components/GeospatialShow.tsx

@@ -1,24 +1,21 @@
-import React from "react";
-import { MapComponentsProvider } from "@mapcomponents/react-maplibre";
-import GeometryShowMap, {
-  GeospatialShowMapProps,
-} from "./GeospatialShowMap.js";
+import { MapComponentsProvider } from '@mapcomponents/react-maplibre';
+import GeometryShowMap, { GeospatialShowMapProps } from './GeospatialShowMap.js';
 
 function GeospatialShow(props: GeospatialShowMapProps) {
-  return (
-    <>
-      {props.embeddedMap ? (
-        <MapComponentsProvider>
-          <GeometryShowMap {...props} />
-        </MapComponentsProvider>
-      ) : (
-        <GeometryShowMap {...props} />
-      )}
-    </>
-  );
+	return (
+		<>
+			{props.embeddedMap ? (
+				<MapComponentsProvider>
+					<GeometryShowMap {...props} />
+				</MapComponentsProvider>
+			) : (
+				<GeometryShowMap {...props} />
+			)}
+		</>
+	);
 }
 GeospatialShow.defaultProps = {
-  embeddedMap: true,
+	embeddedMap: true,
 };
 
 export default GeospatialShow;

package/src/components/GeospatialShowMap.tsx

@@ -1,65 +1,69 @@
-import React, { useEffect, useState } from "react";
-import { InputProps, useRecordContext } from "react-admin";
-import { parse as wellknownParse, GeoJSONPoint } from "wellknown";
-import {
-  MapLibreMap,
-  MlGeoJsonLayer,
-  useMap,
-} from "@mapcomponents/react-maplibre";
-import { LngLatLike } from "maplibre-gl";
-import { feature, centroid } from "@turf/turf";
-import { Feature } from "@turf/helpers";
+import React, { useEffect, useState } from 'react';
+import { InputProps, useRecordContext } from 'react-admin';
+import { parse as wellknownParse } from 'wellknown';
+import { MapLibreMap, MlGeoJsonLayer, useMap } from '@mapcomponents/react-maplibre';
+import { LngLatLike } from 'maplibre-gl';
+import { feature, centroid } from '@turf/turf';
+import { Feature } from '@turf/helpers';
 
 export interface GeospatialShowMapProps extends InputProps<any> {
-  embeddedMap?: boolean;
-  mapId?: string;
+	MapLibreMapProps?: React.ComponentProps<typeof MapLibreMap>;
+	embeddedMap?: boolean;
+	mapId?: string;
 }
 
 function GeospatialShowMap(props: GeospatialShowMapProps) {
-  const source = props.source;
-  const record = useRecordContext();
-  const mapHook = useMap();
+	const source = props.source;
+	const record = useRecordContext();
+	const mapHook = useMap();
 
-  const [geojson, setGeojson] = useState<typeof feature>();
-  useEffect(() => {
-    if (typeof record === "undefined") return;
+	const [geojson, setGeojson] = useState<typeof feature>();
+	useEffect(() => {
+		if (!record?.[source]) return;
 
-    setGeojson({
-      type: "Feature",
-      properties: {},
-      geometry: wellknownParse(record[source]),
-    } as unknown as typeof feature);
-    //console.log(record)
-    //onChange({target:{value:"POINT(7.083199846086359 50.73716918021759)"}});
-  }, [record]);
+		const _geometry = wellknownParse(record[source]);
 
-  useEffect(() => {
-    if (!mapHook.map) return;
+		if (_geometry) {
+			setGeojson({
+				type: 'Feature',
+				properties: {},
+				geometry: _geometry,
+			} as unknown as typeof feature);
+		}
+	}, [record]);
 
-    const _center = centroid(wellknownParse(record[source]) as typeof Feature);
+	useEffect(() => {
+		if (!mapHook.map || !geojson) return;
 
-    if (_center?.geometry?.coordinates) {
-      mapHook.map.setCenter(_center.geometry.coordinates as LngLatLike);
-    }
-  }, [mapHook.map]);
+		const _center = centroid(geojson as typeof Feature);
 
-  return (
-    <>
-      {props.embeddedMap && (
-        <MapLibreMap
-          options={{
-            zoom: 14.5,
-            style:
-              "https://wms.wheregroup.com/tileserver/style/klokantech-basic.json",
-            center: [0, 0],
-          }}
-          style={{ width: "100%", height: "400px" }}
-        />
-      )}
+		if (_center?.geometry?.coordinates) {
+			mapHook.map.setCenter(_center.geometry.coordinates as LngLatLike);
+		}
+	}, [mapHook.map, geojson]);
 
-      {geojson && <MlGeoJsonLayer geojson={geojson}></MlGeoJsonLayer>}
-    </>
-  );
+	return (
+		<>
+			{props.embeddedMap && (
+				<MapLibreMap
+					{...props?.MapLibreMapProps}
+					options={{
+						zoom: 14,
+						style: 'https://wms.wheregroup.com/tileserver/style/klokantech-basic.json',
+						center: [0, 0],
+						...props?.MapLibreMapProps?.options,
+					}}
+					style={{
+						width: '100%',
+						height: '400px',
+						...props?.MapLibreMapProps?.style,
+					}}
+				/>
+			)}
+
+			{geojson && <MlGeoJsonLayer geojson={geojson}></MlGeoJsonLayer>}
+		</>
+	);
 }
 
 export default GeospatialShowMap;

package/src/contexts/DataContext.jsx

@@ -0,0 +1,66 @@
+import React, { useEffect, useState } from 'react';
+import { parse as wellknownParse } from 'wellknown';
+import { feature, featureCollection } from '@turf/helpers';
+import { defaultData } from './dataProvider';
+
+export const DataContext = React.createContext();
+
+export default function DataContextProvider(props) {
+	const [data, setData] = useState({});
+
+	useEffect(() => {
+		refreshData();
+		const _eventHandler = () => {
+			console.log('refreshing data from localStorage');
+			refreshData();
+		};
+		window.addEventListener('storageItemUpdated', _eventHandler);
+		return () => {
+			window.removeEventListener('storageItemUpdated', _eventHandler);
+		};
+	}, []);
+
+	const refreshData = () => {
+		const storageDataTmp = localStorage.getItem('ra-data-local-storage');
+		if (storageDataTmp) {
+			const storageData = JSON.parse(storageDataTmp);
+			const _data = Object.keys(storageData).map((el) => {
+				const features = storageData[el].map((entry) => {
+					return feature(wellknownParse(entry.geom));
+				});
+				return {
+					name: el,
+					featureCollection: features?.[0] ? featureCollection(features) : undefined,
+				};
+			});
+
+			setData(_data);
+		} else {
+			const features = [];
+			let counter = 0;
+			Object.values(defaultData).map((geomArray) => {
+				features.push({
+					name: counter === 0 ? 'pois' : counter === 1 ? 'properties' : 'routes',
+					featureCollection: {
+						type: 'FeatureCollection',
+						features: geomArray.map((geom) => {
+							return {
+								type: 'Feature',
+								properties: {},
+								geometry: wellknownParse(geom.geom),
+							};
+						}),
+					},
+				});
+				counter++;
+			});
+			setData(features);
+		}
+	};
+	const value = {
+		data,
+		refreshData,
+	};
+
+	return <DataContext.Provider value={value}>{props.children}</DataContext.Provider>;
+}