@performant-software/geospatial 1.1.0-beta.0 → 1.1.0-beta.2
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.
- package/build/index.js +1 -1
- package/build/index.js.map +1 -1
- package/package.json +1 -1
- package/src/components/MapDraw.js +34 -4
- package/types/components/MapDraw.js.flow +34 -4
package/build/index.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
(()=>{"use strict";var e={n:
|
|
1
|
+
(()=>{"use strict";var e={n:t=>{var r=t&&t.__esModule?()=>t.default:()=>t;return e.d(r,{a:r}),r},d:(t,r)=>{for(var n in r)e.o(r,n)&&!e.o(t,n)&&Object.defineProperty(t,n,{enumerable:!0,get:r[n]})},o:(e,t)=>Object.prototype.hasOwnProperty.call(e,t),r:e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})}},t={};e.r(t),e.d(t,{DrawControl:()=>l,MapDraw:()=>g});const r=require("@mapbox/mapbox-gl-draw");var n=e.n(r);const o=require("react");var a=e.n(o);const u=require("react-map-gl");var i=e.n(u);const l=(0,o.forwardRef)((function(e,t){var r=(0,u.useControl)((function(){return new(n())(e)}),(function(t){var r=t.map;r.on("draw.create",e.onCreate),r.on("draw.update",e.onUpdate),r.on("draw.delete",e.onDelete)}),(function(t){var r=t.map;r.off("draw.create",e.onCreate),r.off("draw.update",e.onUpdate),r.off("draw.delete",e.onDelete)}),{position:e.position});return(0,o.useImperativeHandle)(t,(function(){return r}),[r]),null})),c=require("@turf/turf"),f=require("maplibre-gl");var d=e.n(f);const s=require("underscore");var p=e.n(s);function y(e,t){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);t&&(n=n.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),r.push.apply(r,n)}return r}function b(e,t,r){return t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}function m(e,t){return function(e){if(Array.isArray(e))return e}(e)||function(e,t){var r=null==e?null:"undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(null!=r){var n,o,a=[],u=!0,i=!1;try{for(r=r.call(e);!(u=(n=r.next()).done)&&(a.push(n.value),!t||a.length!==t);u=!0);}catch(e){i=!0,o=e}finally{try{u||null==r.return||r.return()}finally{if(i)throw o}}return a}}(e,t)||function(e,t){if(e){if("string"==typeof e)return v(e,t);var r=Object.prototype.toString.call(e).slice(8,-1);return"Object"===r&&e.constructor&&(r=e.constructor.name),"Map"===r||"Set"===r?Array.from(e):"Arguments"===r||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(r)?v(e,t):void 0}}(e,t)||function(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function v(e,t){(null==t||t>e.length)&&(t=e.length);for(var r=0,n=new Array(t);r<t;r++)n[r]=e[r];return n}const g=function(e){var t=m((0,o.useState)(!1),2),r=t[0],n=t[1],u=(0,o.useRef)(),f=(0,o.useRef)(),s=(0,o.useCallback)((function(){e.onChange(u.current.getAll())}),[e.onChange]),v=(0,o.useMemo)((function(){return function(e){for(var t=1;t<arguments.length;t++){var r=null!=arguments[t]?arguments[t]:{};t%2?y(Object(r),!0).forEach((function(t){b(e,t,r[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(r)):y(Object(r)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(r,t))}))}return e}({height:500,width:"100%"},e.style||{})}),[e.style]);return(0,o.useEffect)((function(){if(r&&e.data){var t=(0,c.bbox)(e.data);if(p().every(t,p().isFinite)){var n=m(t,4),o=[[n[0],n[1]],[n[2],n[3]]];f.current.fitBounds(o,{padding:40,duration:1e3})}"GeometryCollection"===e.data.type?p().each(e.data.geometries,(function(e){u.current.add((0,c.feature)(e))})):u.current.add(e.data)}}),[r,e.data]),a().createElement(i(),{attributionControl:!1,onLoad:function(){return n(!0)},mapLib:d(),ref:f,style:v,mapStyle:e.mapStyle},a().createElement(l,{ref:u,controls:{line_string:!0,point:!0,polygon:!0,trash:!0},displayControlsDefault:!1,onCreate:s,onUpdate:s,onDelete:s}))};module.exports=t})();
|
|
2
2
|
//# sourceMappingURL=index.js.map
|
package/build/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","mappings":"mBACA,IAAIA,EAAsB,CCA1BA,EAAyBC,IACxB,IAAIC,EAASD,GAAUA,EAAOE,WAC7B,IAAOF,EAAiB,QACxB,IAAM,EAEP,OADAD,EAAoBI,EAAEF,EAAQ,CAAEG,EAAGH,IAC5BA,CAAM,ECLdF,EAAwB,CAACM,EAASC,KACjC,IAAI,IAAIC,KAAOD,EACXP,EAAoBS,EAAEF,EAAYC,KAASR,EAAoBS,EAAEH,EAASE,IAC5EE,OAAOC,eAAeL,EAASE,EAAK,CAAEI,YAAY,EAAMC,IAAKN,EAAWC,IAE1E,ECNDR,EAAwB,CAACc,EAAKC,IAAUL,OAAOM,UAAUC,eAAeC,KAAKJ,EAAKC,GCClFf,EAAyBM,IACH,oBAAXa,QAA0BA,OAAOC,aAC1CV,OAAOC,eAAeL,EAASa,OAAOC,YAAa,CAAEC,MAAO,WAE7DX,OAAOC,eAAeL,EAAS,aAAc,CAAEe,OAAO,GAAO,G,qDCL9D,MAAM,EAA+BC,QAAQ,0B,aCA7C,MAAM,EAA+BA,QAAQ,S,aCA7C,MAAM,EAA+BA,QAAQ,gB,aC0C7C,SA7BoBC,EAAAA,EAAAA,aAAW,SAACC,EAAcC,GAI5C,IAAMC,GAAUC,EAAAA,EAAAA,aACd,kBAAM,IAAIC,IAAJ,CAAeJ,EAAM,IAC3B,YAA8B,IAA3BK,EAAG,EAAHA,IACDA,EAAIC,GAAG,cAAeN,EAAMO,UAC5BF,EAAIC,GAAG,cAAeN,EAAMQ,UAC5BH,EAAIC,GAAG,cAAeN,EAAMS,SAC9B,IACA,YAA8B,IAA3BJ,EAAG,EAAHA,IACDA,EAAIK,IAAI,cAAeV,EAAMO,UAC7BF,EAAIK,IAAI,cAAeV,EAAMQ,UAC7BH,EAAIK,IAAI,cAAeV,EAAMS,SAC/B,GACA,CACEE,SAAUX,EAAMW,WASpB,OAFAC,EAAAA,EAAAA,qBAAoBX,GAAK,kBAAMC,CAAO,GAAE,CAACA,IAElC,IACT,ICxCM,EAA+BJ,QAAQ,cCAvC,EAA+BA,QAAQ,e,aCA7C,MAAM,EAA+BA,QAAQ,c,
|
|
1
|
+
{"version":3,"file":"index.js","mappings":"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","sources":["webpack://@performant-software/geospatial/webpack/bootstrap","webpack://@performant-software/geospatial/webpack/runtime/compat get default export","webpack://@performant-software/geospatial/webpack/runtime/define property getters","webpack://@performant-software/geospatial/webpack/runtime/hasOwnProperty shorthand","webpack://@performant-software/geospatial/webpack/runtime/make namespace object","webpack://@performant-software/geospatial/external commonjs \"@mapbox/mapbox-gl-draw\"","webpack://@performant-software/geospatial/external commonjs2 \"react\"","webpack://@performant-software/geospatial/external commonjs \"react-map-gl\"","webpack://@performant-software/geospatial/./src/components/DrawControl.js","webpack://@performant-software/geospatial/external commonjs \"@turf/turf\"","webpack://@performant-software/geospatial/external commonjs \"maplibre-gl\"","webpack://@performant-software/geospatial/external commonjs \"underscore\"","webpack://@performant-software/geospatial/./src/components/MapDraw.js"],"sourcesContent":["// The require scope\nvar __webpack_require__ = {};\n\n","// getDefaultExport function for compatibility with non-harmony modules\n__webpack_require__.n = (module) => {\n\tvar getter = module && module.__esModule ?\n\t\t() => (module['default']) :\n\t\t() => (module);\n\t__webpack_require__.d(getter, { a: getter });\n\treturn getter;\n};","// define getter functions for harmony exports\n__webpack_require__.d = (exports, definition) => {\n\tfor(var key in definition) {\n\t\tif(__webpack_require__.o(definition, key) && !__webpack_require__.o(exports, key)) {\n\t\t\tObject.defineProperty(exports, key, { enumerable: true, get: definition[key] });\n\t\t}\n\t}\n};","__webpack_require__.o = (obj, prop) => (Object.prototype.hasOwnProperty.call(obj, prop))","// define __esModule on exports\n__webpack_require__.r = (exports) => {\n\tif(typeof Symbol !== 'undefined' && Symbol.toStringTag) {\n\t\tObject.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });\n\t}\n\tObject.defineProperty(exports, '__esModule', { value: true });\n};","const __WEBPACK_NAMESPACE_OBJECT__ = require(\"@mapbox/mapbox-gl-draw\");","const __WEBPACK_NAMESPACE_OBJECT__ = require(\"react\");","const __WEBPACK_NAMESPACE_OBJECT__ = require(\"react-map-gl\");","// @flow\n\nimport MapboxDraw from '@mapbox/mapbox-gl-draw';\nimport { forwardRef, useImperativeHandle } from 'react';\nimport { useControl, type ControlPosition, type MapRef } from 'react-map-gl';\n\ntype Props = {\n position?: ControlPosition;\n onCreate?: (evt: { features: Array<any> }) => void;\n onUpdate?: (evt: { features: Array<any>, action: string }) => void;\n onDelete?: (evt: { features: Array<any> }) => void;\n};\n\nconst DrawControl = forwardRef((props: Props, ref) => {\n /**\n * Creates the drawer ref using MapboxDraw.\n */\n const drawRef = useControl(\n () => new MapboxDraw(props),\n ({ map }: { map: MapRef }) => {\n map.on('draw.create', props.onCreate);\n map.on('draw.update', props.onUpdate);\n map.on('draw.delete', props.onDelete);\n },\n ({ map }: { map: MapRef }) => {\n map.off('draw.create', props.onCreate);\n map.off('draw.update', props.onUpdate);\n map.off('draw.delete', props.onDelete);\n },\n {\n position: props.position\n }\n );\n\n /**\n * Exposes the ref for the MapboxDraw object.\n */\n useImperativeHandle(ref, () => drawRef, [drawRef]);\n\n return null;\n});\n\nexport default DrawControl;\n","const __WEBPACK_NAMESPACE_OBJECT__ = require(\"@turf/turf\");","const __WEBPACK_NAMESPACE_OBJECT__ = require(\"maplibre-gl\");","const __WEBPACK_NAMESPACE_OBJECT__ = require(\"underscore\");","// @flow\n\nimport MapboxDraw from '@mapbox/mapbox-gl-draw';\nimport {\n bbox,\n feature,\n type FeatureCollection,\n type GeometryCollection\n} from '@turf/turf';\nimport maplibregl from 'maplibre-gl';\nimport React, {\n useCallback,\n useEffect,\n useMemo,\n useRef,\n useState\n} from 'react';\nimport Map, { MapRef } from 'react-map-gl';\nimport _ from 'underscore';\nimport DrawControl from './DrawControl';\nimport './MapDraw.css';\n\ntype Props = {\n /**\n * GeoJSON structured data to be displayed on the map.\n */\n data: GeometryCollection | FeatureCollection,\n\n /**\n * URL of the map style to render. This URL should contain any necessary API keys.\n */\n mapStyle: string,\n\n /**\n * Callback fired when the map geometries are changed.\n *\n * @param features\n */\n onChange: (features: Array<any>) => void,\n\n /**\n * Map style object.\n */\n style?: any\n};\n\nconst GeometryTypes = {\n geometryCollection: 'GeometryCollection',\n point: 'Point'\n};\n\n/**\n * This component renders a map with controls for drawing one or more geometries. Geometries can be a point (lat/long),\n * a line, or a polygon.\n */\nconst MapDraw = (props: Props) => {\n const [loaded, setLoaded] = useState(false);\n\n const drawRef = useRef<MapboxDraw>();\n const mapRef = useRef<MapRef>();\n\n /**\n * Calls the onChange prop with all of the geometries in the current drawer.\n *\n * @type {(function(): void)|*}\n */\n const onChange = useCallback(() => {\n props.onChange(drawRef.current.getAll());\n }, [props.onChange]);\n\n /**\n * Sets the map style.\n *\n * @type {{width: string, height: number}}\n */\n const style = useMemo(() => ({ height: 500, width: '100%', ...(props.style || {}) }), [props.style]);\n\n /**\n * Updates the map bounding box and drawer when the geometry is changed.\n */\n useEffect(() => {\n if (loaded && props.data) {\n // Sets the bounding box for the current geometry.\n const boundingBox = bbox(props.data);\n\n if (_.every(boundingBox, _.isFinite)) {\n const [minLng, minLat, maxLng, maxLat] = boundingBox;\n const bounds = [[minLng, minLat], [maxLng, maxLat]];\n\n mapRef.current.fitBounds(bounds, { padding: 40, duration: 1000 });\n }\n\n // Handle special cases for geometry collection (not supported by mabox-gl-draw) and point\n if (props.data.type === GeometryTypes.geometryCollection) {\n _.each(props.data.geometries, (geometry) => {\n drawRef.current.add(feature(geometry));\n });\n } else {\n drawRef.current.add(props.data);\n }\n }\n }, [loaded, props.data]);\n\n return (\n <Map\n attributionControl={false}\n onLoad={() => setLoaded(true)}\n mapLib={maplibregl}\n ref={mapRef}\n style={style}\n mapStyle={props.mapStyle}\n >\n <DrawControl\n ref={drawRef}\n controls={{\n line_string: true,\n point: true,\n polygon: true,\n trash: true\n }}\n displayControlsDefault={false}\n onCreate={onChange}\n onUpdate={onChange}\n onDelete={onChange}\n />\n </Map>\n );\n};\n\nexport default MapDraw;\n"],"names":["__webpack_require__","module","getter","__esModule","d","a","exports","definition","key","o","Object","defineProperty","enumerable","get","obj","prop","prototype","hasOwnProperty","call","Symbol","toStringTag","value","require","forwardRef","props","ref","drawRef","useControl","MapboxDraw","map","on","onCreate","onUpdate","onDelete","off","position","useImperativeHandle","useState","loaded","setLoaded","useRef","mapRef","onChange","useCallback","current","getAll","style","useMemo","height","width","useEffect","data","boundingBox","bbox","_","bounds","fitBounds","padding","duration","type","geometries","geometry","add","feature","attributionControl","onLoad","mapLib","maplibregl","mapStyle","controls","line_string","point","polygon","trash","displayControlsDefault"],"sourceRoot":""}
|
package/package.json
CHANGED
|
@@ -13,6 +13,7 @@ import React, {
|
|
|
13
13
|
useEffect,
|
|
14
14
|
useMemo,
|
|
15
15
|
useRef,
|
|
16
|
+
useState
|
|
16
17
|
} from 'react';
|
|
17
18
|
import Map, { MapRef } from 'react-map-gl';
|
|
18
19
|
import _ from 'underscore';
|
|
@@ -20,13 +21,41 @@ import DrawControl from './DrawControl';
|
|
|
20
21
|
import './MapDraw.css';
|
|
21
22
|
|
|
22
23
|
type Props = {
|
|
24
|
+
/**
|
|
25
|
+
* GeoJSON structured data to be displayed on the map.
|
|
26
|
+
*/
|
|
23
27
|
data: GeometryCollection | FeatureCollection,
|
|
28
|
+
|
|
29
|
+
/**
|
|
30
|
+
* URL of the map style to render. This URL should contain any necessary API keys.
|
|
31
|
+
*/
|
|
24
32
|
mapStyle: string,
|
|
33
|
+
|
|
34
|
+
/**
|
|
35
|
+
* Callback fired when the map geometries are changed.
|
|
36
|
+
*
|
|
37
|
+
* @param features
|
|
38
|
+
*/
|
|
25
39
|
onChange: (features: Array<any>) => void,
|
|
40
|
+
|
|
41
|
+
/**
|
|
42
|
+
* Map style object.
|
|
43
|
+
*/
|
|
26
44
|
style?: any
|
|
27
45
|
};
|
|
28
46
|
|
|
47
|
+
const GeometryTypes = {
|
|
48
|
+
geometryCollection: 'GeometryCollection',
|
|
49
|
+
point: 'Point'
|
|
50
|
+
};
|
|
51
|
+
|
|
52
|
+
/**
|
|
53
|
+
* This component renders a map with controls for drawing one or more geometries. Geometries can be a point (lat/long),
|
|
54
|
+
* a line, or a polygon.
|
|
55
|
+
*/
|
|
29
56
|
const MapDraw = (props: Props) => {
|
|
57
|
+
const [loaded, setLoaded] = useState(false);
|
|
58
|
+
|
|
30
59
|
const drawRef = useRef<MapboxDraw>();
|
|
31
60
|
const mapRef = useRef<MapRef>();
|
|
32
61
|
|
|
@@ -50,7 +79,7 @@ const MapDraw = (props: Props) => {
|
|
|
50
79
|
* Updates the map bounding box and drawer when the geometry is changed.
|
|
51
80
|
*/
|
|
52
81
|
useEffect(() => {
|
|
53
|
-
if (props.data) {
|
|
82
|
+
if (loaded && props.data) {
|
|
54
83
|
// Sets the bounding box for the current geometry.
|
|
55
84
|
const boundingBox = bbox(props.data);
|
|
56
85
|
|
|
@@ -61,8 +90,8 @@ const MapDraw = (props: Props) => {
|
|
|
61
90
|
mapRef.current.fitBounds(bounds, { padding: 40, duration: 1000 });
|
|
62
91
|
}
|
|
63
92
|
|
|
64
|
-
// Handle special
|
|
65
|
-
if (props.data.type ===
|
|
93
|
+
// Handle special cases for geometry collection (not supported by mabox-gl-draw) and point
|
|
94
|
+
if (props.data.type === GeometryTypes.geometryCollection) {
|
|
66
95
|
_.each(props.data.geometries, (geometry) => {
|
|
67
96
|
drawRef.current.add(feature(geometry));
|
|
68
97
|
});
|
|
@@ -70,11 +99,12 @@ const MapDraw = (props: Props) => {
|
|
|
70
99
|
drawRef.current.add(props.data);
|
|
71
100
|
}
|
|
72
101
|
}
|
|
73
|
-
}, [props.data]);
|
|
102
|
+
}, [loaded, props.data]);
|
|
74
103
|
|
|
75
104
|
return (
|
|
76
105
|
<Map
|
|
77
106
|
attributionControl={false}
|
|
107
|
+
onLoad={() => setLoaded(true)}
|
|
78
108
|
mapLib={maplibregl}
|
|
79
109
|
ref={mapRef}
|
|
80
110
|
style={style}
|
|
@@ -13,6 +13,7 @@ import React, {
|
|
|
13
13
|
useEffect,
|
|
14
14
|
useMemo,
|
|
15
15
|
useRef,
|
|
16
|
+
useState
|
|
16
17
|
} from 'react';
|
|
17
18
|
import Map, { MapRef } from 'react-map-gl';
|
|
18
19
|
import _ from 'underscore';
|
|
@@ -20,13 +21,41 @@ import DrawControl from './DrawControl';
|
|
|
20
21
|
import './MapDraw.css';
|
|
21
22
|
|
|
22
23
|
type Props = {
|
|
24
|
+
/**
|
|
25
|
+
* GeoJSON structured data to be displayed on the map.
|
|
26
|
+
*/
|
|
23
27
|
data: GeometryCollection | FeatureCollection,
|
|
28
|
+
|
|
29
|
+
/**
|
|
30
|
+
* URL of the map style to render. This URL should contain any necessary API keys.
|
|
31
|
+
*/
|
|
24
32
|
mapStyle: string,
|
|
33
|
+
|
|
34
|
+
/**
|
|
35
|
+
* Callback fired when the map geometries are changed.
|
|
36
|
+
*
|
|
37
|
+
* @param features
|
|
38
|
+
*/
|
|
25
39
|
onChange: (features: Array<any>) => void,
|
|
40
|
+
|
|
41
|
+
/**
|
|
42
|
+
* Map style object.
|
|
43
|
+
*/
|
|
26
44
|
style?: any
|
|
27
45
|
};
|
|
28
46
|
|
|
47
|
+
const GeometryTypes = {
|
|
48
|
+
geometryCollection: 'GeometryCollection',
|
|
49
|
+
point: 'Point'
|
|
50
|
+
};
|
|
51
|
+
|
|
52
|
+
/**
|
|
53
|
+
* This component renders a map with controls for drawing one or more geometries. Geometries can be a point (lat/long),
|
|
54
|
+
* a line, or a polygon.
|
|
55
|
+
*/
|
|
29
56
|
const MapDraw = (props: Props) => {
|
|
57
|
+
const [loaded, setLoaded] = useState(false);
|
|
58
|
+
|
|
30
59
|
const drawRef = useRef<MapboxDraw>();
|
|
31
60
|
const mapRef = useRef<MapRef>();
|
|
32
61
|
|
|
@@ -50,7 +79,7 @@ const MapDraw = (props: Props) => {
|
|
|
50
79
|
* Updates the map bounding box and drawer when the geometry is changed.
|
|
51
80
|
*/
|
|
52
81
|
useEffect(() => {
|
|
53
|
-
if (props.data) {
|
|
82
|
+
if (loaded && props.data) {
|
|
54
83
|
// Sets the bounding box for the current geometry.
|
|
55
84
|
const boundingBox = bbox(props.data);
|
|
56
85
|
|
|
@@ -61,8 +90,8 @@ const MapDraw = (props: Props) => {
|
|
|
61
90
|
mapRef.current.fitBounds(bounds, { padding: 40, duration: 1000 });
|
|
62
91
|
}
|
|
63
92
|
|
|
64
|
-
// Handle special
|
|
65
|
-
if (props.data.type ===
|
|
93
|
+
// Handle special cases for geometry collection (not supported by mabox-gl-draw) and point
|
|
94
|
+
if (props.data.type === GeometryTypes.geometryCollection) {
|
|
66
95
|
_.each(props.data.geometries, (geometry) => {
|
|
67
96
|
drawRef.current.add(feature(geometry));
|
|
68
97
|
});
|
|
@@ -70,11 +99,12 @@ const MapDraw = (props: Props) => {
|
|
|
70
99
|
drawRef.current.add(props.data);
|
|
71
100
|
}
|
|
72
101
|
}
|
|
73
|
-
}, [props.data]);
|
|
102
|
+
}, [loaded, props.data]);
|
|
74
103
|
|
|
75
104
|
return (
|
|
76
105
|
<Map
|
|
77
106
|
attributionControl={false}
|
|
107
|
+
onLoad={() => setLoaded(true)}
|
|
78
108
|
mapLib={maplibregl}
|
|
79
109
|
ref={mapRef}
|
|
80
110
|
style={style}
|