diff --git a/package-lock.json b/package-lock.json
index 3bb9685..cdaccb3 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -15,6 +15,7 @@
         "jalali-moment": "^3.3.10",
         "lord-icon-element": "^3.3.3",
         "lottie-web": "^5.8.1",
+        "mapir-react-component": "^2.0.1",
         "react": "^17.0.2",
         "react-dom": "^17.0.2",
         "react-dropzone": "^11.4.2",
@@ -2612,6 +2613,128 @@
         "node": ">=8"
       }
     },
+    "node_modules/@mapbox/extent": {
+      "version": "0.4.0",
+      "resolved": "https://registry.npmjs.org/@mapbox/extent/-/extent-0.4.0.tgz",
+      "integrity": "sha1-PlkfMuHww5gchkI597CsBuYQ+Kk="
+    },
+    "node_modules/@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=",
+      "dependencies": {
+        "wgs84": "0.0.0"
+      }
+    },
+    "node_modules/@mapbox/geojson-coords": {
+      "version": "0.0.2",
+      "resolved": "https://registry.npmjs.org/@mapbox/geojson-coords/-/geojson-coords-0.0.2.tgz",
+      "integrity": "sha512-YuVzpseee/P1T5BWyeVVPppyfmuXYHFwZHmybkqaMfu4BWlOf2cmMGKj2Rr92MwfSTOCSUA0PAsVGRG8akY0rg==",
+      "dependencies": {
+        "@mapbox/geojson-normalize": "0.0.1",
+        "geojson-flatten": "^1.0.4"
+      }
+    },
+    "node_modules/@mapbox/geojson-extent": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/@mapbox/geojson-extent/-/geojson-extent-1.0.1.tgz",
+      "integrity": "sha512-hh8LEO3djT4fqfr8sSC6wKt+p0TMiu+KOLMBUiFOyj+zGq7+IXwQGl0ppCVDkyzCewyd9LoGe9zAvDxXrLfhLw==",
+      "dependencies": {
+        "@mapbox/extent": "0.4.0",
+        "@mapbox/geojson-coords": "0.0.2",
+        "rw": "~0.1.4",
+        "traverse": "~0.6.6"
+      },
+      "bin": {
+        "geojson-extent": "bin/geojson-extent"
+      }
+    },
+    "node_modules/@mapbox/geojson-normalize": {
+      "version": "0.0.1",
+      "resolved": "https://registry.npmjs.org/@mapbox/geojson-normalize/-/geojson-normalize-0.0.1.tgz",
+      "integrity": "sha1-HaHms6et060pkJsw9Dj2BYG3zYA=",
+      "bin": {
+        "geojson-normalize": "geojson-normalize"
+      }
+    },
+    "node_modules/@mapbox/geojson-rewind": {
+      "version": "0.5.1",
+      "resolved": "https://registry.npmjs.org/@mapbox/geojson-rewind/-/geojson-rewind-0.5.1.tgz",
+      "integrity": "sha512-eL7fMmfTBKjrb+VFHXCGv9Ot0zc3C0U+CwXo1IrP+EPwDczLoXv34Tgq3y+2mPSFNVUXgU42ILWJTC7145KPTA==",
+      "dependencies": {
+        "get-stream": "^6.0.1",
+        "minimist": "^1.2.5"
+      },
+      "bin": {
+        "geojson-rewind": "geojson-rewind"
+      }
+    },
+    "node_modules/@mapbox/geojson-types": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/@mapbox/geojson-types/-/geojson-types-1.0.2.tgz",
+      "integrity": "sha512-e9EBqHHv3EORHrSfbR9DqecPNn+AmuAoQxV6aL8Xu30bJMJR1o8PZLZzpk1Wq7/NfCbuhmakHTPYRhoqLsXRnw=="
+    },
+    "node_modules/@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=",
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/@mapbox/mapbox-gl-draw": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/@mapbox/mapbox-gl-draw/-/mapbox-gl-draw-1.3.0.tgz",
+      "integrity": "sha512-B+KWK+dAgzLHMNyKVuuMRfjeSlQ77MhNLdfpQQpbp3pkhnrdmydDe3ixto1Ua78hktNut0WTrAaD8gYu4PVcjA==",
+      "dependencies": {
+        "@mapbox/geojson-area": "^0.2.2",
+        "@mapbox/geojson-extent": "^1.0.0",
+        "@mapbox/geojson-normalize": "^0.0.1",
+        "@mapbox/point-geometry": "^0.1.0",
+        "hat": "0.0.3",
+        "lodash.isequal": "^4.5.0",
+        "xtend": "^4.0.2"
+      }
+    },
+    "node_modules/@mapbox/mapbox-gl-supported": {
+      "version": "1.5.0",
+      "resolved": "https://registry.npmjs.org/@mapbox/mapbox-gl-supported/-/mapbox-gl-supported-1.5.0.tgz",
+      "integrity": "sha512-/PT1P6DNf7vjEEiPkVIRJkvibbqWtqnyGaBz3nfRdcxclNSnSdaLU5tfAgcD7I8Yt5i+L19s406YLl1koLnLbg==",
+      "peerDependencies": {
+        "mapbox-gl": ">=0.32.1 <2.0.0"
+      }
+    },
+    "node_modules/@mapbox/point-geometry": {
+      "version": "0.1.0",
+      "resolved": "https://registry.npmjs.org/@mapbox/point-geometry/-/point-geometry-0.1.0.tgz",
+      "integrity": "sha1-ioP5M1x4YO/6Lu7KJUMyqgru2PI="
+    },
+    "node_modules/@mapbox/tiny-sdf": {
+      "version": "1.2.5",
+      "resolved": "https://registry.npmjs.org/@mapbox/tiny-sdf/-/tiny-sdf-1.2.5.tgz",
+      "integrity": "sha512-cD8A/zJlm6fdJOk6DqPUV8mcpyJkRz2x2R+/fYcWDYG3oWbG7/L7Yl/WqQ1VZCjnL9OTIMAn6c+BC5Eru4sQEw=="
+    },
+    "node_modules/@mapbox/unitbezier": {
+      "version": "0.0.0",
+      "resolved": "https://registry.npmjs.org/@mapbox/unitbezier/-/unitbezier-0.0.0.tgz",
+      "integrity": "sha1-FWUb1VOme4WB+zmIEMmK2Go0Uk4="
+    },
+    "node_modules/@mapbox/vector-tile": {
+      "version": "1.3.1",
+      "resolved": "https://registry.npmjs.org/@mapbox/vector-tile/-/vector-tile-1.3.1.tgz",
+      "integrity": "sha512-MCEddb8u44/xfQ3oD+Srl/tNcQoqTw3goGk2oLsrFxOTc3dUp+kAnby3PvAeeBYSMSjSPD1nd1AJA6W49WnoUw==",
+      "dependencies": {
+        "@mapbox/point-geometry": "~0.1.0"
+      }
+    },
+    "node_modules/@mapbox/whoots-js": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/@mapbox/whoots-js/-/whoots-js-3.1.0.tgz",
+      "integrity": "sha512-Es6WcD0nO5l+2BOQS4uLfNPYQaNDfbot3X1XUoloz+x0mPDS3eeORZJl06HXjwBG1fOGwCRnzK88LMdxKRrd6Q==",
+      "engines": {
+        "node": ">=6.0.0"
+      }
+    },
     "node_modules/@nodelib/fs.scandir": {
       "version": "2.1.5",
       "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz",
@@ -3241,6 +3364,24 @@
         "node": ">=10.13.0"
       }
     },
+    "node_modules/@turf/bbox": {
+      "version": "4.7.3",
+      "resolved": "https://registry.npmjs.org/@turf/bbox/-/bbox-4.7.3.tgz",
+      "integrity": "sha1-461PEKfptBtSKIDTMIMZgZkFkGc=",
+      "dependencies": {
+        "@turf/meta": "^4.7.3"
+      }
+    },
+    "node_modules/@turf/helpers": {
+      "version": "4.7.3",
+      "resolved": "https://registry.npmjs.org/@turf/helpers/-/helpers-4.7.3.tgz",
+      "integrity": "sha1-vDEqxDyrPFMqSDFRxMOCxWSUKek="
+    },
+    "node_modules/@turf/meta": {
+      "version": "4.7.4",
+      "resolved": "https://registry.npmjs.org/@turf/meta/-/meta-4.7.4.tgz",
+      "integrity": "sha1-beLx6YkLj2S2aeS0fAmyCJMGOXc="
+    },
     "node_modules/@tweenjs/tween.js": {
       "version": "18.6.4",
       "resolved": "https://registry.npmjs.org/@tweenjs/tween.js/-/tween.js-18.6.4.tgz",
@@ -3366,6 +3507,11 @@
         "@types/range-parser": "*"
       }
     },
+    "node_modules/@types/geojson": {
+      "version": "7946.0.8",
+      "resolved": "https://registry.npmjs.org/@types/geojson/-/geojson-7946.0.8.tgz",
+      "integrity": "sha512-1rkryxURpr6aWP7R786/UQOkJ3PcpQiWkAXBmdWc7ryFWqN6a4xfK7BtjXvFBKO9LjQ+MWQSWxYeZX1OApnArA=="
+    },
     "node_modules/@types/graceful-fs": {
       "version": "4.1.5",
       "resolved": "https://registry.npmjs.org/@types/graceful-fs/-/graceful-fs-4.1.5.tgz",
@@ -3436,6 +3582,15 @@
       "resolved": "https://registry.npmjs.org/@types/json5/-/json5-0.0.29.tgz",
       "integrity": "sha1-7ihweulOEdK4J7y+UnC86n8+ce4="
     },
+    "node_modules/@types/mapbox-gl": {
+      "version": "1.13.2",
+      "resolved": "https://registry.npmjs.org/@types/mapbox-gl/-/mapbox-gl-1.13.2.tgz",
+      "integrity": "sha512-sv69WkijddNCIdLLyUsG90+X3Lh67a26lKsqaL8WbmXMkWITDrshe+sc9BI8oUV7sh+XD0jraI3qBe0NtJs7dw==",
+      "peer": true,
+      "dependencies": {
+        "@types/geojson": "*"
+      }
+    },
     "node_modules/@types/mime": {
       "version": "1.3.2",
       "resolved": "https://registry.npmjs.org/@types/mime/-/mime-1.3.2.tgz",
@@ -3545,6 +3700,14 @@
       "resolved": "https://registry.npmjs.org/@types/stack-utils/-/stack-utils-2.0.1.tgz",
       "integrity": "sha512-Hl219/BT5fLAaz6NDkSuhzasy49dwQS/DSdu4MdggFB8zcXv7vflBI3xp7FEmkmdDkBUI2bPUNeMttp2knYdxw=="
     },
+    "node_modules/@types/supercluster": {
+      "version": "5.0.3",
+      "resolved": "https://registry.npmjs.org/@types/supercluster/-/supercluster-5.0.3.tgz",
+      "integrity": "sha512-XMSqQEr7YDuNtFwSgaHHOjsbi0ZGL62V9Js4CW45RBuRYlNWSW/KDqN+RFFE7HdHcGhJPtN0klKvw06r9Kg7rg==",
+      "dependencies": {
+        "@types/geojson": "*"
+      }
+    },
     "node_modules/@types/testing-library__jest-dom": {
       "version": "5.14.2",
       "resolved": "https://registry.npmjs.org/@types/testing-library__jest-dom/-/testing-library__jest-dom-5.14.2.tgz",
@@ -5688,6 +5851,11 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/csscolorparser": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/csscolorparser/-/csscolorparser-1.0.3.tgz",
+      "integrity": "sha1-s085HupNqPPpgjHizNjfnAQfFxs="
+    },
     "node_modules/cssdb": {
       "version": "5.0.0",
       "resolved": "https://registry.npmjs.org/cssdb/-/cssdb-5.0.0.tgz",
@@ -6235,6 +6403,11 @@
       "resolved": "https://registry.npmjs.org/duplexer/-/duplexer-0.1.2.tgz",
       "integrity": "sha512-jtD6YG370ZCIi/9GTaJKQxWTZD045+4R4hTk/x1UyoqadyJ9x9CgSi1RlVDQF8U2sxLLSnFkCaMihqljHIWgMg=="
     },
+    "node_modules/earcut": {
+      "version": "2.2.3",
+      "resolved": "https://registry.npmjs.org/earcut/-/earcut-2.2.3.tgz",
+      "integrity": "sha512-iRDI1QeCQIhMCZk48DRDMVgQSSBDmbzzNhnxIo+pwx3swkfjMh6vh0nWLq1NdvGHLKH6wIrAM3vQWeTj6qeoug=="
+    },
     "node_modules/ee-first": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/ee-first/-/ee-first-1.1.1.tgz",
@@ -7868,6 +8041,23 @@
         "node": ">=6.9.0"
       }
     },
+    "node_modules/geojson-flatten": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/geojson-flatten/-/geojson-flatten-1.0.4.tgz",
+      "integrity": "sha512-PpscUXxO6dvvhZxtwuqiI5v+1C/IQYPJRMWoQeaF2oohJgfGYSHKVAe8L+yUqF34PH/hmq9JlwmO+juPw+95/Q==",
+      "dependencies": {
+        "get-stdin": "^7.0.0",
+        "minimist": "^1.2.5"
+      },
+      "bin": {
+        "geojson-flatten": "geojson-flatten"
+      }
+    },
+    "node_modules/geojson-vt": {
+      "version": "3.2.1",
+      "resolved": "https://registry.npmjs.org/geojson-vt/-/geojson-vt-3.2.1.tgz",
+      "integrity": "sha512-EvGQQi/zPrDA6zr6BnJD/YhwAkBP8nnJ9emh3EnHQKVMfg/MRVtPbMYdgVy/IaEmn4UfagD2a6fafPDL5hbtwg=="
+    },
     "node_modules/get-caller-file": {
       "version": "2.0.5",
       "resolved": "https://registry.npmjs.org/get-caller-file/-/get-caller-file-2.0.5.tgz",
@@ -7902,6 +8092,14 @@
         "node": ">=8.0.0"
       }
     },
+    "node_modules/get-stdin": {
+      "version": "7.0.0",
+      "resolved": "https://registry.npmjs.org/get-stdin/-/get-stdin-7.0.0.tgz",
+      "integrity": "sha512-zRKcywvrXlXsA0v0i9Io4KDRaAw7+a1ZpjRwl9Wox8PFlVCCHra7E9c4kqXCoCM9nR5tBkaTTZRBoCm60bFqTQ==",
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/get-stream": {
       "version": "6.0.1",
       "resolved": "https://registry.npmjs.org/get-stream/-/get-stream-6.0.1.tgz",
@@ -7928,6 +8126,11 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/gl-matrix": {
+      "version": "3.4.3",
+      "resolved": "https://registry.npmjs.org/gl-matrix/-/gl-matrix-3.4.3.tgz",
+      "integrity": "sha512-wcCp8vu8FT22BnvKVPjXa/ICBWRq/zjFfdofZy1WSpQZpphblv12/bOQLBC1rMM7SGOFS9ltVmKOHil5+Ml7gA=="
+    },
     "node_modules/glob": {
       "version": "7.2.0",
       "resolved": "https://registry.npmjs.org/glob/-/glob-7.2.0.tgz",
@@ -8038,6 +8241,11 @@
       "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.8.tgz",
       "integrity": "sha512-qkIilPUYcNhJpd33n0GBXTB1MMPp14TxEsEs0pTrsSVucApsYzW5V+Q8Qxhik6KU3evy+qkAAowTByymK0avdg=="
     },
+    "node_modules/grid-index": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/grid-index/-/grid-index-1.1.0.tgz",
+      "integrity": "sha512-HZRwumpOGUrHyxO5bqKZL0B0GlUpwtCAzZ42sgxUPniu33R1LSFH5yrIcBCHjkctCAh3mtWKcKd9J4vDDdeVHA=="
+    },
     "node_modules/gzip-size": {
       "version": "6.0.0",
       "resolved": "https://registry.npmjs.org/gzip-size/-/gzip-size-6.0.0.tgz",
@@ -8114,6 +8322,14 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/hat": {
+      "version": "0.0.3",
+      "resolved": "https://registry.npmjs.org/hat/-/hat-0.0.3.tgz",
+      "integrity": "sha1-uwFKnmSzeIrtgAWRdBPU/z1QLYo=",
+      "engines": {
+        "node": "*"
+      }
+    },
     "node_modules/he": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/he/-/he-1.2.0.tgz",
