@mapcomponents/ra-geospatial 1.0.4 → 1.5.0-2

package/src/components/GeospatialInputMap.tsx

@@ -1,182 +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?: React.ComponentProps<typeof MapLibreMap>;
-  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
-          {...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,
-          }}
-        />
-      )}
-
-      {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,74 +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> {
-  MapLibreMapProps?: React.ComponentProps<typeof MapLibreMap>;
-  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 (!record?.[source]) return;
+	const [geojson, setGeojson] = useState<typeof feature>();
+	useEffect(() => {
+		if (!record?.[source]) return;
 
-    const _geometry = wellknownParse(record[source]);
+		const _geometry = wellknownParse(record[source]);
 
-    if (_geometry) {
-      setGeojson({
-        type: "Feature",
-        properties: {},
-        geometry: _geometry,
-      } as unknown as typeof feature);
-    }
-  }, [record]);
+		if (_geometry) {
+			setGeojson({
+				type: 'Feature',
+				properties: {},
+				geometry: _geometry,
+			} as unknown as typeof feature);
+		}
+	}, [record]);
 
-  useEffect(() => {
-    if (!mapHook.map || !geojson) return;
+	useEffect(() => {
+		if (!mapHook.map || !geojson) return;
 
-    const _center = centroid(geojson as typeof Feature);
+		const _center = centroid(geojson as typeof Feature);
 
-    if (_center?.geometry?.coordinates) {
-      mapHook.map.setCenter(_center.geometry.coordinates as LngLatLike);
-    }
-  }, [mapHook.map, geojson]);
+		if (_center?.geometry?.coordinates) {
+			mapHook.map.setCenter(_center.geometry.coordinates as LngLatLike);
+		}
+	}, [mapHook.map, geojson]);
 
-  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,
-          }}
-        />
-      )}
+	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>}
-    </>
-  );
+			{geojson && <MlGeoJsonLayer geojson={geojson}></MlGeoJsonLayer>}
+		</>
+	);
 }
 
 export default GeospatialShowMap;