@performant-software/geospatial 1.1.0-beta.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2022 Performant Software Solutions LLC
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/build/index.js

@@ -0,0 +1,2 @@
+(()=>{"use strict";var e={n:r=>{var t=r&&r.__esModule?()=>r.default:()=>r;return e.d(t,{a:t}),t},d:(r,t)=>{for(var n in t)e.o(t,n)&&!e.o(r,n)&&Object.defineProperty(r,n,{enumerable:!0,get:t[n]})},o:(e,r)=>Object.prototype.hasOwnProperty.call(e,r),r:e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})}},r={};e.r(r),e.d(r,{DrawControl:()=>l,MapDraw:()=>v});const t=require("@mapbox/mapbox-gl-draw");var n=e.n(t);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,r){var t=(0,u.useControl)((function(){return new(n())(e)}),(function(r){var t=r.map;t.on("draw.create",e.onCreate),t.on("draw.update",e.onUpdate),t.on("draw.delete",e.onDelete)}),(function(r){var t=r.map;t.off("draw.create",e.onCreate),t.off("draw.update",e.onUpdate),t.off("draw.delete",e.onDelete)}),{position:e.position});return(0,o.useImperativeHandle)(r,(function(){return t}),[t]),null})),c=require("@turf/turf"),f=require("maplibre-gl");var d=e.n(f);const p=require("underscore");var s=e.n(p);function y(e,r){(null==r||r>e.length)&&(r=e.length);for(var t=0,n=new Array(r);t<r;t++)n[t]=e[t];return n}function b(e,r){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);r&&(n=n.filter((function(r){return Object.getOwnPropertyDescriptor(e,r).enumerable}))),t.push.apply(t,n)}return t}function m(e,r,t){return r in e?Object.defineProperty(e,r,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[r]=t,e}const v=function(e){var r=(0,o.useRef)(),t=(0,o.useRef)(),n=(0,o.useCallback)((function(){e.onChange(r.current.getAll())}),[e.onChange]),u=(0,o.useMemo)((function(){return function(e){for(var r=1;r<arguments.length;r++){var t=null!=arguments[r]?arguments[r]:{};r%2?b(Object(t),!0).forEach((function(r){m(e,r,t[r])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(t)):b(Object(t)).forEach((function(r){Object.defineProperty(e,r,Object.getOwnPropertyDescriptor(t,r))}))}return e}({height:500,width:"100%"},e.style||{})}),[e.style]);return(0,o.useEffect)((function(){if(e.data){var n=(0,c.bbox)(e.data);if(s().every(n,s().isFinite)){var o=(i=4,function(e){if(Array.isArray(e))return e}(u=n)||function(e,r){var t=null==e?null:"undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(null!=t){var n,o,a=[],u=!0,i=!1;try{for(t=t.call(e);!(u=(n=t.next()).done)&&(a.push(n.value),!r||a.length!==r);u=!0);}catch(e){i=!0,o=e}finally{try{u||null==t.return||t.return()}finally{if(i)throw o}}return a}}(u,i)||function(e,r){if(e){if("string"==typeof e)return y(e,r);var t=Object.prototype.toString.call(e).slice(8,-1);return"Object"===t&&e.constructor&&(t=e.constructor.name),"Map"===t||"Set"===t?Array.from(e):"Arguments"===t||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t)?y(e,r):void 0}}(u,i)||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.")}()),a=[[o[0],o[1]],[o[2],o[3]]];t.current.fitBounds(a,{padding:40,duration:1e3})}"GeometryCollection"===e.data.type?s().each(e.data.geometries,(function(e){r.current.add((0,c.feature)(e))})):r.current.add(e.data)}var u,i}),[e.data]),a().createElement(i(),{attributionControl:!1,mapLib:d(),ref:t,style:u,mapStyle:e.mapStyle},a().createElement(l,{ref:r,controls:{line_string:!0,point:!0,polygon:!0,trash:!0},displayControlsDefault:!1,onCreate:n,onUpdate:n,onDelete:n}))};module.exports=r})();
+//# sourceMappingURL=index.js.map

