@mapcomponents/ra-geospatial 1.0.3 → 1.5.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (8) hide show
  1. package/README.md +72 -1
  2. package/assets/ra_geospatial_screenshots.png +0 -0
  3. package/dist/index.esm.js +23 -26
  4. package/dist/index.esm.js.map +1 -1
  5. package/package.json +41 -40
  6. package/src/components/GeospatialInputMap.tsx +23 -19
  7. package/src/components/GeospatialShowMap.tsx +22 -13
  8. package/package-lock.json +0 -16564
package/README.md CHANGED
@@ -1,4 +1,75 @@
1
+ <img src="https://avatars.githubusercontent.com/u/64851912" alt="MapComponents logo" width="80"/>
2
+
1
3
  # @mapcomponents/ra-geospatial
2
4
 
3
- Input and view components to work with geospatial data in react admin.
5
+ [![npm version](https://badge.fury.io/js/@mapcomponents%2Fra-geospatial.svg)](https://badge.fury.io/js/@mapcomponents%2Fra-geospatial) [![License: MIT](https://img.shields.io/badge/License-MIT-blue.svg)](https://opensource.org/licenses/MIT) ![downloads](https://img.shields.io/npm/dt/@mapcomponents%2Fra-geospatial.svg) ![downloads](https://img.shields.io/npm/dm/@mapcomponents%2Fra-geospatial.svg)
6
+
7
+
8
+ Input and view components to work with geospatial data in react admin. This package is based on @mapcomponents/react-maplibre and uses MapLibre-gl to display geospatial data on a map.
9
+
10
+ ![RaGeospatialInput & RaGeospatialShow](https://github.com/mapcomponents/ra-geospatial/blob/main/assets/ra_geospatial_screenshots.png?raw=true)
11
+
12
+ RaGeospatialInput & RaGeospatialShow used to edit a polygon geometry in a react-admin application.
13
+
14
+ ## Demos
15
+
16
+ - [react admin & mapcomponents Demo](https://cioddi.github.io/mc-react-admin-apps/react-admin-demo)
17
+ - [webGIS Demo (embeddedMap: false)](https://cioddi.github.io/mc-react-admin-apps/webgis-demo)
18
+
19
+ ## Installation
20
+
21
+ ```bash
22
+ yarn add @mapcomponents/ra-geospatial
23
+ ```
24
+
25
+ ## Exports
26
+
27
+ ### RaGeospatialInput
28
+
29
+ Input component to edit or create geospatial data.
30
+
31
+ ### RaGeospatialShow
32
+
33
+ Show component to display geospatial data.
34
+
35
+ #### Props
36
+
37
+ - **embeddedMap**: boolean (default: false) - If true, the map will be embedded in the component. If false, the component will not create it's own MapContext and add a MapLibreMap component but instead expect a MapContext and a MapLibreMap component to be present in the parent component.
38
+
39
+ ## Examples
40
+
41
+ ```JSX
42
+ import {
43
+ RaGeospatialInput,
44
+ RaGeospatialShow,
45
+ } from "@mapcomponents/ra-geospatial";
46
+
47
+ export const PoiEdit = () => (
48
+ <Edit>
49
+ <SimpleForm>
50
+ <TextInput source="title" />
51
+ <TextInput source="geom" />
52
+ <RaGeospatialInput source="geom" />
53
+ </SimpleForm>
54
+ </Edit>
55
+ );
56
+ export const PoiCreate = () => (
57
+ <Create>
58
+ <SimpleForm>
59
+ <TextInput source="title" />
60
+ <TextInput source="geom" />
61
+ <RaGeospatialInput source="geom" />
62
+ </SimpleForm>
63
+ </Create>
64
+ );
4
65
 
66
+ export const PoiShow = () => (
67
+ <Show>
68
+ <SimpleShowLayout>
69
+ <TextField source="id" />
70
+ <TextField source="title" />
71
+ <RaGeospatialShow source="geom" />
72
+ </SimpleShowLayout>
73
+ </Show>
74
+ );
75
+ ```
package/dist/index.esm.js CHANGED
@@ -18,6 +18,8 @@ LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
18
18
  OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
19
19
  PERFORMANCE OF THIS SOFTWARE.
20
20
  ***************************************************************************** */
21
+ /* global Reflect, Promise */
22
+
21
23
 
22
24
  function __rest(s, e) {
23
25
  var t = {};
@@ -32,16 +34,17 @@ function __rest(s, e) {
32
34
  }
33
35
 
34
36
  function GeospatialInputMap(props) {
37
+ var _a, _b;
35
38
  const source = props === null || props === void 0 ? void 0 : props.source;
36
39
  const record = useRecordContext();
37
40
  const mapHook = useMap({ mapId: props === null || props === void 0 ? void 0 : props.mapId });
38
41
  const [geojson, setGeojson] = useState();
39
42
  const [oldGeoJson, setOldGeoJson] = useState();
40
- const _a = useInput(props), _b = _a.field, { name, onChange } = _b; __rest(_b, ["name", "onChange"]);
43
+ const _c = useInput(props), _d = _c.field, { name, onChange } = _d; __rest(_d, ["name", "onChange"]);
41
44
  useEffect(() => {
42
45
  if (typeof record === "undefined" || !record[source])
43
46
  return;
44
- let _geoJson = {
47
+ const _geoJson = {
45
48
  type: "Feature",
46
49
  properties: {},
47
50
  geometry: parse(record[source]),
@@ -61,11 +64,7 @@ function GeospatialInputMap(props) {
61
64
  }
62
65
  }, [mapHook.map]);
63
66
  return (React.createElement(React.Fragment, null,
64
- props.embeddedMap && (React.createElement(MapLibreMap, { options: {
65
- zoom: 14.5,
66
- style: "https://wms.wheregroup.com/tileserver/style/klokantech-basic.json",
67
- center: [7.0851268, 50.73884],
68
- }, style: { width: "100%", height: "400px" } })),
67
+ 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) }))),
69
68
  props.type === "point" && (React.createElement(React.Fragment, null,
70
69
  oldGeoJson && (React.createElement(MlGeoJsonLayer, { mapId: props === null || props === void 0 ? void 0 : props.mapId, geojson: oldGeoJson, paint: {
71
70
  "circle-radius": 8,
@@ -74,7 +73,7 @@ function GeospatialInputMap(props) {
74
73
  "circle-stroke-width": 3,
75
74
  "circle-opacity": 0.8,
76
75
  }, type: "circle", insertBeforeLayer: "gl-draw-polygon-fill-inactive.cold" })),
77
- React.createElement(MlFeatureEditor, { mapId: props === null || props === void 0 ? void 0 : props.mapId, geojson: geojson, mode: geojson ? "custom_select" : "draw_point", onChange: (_geojson) => {
76
+ React.createElement(MlFeatureEditor, { mapId: props === null || props === void 0 ? void 0 : props.mapId, geojson: geojson, mode: geojson ? "simple_select" : "draw_point", onChange: (_geojson) => {
78
77
  if (typeof _geojson[0] !== "undefined") {
79
78
  onChange(stringify(_geojson[0]));
80
79
  }
@@ -84,7 +83,7 @@ function GeospatialInputMap(props) {
84
83
  "fill-color": "#6f6f96",
85
84
  "fill-opacity": 0.6,
86
85
  }, type: "fill", insertBeforeLayer: "gl-draw-polygon-fill-inactive.cold" })),
87
- React.createElement(MlFeatureEditor, { mapId: props === null || props === void 0 ? void 0 : props.mapId, geojson: geojson, mode: geojson ? "custom_select" : "draw_polygon", onChange: (_geojson) => {
86
+ React.createElement(MlFeatureEditor, { mapId: props === null || props === void 0 ? void 0 : props.mapId, geojson: geojson, mode: geojson ? "simple_select" : "draw_polygon", onChange: (_geojson) => {
88
87
  if (typeof _geojson[0] !== "undefined") {
89
88
  onChange(stringify(_geojson[0]));
90
89
  }
@@ -95,7 +94,7 @@ function GeospatialInputMap(props) {
95
94
  "line-color": "#6f6f96",
96
95
  "line-opacity": 0.6,
97
96
  }, type: "line", insertBeforeLayer: "gl-draw-polygon-fill-inactive.cold" })),
98
- React.createElement(MlFeatureEditor, { mapId: props === null || props === void 0 ? void 0 : props.mapId, geojson: geojson, mode: geojson ? "custom_select" : "draw_line_string", onChange: (_geojson) => {
97
+ React.createElement(MlFeatureEditor, { mapId: props === null || props === void 0 ? void 0 : props.mapId, geojson: geojson, mode: geojson ? "simple_select" : "draw_line_string", onChange: (_geojson) => {
99
98
  if (typeof _geojson[0] !== "undefined") {
100
99
  onChange(stringify(_geojson[0]));
101
100
  }
@@ -115,36 +114,34 @@ GeospatialInput.defaultProps = {
115
114
  };
116
115
 
117
116
  function GeospatialShowMap(props) {
117
+ var _a, _b;
118
118
  const source = props.source;
119
119
  const record = useRecordContext();
120
120
  const mapHook = useMap();
121
121
  const [geojson, setGeojson] = useState();
122
122
  useEffect(() => {
123
- if (typeof record === "undefined")
123
+ if (!(record === null || record === void 0 ? void 0 : record[source]))
124
124
  return;
125
- setGeojson({
126
- type: "Feature",
127
- properties: {},
128
- geometry: parse(record[source]),
129
- });
130
- //console.log(record)
131
- //onChange({target:{value:"POINT(7.083199846086359 50.73716918021759)"}});
125
+ const _geometry = parse(record[source]);
126
+ if (_geometry) {
127
+ setGeojson({
128
+ type: "Feature",
129
+ properties: {},
130
+ geometry: _geometry,
131
+ });
132
+ }
132
133
  }, [record]);
133
134
  useEffect(() => {
134
135
  var _a;
135
- if (!mapHook.map)
136
+ if (!mapHook.map || !geojson)
136
137
  return;
137
- const _center = centroid(parse(record[source]));
138
+ const _center = centroid(geojson);
138
139
  if ((_a = _center === null || _center === void 0 ? void 0 : _center.geometry) === null || _a === void 0 ? void 0 : _a.coordinates) {
139
140
  mapHook.map.setCenter(_center.geometry.coordinates);
140
141
  }
141
- }, [mapHook.map]);
142
+ }, [mapHook.map, geojson]);
142
143
  return (React.createElement(React.Fragment, null,
143
- props.embeddedMap && (React.createElement(MapLibreMap, { options: {
144
- zoom: 14.5,
145
- style: "https://wms.wheregroup.com/tileserver/style/klokantech-basic.json",
146
- center: [0, 0],
147
- }, style: { width: "100%", height: "400px" } })),
144
+ 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) }))),
148
145
  geojson && React.createElement(MlGeoJsonLayer, { geojson: geojson })));
149
146
  }
150
147
 
package/dist/index.esm.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index.esm.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
1
+ {"version":3,"file":"index.esm.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
package/package.json CHANGED
@@ -1,42 +1,43 @@
1
1
  {
2
- "name": "@mapcomponents/ra-geospatial",
3
- "version": "1.0.3",
4
- "description": "",
5
- "private": false,
6
- "main": "index.js",
7
- "license": "MIT",
8
- "module": "dist/index.esm.js",
9
- "source": "src/index.ts",
10
- "types": "dist/index.d.ts",
11
- "type": "module",
12
- "scripts": {
13
- "build": "rollup -c",
14
- "test": "echo \"Error: no test specified\" && exit 1"
15
- },
16
- "author": "",
17
- "dependencies": {
18
- "@turf/turf": "^6.5.0",
19
- "maplibre-gl": "^2.4.0"
20
- },
21
- "devDependencies": {
22
- "@babel/core": "^7.20.12",
23
- "@mapcomponents/react-maplibre": "^0.1.69",
24
- "@rollup/plugin-alias": "^4.0.3",
25
- "@rollup/plugin-babel": "^6.0.3",
26
- "@rollup/plugin-commonjs": "^24.0.1",
27
- "@rollup/plugin-node-resolve": "^15.0.1",
28
- "@rollup/plugin-url": "^8.0.1",
29
- "@turf/helpers": "^6.5.0",
30
- "@types/wellknown": "^0.5.4",
31
- "react": "^18.2.0",
32
- "react-admin": "^4.7.2",
33
- "rollup": "^3.12.0",
34
- "rollup-plugin-delete": "^2.0.0",
35
- "rollup-plugin-import-css": "^3.1.0",
36
- "rollup-plugin-peer-deps-external": "^2.2.4",
37
- "rollup-plugin-postcss": "^4.0.2",
38
- "rollup-plugin-typescript2": "^0.34.1",
39
- "typescript": "^4.9.5",
40
- "wellknown": "^0.5.0"
41
- }
2
+ "name": "@mapcomponents/ra-geospatial",
3
+ "version": "1.5.3",
4
+ "description": "",
5
+ "private": false,
6
+ "main": "index.js",
7
+ "license": "MIT",
8
+ "module": "dist/index.esm.js",
9
+ "source": "src/index.ts",
10
+ "types": "dist/index.d.ts",
11
+ "type": "module",
12
+ "scripts": {
13
+ "build": "rollup -c",
14
+ "test": "echo \"Error: no test specified\" && exit 1"
15
+ },
16
+ "author": "",
17
+ "dependencies": {
18
+ "@turf/turf": "^6.5.0",
19
+ "maplibre-gl": "^2.4.0"
20
+ },
21
+ "devDependencies": {
22
+ "@babel/core": "^7.20.12",
23
+ "@mapcomponents/react-maplibre": "^0.1.69",
24
+ "@rollup/plugin-alias": "^4.0.3",
25
+ "@rollup/plugin-babel": "^6.0.3",
26
+ "@rollup/plugin-commonjs": "^24.0.1",
27
+ "@rollup/plugin-node-resolve": "^15.0.1",
28
+ "@rollup/plugin-url": "^8.0.1",
29
+ "@turf/helpers": "^6.5.0",
30
+ "@types/wellknown": "^0.5.4",
31
+ "react": "^18.2.0",
32
+ "react-admin": "^4.7.2",
33
+ "rollup": "^3.12.0",
34
+ "rollup-plugin-delete": "^2.0.0",
35
+ "rollup-plugin-import-css": "^3.1.0",
36
+ "rollup-plugin-peer-deps-external": "^2.2.4",
37
+ "rollup-plugin-postcss": "^4.0.2",
38
+ "rollup-plugin-typescript2": "^0.34.1",
39
+ "typescript": "^4.9.5",
40
+ "wellknown": "^0.5.0"
41
+ },
42
+ "gitHead": "8570f4d4c3bd5e74a14d80c456a5d7a2039ee285"
42
43
  }
package/src/components/GeospatialInputMap.tsx CHANGED
@@ -1,24 +1,22 @@
1
- import React, { useContext, useEffect, useRef, useState } from "react";
1
+ import React, { useEffect, useState } from "react";
2
2
  import { InputProps, useInput, useRecordContext } from "react-admin";
3
3
  import {
4
- stringify as wellknownStringify,
5
- parse as wellknownParse,
6
- GeoJSONGeometry,
7
- GeoJSONFeature,
8
- GeoJSONPoint,
4
+ GeoJSONGeometry,
5
+ parse as wellknownParse,
6
+ stringify as wellknownStringify
9
7
  } from "wellknown";
10
8
  import {
11
- useMap,
12
- MapLibreMap,
13
- MlFeatureEditor,
14
- MlGeoJsonLayer,
9
+ MapLibreMap,
10
+ MlFeatureEditor,
11
+ MlGeoJsonLayer,
12
+ useMap
15
13
  } from "@mapcomponents/react-maplibre";
16
14
  import { LngLatLike } from "maplibre-gl";
17
- import { feature, centroid } from "@turf/turf";
15
+ import { centroid, feature } from "@turf/turf";
18
16
  import { Feature } from "@turf/helpers";
19
17
 
20
18
  export interface GeospatialInputMapProps extends InputProps<any> {
21
- MapLibreMapProps?: unknown;
19
+ MapLibreMapProps?: React.ComponentProps<typeof MapLibreMap>;
22
20
  geometrytype?: "point" | "line" | "polygon";
23
21
  embeddedMap?: boolean;
24
22
  mapId?: string;
@@ -41,7 +39,7 @@ function GeospatialInputMap(props: GeospatialInputMapProps) {
41
39
  useEffect(() => {
42
40
  if (typeof record === "undefined" || !record[source]) return;
43
41
 
44
- let _geoJson = {
42
+ const _geoJson = {
45
43
  type: "Feature",
46
44
  properties: {},
47
45
  geometry: wellknownParse(record[source]),
@@ -69,13 +67,19 @@ function GeospatialInputMap(props: GeospatialInputMapProps) {
69
67
  <>
70
68
  {props.embeddedMap && (
71
69
  <MapLibreMap
70
+ {...props?.MapLibreMapProps}
72
71
  options={{
73
- zoom: 14.5,
72
+ zoom: 14,
74
73
  style:
75
74
  "https://wms.wheregroup.com/tileserver/style/klokantech-basic.json",
76
- center: [7.0851268, 50.73884],
75
+ center: [0, 0],
76
+ ...props?.MapLibreMapProps?.options,
77
+ }}
78
+ style={{
79
+ width: "100%",
80
+ height: "400px",
81
+ ...props?.MapLibreMapProps?.style,
77
82
  }}
78
- style={{ width: "100%", height: "400px" }}
79
83
  />
80
84
  )}
81
85
 
@@ -100,7 +104,7 @@ function GeospatialInputMap(props: GeospatialInputMapProps) {
100
104
  <MlFeatureEditor
101
105
  mapId={props?.mapId}
102
106
  geojson={geojson as typeof feature}
103
- mode={geojson ? "custom_select" : "draw_point"}
107
+ mode={geojson ? "simple_select": "draw_point"}
104
108
  onChange={(_geojson) => {
105
109
  if (typeof _geojson[0] !== "undefined") {
106
110
  onChange(wellknownStringify(_geojson[0] as GeoJSONGeometry));
@@ -127,7 +131,7 @@ function GeospatialInputMap(props: GeospatialInputMapProps) {
127
131
  <MlFeatureEditor
128
132
  mapId={props?.mapId}
129
133
  geojson={geojson as typeof feature}
130
- mode={geojson ? "custom_select" : "draw_polygon"}
134
+ mode={geojson ? "simple_select": "draw_polygon"}
131
135
  onChange={(_geojson) => {
132
136
  if (typeof _geojson[0] !== "undefined") {
133
137
  onChange(wellknownStringify(_geojson[0] as GeoJSONGeometry));
@@ -155,7 +159,7 @@ function GeospatialInputMap(props: GeospatialInputMapProps) {
155
159
  <MlFeatureEditor
156
160
  mapId={props?.mapId}
157
161
  geojson={geojson as typeof feature}
158
- mode={geojson ? "custom_select" : "draw_line_string"}
162
+ mode={geojson ? "simple_select": "draw_line_string"}
159
163
  onChange={(_geojson) => {
160
164
  if (typeof _geojson[0] !== "undefined") {
161
165
  onChange(wellknownStringify(_geojson[0] as GeoJSONGeometry));
package/src/components/GeospatialShowMap.tsx CHANGED
@@ -11,6 +11,7 @@ import { feature, centroid } from "@turf/turf";
11
11
  import { Feature } from "@turf/helpers";
12
12
 
13
13
  export interface GeospatialShowMapProps extends InputProps<any> {
14
+ MapLibreMapProps?: React.ComponentProps<typeof MapLibreMap>;
14
15
  embeddedMap?: boolean;
15
16
  mapId?: string;
16
17
  }
@@ -22,38 +23,46 @@ function GeospatialShowMap(props: GeospatialShowMapProps) {
22
23
 
23
24
  const [geojson, setGeojson] = useState<typeof feature>();
24
25
  useEffect(() => {
25
- if (typeof record === "undefined") return;
26
+ if (!record?.[source]) return;
26
27
 
27
- setGeojson({
28
- type: "Feature",
29
- properties: {},
30
- geometry: wellknownParse(record[source]),
31
- } as unknown as typeof feature);
32
- //console.log(record)
33
- //onChange({target:{value:"POINT(7.083199846086359 50.73716918021759)"}});
28
+ const _geometry = wellknownParse(record[source]);
29
+
30
+ if (_geometry) {
31
+ setGeojson({
32
+ type: "Feature",
33
+ properties: {},
34
+ geometry: _geometry,
35
+ } as unknown as typeof feature);
36
+ }
34
37
  }, [record]);
35
38
 
36
39
  useEffect(() => {
37
- if (!mapHook.map) return;
40
+ if (!mapHook.map || !geojson) return;
38
41
 
39
- const _center = centroid(wellknownParse(record[source]) as typeof Feature);
42
+ const _center = centroid(geojson as typeof Feature);
40
43
 
41
44
  if (_center?.geometry?.coordinates) {
42
45
  mapHook.map.setCenter(_center.geometry.coordinates as LngLatLike);
43
46
  }
44
- }, [mapHook.map]);
47
+ }, [mapHook.map, geojson]);
45
48
 
46
49
  return (
47
50
  <>
48
51
  {props.embeddedMap && (
49
52
  <MapLibreMap
53
+ {...props?.MapLibreMapProps}
50
54
  options={{
51
- zoom: 14.5,
55
+ zoom: 14,
52
56
  style:
53
57
  "https://wms.wheregroup.com/tileserver/style/klokantech-basic.json",
54
58
  center: [0, 0],
59
+ ...props?.MapLibreMapProps?.options,
60
+ }}
61
+ style={{
62
+ width: "100%",
63
+ height: "400px",
64
+ ...props?.MapLibreMapProps?.style,
55
65
  }}
56
- style={{ width: "100%", height: "400px" }}
57
66
  />
58
67
  )}
59
68