mapbox: added draw control

package-lock.json

@@ -1458,6 +1458,51 @@
         "@types/yargs": "^13.0.0"
       }
     },
+    "@mapbox/extent": {
+      "version": "0.4.0",
+      "resolved": "https://registry.npmjs.org/@mapbox/extent/-/extent-0.4.0.tgz",
+      "integrity": "sha1-PlkfMuHww5gchkI597CsBuYQ+Kk="
+    },
+    "@mapbox/geojson-area": {
+      "version": "0.2.2",
+      "resolved": "https://registry.npmjs.org/@mapbox/geojson-area/-/geojson-area-0.2.2.tgz",
+      "integrity": "sha1-GNeBSqNr8j+7zDefjiaiKSfevxA=",
+      "requires": {
+        "wgs84": "0.0.0"
+      }
+    },
+    "@mapbox/geojson-coords": {
+      "version": "0.0.0",
+      "resolved": "https://registry.npmjs.org/@mapbox/geojson-coords/-/geojson-coords-0.0.0.tgz",
+      "integrity": "sha1-SEeluWBZZm5SeiE551412E/Vj1A=",
+      "requires": {
+        "@mapbox/geojson-normalize": "0.0.1",
+        "geojson-flatten": "~0.2.1"
+      }
+    },
+    "@mapbox/geojson-extent": {
+      "version": "0.3.2",
+      "resolved": "https://registry.npmjs.org/@mapbox/geojson-extent/-/geojson-extent-0.3.2.tgz",
+      "integrity": "sha1-ob2yAVr9DgMcGMPyn36yKeThlQ8=",
+      "requires": {
+        "@mapbox/extent": "0.4.0",
+        "@mapbox/geojson-coords": "0.0.0",
+        "rw": "~0.1.4",
+        "traverse": "~0.6.6"
+      },
+      "dependencies": {
+        "rw": {
+          "version": "0.1.4",
+          "resolved": "https://registry.npmjs.org/rw/-/rw-0.1.4.tgz",
+          "integrity": "sha1-SQPL2AJIrg7eaFv1j9I2p6mymj4="
+        }
+      }
+    },
+    "@mapbox/geojson-normalize": {
+      "version": "0.0.1",
+      "resolved": "https://registry.npmjs.org/@mapbox/geojson-normalize/-/geojson-normalize-0.0.1.tgz",
+      "integrity": "sha1-HaHms6et060pkJsw9Dj2BYG3zYA="
+    },
     "@mapbox/geojson-rewind": {
       "version": "0.5.0",
       "resolved": "https://registry.npmjs.org/@mapbox/geojson-rewind/-/geojson-rewind-0.5.0.tgz",
@@ -1485,11 +1530,46 @@
       "resolved": "https://registry.npmjs.org/@mapbox/geojson-types/-/geojson-types-1.0.2.tgz",
       "integrity": "sha512-e9EBqHHv3EORHrSfbR9DqecPNn+AmuAoQxV6aL8Xu30bJMJR1o8PZLZzpk1Wq7/NfCbuhmakHTPYRhoqLsXRnw=="
     },
+    "@mapbox/geojsonhint": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/@mapbox/geojsonhint/-/geojsonhint-3.0.0.tgz",
+      "integrity": "sha512-zHcyh1rDHYnEBd6NvOWoeHLuvazlDkIjvz9MJx4cKwcKTlfrqgxVnTv1QLnVJnsSU5neJnhQJcgscR/Zl4uYgw==",
+      "requires": {
+        "concat-stream": "^1.6.1",
+        "jsonlint-lines": "1.7.1",
+        "minimist": "1.2.0",
+        "vfile": "^4.0.0",
+        "vfile-reporter": "^5.1.1"
+      },
+      "dependencies": {
+        "minimist": {
+          "version": "1.2.0",
+          "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.0.tgz",
+          "integrity": "sha1-o1AIsg9BOD7sH7kU9M1d95omQoQ="
+        }
+      }
+    },
     "@mapbox/jsonlint-lines-primitives": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/@mapbox/jsonlint-lines-primitives/-/jsonlint-lines-primitives-2.0.2.tgz",
       "integrity": "sha1-zlblOfg1UrWNENZy6k1vya3HsjQ="
     },