package/build/index.js.map

@@ -0,0 +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} from 'react';\nimport Map, { MapRef } from 'react-map-gl';\nimport _ from 'underscore';\nimport DrawControl from './DrawControl';\nimport './MapDraw.css';\n\ntype Props = {\n  data: GeometryCollection | FeatureCollection,\n  mapStyle: string,\n  onChange: (features: Array<any>) => void,\n  style?: any\n};\n\nconst MapDraw = (props: Props) => {\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 (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 case for geometry collection (not supported by mabox-gl-draw)\n      if (props.data.type === '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  }, [props.data]);\n\n  return (\n    <Map\n      attributionControl={false}\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","useRef","mapRef","onChange","useCallback","current","getAll","style","useMemo","height","width","useEffect","data","boundingBox","bbox","_","bounds","fitBounds","padding","duration","type","geometries","geometry","add","feature","attributionControl","mapLib","maplibregl","mapStyle","controls","line_string","point","polygon","trash","displayControlsDefault"],"sourceRoot":""}

package/build/main.css

@@ -0,0 +1,91 @@
+
+/* Override default control style */
+.mapbox-gl-draw_ctrl-bottom-left,
+.mapbox-gl-draw_ctrl-top-left {
+  margin-left:0;
+  border-radius:0 4px 4px 0;
+}
+.mapbox-gl-draw_ctrl-top-right,
+.mapbox-gl-draw_ctrl-bottom-right {
+  margin-right:0;
+  border-radius:4px 0 0 4px;
+}
+
+.mapbox-gl-draw_ctrl-draw-btn {
+  border-color:rgba(0,0,0,0.9);
+  color:rgba(255,255,255,0.5);
+  width:30px;
+  height:30px;
+}
+
+.mapbox-gl-draw_ctrl-draw-btn.active,
+.mapbox-gl-draw_ctrl-draw-btn.active:hover {
+  background-color:rgb(0 0 0/5%);
+}
+.mapbox-gl-draw_ctrl-draw-btn {
+  background-repeat: no-repeat;
+  background-position: center;
+}
+
+.mapbox-gl-draw_point {
+  background-image: url('data:image/svg+xml;utf8,%3Csvg xmlns="http://www.w3.org/2000/svg" width="20" height="20">%3Cpath d="m10 2c-3.3 0-6 2.7-6 6s6 9 6 9 6-5.7 6-9-2.7-6-6-6zm0 2c2.1 0 3.8 1.7 3.8 3.8 0 1.5-1.8 3.9-2.9 5.2h-1.7c-1.1-1.4-2.9-3.8-2.9-5.2-.1-2.1 1.6-3.8 3.7-3.8z"/>%3C/svg>');
+}
+.mapbox-gl-draw_polygon {
+  background-image: url('data:image/svg+xml;utf8,%3Csvg xmlns="http://www.w3.org/2000/svg" width="20" height="20">%3Cpath d="m15 12.3v-4.6c.6-.3 1-1 1-1.7 0-1.1-.9-2-2-2-.7 0-1.4.4-1.7 1h-4.6c-.3-.6-1-1-1.7-1-1.1 0-2 .9-2 2 0 .7.4 1.4 1 1.7v4.6c-.6.3-1 1-1 1.7 0 1.1.9 2 2 2 .7 0 1.4-.4 1.7-1h4.6c.3.6 1 1 1.7 1 1.1 0 2-.9 2-2 0-.7-.4-1.4-1-1.7zm-8-.3v-4l1-1h4l1 1v4l-1 1h-4z"/>%3C/svg>');
+}
+.mapbox-gl-draw_line {
+  background-image: url('data:image/svg+xml;utf8,%3Csvg xmlns="http://www.w3.org/2000/svg" width="20" height="20">%3Cpath d="m13.5 3.5c-1.4 0-2.5 1.1-2.5 2.5 0 .3 0 .6.2.9l-3.8 3.8c-.3-.1-.6-.2-.9-.2-1.4 0-2.5 1.1-2.5 2.5s1.1 2.5 2.5 2.5 2.5-1.1 2.5-2.5c0-.3 0-.6-.2-.9l3.8-3.8c.3.1.6.2.9.2 1.4 0 2.5-1.1 2.5-2.5s-1.1-2.5-2.5-2.5z"/>%3C/svg>');
+}
+.mapbox-gl-draw_trash {
+  background-image: url('data:image/svg+xml;utf8,%3Csvg xmlns="http://www.w3.org/2000/svg" width="20" height="20">%3Cpath d="M10,3.4 c-0.8,0-1.5,0.5-1.8,1.2H5l-1,1v1h12v-1l-1-1h-3.2C11.5,3.9,10.8,3.4,10,3.4z M5,8v7c0,1,1,2,2,2h6c1,0,2-1,2-2V8h-2v5.5h-1.5V8h-3 v5.5H7V8H5z"/>%3C/svg>');
+}
+.mapbox-gl-draw_uncombine {
+  background-image: url('data:image/svg+xml;utf8,%3Csvg xmlns="http://www.w3.org/2000/svg" width="20" height="20">%3Cpath d="m12 2c-.3 0-.5.1-.7.3l-1 1c-.4.4-.4 1 0 1.4l1 1c.4.4 1 .4 1.4 0l1-1c.4-.4.4-1 0-1.4l-1-1c-.2-.2-.4-.3-.7-.3zm4 4c-.3 0-.5.1-.7.3l-1 1c-.4.4-.4 1 0 1.4l1 1c.4.4 1 .4 1.4 0l1-1c.4-.4.4-1 0-1.4l-1-1c-.2-.2-.4-.3-.7-.3zm-7 1c-1 0-1 1-.5 1.5.3.3 1 1 1 1l-1 1s-.5.5 0 1 1 0 1 0l1-1 1 1c.5.5 1.5.5 1.5-.5v-4zm-5 3c-.3 0-.5.1-.7.3l-1 1c-.4.4-.4 1 0 1.4l4.9 4.9c.4.4 1 .4 1.4 0l1-1c.4-.4.4-1 0-1.4l-4.9-4.9c-.1-.2-.4-.3-.7-.3z"/>%3C/svg>');
+}
+.mapbox-gl-draw_combine {
+  background-image: url('data:image/svg+xml;utf8,%3Csvg xmlns="http://www.w3.org/2000/svg" width="20" height="20">%3Cpath d="M12.1,2c-0.3,0-0.5,0.1-0.7,0.3l-1,1c-0.4,0.4-0.4,1,0,1.4l4.9,4.9c0.4,0.4,1,0.4,1.4,0l1-1 c0.4-0.4,0.4-1,0-1.4l-4.9-4.9C12.6,2.1,12.3,2,12.1,2z M8,8C7,8,7,9,7.5,9.5c0.3,0.3,1,1,1,1l-1,1c0,0-0.5,0.5,0,1s1,0,1,0l1-1l1,1 C11,13,12,13,12,12V8H8z M4,10c-0.3,0-0.5,0.1-0.7,0.3l-1,1c-0.4,0.4-0.4,1,0,1.4l1,1c0.4,0.4,1,0.4,1.4,0l1-1c0.4-0.4,0.4-1,0-1.4 l-1-1C4.5,10.1,4.3,10,4,10z M8,14c-0.3,0-0.5,0.1-0.7,0.3l-1,1c-0.4,0.4-0.4,1,0,1.4l1,1c0.4,0.4,1,0.4,1.4,0l1-1 c0.4-0.4,0.4-1,0-1.4l-1-1C8.5,14.1,8.3,14,8,14z"/>%3C/svg>');
+}
+
+.mapboxgl-map.mouse-pointer .mapboxgl-canvas-container.mapboxgl-interactive {
+  cursor: pointer;
+}
+.mapboxgl-map.mouse-move .mapboxgl-canvas-container.mapboxgl-interactive {
+  cursor: move;
+}
+.mapboxgl-map.mouse-add .mapboxgl-canvas-container.mapboxgl-interactive {
+  cursor: crosshair;
+}
+.mapboxgl-map.mouse-move.mode-direct_select .mapboxgl-canvas-container.mapboxgl-interactive {
+  cursor: grab;
+  cursor: -moz-grab;
+  cursor: -webkit-grab;
+}
+.mapboxgl-map.mode-direct_select.feature-vertex.mouse-move .mapboxgl-canvas-container.mapboxgl-interactive {
+  cursor: move;
+}
+.mapboxgl-map.mode-direct_select.feature-midpoint.mouse-pointer .mapboxgl-canvas-container.mapboxgl-interactive {
+  cursor: cell;
+}
+.mapboxgl-map.mode-direct_select.feature-feature.mouse-move .mapboxgl-canvas-container.mapboxgl-interactive {
+  cursor: move;
+}
+.mapboxgl-map.mode-static.mouse-pointer  .mapboxgl-canvas-container.mapboxgl-interactive {
+  cursor: grab;
+  cursor: -moz-grab;
+  cursor: -webkit-grab;
+}
+
+.mapbox-gl-draw_boxselect {
+    pointer-events: none;
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 0;
+    height: 0;
+    background: rgba(0,0,0,.1);
+    border: 2px dotted #fff;
+    opacity: 0.5;
+}
+
+
+

package/index.js

@@ -0,0 +1 @@
+module.exports = require('./build/index');

package/package.json

@@ -0,0 +1,28 @@
+{
+  "name": "@performant-software/geospatial",
+  "version": "1.1.0-beta.0",
+  "description": "TODO: ADD",
+  "license": "MIT",
+  "main": "./build/index.js",
+  "style": "./build/main.css",
+  "scripts": {
+    "build": "webpack --mode production && flow-copy-source -v src types"
+  },
+  "dependencies": {
+    "@mapbox/mapbox-gl-draw": "^1.4.3",
+    "@turf/turf": "^6.5.0",
+    "mapbox-gl": "npm:empty-npm-package@1.0.0",
+    "maplibre-gl": "^3.5.2",
+    "react-map-gl": "^7.1.6",
+    "underscore": "^1.13.6"
+  },
+  "peerDependencies": {
+    "react": ">= 16.13.1 < 19.0.0",
+    "react-dom": ">= 16.13.1 < 19.0.0"
+  },
+  "devDependencies": {
+    "@performant-software/webpack-config": "^1.0.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
+  }
+}

package/src/components/DrawControl.js

@@ -0,0 +1,43 @@
+// @flow
+
+import MapboxDraw from '@mapbox/mapbox-gl-draw';
+import { forwardRef, useImperativeHandle } from 'react';
+import { useControl, type ControlPosition, type MapRef } from 'react-map-gl';
+
+type Props = {
+  position?: ControlPosition;
+  onCreate?: (evt: { features: Array<any> }) => void;
+  onUpdate?: (evt: { features: Array<any>, action: string }) => void;
+  onDelete?: (evt: { features: Array<any> }) => void;
+};
+
+const DrawControl = forwardRef((props: Props, ref) => {
+  /**
+   * Creates the drawer ref using MapboxDraw.
+   */
+  const drawRef = useControl(
+    () => new MapboxDraw(props),
+    ({ map }: { map: MapRef }) => {
+      map.on('draw.create', props.onCreate);
+      map.on('draw.update', props.onUpdate);
+      map.on('draw.delete', props.onDelete);
+    },
+    ({ map }: { map: MapRef }) => {
+      map.off('draw.create', props.onCreate);
+      map.off('draw.update', props.onUpdate);
+      map.off('draw.delete', props.onDelete);
+    },
+    {
+      position: props.position
+    }
+  );
+
+  /**
+   * Exposes the ref for the MapboxDraw object.
+   */
+  useImperativeHandle(ref, () => drawRef, [drawRef]);
+
+  return null;
+});
+
+export default DrawControl;

package/src/components/MapDraw.css

@@ -0,0 +1 @@
+@import '@mapbox/mapbox-gl-draw/dist/mapbox-gl-draw.css';

package/src/components/MapDraw.js

@@ -0,0 +1,100 @@
+// @flow
+
+import MapboxDraw from '@mapbox/mapbox-gl-draw';
+import {
+  bbox,
+  feature,
+  type FeatureCollection,
+  type GeometryCollection
+} from '@turf/turf';
+import maplibregl from 'maplibre-gl';
+import React, {
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+} from 'react';
+import Map, { MapRef } from 'react-map-gl';
+import _ from 'underscore';
+import DrawControl from './DrawControl';
+import './MapDraw.css';
+
+type Props = {
+  data: GeometryCollection | FeatureCollection,
+  mapStyle: string,
+  onChange: (features: Array<any>) => void,
+  style?: any
+};
+
+const MapDraw = (props: Props) => {
+  const drawRef = useRef<MapboxDraw>();
+  const mapRef = useRef<MapRef>();
+
+  /**
+   * Calls the onChange prop with all of the geometries in the current drawer.
+   *
+   * @type {(function(): void)|*}
+   */
+  const onChange = useCallback(() => {
+    props.onChange(drawRef.current.getAll());
+  }, [props.onChange]);
+
+  /**
+   * Sets the map style.
+   *
+   * @type {{width: string, height: number}}
+   */
+  const style = useMemo(() => ({ height: 500, width: '100%', ...(props.style || {}) }), [props.style]);
+
+  /**
+   * Updates the map bounding box and drawer when the geometry is changed.
+   */
+  useEffect(() => {
+    if (props.data) {
+      // Sets the bounding box for the current geometry.
+      const boundingBox = bbox(props.data);
+
+      if (_.every(boundingBox, _.isFinite)) {
+        const [minLng, minLat, maxLng, maxLat] = boundingBox;
+        const bounds = [[minLng, minLat], [maxLng, maxLat]];
+
+        mapRef.current.fitBounds(bounds, { padding: 40, duration: 1000 });
+      }
+
+      // Handle special case for geometry collection (not supported by mabox-gl-draw)
+      if (props.data.type === 'GeometryCollection') {
+        _.each(props.data.geometries, (geometry) => {
+          drawRef.current.add(feature(geometry));
+        });
+      } else {
+        drawRef.current.add(props.data);
+      }
+    }
+  }, [props.data]);
+
+  return (
+    <Map
+      attributionControl={false}
+      mapLib={maplibregl}
+      ref={mapRef}
+      style={style}
+      mapStyle={props.mapStyle}
+    >
+      <DrawControl
+        ref={drawRef}
+        controls={{
+          line_string: true,
+          point: true,
+          polygon: true,
+          trash: true
+        }}
+        displayControlsDefault={false}
+        onCreate={onChange}
+        onUpdate={onChange}
+        onDelete={onChange}
+      />
+    </Map>
+  );
+};
+
+export default MapDraw;

package/src/index.js

@@ -0,0 +1,5 @@
+// @flow
+
+// Components
+export { default as DrawControl } from './components/DrawControl';
+export { default as MapDraw } from './components/MapDraw';

package/types/components/DrawControl.js.flow

@@ -0,0 +1,43 @@
+// @flow
+
+import MapboxDraw from '@mapbox/mapbox-gl-draw';
+import { forwardRef, useImperativeHandle } from 'react';
+import { useControl, type ControlPosition, type MapRef } from 'react-map-gl';
+
+type Props = {
+  position?: ControlPosition;
+  onCreate?: (evt: { features: Array<any> }) => void;
+  onUpdate?: (evt: { features: Array<any>, action: string }) => void;
+  onDelete?: (evt: { features: Array<any> }) => void;
+};
+
+const DrawControl = forwardRef((props: Props, ref) => {
+  /**
+   * Creates the drawer ref using MapboxDraw.
+   */
+  const drawRef = useControl(
+    () => new MapboxDraw(props),
+    ({ map }: { map: MapRef }) => {
+      map.on('draw.create', props.onCreate);
+      map.on('draw.update', props.onUpdate);
+      map.on('draw.delete', props.onDelete);
+    },
+    ({ map }: { map: MapRef }) => {
+      map.off('draw.create', props.onCreate);
+      map.off('draw.update', props.onUpdate);
+      map.off('draw.delete', props.onDelete);
+    },
+    {
+      position: props.position
+    }
+  );
+
+  /**
+   * Exposes the ref for the MapboxDraw object.
+   */
+  useImperativeHandle(ref, () => drawRef, [drawRef]);
+
+  return null;
+});
+
+export default DrawControl;

package/types/components/MapDraw.js.flow

@@ -0,0 +1,100 @@
+// @flow
+
+import MapboxDraw from '@mapbox/mapbox-gl-draw';
+import {
+  bbox,
+  feature,
+  type FeatureCollection,
+  type GeometryCollection
+} from '@turf/turf';
+import maplibregl from 'maplibre-gl';
+import React, {
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+} from 'react';
+import Map, { MapRef } from 'react-map-gl';
+import _ from 'underscore';
+import DrawControl from './DrawControl';
+import './MapDraw.css';
+
+type Props = {
+  data: GeometryCollection | FeatureCollection,
+  mapStyle: string,
+  onChange: (features: Array<any>) => void,
+  style?: any
+};
+
+const MapDraw = (props: Props) => {
+  const drawRef = useRef<MapboxDraw>();
+  const mapRef = useRef<MapRef>();
+
+  /**
+   * Calls the onChange prop with all of the geometries in the current drawer.
+   *
+   * @type {(function(): void)|*}
+   */
+  const onChange = useCallback(() => {
+    props.onChange(drawRef.current.getAll());
+  }, [props.onChange]);
+
+  /**
+   * Sets the map style.
+   *
+   * @type {{width: string, height: number}}
+   */
+  const style = useMemo(() => ({ height: 500, width: '100%', ...(props.style || {}) }), [props.style]);
+
+  /**
+   * Updates the map bounding box and drawer when the geometry is changed.
+   */
+  useEffect(() => {
+    if (props.data) {
+      // Sets the bounding box for the current geometry.
+      const boundingBox = bbox(props.data);
+
+      if (_.every(boundingBox, _.isFinite)) {
+        const [minLng, minLat, maxLng, maxLat] = boundingBox;
+        const bounds = [[minLng, minLat], [maxLng, maxLat]];
+
+        mapRef.current.fitBounds(bounds, { padding: 40, duration: 1000 });
+      }
+
+      // Handle special case for geometry collection (not supported by mabox-gl-draw)
+      if (props.data.type === 'GeometryCollection') {
+        _.each(props.data.geometries, (geometry) => {
+          drawRef.current.add(feature(geometry));
+        });
+      } else {
+        drawRef.current.add(props.data);
+      }
+    }
+  }, [props.data]);
+
+  return (
+    <Map
+      attributionControl={false}
+      mapLib={maplibregl}
+      ref={mapRef}
+      style={style}
+      mapStyle={props.mapStyle}
+    >
+      <DrawControl
+        ref={drawRef}
+        controls={{
+          line_string: true,
+          point: true,
+          polygon: true,
+          trash: true
+        }}
+        displayControlsDefault={false}
+        onCreate={onChange}
+        onUpdate={onChange}
+        onDelete={onChange}
+      />
+    </Map>
+  );
+};
+
+export default MapDraw;

package/types/index.js.flow

@@ -0,0 +1,5 @@
+// @flow
+
+// Components
+export { default as DrawControl } from './components/DrawControl';
+export { default as MapDraw } from './components/MapDraw';

package/webpack.config.js

@@ -0,0 +1,13 @@
+const { configure } = require('@performant-software/webpack-config');
+const path = require('path');
+
+module.exports = configure(__dirname, {
+  resolve: {
+    alias: {
+      './@mapbox/mapbox-gl-draw/dist/mapbox-gl-draw.css$': path.resolve(
+        __dirname,
+        '../../node_modules/@mapbox/mapbox-gl-draw/dist/mapbox-gl-draw.css'
+      )
+    }
+  }
+});