@mapcomponents/ra-geospatial 1.0.2 → 1.0.3

package/dist/index.esm.js

@@ -34,7 +34,7 @@ function __rest(s, e) {
 function GeospatialInputMap(props) {
     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"]);
@@ -61,41 +61,41 @@ function GeospatialInputMap(props) {
         }
     }, [mapHook.map]);
     return (React.createElement(React.Fragment, null,
-        React.createElement(MapLibreMap, { options: {
+        props.embeddedMap && (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" } }),
+            }, style: { width: "100%", height: "400px" } })),
         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,14 +103,18 @@ 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) {
     const source = props.source;
     const record = useRecordContext();
     const mapHook = useMap();
@@ -136,18 +140,21 @@ function GeometryShowMap(props) {
         }
     }, [mapHook.map]);
     return (React.createElement(React.Fragment, null,
-        React.createElement(MapLibreMap, { options: {
+        props.embeddedMap && (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" } }),
+            }, style: { width: "100%", height: "400px" } })),
         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.3",
   "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

@@ -20,12 +20,14 @@ import { Feature } from "@turf/helpers";
 export interface GeospatialInputMapProps extends InputProps<any> {
   MapLibreMapProps?: unknown;
   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,23 @@ 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
+          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,
@@ -88,10 +93,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 +113,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 +140,7 @@ function GeospatialInputMap(props: GeospatialInputMapProps) {
         <>
           {oldGeoJson && (
             <MlGeoJsonLayer
+              mapId={props?.mapId}
               geojson={oldGeoJson as typeof feature}
               paint={{
                 "line-width": 6,
@@ -137,10 +148,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 +170,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/{GeometryShowMap.tsx → GeospatialShowMap.tsx}

@@ -10,7 +10,12 @@ import { LngLatLike } from "maplibre-gl";
 import { feature, centroid } from "@turf/turf";
 import { Feature } from "@turf/helpers";
 
-function GeometryShowMap(props: InputProps<any>) {
+export interface GeospatialShowMapProps extends InputProps<any> {
+  embeddedMap?: boolean;
+  mapId?: string;
+}
+
+function GeospatialShowMap(props: GeospatialShowMapProps) {
   const source = props.source;
   const record = useRecordContext();
   const mapHook = useMap();
@@ -40,19 +45,21 @@ function GeometryShowMap(props: InputProps<any>) {
 
   return (
     <>
-      <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 && (
+        <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;
+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