+    "@mapbox/mapbox-gl-draw": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/@mapbox/mapbox-gl-draw/-/mapbox-gl-draw-1.2.0.tgz",
+      "integrity": "sha512-gMrP2zn8PzDtrs72FMJTPytCumX5vUn9R7IK38qBOVy9UfqbdWr56KYuNA/2X+jKn4FIOpmWf8CWkKpOaQkv7w==",
+      "requires": {
+        "@mapbox/geojson-area": "^0.2.1",
+        "@mapbox/geojson-extent": "^0.3.2",
+        "@mapbox/geojson-normalize": "0.0.1",
+        "@mapbox/geojsonhint": "3.0.0",
+        "@mapbox/point-geometry": "0.1.0",
+        "eslint-plugin-import": "^2.19.1",
+        "hat": "0.0.3",
+        "lodash.isequal": "^4.2.0",
+        "xtend": "^4.0.1"
+      }
+    },
     "@mapbox/mapbox-gl-style-spec": {
       "version": "13.18.1",
       "resolved": "https://registry.npmjs.org/@mapbox/mapbox-gl-style-spec/-/mapbox-gl-style-spec-13.18.1.tgz",
@@ -6172,6 +6252,11 @@
         }
       }
     },
+    "@types/unist": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/@types/unist/-/unist-2.0.3.tgz",
+      "integrity": "sha512-FvUupuM3rlRsRtCN+fDudtmytGO6iHJuuRKS1Ss0pG5z8oX0diNEw94UEL7hgDbpN94rgaK5R7sWm6RrSkZuAQ=="
+    },
     "@types/url-parse": {
       "version": "1.4.3",
       "resolved": "https://registry.npmjs.org/@types/url-parse/-/url-parse-1.4.3.tgz",
@@ -6435,6 +6520,11 @@
       "resolved": "https://registry.npmjs.org/@zeit/schemas/-/schemas-2.6.0.tgz",
       "integrity": "sha512-uUrgZ8AxS+Lio0fZKAipJjAh415JyrOZowliZAzmnJSsf7piVL5w+G0+gFJ0KSu3QRhvui/7zuvpLz03YjXAhg=="
     },
+    "JSV": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/JSV/-/JSV-4.0.2.tgz",
+      "integrity": "sha1-0Hf2glVx+CEy+d/67Vh7QCn+/1c="
+    },
     "abab": {
       "version": "2.0.5",
       "resolved": "https://registry.npmjs.org/abab/-/abab-2.0.5.tgz",
@@ -10798,6 +10888,22 @@
         "deep-equal": "^1.0.0"
       }
     },
+    "geojson-flatten": {
+      "version": "0.2.4",
+      "resolved": "https://registry.npmjs.org/geojson-flatten/-/geojson-flatten-0.2.4.tgz",
+      "integrity": "sha512-LiX6Jmot8adiIdZ/fthbcKKPOfWjTQchX/ggHnwMZ2e4b0I243N1ANUos0LvnzepTEsj0+D4fIJ5bKhBrWnAHA==",
+      "requires": {
+        "get-stdin": "^6.0.0",
+        "minimist": "1.2.0"
+      },
+      "dependencies": {
+        "minimist": {
+          "version": "1.2.0",
+          "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.0.tgz",
+          "integrity": "sha1-o1AIsg9BOD7sH7kU9M1d95omQoQ="
+        }
+      }
+    },
     "geojson-rbush": {
       "version": "3.1.2",
       "resolved": "https://registry.npmjs.org/geojson-rbush/-/geojson-rbush-3.1.2.tgz",
@@ -10829,6 +10935,11 @@
       "resolved": "https://registry.npmjs.org/get-own-enumerable-property-symbols/-/get-own-enumerable-property-symbols-3.0.2.tgz",
       "integrity": "sha512-I0UBV/XOz1XkIJHEUDMZAbzCThU/H8DxmSfmdGcKPnVhu2VfFqr34jr9777IyaTYvxjedWhqVIilEDsCdP5G6g=="
     },
+    "get-stdin": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/get-stdin/-/get-stdin-6.0.0.tgz",
+      "integrity": "sha512-jp4tHawyV7+fkkSKyvjuLZswblUtz+SQKzSWnBbii16BuZksJlU1wuBYXY75r+duh/llF1ur6oNwi+2ZzjKZ7g=="
+    },
     "get-stream": {
       "version": "4.1.0",
       "resolved": "https://registry.npmjs.org/get-stream/-/get-stream-4.1.0.tgz",
@@ -11036,6 +11147,11 @@
         }
       }
     },
+    "has-color": {
+      "version": "0.1.7",
+      "resolved": "https://registry.npmjs.org/has-color/-/has-color-0.1.7.tgz",
+      "integrity": "sha1-ZxRKUmDDT8PMpnfQQdr1L+e3iy8="
+    },
     "has-flag": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz",