@@ -11022,6 +11238,11 @@
         "node": ">=4.0"
       }
     },
+    "node_modules/kdbush": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/kdbush/-/kdbush-3.0.0.tgz",
+      "integrity": "sha512-hRkd6/XW4HTsA9vjVpY9tuXJYLSlelnkTmVFu4M9/7MIYQtFcHpbugAU7UbOfjOiVSVYl2fqgBuJ32JUmRo5Ew=="
+    },
     "node_modules/kind-of": {
       "version": "6.0.3",
       "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-6.0.3.tgz",
@@ -11137,6 +11358,11 @@
       "resolved": "https://registry.npmjs.org/lodash.debounce/-/lodash.debounce-4.0.8.tgz",
       "integrity": "sha1-gteb/zCmfEAF/9XiUVMArZyk168="
     },
+    "node_modules/lodash.isequal": {
+      "version": "4.5.0",
+      "resolved": "https://registry.npmjs.org/lodash.isequal/-/lodash.isequal-4.5.0.tgz",
+      "integrity": "sha1-QVxEePK8wwEgwizhDtMib30+GOA="
+    },
     "node_modules/lodash.memoize": {
       "version": "4.1.2",
       "resolved": "https://registry.npmjs.org/lodash.memoize/-/lodash.memoize-4.1.2.tgz",
@@ -11322,6 +11548,82 @@
         "tmpl": "1.0.5"
       }
     },
+    "node_modules/mapbox-gl": {
+      "version": "1.13.2",
+      "resolved": "https://registry.npmjs.org/mapbox-gl/-/mapbox-gl-1.13.2.tgz",
+      "integrity": "sha512-CPjtWygL+f7naL+sGHoC2JQR0DG7u+9ik6WdkjjVmz2uy0kBC2l+aKfdi3ZzUR7VKSQJ6Mc/CeCN+6iVNah+ww==",
+      "dependencies": {
+        "@mapbox/geojson-rewind": "^0.5.0",
+        "@mapbox/geojson-types": "^1.0.2",
+        "@mapbox/jsonlint-lines-primitives": "^2.0.2",
+        "@mapbox/mapbox-gl-supported": "^1.5.0",
+        "@mapbox/point-geometry": "^0.1.0",
+        "@mapbox/tiny-sdf": "^1.1.1",
+        "@mapbox/unitbezier": "^0.0.0",
+        "@mapbox/vector-tile": "^1.3.1",
+        "@mapbox/whoots-js": "^3.1.0",
+        "csscolorparser": "~1.0.3",
+        "earcut": "^2.2.2",
+        "geojson-vt": "^3.2.1",
+        "gl-matrix": "^3.2.1",
+        "grid-index": "^1.1.0",
+        "minimist": "^1.2.5",
+        "murmurhash-js": "^1.0.0",
+        "pbf": "^3.2.1",
+        "potpack": "^1.0.1",
+        "quickselect": "^2.0.0",
+        "rw": "^1.3.3",
+        "supercluster": "^7.1.0",
+        "tinyqueue": "^2.0.3",
+        "vt-pbf": "^3.1.1"
+      },
+      "engines": {
+        "node": ">=6.4.0"
+      }
+    },
+    "node_modules/mapbox-gl/node_modules/rw": {
+      "version": "1.3.3",
+      "resolved": "https://registry.npmjs.org/rw/-/rw-1.3.3.tgz",
+      "integrity": "sha1-P4Yt+pGrdmsUiF700BEkv9oHT7Q="
+    },
+    "node_modules/mapir-react-component": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/mapir-react-component/-/mapir-react-component-2.0.1.tgz",
+      "integrity": "sha512-5ndyX06zNLVHAfTdowdfFV+VQOVvD+K6lF3hLGgZ1BJm8gAWxbJ/K5SLI4xWB0e1fvOk7iKVI6qdYp1YSlPOkA==",
+      "dependencies": {
+        "@mapbox/mapbox-gl-draw": "^1.3.0",
+        "mapbox-gl": "^1.13.1",
+        "react-mapbox-gl": "^5.1.1",
+        "react-mapbox-gl-draw": "^2.0.4"
+      },
+      "peerDependencies": {
+        "react": "^17.0.2",
+        "react-dom": "^17.0.2"
+      }
+    },
+    "node_modules/mapir-react-component/node_modules/deep-equal": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/deep-equal/-/deep-equal-1.0.1.tgz",
+      "integrity": "sha1-9dJgKStmDghO/0zbyfCK0yR0SLU="
+    },
+    "node_modules/mapir-react-component/node_modules/react-mapbox-gl": {
+      "version": "5.1.1",
+      "resolved": "https://registry.npmjs.org/react-mapbox-gl/-/react-mapbox-gl-5.1.1.tgz",
+      "integrity": "sha512-8vGldFQf7pW8T5ZV2OOhwXoaBvfigB2F7dnhzaZ/bD5/KJzP9zprMbn0xMX95W3eqbKzGGHnwyD5DyTTwR6wGw==",
+      "dependencies": {
+        "@turf/bbox": "4.7.3",
+        "@turf/helpers": "4.7.3",
+        "@types/supercluster": "^5.0.1",
+        "deep-equal": "1.0.1",
+        "supercluster": "^7.0.0"
+      },
+      "peerDependencies": {
+        "mapbox-gl": "^1.12.0",
+        "prop-types": "^15.6.2",
+        "react": "^16.11.0",
+        "react-dom": "^16.11.0"
+      }
+    },
     "node_modules/mdn-data": {
       "version": "2.0.4",
       "resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-2.0.4.tgz",
@@ -11559,6 +11861,11 @@
       "resolved": "https://registry.npmjs.org/multicast-dns-service-types/-/multicast-dns-service-types-1.1.0.tgz",
       "integrity": "sha1-iZ8R2WhuXgXLkbNdXw5jt3PPyQE="
     },
+    "node_modules/murmurhash-js": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/murmurhash-js/-/murmurhash-js-1.0.0.tgz",
+      "integrity": "sha1-sGJ44h/Gw3+lMTcysEEry2rhX1E="
+    },
     "node_modules/mute-stream": {
       "version": "0.0.8",
       "resolved": "https://registry.npmjs.org/mute-stream/-/mute-stream-0.0.8.tgz",
@@ -12146,6 +12453,18 @@
         "node": ">=8"
       }
     },
+    "node_modules/pbf": {
+      "version": "3.2.1",
+      "resolved": "https://registry.npmjs.org/pbf/-/pbf-3.2.1.tgz",
+      "integrity": "sha512-ClrV7pNOn7rtmoQVF4TS1vyU0WhYRnP92fzbfF75jAIwpnzdJXf8iTd4CMEqO4yUenH6NDqLiwjqlh6QgZzgLQ==",
+      "dependencies": {
+        "ieee754": "^1.1.12",
+        "resolve-protobuf-schema": "^2.1.0"
+      },
+      "bin": {
+        "pbf": "bin/pbf"
+      }
+    },
     "node_modules/performance-now": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/performance-now/-/performance-now-2.1.0.tgz",
@@ -13397,6 +13716,11 @@
       "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz",
       "integrity": "sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ=="
     },
+    "node_modules/potpack": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/potpack/-/potpack-1.0.2.tgz",
+      "integrity": "sha512-choctRBIV9EMT9WGAZHn3V7t0Z2pMQyl0EZE6pFc/6ml3ssw7Dlf/oAOvFwjm1HVsqfQN8GfeFyJ+d8tRzqueQ=="
+    },
     "node_modules/prelude-ls": {
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/prelude-ls/-/prelude-ls-1.2.1.tgz",
@@ -13498,6 +13822,11 @@
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
       "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
     },
+    "node_modules/protocol-buffers-schema": {
+      "version": "3.6.0",
+      "resolved": "https://registry.npmjs.org/protocol-buffers-schema/-/protocol-buffers-schema-3.6.0.tgz",
+      "integrity": "sha512-TdDRD+/QNdrCGCE7v8340QyuXd4kIWIgapsE2+n/SaGiSSbomYl4TjHlvIoCWRpE7wFt02EpB35VVA2ImcBVqw=="
+    },
     "node_modules/proxy-addr": {
       "version": "2.0.7",
       "resolved": "https://registry.npmjs.org/proxy-addr/-/proxy-addr-2.0.7.tgz",
@@ -13581,6 +13910,11 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/quickselect": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/quickselect/-/quickselect-2.0.0.tgz",
+      "integrity": "sha512-RKJ22hX8mHe3Y6wH/N3wCM6BWtjaxIyyUIkpHOvfFnxdI4yD4tBXEBKSbriGujF6jnSVkJrffuo6vxACiSSxIw=="
+    },
     "node_modules/raf": {
       "version": "3.4.1",
       "resolved": "https://registry.npmjs.org/raf/-/raf-3.4.1.tgz",
@@ -13830,6 +14164,41 @@
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
       "integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w=="
     },
+    "node_modules/react-mapbox-gl": {
+      "version": "4.8.6",
+      "resolved": "https://registry.npmjs.org/react-mapbox-gl/-/react-mapbox-gl-4.8.6.tgz",
+      "integrity": "sha512-e6rJ4GFye2AIu10I0a0OfleIWYkigIMIysoSKCA4Wg5YHa52JRHq2F3x0c0cnhqfz1txnUhXUbkx2qqs8B6kKQ==",
+      "peer": true,
+      "dependencies": {
+        "@turf/bbox": "4.7.3",
+        "@turf/helpers": "4.7.3",
+        "@types/supercluster": "^5.0.1",
+        "deep-equal": "1.0.1",
+        "supercluster": "^7.0.0"
+      },
+      "peerDependencies": {
+        "mapbox-gl": "^1.10.1",
+        "prop-types": "^15.6.2",
+        "react": "^16.11.0",
+        "react-dom": "^16.11.0"
+      }
+    },
+    "node_modules/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==",
+      "peerDependencies": {
+        "@mapbox/mapbox-gl-draw": "^1.1.2",
+        "@types/mapbox-gl": "^1.6.1",
+        "react-mapbox-gl": "^4.8.1"
+      }
+    },
+    "node_modules/react-mapbox-gl/node_modules/deep-equal": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/deep-equal/-/deep-equal-1.0.1.tgz",
+      "integrity": "sha1-9dJgKStmDghO/0zbyfCK0yR0SLU=",
+      "peer": true
+    },
     "node_modules/react-redux": {
       "version": "7.2.6",
       "resolved": "https://registry.npmjs.org/react-redux/-/react-redux-7.2.6.tgz",
@@ -14232,6 +14601,14 @@
         "node": ">=8"
       }
     },
+    "node_modules/resolve-protobuf-schema": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/resolve-protobuf-schema/-/resolve-protobuf-schema-2.1.0.tgz",
+      "integrity": "sha512-kI5ffTiZWmJaS/huM8wZfEMer1eRd7oJQhDuxeCLe3t7N7mX3z94CN0xPxBQxFYQTSNz9T0i+v6inKqSdK8xrQ==",
+      "dependencies": {
+        "protocol-buffers-schema": "^3.3.1"
+      }
+    },
     "node_modules/resolve-url-loader": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/resolve-url-loader/-/resolve-url-loader-4.0.0.tgz",
@@ -14437,6 +14814,11 @@
         "queue-microtask": "^1.2.2"
       }
     },
+    "node_modules/rw": {
+      "version": "0.1.4",
+      "resolved": "https://registry.npmjs.org/rw/-/rw-0.1.4.tgz",
+      "integrity": "sha1-SQPL2AJIrg7eaFv1j9I2p6mymj4="
+    },
     "node_modules/rxjs": {
       "version": "7.5.2",
       "resolved": "https://registry.npmjs.org/rxjs/-/rxjs-7.5.2.tgz",
@@ -15124,6 +15506,14 @@
         "postcss": "^8.2.15"
       }
     },
+    "node_modules/supercluster": {
+      "version": "7.1.4",
+      "resolved": "https://registry.npmjs.org/supercluster/-/supercluster-7.1.4.tgz",
+      "integrity": "sha512-GhKkRM1jMR6WUwGPw05fs66pOFWhf59lXq+Q3J3SxPvhNcmgOtLRV6aVQPMRsmXdpaeFJGivt+t7QXUPL3ff4g==",
+      "dependencies": {
+        "kdbush": "^3.0.0"
+      }
+    },
     "node_modules/supports-color": {
       "version": "5.5.0",
       "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
@@ -15534,6 +15924,11 @@
       "resolved": "https://registry.npmjs.org/timsort/-/timsort-0.3.0.tgz",
       "integrity": "sha1-QFQRqOfmM5/mTbmiNN4R3DHgK9Q="
     },
+    "node_modules/tinyqueue": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/tinyqueue/-/tinyqueue-2.0.3.tgz",
+      "integrity": "sha512-ppJZNDuKGgxzkHihX8v9v9G5f+18gzaTfrukGrq6ueg0lmH4nqVnA2IPG0AEH3jKEk2GRJCUhDoqpoiw3PHLBA=="
+    },
     "node_modules/tmp": {
       "version": "0.2.1",
       "resolved": "https://registry.npmjs.org/tmp/-/tmp-0.2.1.tgz",
@@ -15609,6 +16004,11 @@
         "node": ">=8"
       }
     },
+    "node_modules/traverse": {
+      "version": "0.6.6",
+      "resolved": "https://registry.npmjs.org/traverse/-/traverse-0.6.6.tgz",
+      "integrity": "sha1-y99WD9e5r2MlAv7UD5GMFX6pcTc="
+    },
     "node_modules/tryer": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/tryer/-/tryer-1.0.1.tgz",
@@ -15904,6 +16304,16 @@
         "node": ">= 0.8"
       }
     },
+    "node_modules/vt-pbf": {
+      "version": "3.1.3",
+      "resolved": "https://registry.npmjs.org/vt-pbf/-/vt-pbf-3.1.3.tgz",
+      "integrity": "sha512-2LzDFzt0mZKZ9IpVF2r69G9bXaP2Q2sArJCmcCgvfTdCCZzSyz4aCLoQyUilu37Ll56tCblIZrXFIjNUpGIlmA==",
+      "dependencies": {
+        "@mapbox/point-geometry": "0.1.0",
+        "@mapbox/vector-tile": "^1.3.1",
+        "pbf": "^3.2.1"
+      }
+    },
     "node_modules/w3c-hr-time": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/w3c-hr-time/-/w3c-hr-time-1.0.2.tgz",
@@ -16317,6 +16727,11 @@
         "node": ">=0.8.0"
       }
     },
+    "node_modules/wgs84": {
+      "version": "0.0.0",
+      "resolved": "https://registry.npmjs.org/wgs84/-/wgs84-0.0.0.tgz",
+      "integrity": "sha1-NP3FVZF7blfPKigu0ENxDASc3HY="
+    },
     "node_modules/whatwg-encoding": {
       "version": "1.0.5",
       "resolved": "https://registry.npmjs.org/whatwg-encoding/-/whatwg-encoding-1.0.5.tgz",
@@ -18633,6 +19048,111 @@
         }
       }
     },
