@mapcomponents/ra-geospatial 1.0.1 → 1.0.3

package/dist/index.esm.js

@@ -0,0 +1,160 @@
+import React, { useState, useEffect } from 'react';
+import { useMap, MapLibreMap, MlGeoJsonLayer, MlFeatureEditor, MapComponentsProvider } from '@mapcomponents/react-maplibre';
+import { useRecordContext, useInput } from 'react-admin';
+import { parse, stringify } from 'wellknown';
+import { centroid } from '@turf/turf';
+
+/******************************************************************************
+Copyright (c) Microsoft Corporation.
+
+Permission to use, copy, modify, and/or distribute this software for any
+purpose with or without fee is hereby granted.
+
+THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
+REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
+AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
+INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
+LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
+OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
+PERFORMANCE OF THIS SOFTWARE.
+***************************************************************************** */
+
+function __rest(s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+}
+
+function GeospatialInputMap(props) {
+    const source = props === null || props === void 0 ? void 0 : props.source;
+    const record = useRecordContext();
+    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"]);
+    useEffect(() => {
+        if (typeof record === "undefined" || !record[source])
+            return;
+        let _geoJson = {
+            type: "Feature",
+            properties: {},
+            geometry: parse(record[source]),
+        };
+        setGeojson(_geoJson);
+        setOldGeoJson(_geoJson);
+    }, [record, props.source]);
+    useEffect(() => {
+        var _a;
+        if (!mapHook.map)
+            return;
+        if (typeof record !== "undefined" && record[source]) {
+            const _center = centroid(parse(record[source]));
+            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]);
+    return (React.createElement(React.Fragment, null,
+        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" } })),
+        props.type === "point" && (React.createElement(React.Fragment, null,
+            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", 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, { mapId: props === null || props === void 0 ? void 0 : props.mapId, geojson: oldGeoJson, paint: {
+                    "fill-color": "#6f6f96",
+                    "fill-opacity": 0.6,
+                }, 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, { 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", 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]));
+                    }
+                } })))));
+}
+GeospatialInputMap.defaultProps = {
+    type: "point",
+    embeddedMap: true,
+};
+
+function GeospatialInput(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 GeospatialShowMap(props) {
+    const source = props.source;
+    const record = useRecordContext();
+    const mapHook = useMap();
+    const [geojson, setGeojson] = useState();
+    useEffect(() => {
+        if (typeof record === "undefined")
+            return;
+        setGeojson({
+            type: "Feature",
+            properties: {},
+            geometry: parse(record[source]),
+        });
+        //console.log(record)
+        //onChange({target:{value:"POINT(7.083199846086359 50.73716918021759)"}});
+    }, [record]);
+    useEffect(() => {
+        var _a;
+        if (!mapHook.map)
+            return;
+        const _center = centroid(parse(record[source]));
+        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]);
+    return (React.createElement(React.Fragment, null,
+        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" } })),
+        geojson && React.createElement(MlGeoJsonLayer, { geojson: geojson })));
+}
+
+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, GeospatialShow as RaGeospatialShow };
+//# sourceMappingURL=index.esm.js.map

package/dist/index.esm.js.map

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mapcomponents/ra-geospatial",
-  "version": "1.0.1",
+  "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