@@ -11101,6 +11217,11 @@
         "minimalistic-assert": "^1.0.1"
       }
     },
+    "hat": {
+      "version": "0.0.3",
+      "resolved": "https://registry.npmjs.org/hat/-/hat-0.0.3.tgz",
+      "integrity": "sha1-uwFKnmSzeIrtgAWRdBPU/z1QLYo="
+    },
     "he": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/he/-/he-1.2.0.tgz",
@@ -12606,6 +12727,15 @@
       "resolved": "https://registry.npmjs.org/jsonify/-/jsonify-0.0.0.tgz",
       "integrity": "sha1-LHS27kHZPKUbe1qu6PUDYx0lKnM="
     },
+    "jsonlint-lines": {
+      "version": "1.7.1",
+      "resolved": "https://registry.npmjs.org/jsonlint-lines/-/jsonlint-lines-1.7.1.tgz",
+      "integrity": "sha1-UH3mgNP7jEvhZBzFfW9nnynxeP8=",
+      "requires": {
+        "JSV": ">= 4.0.x",
+        "nomnom": ">= 1.5.x"
+      }
+    },
     "jsprim": {
       "version": "1.4.1",
       "resolved": "https://registry.npmjs.org/jsprim/-/jsprim-1.4.1.tgz",
@@ -12837,6 +12967,11 @@
       "resolved": "https://registry.npmjs.org/lodash._reinterpolate/-/lodash._reinterpolate-3.0.0.tgz",
       "integrity": "sha1-DM8tiRZq8Ds2Y8eWU4t1rG4RTZ0="
     },
+    "lodash.isequal": {
+      "version": "4.5.0",
+      "resolved": "https://registry.npmjs.org/lodash.isequal/-/lodash.isequal-4.5.0.tgz",
+      "integrity": "sha1-QVxEePK8wwEgwizhDtMib30+GOA="
+    },
     "lodash.memoize": {
       "version": "4.1.2",
       "resolved": "https://registry.npmjs.org/lodash.memoize/-/lodash.memoize-4.1.2.tgz",
@@ -13564,6 +13699,37 @@
       "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-1.1.61.tgz",
       "integrity": "sha512-DD5vebQLg8jLCOzwupn954fbIiZht05DAZs0k2u8NStSe6h9XdsuIQL8hSRKYiU8WUQRznmSDrKGbv3ObOmC7g=="
     },
+    "nomnom": {
+      "version": "1.8.1",
+      "resolved": "https://registry.npmjs.org/nomnom/-/nomnom-1.8.1.tgz",
+      "integrity": "sha1-IVH3Ikcrp55Qp2/BJbuMjy5Nwqc=",
+      "requires": {
+        "chalk": "~0.4.0",
+        "underscore": "~1.6.0"
+      },
+      "dependencies": {
+        "ansi-styles": {
+          "version": "1.0.0",
+          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-1.0.0.tgz",
+          "integrity": "sha1-yxAt8cVvUSPquLZ817mAJ6AnkXg="
+        },
+        "chalk": {
+          "version": "0.4.0",
+          "resolved": "https://registry.npmjs.org/chalk/-/chalk-0.4.0.tgz",
+          "integrity": "sha1-UZmj3c0MHv4jvAjBsCewYXbgxk8=",
+          "requires": {
+            "ansi-styles": "~1.0.0",
+            "has-color": "~0.1.0",
+            "strip-ansi": "~0.1.0"
+          }
+        },
+        "strip-ansi": {
+          "version": "0.1.1",
+          "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-0.1.1.tgz",
+          "integrity": "sha1-OeipjQRNFQZgq+SmgIrPcLt7yZE="
+        }
+      }
+    },
     "normalize-package-data": {
       "version": "2.5.0",
       "resolved": "https://registry.npmjs.org/normalize-package-data/-/normalize-package-data-2.5.0.tgz",
@@ -16325,6 +16491,11 @@
         }
       }
     },
+    "react-mapbox-gl-draw": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/react-mapbox-gl-draw/-/react-mapbox-gl-draw-2.0.4.tgz",
+      "integrity": "sha512-oaBdIlyu+g7PhLUvwnCsl/wvu+5tGB9I3RLjcrYLt6U1sUMzQJqplKtVxXRv9TZqRdNaAU5qNOP+dRs55QKjsA=="
+    },
     "react-popper": {
       "version": "1.3.7",
       "resolved": "https://registry.npmjs.org/react-popper/-/react-popper-1.3.7.tgz",
@@ -18763,6 +18934,11 @@
         "punycode": "^2.1.0"
       }
     },