+    "@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.2",
+      "resolved": "https://registry.npmjs.org/@mapbox/geojson-coords/-/geojson-coords-0.0.2.tgz",
+      "integrity": "sha512-YuVzpseee/P1T5BWyeVVPppyfmuXYHFwZHmybkqaMfu4BWlOf2cmMGKj2Rr92MwfSTOCSUA0PAsVGRG8akY0rg==",
+      "requires": {
+        "@mapbox/geojson-normalize": "0.0.1",
+        "geojson-flatten": "^1.0.4"
+      }
+    },
+    "@mapbox/geojson-extent": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/@mapbox/geojson-extent/-/geojson-extent-1.0.1.tgz",
+      "integrity": "sha512-hh8LEO3djT4fqfr8sSC6wKt+p0TMiu+KOLMBUiFOyj+zGq7+IXwQGl0ppCVDkyzCewyd9LoGe9zAvDxXrLfhLw==",
+      "requires": {
+        "@mapbox/extent": "0.4.0",
+        "@mapbox/geojson-coords": "0.0.2",
+        "rw": "~0.1.4",
+        "traverse": "~0.6.6"
+      }
+    },
+    "@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.1",
+      "resolved": "https://registry.npmjs.org/@mapbox/geojson-rewind/-/geojson-rewind-0.5.1.tgz",
+      "integrity": "sha512-eL7fMmfTBKjrb+VFHXCGv9Ot0zc3C0U+CwXo1IrP+EPwDczLoXv34Tgq3y+2mPSFNVUXgU42ILWJTC7145KPTA==",
+      "requires": {
+        "get-stream": "^6.0.1",
+        "minimist": "^1.2.5"
+      }
+    },
+    "@mapbox/geojson-types": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/@mapbox/geojson-types/-/geojson-types-1.0.2.tgz",
+      "integrity": "sha512-e9EBqHHv3EORHrSfbR9DqecPNn+AmuAoQxV6aL8Xu30bJMJR1o8PZLZzpk1Wq7/NfCbuhmakHTPYRhoqLsXRnw=="
+    },
+    "@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.3.0",
+      "resolved": "https://registry.npmjs.org/@mapbox/mapbox-gl-draw/-/mapbox-gl-draw-1.3.0.tgz",
+      "integrity": "sha512-B+KWK+dAgzLHMNyKVuuMRfjeSlQ77MhNLdfpQQpbp3pkhnrdmydDe3ixto1Ua78hktNut0WTrAaD8gYu4PVcjA==",
+      "requires": {
+        "@mapbox/geojson-area": "^0.2.2",
+        "@mapbox/geojson-extent": "^1.0.0",
+        "@mapbox/geojson-normalize": "^0.0.1",
+        "@mapbox/point-geometry": "^0.1.0",
+        "hat": "0.0.3",
+        "lodash.isequal": "^4.5.0",
+        "xtend": "^4.0.2"
+      }
+    },
+    "@mapbox/mapbox-gl-supported": {
+      "version": "1.5.0",
+      "resolved": "https://registry.npmjs.org/@mapbox/mapbox-gl-supported/-/mapbox-gl-supported-1.5.0.tgz",
+      "integrity": "sha512-/PT1P6DNf7vjEEiPkVIRJkvibbqWtqnyGaBz3nfRdcxclNSnSdaLU5tfAgcD7I8Yt5i+L19s406YLl1koLnLbg==",
+      "requires": {}
+    },
+    "@mapbox/point-geometry": {
+      "version": "0.1.0",
+      "resolved": "https://registry.npmjs.org/@mapbox/point-geometry/-/point-geometry-0.1.0.tgz",
+      "integrity": "sha1-ioP5M1x4YO/6Lu7KJUMyqgru2PI="
+    },
+    "@mapbox/tiny-sdf": {
+      "version": "1.2.5",
+      "resolved": "https://registry.npmjs.org/@mapbox/tiny-sdf/-/tiny-sdf-1.2.5.tgz",
+      "integrity": "sha512-cD8A/zJlm6fdJOk6DqPUV8mcpyJkRz2x2R+/fYcWDYG3oWbG7/L7Yl/WqQ1VZCjnL9OTIMAn6c+BC5Eru4sQEw=="
+    },
+    "@mapbox/unitbezier": {
+      "version": "0.0.0",
+      "resolved": "https://registry.npmjs.org/@mapbox/unitbezier/-/unitbezier-0.0.0.tgz",
+      "integrity": "sha1-FWUb1VOme4WB+zmIEMmK2Go0Uk4="
+    },
+    "@mapbox/vector-tile": {
+      "version": "1.3.1",
+      "resolved": "https://registry.npmjs.org/@mapbox/vector-tile/-/vector-tile-1.3.1.tgz",
+      "integrity": "sha512-MCEddb8u44/xfQ3oD+Srl/tNcQoqTw3goGk2oLsrFxOTc3dUp+kAnby3PvAeeBYSMSjSPD1nd1AJA6W49WnoUw==",
+      "requires": {
+        "@mapbox/point-geometry": "~0.1.0"
+      }
+    },
+    "@mapbox/whoots-js": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/@mapbox/whoots-js/-/whoots-js-3.1.0.tgz",
+      "integrity": "sha512-Es6WcD0nO5l+2BOQS4uLfNPYQaNDfbot3X1XUoloz+x0mPDS3eeORZJl06HXjwBG1fOGwCRnzK88LMdxKRrd6Q=="
+    },
     "@nodelib/fs.scandir": {
       "version": "2.1.5",
       "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz",
@@ -19026,6 +19546,24 @@
       "resolved": "https://registry.npmjs.org/@trysound/sax/-/sax-0.2.0.tgz",
       "integrity": "sha512-L7z9BgrNEcYyUYtF+HaEfiS5ebkh9jXqbszz7pC0hRBPaatV0XjSD3+eHrpqFemQfgwiFF0QPIarnIihIDn7OA=="
     },
+    "@turf/bbox": {
+      "version": "4.7.3",
+      "resolved": "https://registry.npmjs.org/@turf/bbox/-/bbox-4.7.3.tgz",
+      "integrity": "sha1-461PEKfptBtSKIDTMIMZgZkFkGc=",
+      "requires": {
+        "@turf/meta": "^4.7.3"
+      }
+    },
+    "@turf/helpers": {
+      "version": "4.7.3",
+      "resolved": "https://registry.npmjs.org/@turf/helpers/-/helpers-4.7.3.tgz",
+      "integrity": "sha1-vDEqxDyrPFMqSDFRxMOCxWSUKek="
+    },
+    "@turf/meta": {
+      "version": "4.7.4",
+      "resolved": "https://registry.npmjs.org/@turf/meta/-/meta-4.7.4.tgz",
+      "integrity": "sha1-beLx6YkLj2S2aeS0fAmyCJMGOXc="
+    },
     "@tweenjs/tween.js": {
       "version": "18.6.4",
       "resolved": "https://registry.npmjs.org/@tweenjs/tween.js/-/tween.js-18.6.4.tgz",
@@ -19151,6 +19689,11 @@
         "@types/range-parser": "*"
       }
     },
+    "@types/geojson": {
+      "version": "7946.0.8",
+      "resolved": "https://registry.npmjs.org/@types/geojson/-/geojson-7946.0.8.tgz",
+      "integrity": "sha512-1rkryxURpr6aWP7R786/UQOkJ3PcpQiWkAXBmdWc7ryFWqN6a4xfK7BtjXvFBKO9LjQ+MWQSWxYeZX1OApnArA=="
+    },
     "@types/graceful-fs": {
       "version": "4.1.5",
       "resolved": "https://registry.npmjs.org/@types/graceful-fs/-/graceful-fs-4.1.5.tgz",
@@ -19221,6 +19764,15 @@
       "resolved": "https://registry.npmjs.org/@types/json5/-/json5-0.0.29.tgz",
       "integrity": "sha1-7ihweulOEdK4J7y+UnC86n8+ce4="
     },
+    "@types/mapbox-gl": {
+      "version": "1.13.2",
+      "resolved": "https://registry.npmjs.org/@types/mapbox-gl/-/mapbox-gl-1.13.2.tgz",
+      "integrity": "sha512-sv69WkijddNCIdLLyUsG90+X3Lh67a26lKsqaL8WbmXMkWITDrshe+sc9BI8oUV7sh+XD0jraI3qBe0NtJs7dw==",
+      "peer": true,
+      "requires": {
+        "@types/geojson": "*"
+      }
+    },
     "@types/mime": {
       "version": "1.3.2",
       "resolved": "https://registry.npmjs.org/@types/mime/-/mime-1.3.2.tgz",
@@ -19330,6 +19882,14 @@
       "resolved": "https://registry.npmjs.org/@types/stack-utils/-/stack-utils-2.0.1.tgz",
       "integrity": "sha512-Hl219/BT5fLAaz6NDkSuhzasy49dwQS/DSdu4MdggFB8zcXv7vflBI3xp7FEmkmdDkBUI2bPUNeMttp2knYdxw=="
     },
+    "@types/supercluster": {
+      "version": "5.0.3",
+      "resolved": "https://registry.npmjs.org/@types/supercluster/-/supercluster-5.0.3.tgz",
+      "integrity": "sha512-XMSqQEr7YDuNtFwSgaHHOjsbi0ZGL62V9Js4CW45RBuRYlNWSW/KDqN+RFFE7HdHcGhJPtN0klKvw06r9Kg7rg==",
+      "requires": {
+        "@types/geojson": "*"
+      }
+    },
     "@types/testing-library__jest-dom": {
       "version": "5.14.2",
       "resolved": "https://registry.npmjs.org/@types/testing-library__jest-dom/-/testing-library__jest-dom-5.14.2.tgz",
@@ -20904,6 +21464,11 @@
       "resolved": "https://registry.npmjs.org/css.escape/-/css.escape-1.5.1.tgz",
       "integrity": "sha1-QuJ9T6BK4y+TGktNQZH6nN3ul8s="
     },
+    "csscolorparser": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/csscolorparser/-/csscolorparser-1.0.3.tgz",
+      "integrity": "sha1-s085HupNqPPpgjHizNjfnAQfFxs="
+    },
     "cssdb": {
       "version": "5.0.0",
       "resolved": "https://registry.npmjs.org/cssdb/-/cssdb-5.0.0.tgz",
@@ -21327,6 +21892,11 @@
       "resolved": "https://registry.npmjs.org/duplexer/-/duplexer-0.1.2.tgz",
       "integrity": "sha512-jtD6YG370ZCIi/9GTaJKQxWTZD045+4R4hTk/x1UyoqadyJ9x9CgSi1RlVDQF8U2sxLLSnFkCaMihqljHIWgMg=="
     },
+    "earcut": {
+      "version": "2.2.3",
+      "resolved": "https://registry.npmjs.org/earcut/-/earcut-2.2.3.tgz",
+      "integrity": "sha512-iRDI1QeCQIhMCZk48DRDMVgQSSBDmbzzNhnxIo+pwx3swkfjMh6vh0nWLq1NdvGHLKH6wIrAM3vQWeTj6qeoug=="
+    },
     "ee-first": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/ee-first/-/ee-first-1.1.1.tgz",
@@ -22504,6 +23074,20 @@
       "resolved": "https://registry.npmjs.org/gensync/-/gensync-1.0.0-beta.2.tgz",
       "integrity": "sha512-3hN7NaskYvMDLQY55gnW3NQ+mesEAepTqlg+VEbj7zzqEMBVNhzcGYYeqFo/TlYz6eQiFcp1HcsCZO+nGgS8zg=="
     },
+    "geojson-flatten": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/geojson-flatten/-/geojson-flatten-1.0.4.tgz",
+      "integrity": "sha512-PpscUXxO6dvvhZxtwuqiI5v+1C/IQYPJRMWoQeaF2oohJgfGYSHKVAe8L+yUqF34PH/hmq9JlwmO+juPw+95/Q==",
+      "requires": {
+        "get-stdin": "^7.0.0",
+        "minimist": "^1.2.5"
+      }
+    },
+    "geojson-vt": {
+      "version": "3.2.1",
+      "resolved": "https://registry.npmjs.org/geojson-vt/-/geojson-vt-3.2.1.tgz",
+      "integrity": "sha512-EvGQQi/zPrDA6zr6BnJD/YhwAkBP8nnJ9emh3EnHQKVMfg/MRVtPbMYdgVy/IaEmn4UfagD2a6fafPDL5hbtwg=="
+    },
     "get-caller-file": {
       "version": "2.0.5",
       "resolved": "https://registry.npmjs.org/get-caller-file/-/get-caller-file-2.0.5.tgz",
@@ -22529,6 +23113,11 @@
       "resolved": "https://registry.npmjs.org/get-package-type/-/get-package-type-0.1.0.tgz",
       "integrity": "sha512-pjzuKtY64GYfWizNAJ0fr9VqttZkNiK2iS430LtIHzjBEr6bX8Am2zm4sW4Ro5wjWW5cAlRL1qAMTcXbjNAO2Q=="
     },
+    "get-stdin": {
+      "version": "7.0.0",
+      "resolved": "https://registry.npmjs.org/get-stdin/-/get-stdin-7.0.0.tgz",
+      "integrity": "sha512-zRKcywvrXlXsA0v0i9Io4KDRaAw7+a1ZpjRwl9Wox8PFlVCCHra7E9c4kqXCoCM9nR5tBkaTTZRBoCm60bFqTQ=="
+    },
     "get-stream": {
       "version": "6.0.1",
       "resolved": "https://registry.npmjs.org/get-stream/-/get-stream-6.0.1.tgz",
@@ -22543,6 +23132,11 @@
         "get-intrinsic": "^1.1.1"
       }
     },
+    "gl-matrix": {
+      "version": "3.4.3",
+      "resolved": "https://registry.npmjs.org/gl-matrix/-/gl-matrix-3.4.3.tgz",
+      "integrity": "sha512-wcCp8vu8FT22BnvKVPjXa/ICBWRq/zjFfdofZy1WSpQZpphblv12/bOQLBC1rMM7SGOFS9ltVmKOHil5+Ml7gA=="
+    },
     "glob": {
       "version": "7.2.0",
       "resolved": "https://registry.npmjs.org/glob/-/glob-7.2.0.tgz",
@@ -22627,6 +23221,11 @@
       "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.8.tgz",
       "integrity": "sha512-qkIilPUYcNhJpd33n0GBXTB1MMPp14TxEsEs0pTrsSVucApsYzW5V+Q8Qxhik6KU3evy+qkAAowTByymK0avdg=="
     },
+    "grid-index": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/grid-index/-/grid-index-1.1.0.tgz",
+      "integrity": "sha512-HZRwumpOGUrHyxO5bqKZL0B0GlUpwtCAzZ42sgxUPniu33R1LSFH5yrIcBCHjkctCAh3mtWKcKd9J4vDDdeVHA=="
+    },
     "gzip-size": {
       "version": "6.0.0",
       "resolved": "https://registry.npmjs.org/gzip-size/-/gzip-size-6.0.0.tgz",
@@ -22676,6 +23275,11 @@
         "has-symbols": "^1.0.2"
       }
     },
+    "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",
@@ -24772,6 +25376,11 @@
         "object.assign": "^4.1.2"
       }
     },
+    "kdbush": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/kdbush/-/kdbush-3.0.0.tgz",
+      "integrity": "sha512-hRkd6/XW4HTsA9vjVpY9tuXJYLSlelnkTmVFu4M9/7MIYQtFcHpbugAU7UbOfjOiVSVYl2fqgBuJ32JUmRo5Ew=="
+    },
     "kind-of": {
       "version": "6.0.3",
       "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-6.0.3.tgz",
@@ -24857,6 +25466,11 @@
       "resolved": "https://registry.npmjs.org/lodash.debounce/-/lodash.debounce-4.0.8.tgz",
       "integrity": "sha1-gteb/zCmfEAF/9XiUVMArZyk168="
     },
+    "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",
@@ -25001,6 +25615,73 @@
         "tmpl": "1.0.5"
       }
     },
