@mapcomponents/ra-geospatial 1.0.4 → 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 (7) hide show
  1. package/README.md +72 -1
  2. package/assets/ra_geospatial_screenshots.png +0 -0
  3. package/dist/index.esm.js +6 -4
  4. package/dist/index.esm.js.map +1 -1
  5. package/package.json +41 -40
  6. package/src/components/GeospatialInputMap.tsx +13 -15
  7. 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 = {};
@@ -42,7 +44,7 @@ function GeospatialInputMap(props) {
42
44
  useEffect(() => {
43
45
  if (typeof record === "undefined" || !record[source])
44
46
  return;
45
- let _geoJson = {
47
+ const _geoJson = {
46
48
  type: "Feature",
47
49
  properties: {},
48
50
  geometry: parse(record[source]),
@@ -71,7 +73,7 @@ function GeospatialInputMap(props) {
71
73
  "circle-stroke-width": 3,
72
74
  "circle-opacity": 0.8,
73
75
  }, type: "circle", insertBeforeLayer: "gl-draw-polygon-fill-inactive.cold" })),
74
- 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) => {
75
77
  if (typeof _geojson[0] !== "undefined") {
76
78
  onChange(stringify(_geojson[0]));
77
79
  }
@@ -81,7 +83,7 @@ function GeospatialInputMap(props) {
81
83
  "fill-color": "#6f6f96",
82
84
  "fill-opacity": 0.6,
83
85
  }, type: "fill", insertBeforeLayer: "gl-draw-polygon-fill-inactive.cold" })),
84
- 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) => {
85
87
  if (typeof _geojson[0] !== "undefined") {
86
88
  onChange(stringify(_geojson[0]));
87
89
  }
@@ -92,7 +94,7 @@ function GeospatialInputMap(props) {
92
94
  "line-color": "#6f6f96",
93
95
  "line-opacity": 0.6,
94
96
  }, type: "line", insertBeforeLayer: "gl-draw-polygon-fill-inactive.cold" })),
95
- 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) => {
96
98
  if (typeof _geojson[0] !== "undefined") {
97
99
  onChange(stringify(_geojson[0]));
98
100
  }
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.4",
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,20 +1,18 @@
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> {
@@ -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]),
@@ -106,7 +104,7 @@ function GeospatialInputMap(props: GeospatialInputMapProps) {
106
104
  <MlFeatureEditor
107
105
  mapId={props?.mapId}
108
106
  geojson={geojson as typeof feature}
109
- mode={geojson ? "custom_select" : "draw_point"}
107
+ mode={geojson ? "simple_select": "draw_point"}
110
108
  onChange={(_geojson) => {
111
109
  if (typeof _geojson[0] !== "undefined") {
112
110
  onChange(wellknownStringify(_geojson[0] as GeoJSONGeometry));
@@ -133,7 +131,7 @@ function GeospatialInputMap(props: GeospatialInputMapProps) {
133
131
  <MlFeatureEditor
134
132
  mapId={props?.mapId}
135
133
  geojson={geojson as typeof feature}
136
- mode={geojson ? "custom_select" : "draw_polygon"}
134
+ mode={geojson ? "simple_select": "draw_polygon"}
137
135
  onChange={(_geojson) => {
138
136
  if (typeof _geojson[0] !== "undefined") {
139
137
  onChange(wellknownStringify(_geojson[0] as GeoJSONGeometry));
@@ -161,7 +159,7 @@ function GeospatialInputMap(props: GeospatialInputMapProps) {
161
159
  <MlFeatureEditor
162
160
  mapId={props?.mapId}
163
161
  geojson={geojson as typeof feature}
164
- mode={geojson ? "custom_select" : "draw_line_string"}
162
+ mode={geojson ? "simple_select": "draw_line_string"}
165
163
  onChange={(_geojson) => {
166
164
  if (typeof _geojson[0] !== "undefined") {
167
165
  onChange(wellknownStringify(_geojson[0] as GeoJSONGeometry));