@mapcomponents/ra-geospatial 1.0.3 → 1.0.4

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 (5) hide show
  1. package/dist/index.esm.js +17 -22
  2. package/dist/index.esm.js.map +1 -1
  3. package/package.json +1 -1
  4. package/src/components/GeospatialInputMap.tsx +10 -4
  5. package/src/components/GeospatialShowMap.tsx +22 -13
package/dist/index.esm.js CHANGED
@@ -32,12 +32,13 @@ function __rest(s, e) {
32
32
  }
33
33
 
34
34
  function GeospatialInputMap(props) {
35
+ var _a, _b;
35
36
  const source = props === null || props === void 0 ? void 0 : props.source;
36
37
  const record = useRecordContext();
37
38
  const mapHook = useMap({ mapId: props === null || props === void 0 ? void 0 : props.mapId });
38
39
  const [geojson, setGeojson] = useState();
39
40
  const [oldGeoJson, setOldGeoJson] = useState();
40
- const _a = useInput(props), _b = _a.field, { name, onChange } = _b; __rest(_b, ["name", "onChange"]);
41
+ const _c = useInput(props), _d = _c.field, { name, onChange } = _d; __rest(_d, ["name", "onChange"]);
41
42
  useEffect(() => {
42
43
  if (typeof record === "undefined" || !record[source])
43
44
  return;
@@ -61,11 +62,7 @@ function GeospatialInputMap(props) {
61
62
  }
62
63
  }, [mapHook.map]);
63
64
  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" } })),
65
+ 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
66
  props.type === "point" && (React.createElement(React.Fragment, null,
70
67
  oldGeoJson && (React.createElement(MlGeoJsonLayer, { mapId: props === null || props === void 0 ? void 0 : props.mapId, geojson: oldGeoJson, paint: {
71
68
  "circle-radius": 8,
@@ -115,36 +112,34 @@ GeospatialInput.defaultProps = {
115
112
  };
116
113
 
117
114
  function GeospatialShowMap(props) {
115
+ var _a, _b;
118
116
  const source = props.source;
119
117
  const record = useRecordContext();
120
118
  const mapHook = useMap();
121
119
  const [geojson, setGeojson] = useState();
122
120
  useEffect(() => {
123
- if (typeof record === "undefined")
121
+ if (!(record === null || record === void 0 ? void 0 : record[source]))
124
122
  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)"}});
123
+ const _geometry = parse(record[source]);
124
+ if (_geometry) {
125
+ setGeojson({
126
+ type: "Feature",
127
+ properties: {},
128
+ geometry: _geometry,
129
+ });
130
+ }
132
131
  }, [record]);
133
132
  useEffect(() => {
134
133
  var _a;
135
- if (!mapHook.map)
134
+ if (!mapHook.map || !geojson)
136
135
  return;
137
- const _center = centroid(parse(record[source]));
136
+ const _center = centroid(geojson);
138
137
  if ((_a = _center === null || _center === void 0 ? void 0 : _center.geometry) === null || _a === void 0 ? void 0 : _a.coordinates) {
139
138
  mapHook.map.setCenter(_center.geometry.coordinates);
140
139
  }
141
- }, [mapHook.map]);
140
+ }, [mapHook.map, geojson]);
142
141
  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" } })),
142
+ 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
143
  geojson && React.createElement(MlGeoJsonLayer, { geojson: geojson })));
149
144
  }
150
145
 
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,6 +1,6 @@
1
1
  {
2
2
  "name": "@mapcomponents/ra-geospatial",
3
- "version": "1.0.3",
3
+ "version": "1.0.4",
4
4
  "description": "",
5
5
  "private": false,
6
6
  "main": "index.js",
package/src/components/GeospatialInputMap.tsx CHANGED
@@ -18,7 +18,7 @@ import { feature, centroid } from "@turf/turf";
18
18
  import { Feature } from "@turf/helpers";
19
19
 
20
20
  export interface GeospatialInputMapProps extends InputProps<any> {
21
- MapLibreMapProps?: unknown;
21
+ MapLibreMapProps?: React.ComponentProps<typeof MapLibreMap>;
22
22
  geometrytype?: "point" | "line" | "polygon";
23
23
  embeddedMap?: boolean;
24
24
  mapId?: string;
@@ -69,13 +69,19 @@ function GeospatialInputMap(props: GeospatialInputMapProps) {
69
69
  <>
70
70
  {props.embeddedMap && (
71
71
  <MapLibreMap
72
+ {...props?.MapLibreMapProps}
72
73
  options={{
73
- zoom: 14.5,
74
+ zoom: 14,
74
75
  style:
75
76
  "https://wms.wheregroup.com/tileserver/style/klokantech-basic.json",
76
- center: [7.0851268, 50.73884],
77
+ center: [0, 0],
78
+ ...props?.MapLibreMapProps?.options,
79
+ }}
80
+ style={{
81
+ width: "100%",
82
+ height: "400px",
83
+ ...props?.MapLibreMapProps?.style,
77
84
  }}
78
- style={{ width: "100%", height: "400px" }}
79
85
  />
80
86
  )}
81
87
 
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