+    "mapbox-gl": {
+      "version": "1.13.2",
+      "resolved": "https://registry.npmjs.org/mapbox-gl/-/mapbox-gl-1.13.2.tgz",
+      "integrity": "sha512-CPjtWygL+f7naL+sGHoC2JQR0DG7u+9ik6WdkjjVmz2uy0kBC2l+aKfdi3ZzUR7VKSQJ6Mc/CeCN+6iVNah+ww==",
+      "requires": {
+        "@mapbox/geojson-rewind": "^0.5.0",
+        "@mapbox/geojson-types": "^1.0.2",
+        "@mapbox/jsonlint-lines-primitives": "^2.0.2",
+        "@mapbox/mapbox-gl-supported": "^1.5.0",
+        "@mapbox/point-geometry": "^0.1.0",
+        "@mapbox/tiny-sdf": "^1.1.1",
+        "@mapbox/unitbezier": "^0.0.0",
+        "@mapbox/vector-tile": "^1.3.1",
+        "@mapbox/whoots-js": "^3.1.0",
+        "csscolorparser": "~1.0.3",
+        "earcut": "^2.2.2",
+        "geojson-vt": "^3.2.1",
+        "gl-matrix": "^3.2.1",
+        "grid-index": "^1.1.0",
+        "minimist": "^1.2.5",
+        "murmurhash-js": "^1.0.0",
+        "pbf": "^3.2.1",
+        "potpack": "^1.0.1",
+        "quickselect": "^2.0.0",
+        "rw": "^1.3.3",
+        "supercluster": "^7.1.0",
+        "tinyqueue": "^2.0.3",
+        "vt-pbf": "^3.1.1"
+      },
+      "dependencies": {
+        "rw": {
+          "version": "1.3.3",
+          "resolved": "https://registry.npmjs.org/rw/-/rw-1.3.3.tgz",
+          "integrity": "sha1-P4Yt+pGrdmsUiF700BEkv9oHT7Q="
+        }
+      }
+    },
+    "mapir-react-component": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/mapir-react-component/-/mapir-react-component-2.0.1.tgz",
+      "integrity": "sha512-5ndyX06zNLVHAfTdowdfFV+VQOVvD+K6lF3hLGgZ1BJm8gAWxbJ/K5SLI4xWB0e1fvOk7iKVI6qdYp1YSlPOkA==",
+      "requires": {
+        "@mapbox/mapbox-gl-draw": "^1.3.0",
+        "mapbox-gl": "^1.13.1",
+        "react-mapbox-gl": "^5.1.1",
+        "react-mapbox-gl-draw": "^2.0.4"
+      },
+      "dependencies": {
+        "deep-equal": {
+          "version": "1.0.1",
+          "resolved": "https://registry.npmjs.org/deep-equal/-/deep-equal-1.0.1.tgz",
+          "integrity": "sha1-9dJgKStmDghO/0zbyfCK0yR0SLU="
+        },
+        "react-mapbox-gl": {
+          "version": "5.1.1",
+          "resolved": "https://registry.npmjs.org/react-mapbox-gl/-/react-mapbox-gl-5.1.1.tgz",
+          "integrity": "sha512-8vGldFQf7pW8T5ZV2OOhwXoaBvfigB2F7dnhzaZ/bD5/KJzP9zprMbn0xMX95W3eqbKzGGHnwyD5DyTTwR6wGw==",
+          "requires": {
+            "@turf/bbox": "4.7.3",
+            "@turf/helpers": "4.7.3",
+            "@types/supercluster": "^5.0.1",
+            "deep-equal": "1.0.1",
+            "supercluster": "^7.0.0"
+          }
+        }
+      }
+    },
     "mdn-data": {
       "version": "2.0.4",
       "resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-2.0.4.tgz",
@@ -25171,6 +25852,11 @@
       "resolved": "https://registry.npmjs.org/multicast-dns-service-types/-/multicast-dns-service-types-1.1.0.tgz",
       "integrity": "sha1-iZ8R2WhuXgXLkbNdXw5jt3PPyQE="
     },
+    "murmurhash-js": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/murmurhash-js/-/murmurhash-js-1.0.0.tgz",
+      "integrity": "sha1-sGJ44h/Gw3+lMTcysEEry2rhX1E="
+    },
     "mute-stream": {
       "version": "0.0.8",
       "resolved": "https://registry.npmjs.org/mute-stream/-/mute-stream-0.0.8.tgz",
@@ -25583,6 +26269,15 @@
       "resolved": "https://registry.npmjs.org/path-type/-/path-type-4.0.0.tgz",
       "integrity": "sha512-gDKb8aZMDeD/tZWs9P6+q0J9Mwkdl6xMV8TjnGP3qJVJ06bdMgkbBlLU8IdfOsIsFz2BW1rNVT3XuNEl8zPAvw=="
     },
+    "pbf": {
+      "version": "3.2.1",
+      "resolved": "https://registry.npmjs.org/pbf/-/pbf-3.2.1.tgz",
+      "integrity": "sha512-ClrV7pNOn7rtmoQVF4TS1vyU0WhYRnP92fzbfF75jAIwpnzdJXf8iTd4CMEqO4yUenH6NDqLiwjqlh6QgZzgLQ==",
+      "requires": {
+        "ieee754": "^1.1.12",
+        "resolve-protobuf-schema": "^2.1.0"
+      }
+    },
     "performance-now": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/performance-now/-/performance-now-2.1.0.tgz",
@@ -26339,6 +27034,11 @@
       "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz",
       "integrity": "sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ=="
     },
+    "potpack": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/potpack/-/potpack-1.0.2.tgz",
+      "integrity": "sha512-choctRBIV9EMT9WGAZHn3V7t0Z2pMQyl0EZE6pFc/6ml3ssw7Dlf/oAOvFwjm1HVsqfQN8GfeFyJ+d8tRzqueQ=="
+    },
     "prelude-ls": {
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/prelude-ls/-/prelude-ls-1.2.1.tgz",
@@ -26420,6 +27120,11 @@
         }
       }
     },
+    "protocol-buffers-schema": {
+      "version": "3.6.0",
+      "resolved": "https://registry.npmjs.org/protocol-buffers-schema/-/protocol-buffers-schema-3.6.0.tgz",
+      "integrity": "sha512-TdDRD+/QNdrCGCE7v8340QyuXd4kIWIgapsE2+n/SaGiSSbomYl4TjHlvIoCWRpE7wFt02EpB35VVA2ImcBVqw=="
+    },
     "proxy-addr": {
       "version": "2.0.7",
       "resolved": "https://registry.npmjs.org/proxy-addr/-/proxy-addr-2.0.7.tgz",
@@ -26466,6 +27171,11 @@
       "resolved": "https://registry.npmjs.org/quick-lru/-/quick-lru-5.1.1.tgz",
       "integrity": "sha512-WuyALRjWPDGtt/wzJiadO5AXY+8hZ80hVpe6MyivgraREW751X3SbhRvG3eLKOYN+8VEvqLcf3wdnt44Z4S4SA=="
     },
+    "quickselect": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/quickselect/-/quickselect-2.0.0.tgz",
+      "integrity": "sha512-RKJ22hX8mHe3Y6wH/N3wCM6BWtjaxIyyUIkpHOvfFnxdI4yD4tBXEBKSbriGujF6jnSVkJrffuo6vxACiSSxIw=="
+    },
     "raf": {
       "version": "3.4.1",
       "resolved": "https://registry.npmjs.org/raf/-/raf-3.4.1.tgz",
@@ -26657,6 +27367,33 @@
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
       "integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w=="
     },
+    "react-mapbox-gl": {
+      "version": "4.8.6",
+      "resolved": "https://registry.npmjs.org/react-mapbox-gl/-/react-mapbox-gl-4.8.6.tgz",
+      "integrity": "sha512-e6rJ4GFye2AIu10I0a0OfleIWYkigIMIysoSKCA4Wg5YHa52JRHq2F3x0c0cnhqfz1txnUhXUbkx2qqs8B6kKQ==",
+      "peer": true,
+      "requires": {
+        "@turf/bbox": "4.7.3",
+        "@turf/helpers": "4.7.3",
+        "@types/supercluster": "^5.0.1",
+        "deep-equal": "1.0.1",
+        "supercluster": "^7.0.0"
+      },
+      "dependencies": {
+        "deep-equal": {
+          "version": "1.0.1",
+          "resolved": "https://registry.npmjs.org/deep-equal/-/deep-equal-1.0.1.tgz",
+          "integrity": "sha1-9dJgKStmDghO/0zbyfCK0yR0SLU=",
+          "peer": true
+        }
+      }
+    },
+    "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==",
+      "requires": {}
+    },
     "react-redux": {
       "version": "7.2.6",
       "resolved": "https://registry.npmjs.org/react-redux/-/react-redux-7.2.6.tgz",
@@ -26956,6 +27693,14 @@
       "resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-5.0.0.tgz",
       "integrity": "sha512-qYg9KP24dD5qka9J47d0aVky0N+b4fTU89LN9iDnjB5waksiC49rvMB0PrUJQGoTmH50XPiqOvAjDfaijGxYZw=="
     },
+    "resolve-protobuf-schema": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/resolve-protobuf-schema/-/resolve-protobuf-schema-2.1.0.tgz",
+      "integrity": "sha512-kI5ffTiZWmJaS/huM8wZfEMer1eRd7oJQhDuxeCLe3t7N7mX3z94CN0xPxBQxFYQTSNz9T0i+v6inKqSdK8xrQ==",
+      "requires": {
+        "protocol-buffers-schema": "^3.3.1"
+      }
+    },
     "resolve-url-loader": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/resolve-url-loader/-/resolve-url-loader-4.0.0.tgz",
@@ -27086,6 +27831,11 @@
         "queue-microtask": "^1.2.2"
       }
     },
+    "rw": {
+      "version": "0.1.4",
+      "resolved": "https://registry.npmjs.org/rw/-/rw-0.1.4.tgz",
+      "integrity": "sha1-SQPL2AJIrg7eaFv1j9I2p6mymj4="
+    },
     "rxjs": {
       "version": "7.5.2",
       "resolved": "https://registry.npmjs.org/rxjs/-/rxjs-7.5.2.tgz",
@@ -27617,6 +28367,14 @@
         "postcss-selector-parser": "^6.0.4"
       }
     },
+    "supercluster": {
+      "version": "7.1.4",
+      "resolved": "https://registry.npmjs.org/supercluster/-/supercluster-7.1.4.tgz",
+      "integrity": "sha512-GhKkRM1jMR6WUwGPw05fs66pOFWhf59lXq+Q3J3SxPvhNcmgOtLRV6aVQPMRsmXdpaeFJGivt+t7QXUPL3ff4g==",
+      "requires": {
+        "kdbush": "^3.0.0"
+      }
+    },
     "supports-color": {
       "version": "5.5.0",
       "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
@@ -27916,6 +28674,11 @@
       "resolved": "https://registry.npmjs.org/timsort/-/timsort-0.3.0.tgz",
       "integrity": "sha1-QFQRqOfmM5/mTbmiNN4R3DHgK9Q="
     },
+    "tinyqueue": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/tinyqueue/-/tinyqueue-2.0.3.tgz",
+      "integrity": "sha512-ppJZNDuKGgxzkHihX8v9v9G5f+18gzaTfrukGrq6ueg0lmH4nqVnA2IPG0AEH3jKEk2GRJCUhDoqpoiw3PHLBA=="
+    },
     "tmp": {
       "version": "0.2.1",
       "resolved": "https://registry.npmjs.org/tmp/-/tmp-0.2.1.tgz",
@@ -27972,6 +28735,11 @@
         "punycode": "^2.1.1"
       }
     },
+    "traverse": {
+      "version": "0.6.6",
+      "resolved": "https://registry.npmjs.org/traverse/-/traverse-0.6.6.tgz",
+      "integrity": "sha1-y99WD9e5r2MlAv7UD5GMFX6pcTc="
+    },
     "tryer": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/tryer/-/tryer-1.0.1.tgz",
@@ -28193,6 +28961,16 @@
       "resolved": "https://registry.npmjs.org/vary/-/vary-1.1.2.tgz",
       "integrity": "sha1-IpnwLG3tMNSllhsLn3RSShj2NPw="
     },
+    "vt-pbf": {
+      "version": "3.1.3",
+      "resolved": "https://registry.npmjs.org/vt-pbf/-/vt-pbf-3.1.3.tgz",
+      "integrity": "sha512-2LzDFzt0mZKZ9IpVF2r69G9bXaP2Q2sArJCmcCgvfTdCCZzSyz4aCLoQyUilu37Ll56tCblIZrXFIjNUpGIlmA==",
+      "requires": {
+        "@mapbox/point-geometry": "0.1.0",
+        "@mapbox/vector-tile": "^1.3.1",
+        "pbf": "^3.2.1"
+      }
+    },
     "w3c-hr-time": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/w3c-hr-time/-/w3c-hr-time-1.0.2.tgz",
@@ -28485,6 +29263,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",
diff --git a/package.json b/package.json
index cbd3361..d4249e7 100644
--- a/package.json
+++ b/package.json
@@ -10,6 +10,7 @@
     "jalali-moment": "^3.3.10",
     "lord-icon-element": "^3.3.3",
     "lottie-web": "^5.8.1",
+    "mapir-react-component": "^2.0.1",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "react-dropzone": "^11.4.2",
diff --git a/src/App.js b/src/App.js
index 8770ee7..68ca9f1 100644
--- a/src/App.js
+++ b/src/App.js
@@ -24,6 +24,7 @@ import Services from './view/services';
 
 import {Provider, provider} from 'react-redux';
 import store from './redux/store';
