@mapcomponents/ra-geospatial 1.0.2 → 1.0.4

package/dist/index.esm.js

@@ -32,12 +32,13 @@ function __rest(s, e) {
 }
 
 function GeospatialInputMap(props) {
+    var _a, _b;
     const source = props === null || props === void 0 ? void 0 : props.source;
     const record = useRecordContext();
-    const mapHook = useMap();
+    const mapHook = useMap({ mapId: props === null || props === void 0 ? void 0 : props.mapId });
     const [geojson, setGeojson] = useState();
     const [oldGeoJson, setOldGeoJson] = useState();
-    const _a = useInput(props), _b = _a.field, { name, onChange } = _b; __rest(_b, ["name", "onChange"]);
+    const _c = useInput(props), _d = _c.field, { name, onChange } = _d; __rest(_d, ["name", "onChange"]);
     useEffect(() => {
         if (typeof record === "undefined" || !record[source])
             return;
@@ -61,41 +62,37 @@ function GeospatialInputMap(props) {
         }
     }, [mapHook.map]);
     return (React.createElement(React.Fragment, null,
-        React.createElement(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.embeddedMap && (React.createElement(MapLibreMap, Object.assign({}, props === null || props === void 0 ? void 0 : props.MapLibreMapProps, { options: Object.assign({ zoom: 14, style: "https://wms.wheregroup.com/tileserver/style/klokantech-basic.json", center: [0, 0] }, (_a = props === null || props === void 0 ? void 0 : props.MapLibreMapProps) === null || _a === void 0 ? void 0 : _a.options), style: Object.assign({ width: "100%", height: "400px" }, (_b = props === null || props === void 0 ? void 0 : props.MapLibreMapProps) === null || _b === void 0 ? void 0 : _b.style) }))),
         props.type === "point" && (React.createElement(React.Fragment, null,
-            oldGeoJson && (React.createElement(MlGeoJsonLayer, { geojson: oldGeoJson, paint: {
+            oldGeoJson && (React.createElement(MlGeoJsonLayer, { mapId: props === null || props === void 0 ? void 0 : props.mapId, geojson: oldGeoJson, paint: {
                     "circle-radius": 8,
                     "circle-color": "#6f6f96",
                     "circle-stroke-color": "white",
                     "circle-stroke-width": 3,
                     "circle-opacity": 0.8,
-                }, type: "circle" })),
-            React.createElement(MlFeatureEditor, { geojson: geojson, mode: geojson ? "custom_select" : "draw_point", onChange: (_geojson) => {
+                }, type: "circle", insertBeforeLayer: "gl-draw-polygon-fill-inactive.cold" })),
+            React.createElement(MlFeatureEditor, { mapId: props === null || props === void 0 ? void 0 : props.mapId, geojson: geojson, mode: geojson ? "custom_select" : "draw_point", onChange: (_geojson) => {
                     if (typeof _geojson[0] !== "undefined") {
                         onChange(stringify(_geojson[0]));
                     }
                 } }))),
         props.type === "polygon" && (React.createElement(React.Fragment, null,
-            oldGeoJson && (React.createElement(MlGeoJsonLayer, { geojson: oldGeoJson, paint: {
+            oldGeoJson && (React.createElement(MlGeoJsonLayer, { mapId: props === null || props === void 0 ? void 0 : props.mapId, geojson: oldGeoJson, paint: {
                     "fill-color": "#6f6f96",
                     "fill-opacity": 0.6,
-                }, type: "fill" })),
-            React.createElement(MlFeatureEditor, { geojson: geojson, mode: geojson ? "custom_select" : "draw_polygon", onChange: (_geojson) => {
+                }, type: "fill", insertBeforeLayer: "gl-draw-polygon-fill-inactive.cold" })),
+            React.createElement(MlFeatureEditor, { mapId: props === null || props === void 0 ? void 0 : props.mapId, geojson: geojson, mode: geojson ? "custom_select" : "draw_polygon", onChange: (_geojson) => {
                     if (typeof _geojson[0] !== "undefined") {
                         onChange(stringify(_geojson[0]));
                     }
                 } }))),
         props.type === "line" && (React.createElement(React.Fragment, null,
-            oldGeoJson && (React.createElement(MlGeoJsonLayer, { geojson: oldGeoJson, paint: {
+            oldGeoJson && (React.createElement(MlGeoJsonLayer, { mapId: props === null || props === void 0 ? void 0 : props.mapId, geojson: oldGeoJson, paint: {
                     "line-width": 6,
                     "line-color": "#6f6f96",
                     "line-opacity": 0.6,
-                }, type: "line" })),
-            React.createElement(MlFeatureEditor, { geojson: geojson, mode: geojson ? "custom_select" : "draw_line_string", onChange: (_geojson) => {
+                }, type: "line", insertBeforeLayer: "gl-draw-polygon-fill-inactive.cold" })),
+            React.createElement(MlFeatureEditor, { mapId: props === null || props === void 0 ? void 0 : props.mapId, geojson: geojson, mode: geojson ? "custom_select" : "draw_line_string", onChange: (_geojson) => {
                     if (typeof _geojson[0] !== "undefined") {
                         onChange(stringify(_geojson[0]));
                     }
@@ -103,51 +100,56 @@ function GeospatialInputMap(props) {
 }
 GeospatialInputMap.defaultProps = {
     type: "point",
+    embeddedMap: true,
 };
 
 function GeospatialInput(props) {
-    return (React.createElement(MapComponentsProvider, null,
-        React.createElement(GeospatialInputMap, Object.assign({}, props))));
-}
+    return (React.createElement(React.Fragment, null, props.embeddedMap ? (React.createElement(MapComponentsProvider, null,
+        React.createElement(GeospatialInputMap, Object.assign({}, props)))) : (React.createElement(GeospatialInputMap, Object.assign({}, props)))));
+}
+GeospatialInput.defaultProps = {
+    embeddedMap: true,
+};
 
-function GeometryShowMap(props) {
+function GeospatialShowMap(props) {
+    var _a, _b;
     const source = props.source;
     const record = useRecordContext();
     const mapHook = useMap();
     const [geojson, setGeojson] = useState();
     useEffect(() => {
-        if (typeof record === "undefined")
+        if (!(record === null || record === void 0 ? void 0 : record[source]))
             return;
-        setGeojson({
-            type: "Feature",
-            properties: {},
-            geometry: parse(record[source]),
-        });
-        //console.log(record)
-        //onChange({target:{value:"POINT(7.083199846086359 50.73716918021759)"}});
+        const _geometry = parse(record[source]);
+        if (_geometry) {
+            setGeojson({
+                type: "Feature",
+                properties: {},
+                geometry: _geometry,
+            });
+        }
     }, [record]);
     useEffect(() => {
         var _a;
-        if (!mapHook.map)
+        if (!mapHook.map || !geojson)
             return;
-        const _center = centroid(parse(record[source]));
+        const _center = centroid(geojson);
         if ((_a = _center === null || _center === void 0 ? void 0 : _center.geometry) === null || _a === void 0 ? void 0 : _a.coordinates) {
             mapHook.map.setCenter(_center.geometry.coordinates);
         }
-    }, [mapHook.map]);
+    }, [mapHook.map, geojson]);
     return (React.createElement(React.Fragment, null,
-        React.createElement(MapLibreMap, { options: {
-                zoom: 14.5,
-                style: "https://wms.wheregroup.com/tileserver/style/klokantech-basic.json",
-                center: [0, 0],
-            }, style: { width: "100%", height: "400px" } }),
+        props.embeddedMap && (React.createElement(MapLibreMap, Object.assign({}, props === null || props === void 0 ? void 0 : props.MapLibreMapProps, { options: Object.assign({ zoom: 14, style: "https://wms.wheregroup.com/tileserver/style/klokantech-basic.json", center: [0, 0] }, (_a = props === null || props === void 0 ? void 0 : props.MapLibreMapProps) === null || _a === void 0 ? void 0 : _a.options), style: Object.assign({ width: "100%", height: "400px" }, (_b = props === null || props === void 0 ? void 0 : props.MapLibreMapProps) === null || _b === void 0 ? void 0 : _b.style) }))),
         geojson && React.createElement(MlGeoJsonLayer, { geojson: geojson })));
 }
 
-function GeometryShow(props) {
-    return (React.createElement(MapComponentsProvider, null,
-        React.createElement(GeometryShowMap, Object.assign({}, props))));
-}
+function GeospatialShow(props) {
+    return (React.createElement(React.Fragment, null, props.embeddedMap ? (React.createElement(MapComponentsProvider, null,
+        React.createElement(GeospatialShowMap, Object.assign({}, props)))) : (React.createElement(GeospatialShowMap, Object.assign({}, props)))));
+}
+GeospatialShow.defaultProps = {
+    embeddedMap: true,
+};
 
-export { GeospatialInput as RaGeospatialInput, GeometryShow as RaGeospatialShow };
+export { GeospatialInput as RaGeospatialInput, GeospatialShow as RaGeospatialShow };
 //# sourceMappingURL=index.esm.js.map

package/dist/index.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.esm.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.esm.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mapcomponents/ra-geospatial",
-  "version": "1.0.2",
+  "version": "1.0.4",
   "description": "",
   "private": false,
   "main": "index.js",

package/src/components/GeospatialInput.tsx

@@ -3,14 +3,22 @@ import { MapComponentsProvider } from "@mapcomponents/react-maplibre";
 import GeometryInputMap, {
   GeospatialInputMapProps,
 } from "./GeospatialInputMap.js";
-import { InputProps } from "react-admin";
 
 function GeospatialInput(props: GeospatialInputMapProps) {
   return (
-    <MapComponentsProvider>
-      <GeometryInputMap {...props} />
-    </MapComponentsProvider>
+    <>
+      {props.embeddedMap ? (
+        <MapComponentsProvider>
+          <GeometryInputMap {...props} />
+        </MapComponentsProvider>
+      ) : (
+        <GeometryInputMap {...props} />
+      )}
+    </>
   );
 }
+GeospatialInput.defaultProps = {
+  embeddedMap: true,
+};
 
 export default GeospatialInput;

package/src/components/GeospatialInputMap.tsx

@@ -18,14 +18,16 @@ import { feature, centroid } from "@turf/turf";
 import { Feature } from "@turf/helpers";
 
 export interface GeospatialInputMapProps extends InputProps<any> {
-  MapLibreMapProps?: unknown;
+  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();
+  const mapHook = useMap({mapId:props?.mapId});
 
   const [geojson, setGeojson] = useState<typeof feature>();
   const [oldGeoJson, setOldGeoJson] = useState<typeof feature>();
@@ -65,20 +67,29 @@ function GeospatialInputMap(props: GeospatialInputMapProps) {
 
   return (
     <>
-      <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.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,
@@ -88,10 +99,12 @@ function GeospatialInputMap(props: GeospatialInputMapProps) {
                 "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) => {
@@ -106,16 +119,19 @@ function GeospatialInputMap(props: GeospatialInputMapProps) {
         <>
           {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) => {
@@ -130,6 +146,7 @@ function GeospatialInputMap(props: GeospatialInputMapProps) {
         <>
           {oldGeoJson && (
             <MlGeoJsonLayer
+              mapId={props?.mapId}
               geojson={oldGeoJson as typeof feature}
               paint={{
                 "line-width": 6,
@@ -137,10 +154,12 @@ function GeospatialInputMap(props: GeospatialInputMapProps) {
                 "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) => {
@@ -157,6 +176,7 @@ function GeospatialInputMap(props: GeospatialInputMapProps) {
 
 GeospatialInputMap.defaultProps = {
   type: "point",
+  embeddedMap: true,
 };
 
 export default GeospatialInputMap;

package/src/components/GeospatialShow.tsx

@@ -0,0 +1,24 @@
+import React from "react";
+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} />
+      )}
+    </>
+  );
+}
+GeospatialShow.defaultProps = {
+  embeddedMap: true,
+};
+
+export default GeospatialShow;

package/src/components/GeospatialShowMap.tsx

@@ -0,0 +1,74 @@
+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";
+
+export interface GeospatialShowMapProps extends InputProps<any> {
+  MapLibreMapProps?: React.ComponentProps<typeof MapLibreMap>;
+  embeddedMap?: boolean;
+  mapId?: string;
+}
+
+function GeospatialShowMap(props: GeospatialShowMapProps) {
+  const source = props.source;
+  const record = useRecordContext();
+  const mapHook = useMap();
+
+  const [geojson, setGeojson] = useState<typeof feature>();
+  useEffect(() => {
+    if (!record?.[source]) return;
+
+    const _geometry = wellknownParse(record[source]);
+
+    if (_geometry) {
+      setGeojson({
+        type: "Feature",
+        properties: {},
+        geometry: _geometry,
+      } as unknown as typeof feature);
+    }
+  }, [record]);
+
+  useEffect(() => {
+    if (!mapHook.map || !geojson) return;
+
+    const _center = centroid(geojson as typeof Feature);
+
+    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,
+          }}
+        />
+      )}
+
+      {geojson && <MlGeoJsonLayer geojson={geojson}></MlGeoJsonLayer>}
+    </>
+  );
+}
+
+export default GeospatialShowMap;

package/src/index.ts

@@ -1,2 +1,2 @@
 export {default as RaGeospatialInput} from "./components/GeospatialInput.js";
-export {default as RaGeospatialShow} from "./components/GeometryShow.js";
+export {default as RaGeospatialShow} from "./components/GeospatialShow.js";

package/src/components/GeometryShow.tsx

@@ -1,14 +0,0 @@
-import React from "react"
-import {MapComponentsProvider} from "@mapcomponents/react-maplibre";
-import GeometryShowMap from "./GeometryShowMap.js";
-import { InputProps } from "react-admin";
-
-function GeometryShow(props:InputProps<any>) {
-    return (
-        <MapComponentsProvider>
-            <GeometryShowMap {...props} />
-        </MapComponentsProvider>
-    )
-}
-
-export default GeometryShow

package/src/components/GeometryShowMap.tsx

@@ -1,58 +0,0 @@
-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";
-
-function GeometryShowMap(props: InputProps<any>) {
-  const source = props.source;
-  const record = useRecordContext();
-  const mapHook = useMap();
-
-  const [geojson, setGeojson] = useState<typeof feature>();
-  useEffect(() => {
-    if (typeof record === "undefined") 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]);
-
-  useEffect(() => {
-    if (!mapHook.map) return;
-
-    const _center = centroid(wellknownParse(record[source]) as typeof Feature);
-
-    if (_center?.geometry?.coordinates) {
-      mapHook.map.setCenter(_center.geometry.coordinates as LngLatLike);
-    }
-  }, [mapHook.map]);
-
-  return (
-    <>
-      <MapLibreMap
-        options={{
-          zoom: 14.5,
-          style:
-            "https://wms.wheregroup.com/tileserver/style/klokantech-basic.json",
-          center: [0, 0],
-        }}
-        style={{ width: "100%", height: "400px" }}
-      />
-
-      {geojson && <MlGeoJsonLayer geojson={geojson}></MlGeoJsonLayer>}
-    </>
-  );
-}
-
-export default GeometryShowMap;