+    "traverse": {
+      "version": "0.6.6",
+      "resolved": "https://registry.npmjs.org/traverse/-/traverse-0.6.6.tgz",
+      "integrity": "sha1-y99WD9e5r2MlAv7UD5GMFX6pcTc="
+    },
     "ts-pnp": {
       "version": "1.1.6",
       "resolved": "https://registry.npmjs.org/ts-pnp/-/ts-pnp-1.1.6.tgz",
@@ -18846,6 +19022,11 @@
       "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.1.3.tgz",
       "integrity": "sha512-B3ZIOf1IKeH2ixgHhj6la6xdwR9QrLC5d1VKeCSY4tvkqhF2eqd9O7txNlS0PO3GrBAFIdr3L1ndNwteUbZLYg=="
     },
+    "underscore": {
+      "version": "1.6.0",
+      "resolved": "https://registry.npmjs.org/underscore/-/underscore-1.6.0.tgz",
+      "integrity": "sha1-izixDKze9jM3uLJOT/htRa6lKag="
+    },
     "unicode-canonical-property-names-ecmascript": {
       "version": "1.0.4",
       "resolved": "https://registry.npmjs.org/unicode-canonical-property-names-ecmascript/-/unicode-canonical-property-names-ecmascript-1.0.4.tgz",
@@ -18907,6 +19088,14 @@
         "imurmurhash": "^0.1.4"
       }
     },
+    "unist-util-stringify-position": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/unist-util-stringify-position/-/unist-util-stringify-position-2.0.3.tgz",
+      "integrity": "sha512-3faScn5I+hy9VleOq/qNbAd6pAx7iH5jYBMS9I1HgQVijz/4mv5Bvw5iw1sC/90CODiKo81G/ps8AJrISn687g==",
+      "requires": {
+        "@types/unist": "^2.0.2"
+      }
+    },
     "universalify": {
       "version": "0.1.2",
       "resolved": "https://registry.npmjs.org/universalify/-/universalify-0.1.2.tgz",
@@ -19140,6 +19329,85 @@
         "extsprintf": "^1.2.0"
       }
     },