+import ContactUs from './view/contact';
 
 
 let data = [
@@ -679,6 +680,7 @@ function App() {
                 showUserFullInfo={showUserFullInfo}
                 hideUserFullInfo={hideUserFullInfo}
               />} />
+          <Route path='/contacts' element={<ContactUs />} />
         </Routes>
       </div>
     </BrowserRouter>
diff --git a/src/assets/img/alert.svg b/src/assets/img/alert.svg
new file mode 100644
index 0000000..c9bbfca
--- /dev/null
+++ b/src/assets/img/alert.svg
@@ -0,0 +1,10 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="19" height="19" viewBox="0 0 19 19">
+  <g id="vuesax_linear_info-circle" data-name="vuesax/linear/info-circle" transform="translate(-364 -252)">
+    <g id="info-circle" transform="translate(364 252)">
+      <path id="Vector" d="M7.917,15.833A7.917,7.917,0,1,0,0,7.917,7.94,7.94,0,0,0,7.917,15.833Z" transform="translate(1.583 1.583)" fill="none" stroke="#196ec0" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/>
+      <path id="Vector-2" data-name="Vector" d="M0,0V3.958" transform="translate(9.5 6.333)" fill="none" stroke="#196ec0" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/>
+      <path id="Vector-3" data-name="Vector" d="M0,0H.007" transform="translate(9.496 12.667)" fill="none" stroke="#196ec0" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/>
+      <path id="Vector-4" data-name="Vector" d="M0,0H19V19H0Z" fill="none" opacity="0"/>
+    </g>
+  </g>
+</svg>
diff --git a/src/assets/img/delete.svg b/src/assets/img/delete.svg
new file mode 100644
index 0000000..e2bfc10
--- /dev/null
+++ b/src/assets/img/delete.svg
@@ -0,0 +1,10 @@
+<svg id="vuesax_linear_trash" data-name="vuesax/linear/trash" xmlns="http://www.w3.org/2000/svg" width="31" height="31" viewBox="0 0 31 31">
+  <g id="trash">
+    <path id="Vector" d="M23.25.646C18.949.22,14.622,0,10.307,0A76.3,76.3,0,0,0,2.635.388L0,.646" transform="translate(3.875 7.078)" fill="none" stroke="#b42626" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/>
+    <path id="Vector-2" data-name="Vector" d="M0,3.836.284,2.144C.491.917.646,0,2.829,0H6.213C8.4,0,8.564.969,8.757,2.157l.284,1.679" transform="translate(10.979 2.583)" fill="none" stroke="#b42626" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/>
+    <path id="Vector-3" data-name="Vector" d="M17.7,0l-.84,13.007c-.142,2.028-.258,3.6-3.862,3.6H4.7c-3.6,0-3.72-1.576-3.862-3.6L0,0" transform="translate(6.652 11.806)" fill="none" stroke="#b42626" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/>
+    <path id="Vector-4" data-name="Vector" d="M0,0H4.3" transform="translate(13.343 21.313)" fill="none" stroke="#b42626" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/>
+    <path id="Vector-5" data-name="Vector" d="M0,0H6.458" transform="translate(12.271 16.146)" fill="none" stroke="#b42626" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/>
+    <path id="Vector-6" data-name="Vector" d="M0,0H31V31H0Z" fill="none" opacity="0"/>
+  </g>
+</svg>
diff --git a/src/assets/img/exit.svg b/src/assets/img/exit.svg
new file mode 100644
index 0000000..007b98d
--- /dev/null
+++ b/src/assets/img/exit.svg
@@ -0,0 +1,8 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="15.044" height="15.044" viewBox="0 0 15.044 15.044">
+  <g id="vuesax_linear_card-remove" data-name="vuesax/linear/card-remove" transform="translate(-252.46 -511.461)">
+    <g id="card-remove" transform="translate(253.309 512.31)">
+      <path id="Vector" d="M0,13.347,13.347,0" fill="none" stroke="#707070" stroke-linecap="round" stroke-width="1.2"/>
+      <path id="Vector-2" data-name="Vector" d="M13.347,13.347,0,0" fill="none" stroke="#707070" stroke-linecap="round" stroke-width="1.2"/>
+    </g>
+  </g>
+</svg>
diff --git a/src/components/ShoppingCart/Code/index.js b/src/components/ShoppingCart/Code/index.js
new file mode 100644
index 0000000..6951a07
--- /dev/null
+++ b/src/components/ShoppingCart/Code/index.js
@@ -0,0 +1,37 @@
+import React, {useState} from "react";
+import { connect } from "react-redux";
+import { userFactor } from "../../../redux/actions";
+
+function Code({ codeId, setCodeId, userId, factorId }) {
+  const [value, setValue] = React.useState(codeId || "");
+
+  const setOff = () => {
+    setCodeId({ offCodeValue: value, userId: userId, id: factorId });
+  }
+
+  return (
+    <form className="flex w-full flex-row border border-red52 border-solid rounded-xl my-3 overflow-hidden">
+      <input
+        type="text"
+        className="border-0 flex-1 text-right pr-3 font-medium text-tiny bg-gray-200 placeholder:text-blue5F dark:text-white"
+        placeholder={"کد تخفیف دارید ؟"}
+      />
+      <button className={"py-4 px-6 text-tiny bg-red52 text-white border border-red52 border-solid"} onClick={setOff}>ثبت کد</button>
+    </form>
+  );
+}
+
+const mapStateToProps = (state) => ({
+    codeId: state.userFactor.info?.codeId,
+    userId: state.user.status.id,
+    factorId: state.userFactor.info?.id,
+});
+
+const mapDispatchToProps = {
+  setCodeId: userFactor.update,
+}
+
+export default connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(Code);
\ No newline at end of file
diff --git a/src/components/ShoppingCart/Product/index.js b/src/components/ShoppingCart/Product/index.js
new file mode 100644
index 0000000..6b6c9e8
--- /dev/null
+++ b/src/components/ShoppingCart/Product/index.js
@@ -0,0 +1,171 @@
+import React from "react";
+import { connect } from "react-redux";
+import { userProduct } from "../../../redux/actions";
+
+// assets
+// import bookImage from "../../../assets/images/zist-11.svg";
+import exitIcon from "../../../assets/img/exit.svg";
+import deleteIcon from "../../../assets/img/delete.svg";
+
+function Product({ product, grades, pushToCart, isMobile }) {
+  // return isMobile ? (
+  //   <div className="flex flex-row justify-between py-5 border-b border-solid border-grayDB dark:border-gray45">
+  //     <div className="flex flex-row">
+  //       {/* <img
+  //         src={"https://dnvn.ir/api/v1/file/" + product.product.book.fileIds}
+  //         className="rounded-md w-20"
+  //       /> */}
+  //       <div className="flex flex-col pr-2">
+  //         <strong className="text-base text-blue5F mb-2 dark:text-white">
+  //           {product.product.book.name}
+  //         </strong>
+  //         <span className="text-gray70 text-sm mb-2 dark:text-greenBA">
+  //           {"پایه" + " " + grades[product.product.book.gradeId]}
+  //         </span>
+  //         <span className="text-gray70 text-sm dark:text-greenBA">
+  //           {product.productType === 2 ? "نسخه فیزیکی" : "نسخه دیجیتال"}
+  //         </span>
+  //       </div>
+  //     </div>
+  //     <div className={"flex flex-col justify-between items-end"}>
+  //       <img
+  //         src={exitIcon}
+  //         className="w-4"
+  //         alt=""
+  //         onClick={() =>
+  //           pushToCart(
+  //             {
+  //               productId: product?.productId,
+  //               userId: product?.userId,
+  //               count: product?.productType === 1 ? -1 : -product?.count,
+  //             },
+  //             {},
+  //             { id: product?.factorId }
+  //           )
+  //         }
+  //       />
+  //       <div className="flex flex-col items-center">
+  //         {product.productType === 2 && (
+  //           <div className="flex flex-row items-center mb-3">
+  //             <button
+  //               className="rounded-md pt-2 pb-1.5 px-3 border border-solid border-blueC0 text-blueC0"
+  //               onClick={() =>
+  //                 pushToCart({
+  //                   productId: product?.productId,
+  //                   userId: product?.userId,
+  //                   count: 1,
+  //                 })
+  //               }
+  //             >
+  //               +
+  //             </button>
+  //             <span className="mx-2.5 font-semibold text-md text-blueC0">
+  //               {product.count}
+  //             </span>
+  //             <button
+  //               className="rounded-md pt-2 pb-1.5 px-3 border border-solid border-grayDB text-grayDB dark:border-blueC0 dark:text-blueC0"
+  //               onClick={() =>
+  //                 pushToCart({
+  //                   productId: product?.productId,
+  //                   userId: product?.userId,
+  //                   count: -1,
+  //                 })
+  //               }
+  //             >
+  //               -
+  //             </button>
+  //           </div>
+  //         )}
+  //         <strong className="font-bold text-md text-blue5F dark:text-white">
+  //           {product.product.price}&nbsp;تومان
+  //         </strong>
+  //       </div>
+  //     </div>
+  //   </div>
+  // ) : (
+  //   <div className="flex flex-row w-full gap-10 py-4 border-b border-solid border-gray-200">
+  //     <div className="w-1/2 flex flex-row">
+  //       <img
+  //         src={"https://dnvn.ir/api/v1/file/" + product?.product?.book?.fileIds}
+  //         className="rounded-md w-20"
+  //       />
+  //       <div className="flex flex-col pr-4 pt-1">
+  //         <strong className="text-lg text-blue5F mb-1 dark:text-white font-semibold">
+  //           {product?.product?.book?.name}
+  //         </strong>
+  //         <div className="flex flex-row items-center mt-4">
+  //           <span className="w-2 h-2 bg-greenBA rounded-md ml-1"></span>
+  //           <div className="text-gray70 text-sm dark:text-greenBA">
+  //             {"پایه" + " " + grades[product?.product?.book?.gradeId]}
+  //           </div>
+  //           <span className="w-2 h-2 bg-greenBA rounded-md mr-5 ml-1"></span>
+  //           <div className="text-gray70 text-sm dark:text-greenBA">
+  //             {product?.productType === 2 ? "نسخه فیزیکی" : "نسخه دیجیتال"}
+  //           </div>
+  //         </div>
+  //       </div>
+  //     </div>
+  //     <div className="w-1/4 flex flex-row items-center">
+  //       <button
+  //         className="rounded-md pt-2 pb-1.5 px-3 border border-solid border-blueC0 text-blueC0 text-lg"
+  //         onClick={() =>
+  //           pushToCart({
+  //             productId: product?.productId,
+  //             userId: product?.userId,
+  //             count: 1,
+  //           })
+  //         }
+  //       >
+  //         +
+  //       </button>
+  //       <span className="mx-2.5 font-semibold text-lg text-blueC0">
+  //         {product.count}
+  //       </span>
+  //       <button
+  //         className="rounded-md pt-2 pb-1.5 px-3 border border-solid border-grayDB text-grayDB dark:border-blueC0 dark:text-blueC0 text-lg"
+  //         onClick={() =>
+  //           pushToCart({
+  //             productId: product?.productId,
+  //             userId: product?.userId,
+  //             count: -1,
+  //           })
+  //         }
+  //       >
+  //         -
+  //       </button>
+  //     </div>
+  //     <div className="w-1/4 flex flex-row items-center justify-end pl-4">
+  //       <strong className="font-semibold text-md text-blue5F dark:text-white">
+  //         &nbsp;{product?.product?.price}&nbsp;&nbsp;تومان
+  //       </strong>
+  //       <img
+  //         src={deleteIcon}
+  //         alt="delete"
+  //         className="border border-red-800 border-solid p-1 w-8 bg-red-100 rounded-md mr-4"
+  //       />
+  //     </div>
+  //   </div>
+  return(
+    <div className="flex bg-white justify-between items-center border-2 border-gray-300 p-4 rounded-xl m-2 " style={{width: '90%'}}>
+      <div className="flex items-center">
+      <div className="text-sm h-10 flex items-center p-2 border-l-2 border-gray-300 text-gray-400"> {product?.productCat} </div>
+      <h1 className="text-lg font-black px-2 text-black40"> {product?.product?.book?.name}</h1>
+      </div>
+
+      <div className="text-sm text-black40">
+        {product?.product?.price} تومان
+      </div>
+    </div>
+  );
+}
+
+const mapStateToProps = (state) => ({
+  grades: state.publicApi.grades,
+  isMobile: state.publicApi.isMobile,
+});
+
+const mapDispatchToProps = {
+  pushToCart: userProduct.add,
+};
+
+export default connect(mapStateToProps, mapDispatchToProps)(Product);
diff --git a/src/components/ShoppingCart/index.js b/src/components/ShoppingCart/index.js
new file mode 100644
index 0000000..a728cf8
--- /dev/null
+++ b/src/components/ShoppingCart/index.js
@@ -0,0 +1,278 @@
+import React, { useState, useEffect } from "react";
+import { userProduct, userFactor, publicApi } from "../../redux/actions";
+
+// import DeliveryForm from "../DeliveryForm";
+import Product from "./Product";
+import Code from "./Code";
+import Button from "../../components/Button";
+
+//assets
+import alertIcon from "../../assets/img/alert.svg";
+
+import { connect } from "react-redux";
+
+function ShoppingCart({
+  isDark,
+  isMobile,
+  list,
+  payPrice,
+  factorInfo,
+  userId,
+  hasPhysical,
+  getList,
+  getInfo,
+  getFactorInfo,
+  payFactor,
+  headerOptions,
+  setHeaderOptions,
+  desktopContentTransform,
+}) {
+  const [phase, setPhase] = useState("products");
+
+  useEffect(() => {
+    getList();
+    getFactorInfo({ userId });
+    setHeaderOptions(headerOptions);
+  }, []);
+
+  // const Table = () => {
+  //   return (
+  //     <div className="w-full flex flex-col">
+  //       <header className="w-full flex flex-row gap-10">
+  //         <strong className="w-1/2 pb-2 border-b border-solid border-gray-200 text-gray70 text-sm font-normal">
+  //           کالاهای انتخابی{" "}
+  //         </strong>
+  //         <strong className="w-1/4 pb-2 border-b border-solid border-gray-200 text-gray70 text-sm font-normal">
+  //           تعداد سفارش
+  //         </strong>
+  //         <strong className="w-1/4 pb-2 border-b border-solid border-gray-200 text-gray70 text-sm font-normal">
+  //           مبلغ
+  //         </strong>
+  //       </header>
+  //       <ul className="w-full mt-2 list-none p-0">
+  //         {list.map((product, index) => (
+  //           <Product key={index} product={product} />
+  //         ))}
+  //       </ul>
+  //     </div>
+  //   );
+  // };
+
+  // const PriceStatus = ({ name, value, type }) => {
+  //   return isMobile ? (
+  //     <div className="w-full flex flex-row justify-between py-2">
+  //       <strong className="font-light text-sm dark:text-white">{name}</strong>
+  //       <span
+  //         className="font-bold text-lg dark:text-white"
+  //         style={{
+  //           color: !isDark ? (type === "error" ? "#F1420D" : "#246E8A") : "",
+  //         }}
+  //       >
+  //         {value + " " + "تومان"}
+  //       </span>
+  //     </div>
+  //   ) : (
+  //     <div className="w-full flex flex-row justify-between py-4">
+  //       <strong className="font-light text-tiny dark:text-white text-blue5F">
+  //         {name}
+  //       </strong>
+  //       <span
+  //         className="font-medium text-lg dark:text-white"
+  //         style={{
+  //           color: !isDark ? (type === "error" ? "#F1420D" : "#246E8A") : "",
+  //         }}
+  //       >
+  //         {value}
+  //         <span
+  //           style={{
+  //             color: !isDark ? (type === "error" ? "#F1420D" : "#246E8A") : "",
+  //           }}
+  //           className="text-sm mr-2"
+  //         >
+  //           تومان
+  //         </span>
+  //       </span>
+  //     </div>
+  //   );
+  // };
+ 
+  //  isMobile ? (
+  //   <div className="w-full flex flex-col px-4">
+  //     {list.map((product, index) => (
+  //       <Product key={index} product={product} />
+  //     ))}
+  //     <Code />
+  //     <div className="flex flex-col w-full border-t py-2 border-gray-300 border-b mt-6">
+  //       <PriceStatus
+  //         name="مبلغ سبد خرید"
+  //         value={factorInfo?.sumPrice}
+  //         type="normal"
+  //       />
+  //       <PriceStatus
+  //         name="میزان تخفیف"
+  //         value={factorInfo?.offPrice}
+  //         type="error"
+  //       />
+  //       <PriceStatus
+  //         name="مالیات بر ارزش افزوده"
+  //         value={factorInfo?.sumPrice * 0.009}
+  //         type="error"
+  //       />
+  //     </div>
+  //     <div className="flex flex-row justify-between items-center w-full py-3">
+  //       <strong className="font-light text-sm dark:text-white">
+  //         جمع کل سبد خرید
+  //       </strong>
+  //       <p className="font-medium text-greenBA text-lg dark:text-white">
+  //         {factorInfo?.payPrice + " " + "تومان"}
+  //       </p>
+  //     </div>
+      
+  //     <Button
+  //       title="ادامه فرایند خرید"
+  //       backgroundColor="bg-blueC0"
+  //       border={{ color: "#196EC055", width: "1px" }}
+  //       width="100%"
+  //       color="text-white"
+  //       onClick={() => {}}
+  //     />
+  //   </div>
+  // ) : (
+  //   <div
+  //     className={`w-full flex flex-row relative gap-10 px-5 mt-10 ${
+  //       desktopContentTransform ? "top-24" : ""
+  //     }`}
+  //   >
+  //     <div className="flex flex-col w-3/4">
+  //       {/* {phase === "products" && <Table />}
+  //       {phase === "delivery-form" && <DeliveryForm />} */}
+  //     </div>
+  //     <div
+  //       className="flex flex-col w-1/4 p-10 bg-grayF9 border border-solid border-grayDB rounded-md px-4 py-4"
+  //       style={{ height: "fit-content" }}
+  //     >
+  //       <div className="flex flex-col w-full border-t py-2 border-gray-300 border-b">
+  //         <PriceStatus
+  //           name="مبلغ سبد خرید"
+  //           value={factorInfo?.sumPrice}
+  //           type="normal"
+  //         />
+  //         <PriceStatus
+  //           name="میزان تخفیف"
+  //           value={factorInfo?.offPrice}
+  //           type="error"
+  //         />
+  //         <PriceStatus
+  //           name="مالیات بر ارزش افزوده"
+  //           value={factorInfo?.sumPrice * 0.009}
+  //           type="error"
+  //         />
+  //       </div>
+  //       <div className="flex flex-row justify-between items-center w-full py-4 border-t border-b border-grayDB border-solid">
+  //         <strong className="font-medium text-tiny text-blue5F dark:text-white">
+  //           جمع کل سبد خرید
+  //         </strong>
+  //         <p className="font-medium text-greenBA text-xl dark:text-white">
+  //           {factorInfo?.payPrice}
+  //           <span className="font-medium text-greenBA text-sm mr-2">تومان</span>
+  //         </p>
+  //       </div>
+       
+  //       {phase === "delivery-form" && (
+  //         <div className="flex flex-col mt-10">
+  //           <strong className="text-tiny text-blue52 mb-5 font-medium">
+  //             انتخاب شیوه پرداخت
+  //           </strong>
+  //           <Button
+  //             title="ادامه فرایند خرید"
+  //             backgroundColor="bg-transparent"
+  //             border={{ color: "#77777755", width: "1px" }}
+  //             width="100%"
+  //             color="text-blue52"
+  //             onClick={() =>
+  //               setPhase(phase === "products" ? "delivery-form" : "")
+  //             }
+  //           />
+  //           <br />
+  //           <Button
+  //             title="پرداخت در محل"
+  //             backgroundColor="bg-transparent"
+  //             border={{ color: "#77777755", width: "1px" }}
+  //             width="100%"
+  //             color="text-blue52"
+  //             onClick={() =>
+  //               setPhase(phase === "products" ? "delivery-form" : "")
+  //             }
+  //           />
+  //           <br/>
+  //           <br/>
+  //         </div>
+  //       )}
+
+  //       <Button
+  //         title="ادامه فرایند خرید"
+  //         backgroundColor="bg-blueC0"
+  //         border={{ color: "#196EC055", width: "1px" }}
+  //         width="100%"
+  //         color="text-white"
+  //         onClick={() => setPhase(phase === "products" ? "delivery-form" : "")}
+  //       />
+  //     </div>
+  //   </div>
+  return(
+  <div className="flex flex-col justify-between items-center  bg-gray-200  left-0 pt-24" style={{height: '100vh'}}>
+    <div className="w-full flex items-center flex-col">
+    <Product />
+    <Product />
+    {list.map((product, index) => (
+            <Product key={index} product={product} />
+    ))}
+    </div>
+
+    <div style={{width: '80%'}} className="mb-6">
+    <Code />
+    <div className="flex flex-col w-full border-t border-gray-400 my-2 py-2">
+    <div className="flex justify-between w-full py-2 text-blue-700 text-lg ">
+        <p>جمع مبالغ خدمات</p>
+        <p>۴۲۰۰۰۰ تومان</p>
+      </div>  
+      <div className="flex justify-between w-full py-2 text-red26 text-lg ">
+        <p> تخفیف </p>
+        <p> -۱۰۰۰۰ تومان</p>
+      </div>  
+      <div className="flex justify-between w-full py-2 text-red26 text-lg ">
+        <p>کسر از اعتبار</p>
+        <p>-۴۵۰۰۰۰ تومان</p>
+      </div>  
+    </div>
+    <Button
+      title=' پرداخت هزینه : ۴۵/۰۰۰ '
+      borderType='rounded-xl'
+      className='h-16 text-xl'
+      />
+    </div>
+
+  </div>
+  );
+}
+
+const mapStateToProps = (state) => ({
+  isDark: state.publicApi.isDark,
+  isMobile: state.publicApi.isMobile,
+  list: state.userProduct.list,
+  payPrice: state.userProduct.sum,
+  factorInfo: state.userFactor.info,
+  userId: state.user.status.id,
+  hasPhysical: state.userProduct.hasPhysical,
+  desktopContentTransform: state.publicApi.desktopContentTransform,
+});
+
+const mapDispatchToProps = {
+  getList: userProduct.list,
+  getInfo: userProduct.info,
+  getFactorInfo: userFactor.info,
+  payFactor: userFactor.payment,
+  setHeaderOptions: publicApi.setHeaderOptions,
+};
+
+export default connect(mapStateToProps, mapDispatchToProps)(ShoppingCart);
diff --git a/src/components/input/index.js b/src/components/input/index.js
index 9acb8be..fe17e4d 100644
--- a/src/components/input/index.js
+++ b/src/components/input/index.js
@@ -9,7 +9,9 @@ const Input = ({
     type,
     direction,
     className,
-    onChange
+    onChange,
+    style,
+    bg
 
 }) => {
 
@@ -17,11 +19,14 @@ const Input = ({
         let inputs = document.querySelectorAll(".Login-box-form-item");
         let label = document.querySelectorAll(".Login-box-form-item-label");
         let line = document.querySelectorAll(".Login-box-form-item-line");
+        
         inputs[id].style.borderColor = "#df1452";
         inputs[id].style.backgroundColor = "#fff";
         label[id].style.transform = `translate(-10px,-27px)`;
         label[id].style.color = "#df1452";
         line[id].style.backgroundColor = "#fff";
+        
+        
     };
 
     const blurHandler = (id) => {
@@ -37,7 +42,7 @@ const Input = ({
         }
     };
     return (
-        <div className={`${className} Login-box-form-item w-full ml-4 h-12 ${borderType ? borderType : 'rounded-lg'} border border-color7  mt-6 relative flex items-center flex-row-reverse`}>
+        <div style={style} className={`${className} Login-box-form-item w-full ml-4 h-12 ${borderType ? borderType : 'rounded-lg'} border border-color7  mt-6 relative flex items-center flex-row-reverse`}>
             <div className={`Login-box-form-item-line w-${gapSize ? gapSize : '20'} h-px absolute top-[-1px] right-7 bg-color7`}></div>
             <div className="Login-box-form-item-label text-sm text-color19 absolute right-6 transition-all duration-300 pointer-events-none">
                 {title ? title : 'نام کاربری'}
@@ -46,8 +51,8 @@ const Input = ({
                 type={type ? type : 'text'}
                 name="Login-box-form-item-input-name"
                 id={`Login-box-form-item-input-name${id}`}
-                className="Login-box-form-item-input w-full h-full bg-transparent px-4 outline-0 rounded text-red52"
-                style={{ direction: direction ? direction : "ltr" }}
+                className={`Login-box-form-item-input w-full h-full  px-4 outline-0 rounded text-red52`}
+                style={{ direction: direction ? direction : "ltr", backgroundColor: bg }}
                 onFocus={() => focusHandler(id ? id : 0)}
                 onBlur={() => blurHandler(id ? id : 0)}
                 onChange={onChange}
diff --git a/src/view/services/index.js b/src/view/services/index.js
index a1cdfb9..0d1025f 100644
--- a/src/view/services/index.js
+++ b/src/view/services/index.js
@@ -1,6 +1,6 @@
 import React, { useEffect, useState } from "react";
 import Class from "../../components/products/classes";
-import { book, publicApi } from "../../redux/actions";
+import { book, publicApi, userProduct } from "../../redux/actions";
 import { connect } from 'react-redux';
 import { Link } from "react-router-dom";
 import Product from '../../components/Product';
@@ -11,6 +11,7 @@ import img3 from "../../assets/img/Group 1349.svg";
 import img4 from "../../assets/img/Group 1364.svg";
 import img5 from "../../assets/img/Group 1357.svg";
 import img6 from "../../assets/img/Group 1362.svg";
+import ShoppingCart from "../../components/ShoppingCart";
 
 const Services = ({ isMobile,
     books,
@@ -22,6 +23,7 @@ const Services = ({ isMobile,
     setHeaderOptions,
     headerOptions,
     videos,
+    pushToCart
 }) => {
     const [checked, setChecked] = useState([false, false, false, false, false, false]);
     const [filterCheck, setFilterCheck] = useState([false, false, false, false]);
@@ -206,8 +208,8 @@ const Services = ({ isMobile,
                     </div>
                     <div className="flex items-center mx-4 pl-6">
                     <select className="bg-white border border-solid border-gray-300 w-72 p-3 rounded-lg text-gray-400 outline-red52">
-                                    {services.map((item) => (
-                                        <option key={`Grade__${item.id}`}>{item.title}</option>
+                                    {services.map((item, index) => (
+                                        <option key={`Grade__${index}`}>{item.title}</option>
                                     ))}
                                 </select>
                     </div>
@@ -216,7 +218,19 @@ const Services = ({ isMobile,
 
                 <div className="flex justify-center flex-wrap " >
                     {books?.map((product, index) => (
-                        <Link to={"/class/" + product?.id}>
+                        <Link
+                        //  to={"/class/" + product?.id}
+                        to='#'
+                        onClick={() =>
+                            
+                                pushToCart({
+                                    productId: product?.productId,
+                                    userId: product?.userId,
+                                    count: 1,
+                                  })
+                            
+                          }
+                         >
                             <Product
                                 key={index}
                                 productsType={filter.productsType}
@@ -237,8 +251,8 @@ const Services = ({ isMobile,
                     ))}
                 </div>
             </div>
-            <div className="w-1/4 fixed  bg-gray-200  left-0 pt-40" style={{ height: '100vh' }}>
-                Cart
+            <div className="w-1/4 fixed left-0" style={{ height: '100vh' }}>
+                <ShoppingCart />
             </div>
         </div>
     );
@@ -257,6 +271,7 @@ const mapDispatchToProps = {
     getList: book.list,
     gradeFilter: book.gradeFilter,
     setHeaderOptions: publicApi.setHeaderOptions,
+    pushToCart: userProduct.add,
 };
 
 export default connect(mapStateToProps, mapDispatchToProps)(Services);
diff --git a/tailwind.config.js b/tailwind.config.js
index f400962..3dd4c92 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -24,11 +24,13 @@ module.exports = {
         color18: "#E2E2E2",
         color19: "#959595", //register input label
         red26: '#521326',
+        red25: '#752525',
         red52: '#df1452',
         red46OP: 'rgba(255, 246, 246, 0.8)',
         grayEC: '#ececec',
         red82OP: 'rgba(223, 20, 82, 0.08)',
-        pinkF5: '#fff1f5'
+        pinkF5: '#fff1f5',
+        black40: '#404040'
       },
     },
     screens: {
diff --git a/yarn.lock b/yarn.lock
index ccc2f24..3350384 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1278,6 +1278,104 @@
     "@types/yargs" "^16.0.0"
     "chalk" "^4.0.0"
 
+"@mapbox/extent@0.4.0":
+  "integrity" "sha1-PlkfMuHww5gchkI597CsBuYQ+Kk="
+  "resolved" "https://registry.npmjs.org/@mapbox/extent/-/extent-0.4.0.tgz"
+  "version" "0.4.0"
+
+"@mapbox/geojson-area@^0.2.2":
+  "integrity" "sha1-GNeBSqNr8j+7zDefjiaiKSfevxA="
+  "resolved" "https://registry.npmjs.org/@mapbox/geojson-area/-/geojson-area-0.2.2.tgz"
+  "version" "0.2.2"
+  dependencies:
+    "wgs84" "0.0.0"
+
+"@mapbox/geojson-coords@0.0.2":
+  "integrity" "sha512-YuVzpseee/P1T5BWyeVVPppyfmuXYHFwZHmybkqaMfu4BWlOf2cmMGKj2Rr92MwfSTOCSUA0PAsVGRG8akY0rg=="
+  "resolved" "https://registry.npmjs.org/@mapbox/geojson-coords/-/geojson-coords-0.0.2.tgz"
+  "version" "0.0.2"
+  dependencies:
+    "@mapbox/geojson-normalize" "0.0.1"
+    "geojson-flatten" "^1.0.4"
+
+"@mapbox/geojson-extent@^1.0.0":
+  "integrity" "sha512-hh8LEO3djT4fqfr8sSC6wKt+p0TMiu+KOLMBUiFOyj+zGq7+IXwQGl0ppCVDkyzCewyd9LoGe9zAvDxXrLfhLw=="
+  "resolved" "https://registry.npmjs.org/@mapbox/geojson-extent/-/geojson-extent-1.0.1.tgz"
+  "version" "1.0.1"
+  dependencies:
+    "@mapbox/extent" "0.4.0"
+    "@mapbox/geojson-coords" "0.0.2"
+    "rw" "~0.1.4"
+    "traverse" "~0.6.6"
+
+"@mapbox/geojson-normalize@^0.0.1", "@mapbox/geojson-normalize@0.0.1":
+  "integrity" "sha1-HaHms6et060pkJsw9Dj2BYG3zYA="
+  "resolved" "https://registry.npmjs.org/@mapbox/geojson-normalize/-/geojson-normalize-0.0.1.tgz"
+  "version" "0.0.1"
+
+"@mapbox/geojson-rewind@^0.5.0":
+  "integrity" "sha512-eL7fMmfTBKjrb+VFHXCGv9Ot0zc3C0U+CwXo1IrP+EPwDczLoXv34Tgq3y+2mPSFNVUXgU42ILWJTC7145KPTA=="
+  "resolved" "https://registry.npmjs.org/@mapbox/geojson-rewind/-/geojson-rewind-0.5.1.tgz"
+  "version" "0.5.1"
+  dependencies:
+    "get-stream" "^6.0.1"
+    "minimist" "^1.2.5"
+
+"@mapbox/geojson-types@^1.0.2":
+  "integrity" "sha512-e9EBqHHv3EORHrSfbR9DqecPNn+AmuAoQxV6aL8Xu30bJMJR1o8PZLZzpk1Wq7/NfCbuhmakHTPYRhoqLsXRnw=="
+  "resolved" "https://registry.npmjs.org/@mapbox/geojson-types/-/geojson-types-1.0.2.tgz"
+  "version" "1.0.2"
+
+"@mapbox/jsonlint-lines-primitives@^2.0.2":
+  "integrity" "sha1-zlblOfg1UrWNENZy6k1vya3HsjQ="
+  "resolved" "https://registry.npmjs.org/@mapbox/jsonlint-lines-primitives/-/jsonlint-lines-primitives-2.0.2.tgz"
+  "version" "2.0.2"
+
+"@mapbox/mapbox-gl-draw@^1.1.2", "@mapbox/mapbox-gl-draw@^1.3.0":
+  "integrity" "sha512-B+KWK+dAgzLHMNyKVuuMRfjeSlQ77MhNLdfpQQpbp3pkhnrdmydDe3ixto1Ua78hktNut0WTrAaD8gYu4PVcjA=="
+  "resolved" "https://registry.npmjs.org/@mapbox/mapbox-gl-draw/-/mapbox-gl-draw-1.3.0.tgz"
+  "version" "1.3.0"
+  dependencies:
+    "@mapbox/geojson-area" "^0.2.2"
+    "@mapbox/geojson-extent" "^1.0.0"
+    "@mapbox/geojson-normalize" "^0.0.1"
+    "@mapbox/point-geometry" "^0.1.0"
+    "hat" "0.0.3"
+    "lodash.isequal" "^4.5.0"
+    "xtend" "^4.0.2"
+
+"@mapbox/mapbox-gl-supported@^1.5.0":
+  "integrity" "sha512-/PT1P6DNf7vjEEiPkVIRJkvibbqWtqnyGaBz3nfRdcxclNSnSdaLU5tfAgcD7I8Yt5i+L19s406YLl1koLnLbg=="
+  "resolved" "https://registry.npmjs.org/@mapbox/mapbox-gl-supported/-/mapbox-gl-supported-1.5.0.tgz"
+  "version" "1.5.0"
+
+"@mapbox/point-geometry@^0.1.0", "@mapbox/point-geometry@~0.1.0", "@mapbox/point-geometry@0.1.0":
+  "integrity" "sha1-ioP5M1x4YO/6Lu7KJUMyqgru2PI="
+  "resolved" "https://registry.npmjs.org/@mapbox/point-geometry/-/point-geometry-0.1.0.tgz"
+  "version" "0.1.0"
+
+"@mapbox/tiny-sdf@^1.1.1":
+  "integrity" "sha512-cD8A/zJlm6fdJOk6DqPUV8mcpyJkRz2x2R+/fYcWDYG3oWbG7/L7Yl/WqQ1VZCjnL9OTIMAn6c+BC5Eru4sQEw=="
+  "resolved" "https://registry.npmjs.org/@mapbox/tiny-sdf/-/tiny-sdf-1.2.5.tgz"
+  "version" "1.2.5"
+
+"@mapbox/unitbezier@^0.0.0":
+  "integrity" "sha1-FWUb1VOme4WB+zmIEMmK2Go0Uk4="
+  "resolved" "https://registry.npmjs.org/@mapbox/unitbezier/-/unitbezier-0.0.0.tgz"
+  "version" "0.0.0"
+
+"@mapbox/vector-tile@^1.3.1":
+  "integrity" "sha512-MCEddb8u44/xfQ3oD+Srl/tNcQoqTw3goGk2oLsrFxOTc3dUp+kAnby3PvAeeBYSMSjSPD1nd1AJA6W49WnoUw=="
+  "resolved" "https://registry.npmjs.org/@mapbox/vector-tile/-/vector-tile-1.3.1.tgz"
+  "version" "1.3.1"
+  dependencies:
+    "@mapbox/point-geometry" "~0.1.0"
+
+"@mapbox/whoots-js@^3.1.0":
+  "integrity" "sha512-Es6WcD0nO5l+2BOQS4uLfNPYQaNDfbot3X1XUoloz+x0mPDS3eeORZJl06HXjwBG1fOGwCRnzK88LMdxKRrd6Q=="
+  "resolved" "https://registry.npmjs.org/@mapbox/whoots-js/-/whoots-js-3.1.0.tgz"
+  "version" "3.1.0"
+
 "@nodelib/fs.scandir@2.1.5":
   "integrity" "sha512-vq24Bq3ym5HEQm2NKCr3yXDwjc7vTsEThRDnkp2DK9p1uqLR+DHurm/NOTo0KG7HYHU7eppKZj3MyqYuMBf62g=="
   "resolved" "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz"
@@ -1537,6 +1635,23 @@
   "resolved" "https://registry.npmjs.org/@trysound/sax/-/sax-0.2.0.tgz"
   "version" "0.2.0"
 
+"@turf/bbox@4.7.3":
+  "integrity" "sha1-461PEKfptBtSKIDTMIMZgZkFkGc="
+  "resolved" "https://registry.npmjs.org/@turf/bbox/-/bbox-4.7.3.tgz"
+  "version" "4.7.3"
+  dependencies:
+    "@turf/meta" "^4.7.3"
+
+"@turf/helpers@4.7.3":
+  "integrity" "sha1-vDEqxDyrPFMqSDFRxMOCxWSUKek="
+  "resolved" "https://registry.npmjs.org/@turf/helpers/-/helpers-4.7.3.tgz"
+  "version" "4.7.3"
+
+"@turf/meta@^4.7.3":
+  "integrity" "sha1-beLx6YkLj2S2aeS0fAmyCJMGOXc="
+  "resolved" "https://registry.npmjs.org/@turf/meta/-/meta-4.7.4.tgz"
+  "version" "4.7.4"
+
 "@tweenjs/tween.js@^18.1.2":
   "integrity" "sha512-lB9lMjuqjtuJrx7/kOkqQBtllspPIN+96OvTCeJ2j5FEzinoAXTdAMFnDAQT1KVPRlnYfBrqxtqP66vDM40xxQ=="
   "resolved" "https://registry.npmjs.org/@tweenjs/tween.js/-/tween.js-18.6.4.tgz"
@@ -1655,6 +1770,11 @@
     "@types/qs" "*"
     "@types/serve-static" "*"
 
+"@types/geojson@*":
+  "integrity" "sha512-1rkryxURpr6aWP7R786/UQOkJ3PcpQiWkAXBmdWc7ryFWqN6a4xfK7BtjXvFBKO9LjQ+MWQSWxYeZX1OApnArA=="
+  "resolved" "https://registry.npmjs.org/@types/geojson/-/geojson-7946.0.8.tgz"
+  "version" "7946.0.8"
+
 "@types/graceful-fs@^4.1.2":
   "integrity" "sha512-anKkLmZZ+xm4p8JWBf4hElkM4XR+EZeA2M9BAkkTldmcyDY4mbdIJnRghDJH3Ov5ooY7/UAoENtmdMSkaAd7Cw=="
   "resolved" "https://registry.npmjs.org/@types/graceful-fs/-/graceful-fs-4.1.5.tgz"
@@ -1719,6 +1839,13 @@
   "resolved" "https://registry.npmjs.org/@types/json5/-/json5-0.0.29.tgz"
   "version" "0.0.29"
 
+"@types/mapbox-gl@^1.6.1":
+  "integrity" "sha512-sv69WkijddNCIdLLyUsG90+X3Lh67a26lKsqaL8WbmXMkWITDrshe+sc9BI8oUV7sh+XD0jraI3qBe0NtJs7dw=="
+  "resolved" "https://registry.npmjs.org/@types/mapbox-gl/-/mapbox-gl-1.13.2.tgz"
+  "version" "1.13.2"
+  dependencies:
+    "@types/geojson" "*"
+
 "@types/mime@^1":
   "integrity" "sha512-YATxVxgRqNH6nHEIsvg6k2Boc1JHI9ZbH5iWFFv/MTkchz3b1ieGDa5T0a9RznNdI0KhVbdbWSN+KWWrQZRxTw=="
   "resolved" "https://registry.npmjs.org/@types/mime/-/mime-1.3.2.tgz"
@@ -1822,6 +1949,13 @@
   "resolved" "https://registry.npmjs.org/@types/stack-utils/-/stack-utils-2.0.1.tgz"
   "version" "2.0.1"
 
+"@types/supercluster@^5.0.1":
+  "integrity" "sha512-XMSqQEr7YDuNtFwSgaHHOjsbi0ZGL62V9Js4CW45RBuRYlNWSW/KDqN+RFFE7HdHcGhJPtN0klKvw06r9Kg7rg=="
+  "resolved" "https://registry.npmjs.org/@types/supercluster/-/supercluster-5.0.3.tgz"
+  "version" "5.0.3"
+  dependencies:
+    "@types/geojson" "*"
+
 "@types/testing-library__jest-dom@^5.9.1":
   "integrity" "sha512-vehbtyHUShPxIa9SioxDwCvgxukDMH//icJG90sXQBUm5lJOHLT5kNeU9tnivhnA/TkOFMzGIXN2cTc4hY8/kg=="
   "resolved" "https://registry.npmjs.org/@types/testing-library__jest-dom/-/testing-library__jest-dom-5.14.2.tgz"
@@ -3255,6 +3389,11 @@
     "source-map" "^0.6.1"
     "source-map-resolve" "^0.6.0"
 
+"csscolorparser@~1.0.3":
+  "integrity" "sha1-s085HupNqPPpgjHizNjfnAQfFxs="
+  "resolved" "https://registry.npmjs.org/csscolorparser/-/csscolorparser-1.0.3.tgz"
+  "version" "1.0.3"
+
 "cssdb@^5.0.0":
   "integrity" "sha512-Q7982SynYCtcLUBCPgUPFy2TZmDiFyimpdln8K2v4w2c07W4rXL7q5F1ksVAqOAQfxKyyUGCKSsioezKT5bU1Q=="
   "resolved" "https://registry.npmjs.org/cssdb/-/cssdb-5.0.0.tgz"
@@ -3426,6 +3565,11 @@
     "object-keys" "^1.1.1"
     "regexp.prototype.flags" "^1.2.0"
 
+"deep-equal@1.0.1":
+  "integrity" "sha1-9dJgKStmDghO/0zbyfCK0yR0SLU="
+  "resolved" "https://registry.npmjs.org/deep-equal/-/deep-equal-1.0.1.tgz"
+  "version" "1.0.1"
+
 "deep-is@^0.1.3", "deep-is@~0.1.3":
   "integrity" "sha512-oIPzksmTg4/MriiaYGO+okXDT7ztn/w3Eptv/+gSIdMdKsJo0u4CfYNFJPy+4SKMuCqGw2wxnA+URMg3t8a/bQ=="
   "resolved" "https://registry.npmjs.org/deep-is/-/deep-is-0.1.4.tgz"
@@ -3672,6 +3816,11 @@
   "resolved" "https://registry.npmjs.org/duplexer/-/duplexer-0.1.2.tgz"
   "version" "0.1.2"
 
+"earcut@^2.2.2":
+  "integrity" "sha512-iRDI1QeCQIhMCZk48DRDMVgQSSBDmbzzNhnxIo+pwx3swkfjMh6vh0nWLq1NdvGHLKH6wIrAM3vQWeTj6qeoug=="
+  "resolved" "https://registry.npmjs.org/earcut/-/earcut-2.2.3.tgz"
+  "version" "2.2.3"
+
 "ee-first@1.1.1":
   "integrity" "sha1-WQxhFWsK4vTwJVcyoViyZrxWsh0="
   "resolved" "https://registry.npmjs.org/ee-first/-/ee-first-1.1.1.tgz"
@@ -4457,6 +4606,19 @@
   "resolved" "https://registry.npmjs.org/gensync/-/gensync-1.0.0-beta.2.tgz"
   "version" "1.0.0-beta.2"
 
+"geojson-flatten@^1.0.4":
+  "integrity" "sha512-PpscUXxO6dvvhZxtwuqiI5v+1C/IQYPJRMWoQeaF2oohJgfGYSHKVAe8L+yUqF34PH/hmq9JlwmO+juPw+95/Q=="
+  "resolved" "https://registry.npmjs.org/geojson-flatten/-/geojson-flatten-1.0.4.tgz"
+  "version" "1.0.4"
+  dependencies:
+    "get-stdin" "^7.0.0"
+    "minimist" "^1.2.5"
+
+"geojson-vt@^3.2.1":
+  "integrity" "sha512-EvGQQi/zPrDA6zr6BnJD/YhwAkBP8nnJ9emh3EnHQKVMfg/MRVtPbMYdgVy/IaEmn4UfagD2a6fafPDL5hbtwg=="
+  "resolved" "https://registry.npmjs.org/geojson-vt/-/geojson-vt-3.2.1.tgz"
+  "version" "3.2.1"
+
 "get-caller-file@^2.0.5":
   "integrity" "sha512-DyFP3BM/3YHTQOCUL/w0OZHR0lpKeGrxotcHWcqNEdnltqFwXVfhEBQ94eIo34AfQpo0rGki4cyIiftY06h2Fg=="
   "resolved" "https://registry.npmjs.org/get-caller-file/-/get-caller-file-2.0.5.tgz"
@@ -4481,7 +4643,12 @@
   "resolved" "https://registry.npmjs.org/get-package-type/-/get-package-type-0.1.0.tgz"
   "version" "0.1.0"
 
-"get-stream@^6.0.0":
+"get-stdin@^7.0.0":
+  "integrity" "sha512-zRKcywvrXlXsA0v0i9Io4KDRaAw7+a1ZpjRwl9Wox8PFlVCCHra7E9c4kqXCoCM9nR5tBkaTTZRBoCm60bFqTQ=="
+  "resolved" "https://registry.npmjs.org/get-stdin/-/get-stdin-7.0.0.tgz"
+  "version" "7.0.0"
+
+"get-stream@^6.0.0", "get-stream@^6.0.1":
   "integrity" "sha512-ts6Wi+2j3jQjqi70w5AlN8DFnkSwC+MqmxEzdEALB2qXZYV3X/b1CTfgPLGJNMeAWxdPfU8FO1ms3NUfaHCPYg=="
   "resolved" "https://registry.npmjs.org/get-stream/-/get-stream-6.0.1.tgz"
   "version" "6.0.1"
@@ -4494,6 +4661,11 @@
     "call-bind" "^1.0.2"
     "get-intrinsic" "^1.1.1"
 
+"gl-matrix@^3.2.1":
+  "integrity" "sha512-wcCp8vu8FT22BnvKVPjXa/ICBWRq/zjFfdofZy1WSpQZpphblv12/bOQLBC1rMM7SGOFS9ltVmKOHil5+Ml7gA=="
+  "resolved" "https://registry.npmjs.org/gl-matrix/-/gl-matrix-3.4.3.tgz"
+  "version" "3.4.3"
+
 "glob-parent@^5.1.2":
   "integrity" "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow=="
   "resolved" "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz"
@@ -4584,6 +4756,11 @@
   "resolved" "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.8.tgz"
   "version" "4.2.8"
 
+"grid-index@^1.1.0":
+  "integrity" "sha512-HZRwumpOGUrHyxO5bqKZL0B0GlUpwtCAzZ42sgxUPniu33R1LSFH5yrIcBCHjkctCAh3mtWKcKd9J4vDDdeVHA=="
+  "resolved" "https://registry.npmjs.org/grid-index/-/grid-index-1.1.0.tgz"
+  "version" "1.1.0"
+
 "gzip-size@^6.0.0":
   "integrity" "sha512-ax7ZYomf6jqPTQ4+XCpUGyXKHk5WweS+e05MBO4/y3WJ5RkmPXNKvX+bx1behVILVwr6JSQvZAku021CHPXG3Q=="
   "resolved" "https://registry.npmjs.org/gzip-size/-/gzip-size-6.0.0.tgz"
@@ -4635,6 +4812,11 @@
   dependencies:
     "function-bind" "^1.1.1"
 
+"hat@0.0.3":
+  "integrity" "sha1-uwFKnmSzeIrtgAWRdBPU/z1QLYo="
+  "resolved" "https://registry.npmjs.org/hat/-/hat-0.0.3.tgz"
+  "version" "0.0.3"
+
 "he@^1.2.0":
   "integrity" "sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw=="
   "resolved" "https://registry.npmjs.org/he/-/he-1.2.0.tgz"
@@ -4831,7 +5013,7 @@
   dependencies:
     "harmony-reflect" "^1.4.6"
 
-"ieee754@^1.1.13":
+"ieee754@^1.1.12", "ieee754@^1.1.13":
   "integrity" "sha512-dcyqhDvX1C46lXZcVqCpK+FtMRQVdIMN6/Df5js2zouUsqG7I6sFxitIC+7KYK29KdXOLHdu9zL4sFnoVQnqaA=="
   "resolved" "https://registry.npmjs.org/ieee754/-/ieee754-1.2.1.tgz"
   "version" "1.2.1"
@@ -5810,6 +5992,11 @@
     "array-includes" "^3.1.3"
     "object.assign" "^4.1.2"
 
+"kdbush@^3.0.0":
+  "integrity" "sha512-hRkd6/XW4HTsA9vjVpY9tuXJYLSlelnkTmVFu4M9/7MIYQtFcHpbugAU7UbOfjOiVSVYl2fqgBuJ32JUmRo5Ew=="
+  "resolved" "https://registry.npmjs.org/kdbush/-/kdbush-3.0.0.tgz"
+  "version" "3.0.0"
+
 "kind-of@^6.0.2":
   "integrity" "sha512-dcS1ul+9tmeD95T+x28/ehLgd9mENa3LsvDTtzm3vyBEO7RPptvAD+t44WVXaUjTBRcrpFeFlC8WCruUR456hw=="
   "resolved" "https://registry.npmjs.org/kind-of/-/kind-of-6.0.3.tgz"
@@ -5931,6 +6118,11 @@
   "resolved" "https://registry.npmjs.org/lodash.debounce/-/lodash.debounce-4.0.8.tgz"
   "version" "4.0.8"
 
+"lodash.isequal@^4.5.0":
+  "integrity" "sha1-QVxEePK8wwEgwizhDtMib30+GOA="
+  "resolved" "https://registry.npmjs.org/lodash.isequal/-/lodash.isequal-4.5.0.tgz"
+  "version" "4.5.0"
+
 "lodash.memoize@^4.1.2":
   "integrity" "sha1-vMbEmkKihA7Zl/Mj6tpezRguC/4="
   "resolved" "https://registry.npmjs.org/lodash.memoize/-/lodash.memoize-4.1.2.tgz"
@@ -6021,6 +6213,45 @@
   dependencies:
     "tmpl" "1.0.5"
 
+"mapbox-gl@^1.10.1", "mapbox-gl@^1.12.0", "mapbox-gl@^1.13.1", "mapbox-gl@>=0.32.1 <2.0.0":
+  "integrity" "sha512-CPjtWygL+f7naL+sGHoC2JQR0DG7u+9ik6WdkjjVmz2uy0kBC2l+aKfdi3ZzUR7VKSQJ6Mc/CeCN+6iVNah+ww=="
+  "resolved" "https://registry.npmjs.org/mapbox-gl/-/mapbox-gl-1.13.2.tgz"
+  "version" "1.13.2"
+  dependencies:
+    "@mapbox/geojson-rewind" "^0.5.0"
+    "@mapbox/geojson-types" "^1.0.2"
+    "@mapbox/jsonlint-lines-primitives" "^2.0.2"
+    "@mapbox/mapbox-gl-supported" "^1.5.0"
+    "@mapbox/point-geometry" "^0.1.0"
+    "@mapbox/tiny-sdf" "^1.1.1"
+    "@mapbox/unitbezier" "^0.0.0"
+    "@mapbox/vector-tile" "^1.3.1"
+    "@mapbox/whoots-js" "^3.1.0"
+    "csscolorparser" "~1.0.3"
+    "earcut" "^2.2.2"
+    "geojson-vt" "^3.2.1"
+    "gl-matrix" "^3.2.1"
+    "grid-index" "^1.1.0"
+    "minimist" "^1.2.5"
+    "murmurhash-js" "^1.0.0"
+    "pbf" "^3.2.1"
+    "potpack" "^1.0.1"
+    "quickselect" "^2.0.0"
+    "rw" "^1.3.3"
+    "supercluster" "^7.1.0"
+    "tinyqueue" "^2.0.3"
+    "vt-pbf" "^3.1.1"
+
+"mapir-react-component@^2.0.1":
+  "integrity" "sha512-5ndyX06zNLVHAfTdowdfFV+VQOVvD+K6lF3hLGgZ1BJm8gAWxbJ/K5SLI4xWB0e1fvOk7iKVI6qdYp1YSlPOkA=="
+  "resolved" "https://registry.npmjs.org/mapir-react-component/-/mapir-react-component-2.0.1.tgz"
+  "version" "2.0.1"
+  dependencies:
+    "@mapbox/mapbox-gl-draw" "^1.3.0"
+    "mapbox-gl" "^1.13.1"
+    "react-mapbox-gl" "^5.1.1"
+    "react-mapbox-gl-draw" "^2.0.4"
+
 "mdn-data@2.0.14":
   "integrity" "sha512-dn6wd0uw5GsdswPFfsgMp5NSB0/aDe6fK94YJV/AJDYXL6HVLWBsxeq7js7Ad+mU2K9LAlwpk6kN2D5mwCPVow=="
   "resolved" "https://registry.npmjs.org/mdn-data/-/mdn-data-2.0.14.tgz"
@@ -6162,6 +6393,11 @@
     "dns-packet" "^1.3.1"
     "thunky" "^1.0.2"
 
+"murmurhash-js@^1.0.0":
+  "integrity" "sha1-sGJ44h/Gw3+lMTcysEEry2rhX1E="
+  "resolved" "https://registry.npmjs.org/murmurhash-js/-/murmurhash-js-1.0.0.tgz"
+  "version" "1.0.0"
+
 "mute-stream@0.0.8":
   "integrity" "sha512-nnbWWOkoWyUsTjKrhgD0dcz22mdkSnpYqbEjIm2nhwhuxlSkpywJmBo8h0ZqJdkp73mb90SssHkN4rsRaBAfAA=="
   "resolved" "https://registry.npmjs.org/mute-stream/-/mute-stream-0.0.8.tgz"
@@ -6576,6 +6812,14 @@
   "resolved" "https://registry.npmjs.org/path-type/-/path-type-4.0.0.tgz"
   "version" "4.0.0"
 
+"pbf@^3.2.1":
+  "integrity" "sha512-ClrV7pNOn7rtmoQVF4TS1vyU0WhYRnP92fzbfF75jAIwpnzdJXf8iTd4CMEqO4yUenH6NDqLiwjqlh6QgZzgLQ=="
+  "resolved" "https://registry.npmjs.org/pbf/-/pbf-3.2.1.tgz"
+  "version" "3.2.1"
+  dependencies:
+    "ieee754" "^1.1.12"
+    "resolve-protobuf-schema" "^2.1.0"
+
 "performance-now@^2.1.0":
   "integrity" "sha1-Ywn04OX6kT7BxpMHrjZLSzd8nns="
   "resolved" "https://registry.npmjs.org/performance-now/-/performance-now-2.1.0.tgz"
@@ -7154,6 +7398,11 @@
     "picocolors" "^0.2.1"
     "source-map" "^0.6.1"
 
+"potpack@^1.0.1":
+  "integrity" "sha512-choctRBIV9EMT9WGAZHn3V7t0Z2pMQyl0EZE6pFc/6ml3ssw7Dlf/oAOvFwjm1HVsqfQN8GfeFyJ+d8tRzqueQ=="
+  "resolved" "https://registry.npmjs.org/potpack/-/potpack-1.0.2.tgz"
+  "version" "1.0.2"
+
 "prelude-ls@^1.2.1":
   "integrity" "sha512-vkcDPrRZo1QZLbn5RLGPpg/WmIQ65qoWWhcGKf/b5eplkkarX0m9z8ppCat4mlOqUsWpyNuYgO3VRyrYHSzX5g=="
   "resolved" "https://registry.npmjs.org/prelude-ls/-/prelude-ls-1.2.1.tgz"
@@ -7212,7 +7461,7 @@
     "kleur" "^3.0.3"
     "sisteransi" "^1.0.5"
 
-"prop-types@^15.7.2":
+"prop-types@^15.6.2", "prop-types@^15.7.2":
   "integrity" "sha512-fDGekdaHh65eI3lMi5OnErU6a8Ighg2KjcjQxO7m8VHyWjcPyj5kiOgV1LQDOOOgVy3+5FgjXvdSSX7B8/5/4g=="
   "resolved" "https://registry.npmjs.org/prop-types/-/prop-types-15.8.0.tgz"
   "version" "15.8.0"
@@ -7221,6 +7470,11 @@
     "object-assign" "^4.1.1"
     "react-is" "^16.13.1"
 
+"protocol-buffers-schema@^3.3.1":
+  "integrity" "sha512-TdDRD+/QNdrCGCE7v8340QyuXd4kIWIgapsE2+n/SaGiSSbomYl4TjHlvIoCWRpE7wFt02EpB35VVA2ImcBVqw=="
+  "resolved" "https://registry.npmjs.org/protocol-buffers-schema/-/protocol-buffers-schema-3.6.0.tgz"
+  "version" "3.6.0"
+
 "proxy-addr@~2.0.7":
   "integrity" "sha512-llQsMLSUDUPT44jdrU/O37qlnifitDP+ZwrmmZcoSKyLKvtZxpyV0n2/bD/N4tBAAZ/gJEdZU7KMraoK1+XYAg=="
   "resolved" "https://registry.npmjs.org/proxy-addr/-/proxy-addr-2.0.7.tgz"
@@ -7259,6 +7513,11 @@
   "resolved" "https://registry.npmjs.org/quick-lru/-/quick-lru-5.1.1.tgz"
   "version" "5.1.1"
 
+"quickselect@^2.0.0":
+  "integrity" "sha512-RKJ22hX8mHe3Y6wH/N3wCM6BWtjaxIyyUIkpHOvfFnxdI4yD4tBXEBKSbriGujF6jnSVkJrffuo6vxACiSSxIw=="
+  "resolved" "https://registry.npmjs.org/quickselect/-/quickselect-2.0.0.tgz"
+  "version" "2.0.0"
+
 "raf@^3.4.1":
   "integrity" "sha512-Sq4CW4QhwOHE8ucn6J34MqtZCeWFP2aQSmrlroYgqAV1PjStIhJXxYuTgUIfkEk7zTLjmIjLmU5q+fbD1NnOJA=="
   "resolved" "https://registry.npmjs.org/raf/-/raf-3.4.1.tgz"
@@ -7330,7 +7589,7 @@
     "strip-ansi" "^6.0.1"
     "text-table" "^0.2.0"
 
-"react-dom@*", "react-dom@^0.14.0 || ^15.0.1 || ^16.0.0 || ^17.0.0", "react-dom@^17.0.2", "react-dom@>=16", "react-dom@>=16.8":
+"react-dom@*", "react-dom@^0.14.0 || ^15.0.1 || ^16.0.0 || ^17.0.0", "react-dom@^16.11.0", "react-dom@^17.0.2", "react-dom@>=16", "react-dom@>=16.8":
   "integrity" "sha512-s4h96KtLDUQlsENhMn1ar8t2bEa+q/YAtj8pPPdIjPDGBDIVNsrD9aXNWqspUe6AzKCIG0C1HZZLqLV7qpOBGA=="
   "resolved" "https://registry.npmjs.org/react-dom/-/react-dom-17.0.2.tgz"
   "version" "17.0.2"
@@ -7373,6 +7632,33 @@
   "resolved" "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz"
   "version" "17.0.2"
 
+"react-mapbox-gl-draw@^2.0.4":
+  "integrity" "sha512-oaBdIlyu+g7PhLUvwnCsl/wvu+5tGB9I3RLjcrYLt6U1sUMzQJqplKtVxXRv9TZqRdNaAU5qNOP+dRs55QKjsA=="
+  "resolved" "https://registry.npmjs.org/react-mapbox-gl-draw/-/react-mapbox-gl-draw-2.0.4.tgz"
+  "version" "2.0.4"
+
+"react-mapbox-gl@^4.8.1":
+  "integrity" "sha512-e6rJ4GFye2AIu10I0a0OfleIWYkigIMIysoSKCA4Wg5YHa52JRHq2F3x0c0cnhqfz1txnUhXUbkx2qqs8B6kKQ=="
+  "resolved" "https://registry.npmjs.org/react-mapbox-gl/-/react-mapbox-gl-4.8.6.tgz"
+  "version" "4.8.6"
+  dependencies:
+    "@turf/bbox" "4.7.3"
+    "@turf/helpers" "4.7.3"
+    "@types/supercluster" "^5.0.1"
+    "deep-equal" "1.0.1"
+    "supercluster" "^7.0.0"
+
+"react-mapbox-gl@^5.1.1":
+  "integrity" "sha512-8vGldFQf7pW8T5ZV2OOhwXoaBvfigB2F7dnhzaZ/bD5/KJzP9zprMbn0xMX95W3eqbKzGGHnwyD5DyTTwR6wGw=="
+  "resolved" "https://registry.npmjs.org/react-mapbox-gl/-/react-mapbox-gl-5.1.1.tgz"
+  "version" "5.1.1"
+  dependencies:
+    "@turf/bbox" "4.7.3"
+    "@turf/helpers" "4.7.3"
+    "@types/supercluster" "^5.0.1"
+    "deep-equal" "1.0.1"
+    "supercluster" "^7.0.0"
+
 "react-redux@^7.2.6":
   "integrity" "sha512-10RPdsz0UUrRL1NZE0ejTkucnclYSgXp5q+tB5SWx2qeG2ZJQJyymgAhwKy73yiL/13btfB6fPr+rgbMAaZIAQ=="
   "resolved" "https://registry.npmjs.org/react-redux/-/react-redux-7.2.6.tgz"
@@ -7475,7 +7761,7 @@
   dependencies:
     "clsx" "^1.1.1"
 
-"react@*", "react@^0.14.0 || ^15.0.1 || ^16.0.0 || ^17.0.0", "react@^16.8.3 || ^17", "react@^17.0.2", "react@>= 16", "react@>= 16.8", "react@>=16", "react@>=16.8", "react@17.0.2":
+"react@*", "react@^0.14.0 || ^15.0.1 || ^16.0.0 || ^17.0.0", "react@^16.11.0", "react@^16.8.3 || ^17", "react@^17.0.2", "react@>= 16", "react@>= 16.8", "react@>=16", "react@>=16.8", "react@17.0.2":
   "integrity" "sha512-gnhPt75i/dq/z3/6q/0asP78D0u592D5L1pd7M8P+dck6Fu/jJeL6iVVK23fptSUZj8Vjf++7wXA8UNclGQcbA=="
   "resolved" "https://registry.npmjs.org/react/-/react-17.0.2.tgz"
   "version" "17.0.2"
@@ -7663,6 +7949,13 @@
   "resolved" "https://registry.npmjs.org/resolve-from/-/resolve-from-5.0.0.tgz"
   "version" "5.0.0"
 
+"resolve-protobuf-schema@^2.1.0":
+  "integrity" "sha512-kI5ffTiZWmJaS/huM8wZfEMer1eRd7oJQhDuxeCLe3t7N7mX3z94CN0xPxBQxFYQTSNz9T0i+v6inKqSdK8xrQ=="
+  "resolved" "https://registry.npmjs.org/resolve-protobuf-schema/-/resolve-protobuf-schema-2.1.0.tgz"
+  "version" "2.1.0"
+  dependencies:
+    "protocol-buffers-schema" "^3.3.1"
+
 "resolve-url-loader@^4.0.0":
   "integrity" "sha512-05VEMczVREcbtT7Bz+C+96eUO5HDNvdthIiMB34t7FcF8ehcu4wC0sSgPUubs3XW2Q3CNLJk/BJrCU9wVRymiA=="
   "resolved" "https://registry.npmjs.org/resolve-url-loader/-/resolve-url-loader-4.0.0.tgz"
@@ -7749,6 +8042,16 @@
   dependencies:
     "queue-microtask" "^1.2.2"
 
+"rw@^1.3.3":
+  "integrity" "sha1-P4Yt+pGrdmsUiF700BEkv9oHT7Q="
+  "resolved" "https://registry.npmjs.org/rw/-/rw-1.3.3.tgz"
+  "version" "1.3.3"
+
+"rw@~0.1.4":
+  "integrity" "sha1-SQPL2AJIrg7eaFv1j9I2p6mymj4="
+  "resolved" "https://registry.npmjs.org/rw/-/rw-0.1.4.tgz"
+  "version" "0.1.4"
+
 "rxjs@^7.2.0":
   "integrity" "sha512-PwDt186XaL3QN5qXj/H9DGyHhP3/RYYgZZwqBv9Tv8rsAaiwFH1IsJJlcgD37J7UW5a6O67qX0KWKS3/pu0m4w=="
   "resolved" "https://registry.npmjs.org/rxjs/-/rxjs-7.5.2.tgz"
@@ -8311,6 +8614,13 @@
     "browserslist" "^4.16.0"
     "postcss-selector-parser" "^6.0.4"
 
+"supercluster@^7.0.0", "supercluster@^7.1.0":
+  "integrity" "sha512-GhKkRM1jMR6WUwGPw05fs66pOFWhf59lXq+Q3J3SxPvhNcmgOtLRV6aVQPMRsmXdpaeFJGivt+t7QXUPL3ff4g=="
+  "resolved" "https://registry.npmjs.org/supercluster/-/supercluster-7.1.4.tgz"
+  "version" "7.1.4"
+  dependencies:
+    "kdbush" "^3.0.0"
+
 "supports-color@^5.3.0":
   "integrity" "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow=="
   "resolved" "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz"
@@ -8503,6 +8813,11 @@
   "resolved" "https://registry.npmjs.org/timsort/-/timsort-0.3.0.tgz"
   "version" "0.3.0"
 
+"tinyqueue@^2.0.3":
+  "integrity" "sha512-ppJZNDuKGgxzkHihX8v9v9G5f+18gzaTfrukGrq6ueg0lmH4nqVnA2IPG0AEH3jKEk2GRJCUhDoqpoiw3PHLBA=="
+  "resolved" "https://registry.npmjs.org/tinyqueue/-/tinyqueue-2.0.3.tgz"
+  "version" "2.0.3"
+
 "tmp@^0.0.33":
   "integrity" "sha512-jRCJlojKnZ3addtTOjdIqoRuPEKBvNXcGYqzO6zWZX8KfKEpnGY5jfggJQ3EjKuu8D4bJRr0y+cYJFmYbImXGw=="
   "resolved" "https://registry.npmjs.org/tmp/-/tmp-0.0.33.tgz"
@@ -8562,6 +8877,11 @@
   dependencies:
     "punycode" "^2.1.1"
 
+"traverse@~0.6.6":
+  "integrity" "sha1-y99WD9e5r2MlAv7UD5GMFX6pcTc="
+  "resolved" "https://registry.npmjs.org/traverse/-/traverse-0.6.6.tgz"
+  "version" "0.6.6"
+
 "tryer@^1.0.1":
   "integrity" "sha512-c3zayb8/kWWpycWYg87P71E1S1ZL6b6IJxfb5fvsUgsf0S2MVGaDhDXXjDMpdCpfWXqptc+4mXwmiy1ypXqRAA=="
   "resolved" "https://registry.npmjs.org/tryer/-/tryer-1.0.1.tgz"
@@ -8769,6 +9089,15 @@
   "resolved" "https://registry.npmjs.org/vary/-/vary-1.1.2.tgz"
   "version" "1.1.2"
 
+"vt-pbf@^3.1.1":
+  "integrity" "sha512-2LzDFzt0mZKZ9IpVF2r69G9bXaP2Q2sArJCmcCgvfTdCCZzSyz4aCLoQyUilu37Ll56tCblIZrXFIjNUpGIlmA=="
+  "resolved" "https://registry.npmjs.org/vt-pbf/-/vt-pbf-3.1.3.tgz"
+  "version" "3.1.3"
+  dependencies:
+    "@mapbox/point-geometry" "0.1.0"
+    "@mapbox/vector-tile" "^1.3.1"
+    "pbf" "^3.2.1"
+
 "w3c-hr-time@^1.0.2":
   "integrity" "sha512-z8P5DvDNjKDoFIHK7q8r8lackT6l+jo/Ye3HOle7l9nICP9lf1Ci25fy9vHd0JOWewkIFzXIEig3TdKT7JQ5fQ=="
   "resolved" "https://registry.npmjs.org/w3c-hr-time/-/w3c-hr-time-1.0.2.tgz"
@@ -8951,6 +9280,11 @@
   "resolved" "https://registry.npmjs.org/websocket-extensions/-/websocket-extensions-0.1.4.tgz"
   "version" "0.1.4"
 
+"wgs84@0.0.0":
+  "integrity" "sha1-NP3FVZF7blfPKigu0ENxDASc3HY="
+  "resolved" "https://registry.npmjs.org/wgs84/-/wgs84-0.0.0.tgz"
+  "version" "0.0.0"
+
 "whatwg-encoding@^1.0.5":
   "integrity" "sha512-b5lim54JOPN9HtzvK9HFXvBma/rnfFeqsic0hSpjtDbVxR3dJKLc+KB4V6GgiGOvl7CY/KNh8rxSo9DKQrnUEw=="
   "resolved" "https://registry.npmjs.org/whatwg-encoding/-/whatwg-encoding-1.0.5.tgz"