+    "vfile": {
+      "version": "4.2.1",
+      "resolved": "https://registry.npmjs.org/vfile/-/vfile-4.2.1.tgz",
+      "integrity": "sha512-O6AE4OskCG5S1emQ/4gl8zK586RqA3srz3nfK/Viy0UPToBc5Trp9BVFb1u0CjsKrAWwnpr4ifM/KBXPWwJbCA==",
+      "requires": {
+        "@types/unist": "^2.0.0",
+        "is-buffer": "^2.0.0",
+        "unist-util-stringify-position": "^2.0.0",
+        "vfile-message": "^2.0.0"
+      },
+      "dependencies": {
+        "is-buffer": {
+          "version": "2.0.5",
+          "resolved": "https://registry.npmjs.org/is-buffer/-/is-buffer-2.0.5.tgz",
+          "integrity": "sha512-i2R6zNFDwgEHJyQUtJEk0XFi1i0dPFn/oqjK3/vPCcDeJvW5NQ83V8QbicfF1SupOaB0h8ntgBC2YiE7dfyctQ=="
+        }
+      }
+    },
+    "vfile-message": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/vfile-message/-/vfile-message-2.0.4.tgz",
+      "integrity": "sha512-DjssxRGkMvifUOJre00juHoP9DPWuzjxKuMDrhNbk2TdaYYBNMStsNhEOt3idrtI12VQYM/1+iM0KOzXi4pxwQ==",
+      "requires": {
+        "@types/unist": "^2.0.0",
+        "unist-util-stringify-position": "^2.0.0"
+      }
+    },
+    "vfile-reporter": {
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/vfile-reporter/-/vfile-reporter-5.1.2.tgz",
+      "integrity": "sha512-b15sTuss1wOPWVlyWOvu+n6wGJ/eTYngz3uqMLimQvxZ+Q5oFQGYZZP1o3dR9sk58G5+wej0UPCZSwQBX/mzrQ==",
+      "requires": {
+        "repeat-string": "^1.5.0",
+        "string-width": "^2.0.0",
+        "supports-color": "^5.0.0",
+        "unist-util-stringify-position": "^2.0.0",
+        "vfile-sort": "^2.1.2",
+        "vfile-statistics": "^1.1.0"
+      },
+      "dependencies": {
+        "ansi-regex": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-3.0.0.tgz",
+          "integrity": "sha1-7QMXwyIGT3lGbAKWa922Bas32Zg="
+        },
+        "is-fullwidth-code-point": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-2.0.0.tgz",
+          "integrity": "sha1-o7MKXE8ZkYMWeqq5O+764937ZU8="
+        },
+        "string-width": {
+          "version": "2.1.1",
+          "resolved": "https://registry.npmjs.org/string-width/-/string-width-2.1.1.tgz",
+          "integrity": "sha512-nOqH59deCq9SRHlxq1Aw85Jnt4w6KvLKqWVik6oA9ZklXLNIOlqg4F2yrT1MVaTjAqvVwdfeZ7w7aCvJD7ugkw==",
+          "requires": {
+            "is-fullwidth-code-point": "^2.0.0",
+            "strip-ansi": "^4.0.0"
+          }
+        },
+        "strip-ansi": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-4.0.0.tgz",
+          "integrity": "sha1-qEeQIusaw2iocTibY1JixQXuNo8=",
+          "requires": {
+            "ansi-regex": "^3.0.0"
+          }
+        }
+      }
+    },
+    "vfile-sort": {
+      "version": "2.2.2",
+      "resolved": "https://registry.npmjs.org/vfile-sort/-/vfile-sort-2.2.2.tgz",
+      "integrity": "sha512-tAyUqD2R1l/7Rn7ixdGkhXLD3zsg+XLAeUDUhXearjfIcpL1Hcsj5hHpCoy/gvfK/Ws61+e972fm0F7up7hfYA=="
+    },
+    "vfile-statistics": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/vfile-statistics/-/vfile-statistics-1.1.4.tgz",
+      "integrity": "sha512-lXhElVO0Rq3frgPvFBwahmed3X03vjPF8OcjKMy8+F1xU/3Q3QU3tKEDp743SFtb74PdF0UWpxPvtOP0GCLheA=="
+    },
     "viewport-mercator-project": {
       "version": "7.0.1",
       "resolved": "https://registry.npmjs.org/viewport-mercator-project/-/viewport-mercator-project-7.0.1.tgz",
@@ -19713,6 +19981,11 @@
       "resolved": "https://registry.npmjs.org/websocket-extensions/-/websocket-extensions-0.1.4.tgz",
       "integrity": "sha512-OqedPIGOfsDlo31UNwYbCFMSaO9m9G/0faIHj5/dZFDMFqPTcx6UwqyOy3COEaEOg/9VsGIpdqn62W5KhoKSpg=="
     },
+    "wgs84": {
+      "version": "0.0.0",
+      "resolved": "https://registry.npmjs.org/wgs84/-/wgs84-0.0.0.tgz",
+      "integrity": "sha1-NP3FVZF7blfPKigu0ENxDASc3HY="
+    },
     "whatwg-encoding": {
       "version": "1.0.5",
       "resolved": "https://registry.npmjs.org/whatwg-encoding/-/whatwg-encoding-1.0.5.tgz",

package.json

@@ -4,6 +4,7 @@
   "private": true,
   "proxy": "http://maps.googleapis.com",
   "dependencies": {
+    "@mapbox/mapbox-gl-draw": "^1.2.0",
     "@terrestris/react-geo": "^14.2.2",
     "@testing-library/jest-dom": "^4.2.4",
     "@testing-library/react": "^9.5.0",
@@ -29,6 +30,7 @@
     "react-map-gl": "^5.2.11",
     "react-map-gl-draw": "^0.21.1",
     "react-mapbox-gl": "^4.8.6",
+    "react-mapbox-gl-draw": "^2.0.4",
     "react-redux": "^7.2.2",
     "react-router-dom": "^5.2.0",
     "react-scripts": "3.4.3",

src/maps/Mapbox.js

@@ -7,6 +7,8 @@ import ReactMapboxGl, {
     RotationControl,
     Marker,
 } from "react-mapbox-gl";
+import DrawControl from "react-mapbox-gl-draw";
+import "@mapbox/mapbox-gl-draw/dist/mapbox-gl-draw.css";
 import mapboxToken from "./../config/mapboxToken.js";
 import {calcDistance} from "./../helpers/distance";
 import {longitude, latitude, mapWidth, mapHeight, markerIcon} from "./../config/variables";
@@ -134,6 +136,7 @@ export default class Mapbox extends React.Component{
             <ZoomControl position={"top-right"}/>
             <ScaleControl position={"bottom-right"}/>
             <RotationControl position={"top-right"}/>
+            <DrawControl/>
           </Map>
         </div>
         <div className="mapInfo">