diff --git a/jsconfig.json b/jsconfig.json
new file mode 100644
index 0000000..458cf9b
--- /dev/null
+++ b/jsconfig.json
@@ -0,0 +1,14 @@
+{
+    "compilerOptions": {
+        "module": "ESNext",
+        "moduleResolution": "Node",
+        "target": "ES2020",
+        "jsx": "react",
+        "strictNullChecks": true,
+        "strictFunctionTypes": true
+    },
+    "exclude": [
+        "node_modules",
+        "**/node_modules/*"
+    ]
+}
\ No newline at end of file
diff --git a/package-lock.json b/package-lock.json
index 797dc2a..3380c9d 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -8,15 +8,23 @@
       "name": "react-esri",
       "version": "0.1.0",
       "dependencies": {
+        "@arcgis/core": "^4.24.7",
         "@testing-library/jest-dom": "^5.16.5",
         "@testing-library/react": "^13.4.0",
         "@testing-library/user-event": "^13.5.0",
+        "arcgis-js-api": "^4.24.7",
+        "esri-loader": "^3.6.0",
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
         "react-scripts": "5.0.1",
         "web-vitals": "^2.1.4"
       }
     },
+    "node_modules/@a11y/focus-trap": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/@a11y/focus-trap/-/focus-trap-1.0.5.tgz",
+      "integrity": "sha512-3JOd6g+BALysWS8LNf0qdB8ltR651H/RCLAvUmfS0LIHwHO579XfjZUIZbURYiAZrcbp1CBAq4QZ2YwKNQZ1hw=="
+    },
     "node_modules/@adobe/css-tools": {
       "version": "4.0.1",
       "resolved": "https://registry.npmjs.org/@adobe/css-tools/-/css-tools-4.0.1.tgz",
@@ -34,6 +42,20 @@
         "node": ">=6.0.0"
       }
     },
+    "node_modules/@arcgis/core": {
+      "version": "4.24.7",
+      "resolved": "https://registry.npmjs.org/@arcgis/core/-/core-4.24.7.tgz",
+      "integrity": "sha512-uDkF4/3zOOFDzFEXxAaENhtz7hhkmOw71R96rfVPjqIfRxd2HxgrpNlrjXI8xYC2ub8rRpBZ6WmxlvaCn/zu7Q==",
+      "dependencies": {
+        "@esri/arcgis-html-sanitizer": "~2.10.0",
+        "@esri/calcite-colors": "~6.0.1",
+        "@esri/calcite-components": "1.0.0-beta.82",
+        "@popperjs/core": "~2.11.5",
+        "focus-trap": "~6.9.4",
+        "luxon": "~2.4.0",
+        "sortablejs": "~1.15.0"
+      }
+    },
     "node_modules/@babel/code-frame": {
       "version": "7.18.6",
       "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.18.6.tgz",
@@ -2198,6 +2220,44 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/@esri/arcgis-html-sanitizer": {
+      "version": "2.10.0",
+      "resolved": "https://registry.npmjs.org/@esri/arcgis-html-sanitizer/-/arcgis-html-sanitizer-2.10.0.tgz",
+      "integrity": "sha512-OGrczx3sbszMVQESGdZf2BaZL/oGMm+wuFgF6od50ff0WThjiJDTxi5SXIleRF6QQVFywsab3sFbQ77Q/gSzsg==",
+      "dependencies": {
+        "lodash.isplainobject": "^4.0.6",
+        "xss": "^1.0.11"
+      }
+    },
+    "node_modules/@esri/calcite-colors": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/@esri/calcite-colors/-/calcite-colors-6.0.1.tgz",
+      "integrity": "sha512-iGUIIpeMCJSTDGw4ZsxLwwxkml0QzOUJTtysjRryGbhSt183NEtwWKS+yQO19utXQz5LbQWjoav6x6CsawElkw=="
+    },
+    "node_modules/@esri/calcite-components": {
+      "version": "1.0.0-beta.82",
+      "resolved": "https://registry.npmjs.org/@esri/calcite-components/-/calcite-components-1.0.0-beta.82.tgz",
+      "integrity": "sha512-wAJeEZ4g/TiJ4J6z/GO9YQFSFubQERCWEo71jr2xLmegxEQIYHL3AvJaLmp0IBsr2tVzRG1TN2PVuew4ljp8WA==",
+      "dependencies": {
+        "@a11y/focus-trap": "1.0.5",
+        "@popperjs/core": "2.11.5",
+        "@stencil/core": "2.15.1",
+        "@types/color": "3.0.3",
+        "color": "4.2.3",
+        "form-request-submit-polyfill": "2.0.0",
+        "lodash-es": "4.17.21",
+        "sortablejs": "1.15.0"
+      }
+    },
+    "node_modules/@esri/calcite-components/node_modules/@popperjs/core": {
+      "version": "2.11.5",
+      "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.5.tgz",
+      "integrity": "sha512-9X2obfABZuDVLCgPK9aX0a/x4jaOEweTTWE2+9sr0Qqqevj2Uv5XorvusThmc9XGYpS9yI+fhh8RTafBtGposw==",
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/popperjs"
+      }
+    },
     "node_modules/@humanwhocodes/config-array": {
       "version": "0.10.5",
       "resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.10.5.tgz",
@@ -3097,6 +3157,15 @@
         }
       }
     },
+    "node_modules/@popperjs/core": {
+      "version": "2.11.6",
+      "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.6.tgz",
+      "integrity": "sha512-50/17A98tWUfQ176raKiOGXuYpLyyVMkxxG6oylzL3BPOlA6ADGdK7EYunSa4I064xerltq9TGXs8HmOk5E+vw==",
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/popperjs"
+      }
+    },
     "node_modules/@rollup/plugin-babel": {
       "version": "5.3.1",
       "resolved": "https://registry.npmjs.org/@rollup/plugin-babel/-/plugin-babel-5.3.1.tgz",
@@ -3197,6 +3266,18 @@
         "@sinonjs/commons": "^1.7.0"
       }
     },
+    "node_modules/@stencil/core": {
+      "version": "2.15.1",
+      "resolved": "https://registry.npmjs.org/@stencil/core/-/core-2.15.1.tgz",
+      "integrity": "sha512-NYjRwQnjzscyFfqK+iIwRdr/dgYn33u6KE7kyQWdi7xsCkqMHalXYgJlN/QBQ9PN3qXmXKeBrJNG8EkNdCbK5g==",
+      "bin": {
+        "stencil": "bin/stencil"
+      },
+      "engines": {
+        "node": ">=12.10.0",
+        "npm": ">=6.0.0"
+      }
+    },
     "node_modules/@surma/rollup-plugin-off-main-thread": {
       "version": "2.2.3",
       "resolved": "https://registry.npmjs.org/@surma/rollup-plugin-off-main-thread/-/rollup-plugin-off-main-thread-2.2.3.tgz",
@@ -3702,6 +3783,27 @@
         "@types/node": "*"
       }
     },
+    "node_modules/@types/color": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/@types/color/-/color-3.0.3.tgz",
+      "integrity": "sha512-X//qzJ3d3Zj82J9sC/C18ZY5f43utPbAJ6PhYt/M7uG6etcF6MRpKdN880KBy43B0BMzSfeT96MzrsNjFI3GbA==",
+      "dependencies": {
+        "@types/color-convert": "*"
+      }
+    },
+    "node_modules/@types/color-convert": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/@types/color-convert/-/color-convert-2.0.0.tgz",
+      "integrity": "sha512-m7GG7IKKGuJUXvkZ1qqG3ChccdIM/qBBo913z+Xft0nKCX4hAU/IxKwZBU4cpRZ7GS5kV4vOblUkILtSShCPXQ==",
+      "dependencies": {
+        "@types/color-name": "*"
+      }
+    },
+    "node_modules/@types/color-name": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/@types/color-name/-/color-name-1.1.1.tgz",
+      "integrity": "sha512-rr+OQyAjxze7GgWrSaJwydHStIhHq2lvY3BOC2Mj7KnzI7XK0Uw1TOOdI9lDoajEbSWLiYgoo4f1R51erQfhPQ=="
+    },
     "node_modules/@types/connect": {
       "version": "3.4.35",
       "resolved": "https://registry.npmjs.org/@types/connect/-/connect-3.4.35.tgz",
@@ -4780,6 +4882,11 @@
         "node": ">= 8"
       }
     },
+    "node_modules/arcgis-js-api": {
+      "version": "4.24.7",
+      "resolved": "https://registry.npmjs.org/arcgis-js-api/-/arcgis-js-api-4.24.7.tgz",
+      "integrity": "sha512-cdBUQBdCOI4bqFwzk86ndjVivAeRH6qt9LF35caDl5es1Kj6eB4QdsQ+vUXcGBQHob6+u9NcXqJ5gKmvVEeyfg=="
+    },
     "node_modules/arg": {
       "version": "5.0.2",
       "resolved": "https://registry.npmjs.org/arg/-/arg-5.0.2.tgz",
@@ -5668,6 +5775,18 @@
       "resolved": "https://registry.npmjs.org/collect-v8-coverage/-/collect-v8-coverage-1.0.1.tgz",
       "integrity": "sha512-iBPtljfCNcTKNAto0KEtDfZ3qzjJvqE3aTGZsbhjSBlorqpXJlaWWtPO35D+ZImoC3KWejX64o+yPGxhWSTzfg=="
     },
+    "node_modules/color": {
+      "version": "4.2.3",
+      "resolved": "https://registry.npmjs.org/color/-/color-4.2.3.tgz",
+      "integrity": "sha512-1rXeuUUiGGrykh+CeBdu5Ie7OJwinCgQY0bc7GCRxy5xVHy+moaqkpL/jqQq0MtQOeYcrqEz4abc5f0KtU7W4A==",
+      "dependencies": {
+        "color-convert": "^2.0.1",
+        "color-string": "^1.9.0"
+      },
+      "engines": {
+        "node": ">=12.5.0"
+      }
+    },
     "node_modules/color-convert": {
       "version": "1.9.3",
       "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz",
@@ -5681,6 +5800,31 @@
       "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.3.tgz",
       "integrity": "sha512-72fSenhMw2HZMTVHeCA9KCmpEIbzWiQsjN+BHcBbS9vr1mtt+vJjPdksIBNUmKAW8TFUDPJK5SUU3QhE9NEXDw=="
     },
+    "node_modules/color-string": {
+      "version": "1.9.1",
+      "resolved": "https://registry.npmjs.org/color-string/-/color-string-1.9.1.tgz",
+      "integrity": "sha512-shrVawQFojnZv6xM40anx4CkoDP+fZsw/ZerEMsW/pyzsRbElpsL/DBVW7q3ExxwusdNXI3lXpuhEZkzs8p5Eg==",
+      "dependencies": {
+        "color-name": "^1.0.0",
+        "simple-swizzle": "^0.2.2"
+      }
+    },
+    "node_modules/color/node_modules/color-convert": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
+      "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
+      "dependencies": {
+        "color-name": "~1.1.4"
+      },
+      "engines": {
+        "node": ">=7.0.0"
+      }
+    },
+    "node_modules/color/node_modules/color-name": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
+      "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA=="
+    },
     "node_modules/colord": {
       "version": "2.9.3",
       "resolved": "https://registry.npmjs.org/colord/-/colord-2.9.3.tgz",
@@ -6173,6 +6317,11 @@
         "node": ">=4"
       }
     },
+    "node_modules/cssfilter": {
+      "version": "0.0.10",
+      "resolved": "https://registry.npmjs.org/cssfilter/-/cssfilter-0.0.10.tgz",
+      "integrity": "sha512-FAaLDaplstoRsDR8XGYH51znUN0UY7nMc6Z9/fvE8EXGwvJE9hu7W2vHwx1+bd6gCYnln9nLbzxFTrcO9YQDZw=="
+    },
     "node_modules/cssnano": {
       "version": "5.1.13",
       "resolved": "https://registry.npmjs.org/cssnano/-/cssnano-5.1.13.tgz",
@@ -7567,6 +7716,11 @@
         "node": ">=4.0"
       }
     },
+    "node_modules/esri-loader": {
+      "version": "3.6.0",
+      "resolved": "https://registry.npmjs.org/esri-loader/-/esri-loader-3.6.0.tgz",
+      "integrity": "sha512-hvFnBLcHDVcymOXTg2IxptPAxDKq1lOQjO1bFlaJTZxmruvGR+41HjW12BgemPhiEBrH782q2nFuUytwWPVAMg=="
+    },
     "node_modules/estraverse": {
       "version": "5.3.0",
       "resolved": "https://registry.npmjs.org/estraverse/-/estraverse-5.3.0.tgz",
@@ -7953,6 +8107,14 @@
       "resolved": "https://registry.npmjs.org/flatted/-/flatted-3.2.7.tgz",
       "integrity": "sha512-5nqDSxl8nn5BSNxyR3n4I6eDmbolI6WT+QqR547RwxQapgjQBmtktdP+HTBb/a/zLsbzERTONyUB5pefh5TtjQ=="
     },
+    "node_modules/focus-trap": {
+      "version": "6.9.4",
+      "resolved": "https://registry.npmjs.org/focus-trap/-/focus-trap-6.9.4.tgz",
+      "integrity": "sha512-v2NTsZe2FF59Y+sDykKY+XjqZ0cPfhq/hikWVL88BqLivnNiEffAsac6rP6H45ff9wG9LL5ToiDqrLEP9GX9mw==",
+      "dependencies": {
+        "tabbable": "^5.3.3"
+      }
+    },
     "node_modules/follow-redirects": {
       "version": "1.15.2",
       "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.2.tgz",
@@ -8141,6 +8303,11 @@
         "node": ">= 6"
       }
     },
+    "node_modules/form-request-submit-polyfill": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/form-request-submit-polyfill/-/form-request-submit-polyfill-2.0.0.tgz",
+      "integrity": "sha512-p0+M92y2gFnP0AuuL8VJ0GYVzAT0bYp3GsSkmPFhvUopdnfDLP/9xplQTBBc4w8qOjKRzdK7GaFcdL9IhlXdTQ=="
+    },
     "node_modules/forwarded": {
       "version": "0.2.0",
       "resolved": "https://registry.npmjs.org/forwarded/-/forwarded-0.2.0.tgz",
@@ -11484,11 +11651,21 @@
       "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz",
       "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg=="
     },
+    "node_modules/lodash-es": {
+      "version": "4.17.21",
+      "resolved": "https://registry.npmjs.org/lodash-es/-/lodash-es-4.17.21.tgz",
+      "integrity": "sha512-mKnC+QJ9pWVzv+C4/U3rRsHapFfHvQFoFB92e52xeyGMcX6/OlIl78je1u8vePzYZSkkogMPJ2yjxxsb89cxyw=="
+    },
     "node_modules/lodash.debounce": {
       "version": "4.0.8",
       "resolved": "https://registry.npmjs.org/lodash.debounce/-/lodash.debounce-4.0.8.tgz",
       "integrity": "sha512-FT1yDzDYEoYWhnSGnpE/4Kj1fLZkDFyqRb7fNt6FdYOSxlUWAtp42Eh6Wb0rGIv/m9Bgo7x4GhQbm5Ys4SG5ow=="
     },
+    "node_modules/lodash.isplainobject": {
+      "version": "4.0.6",
+      "resolved": "https://registry.npmjs.org/lodash.isplainobject/-/lodash.isplainobject-4.0.6.tgz",
+      "integrity": "sha512-oSXzaWypCMHkPC3NvBEaPHf0KsA5mvPrOPgQWDsbg8n7orZ290M0BmC/jgRZ4vcJ6DTAhjrsSYgdsW/F+MFOBA=="
+    },
     "node_modules/lodash.memoize": {
       "version": "4.1.2",
       "resolved": "https://registry.npmjs.org/lodash.memoize/-/lodash.memoize-4.1.2.tgz",
@@ -11539,6 +11716,14 @@
         "node": ">=10"
       }
     },
+    "node_modules/luxon": {
+      "version": "2.4.0",
+      "resolved": "https://registry.npmjs.org/luxon/-/luxon-2.4.0.tgz",
+      "integrity": "sha512-w+NAwWOUL5hO0SgwOHsMBAmZ15SoknmQXhSO0hIbJCAmPKSsGeK8MlmhYh2w6Iib38IxN2M+/ooXWLbeis7GuA==",
+      "engines": {
+        "node": ">=12"
+      }
+    },
     "node_modules/lz-string": {
       "version": "1.4.4",
       "resolved": "https://registry.npmjs.org/lz-string/-/lz-string-1.4.4.tgz",
@@ -14826,6 +15011,19 @@
       "resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-3.0.7.tgz",
       "integrity": "sha512-wnD2ZE+l+SPC/uoS0vXeE9L1+0wuaMqKlfz9AMUo38JsyLSBWSFcHR1Rri62LZc12vLr1gb3jl7iwQhgwpAbGQ=="
     },
+    "node_modules/simple-swizzle": {
+      "version": "0.2.2",
+      "resolved": "https://registry.npmjs.org/simple-swizzle/-/simple-swizzle-0.2.2.tgz",
+      "integrity": "sha512-JA//kQgZtbuY83m+xT+tXJkmJncGMTFT+C+g2h2R9uxkYIrE2yy9sgmcLhCnw57/WSD+Eh3J97FPEDFnbXnDUg==",
+      "dependencies": {
+        "is-arrayish": "^0.3.1"
+      }
+    },
+    "node_modules/simple-swizzle/node_modules/is-arrayish": {
+      "version": "0.3.2",
+      "resolved": "https://registry.npmjs.org/is-arrayish/-/is-arrayish-0.3.2.tgz",
+      "integrity": "sha512-eVRqCvVlZbuw3GrM63ovNSNAeA1K16kaR/LRY/92w0zxQ5/1YzwblUX652i4Xs9RwAGjW9d9y6X88t8OaAJfWQ=="
+    },
     "node_modules/sisteransi": {
       "version": "1.0.5",
       "resolved": "https://registry.npmjs.org/sisteransi/-/sisteransi-1.0.5.tgz",
@@ -14849,6 +15047,11 @@
         "websocket-driver": "^0.7.4"
       }
     },
+    "node_modules/sortablejs": {
+      "version": "1.15.0",
+      "resolved": "https://registry.npmjs.org/sortablejs/-/sortablejs-1.15.0.tgz",
+      "integrity": "sha512-bv9qgVMjUMf89wAvM6AxVvS/4MX3sPeN0+agqShejLU5z5GX4C75ow1O2e5k4L6XItUyAK3gH6AxSbXrOM5e8w=="
+    },
     "node_modules/source-list-map": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/source-list-map/-/source-list-map-2.0.1.tgz",
@@ -15332,6 +15535,11 @@
       "resolved": "https://registry.npmjs.org/symbol-tree/-/symbol-tree-3.2.4.tgz",
       "integrity": "sha512-9QNk5KwDF+Bvz+PyObkmSYjI5ksVUYtjW7AU22r2NKcfLJcXp96hkDWU3+XndOsUb+AQ9QhfzfCT2O+CNWT5Tw=="
     },
+    "node_modules/tabbable": {
+      "version": "5.3.3",
+      "resolved": "https://registry.npmjs.org/tabbable/-/tabbable-5.3.3.tgz",
+      "integrity": "sha512-QD9qKY3StfbZqWOPLp0++pOrAVb/HbUi5xCc8cUo4XjP19808oaMiDzn0leBY5mCespIBM0CIZePzZjgzR83kA=="
+    },
     "node_modules/tailwindcss": {
       "version": "3.1.8",
       "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.1.8.tgz",
@@ -16753,6 +16961,26 @@
       "resolved": "https://registry.npmjs.org/xmlchars/-/xmlchars-2.2.0.tgz",
       "integrity": "sha512-JZnDKK8B0RCDw84FNdDAIpZK+JuJw+s7Lz8nksI7SIuU3UXJJslUthsi+uWBUYOwPFwW7W7PRLRfUKpxjtjFCw=="
     },
+    "node_modules/xss": {
+      "version": "1.0.14",
+      "resolved": "https://registry.npmjs.org/xss/-/xss-1.0.14.tgz",
+      "integrity": "sha512-og7TEJhXvn1a7kzZGQ7ETjdQVS2UfZyTlsEdDOqvQF7GoxNfY+0YLCzBy1kPdsDDx4QuNAonQPddpsn6Xl/7sw==",
+      "dependencies": {
+        "commander": "^2.20.3",
+        "cssfilter": "0.0.10"
+      },
+      "bin": {
+        "xss": "bin/xss"
+      },
+      "engines": {
+        "node": ">= 0.10.0"
+      }
+    },
+    "node_modules/xss/node_modules/commander": {
+      "version": "2.20.3",
+      "resolved": "https://registry.npmjs.org/commander/-/commander-2.20.3.tgz",
+      "integrity": "sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ=="
+    },
     "node_modules/xtend": {
       "version": "4.0.2",
       "resolved": "https://registry.npmjs.org/xtend/-/xtend-4.0.2.tgz",
@@ -16820,6 +17048,11 @@
     }
   },
   "dependencies": {
+    "@a11y/focus-trap": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/@a11y/focus-trap/-/focus-trap-1.0.5.tgz",
+      "integrity": "sha512-3JOd6g+BALysWS8LNf0qdB8ltR651H/RCLAvUmfS0LIHwHO579XfjZUIZbURYiAZrcbp1CBAq4QZ2YwKNQZ1hw=="
+    },
     "@adobe/css-tools": {
       "version": "4.0.1",
       "resolved": "https://registry.npmjs.org/@adobe/css-tools/-/css-tools-4.0.1.tgz",
@@ -16834,6 +17067,20 @@
         "@jridgewell/trace-mapping": "^0.3.9"
       }
     },
+    "@arcgis/core": {
+      "version": "4.24.7",
+      "resolved": "https://registry.npmjs.org/@arcgis/core/-/core-4.24.7.tgz",
+      "integrity": "sha512-uDkF4/3zOOFDzFEXxAaENhtz7hhkmOw71R96rfVPjqIfRxd2HxgrpNlrjXI8xYC2ub8rRpBZ6WmxlvaCn/zu7Q==",
+      "requires": {
+        "@esri/arcgis-html-sanitizer": "~2.10.0",
+        "@esri/calcite-colors": "~6.0.1",
+        "@esri/calcite-components": "1.0.0-beta.82",
+        "@popperjs/core": "~2.11.5",
+        "focus-trap": "~6.9.4",
+        "luxon": "~2.4.0",
+        "sortablejs": "~1.15.0"
+      }
+    },
     "@babel/code-frame": {
       "version": "7.18.6",
       "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.18.6.tgz",
@@ -18234,6 +18481,42 @@
         }
       }
     },
+    "@esri/arcgis-html-sanitizer": {
+      "version": "2.10.0",
+      "resolved": "https://registry.npmjs.org/@esri/arcgis-html-sanitizer/-/arcgis-html-sanitizer-2.10.0.tgz",
+      "integrity": "sha512-OGrczx3sbszMVQESGdZf2BaZL/oGMm+wuFgF6od50ff0WThjiJDTxi5SXIleRF6QQVFywsab3sFbQ77Q/gSzsg==",
+      "requires": {
+        "lodash.isplainobject": "^4.0.6",
+        "xss": "^1.0.11"
+      }
+    },
+    "@esri/calcite-colors": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/@esri/calcite-colors/-/calcite-colors-6.0.1.tgz",
+      "integrity": "sha512-iGUIIpeMCJSTDGw4ZsxLwwxkml0QzOUJTtysjRryGbhSt183NEtwWKS+yQO19utXQz5LbQWjoav6x6CsawElkw=="
+    },
+    "@esri/calcite-components": {
+      "version": "1.0.0-beta.82",
+      "resolved": "https://registry.npmjs.org/@esri/calcite-components/-/calcite-components-1.0.0-beta.82.tgz",
+      "integrity": "sha512-wAJeEZ4g/TiJ4J6z/GO9YQFSFubQERCWEo71jr2xLmegxEQIYHL3AvJaLmp0IBsr2tVzRG1TN2PVuew4ljp8WA==",
+      "requires": {
+        "@a11y/focus-trap": "1.0.5",
+        "@popperjs/core": "2.11.5",
+        "@stencil/core": "2.15.1",
+        "@types/color": "3.0.3",
+        "color": "4.2.3",
+        "form-request-submit-polyfill": "2.0.0",
+        "lodash-es": "4.17.21",
+        "sortablejs": "1.15.0"
+      },
+      "dependencies": {
+        "@popperjs/core": {
+          "version": "2.11.5",
+          "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.5.tgz",
+          "integrity": "sha512-9X2obfABZuDVLCgPK9aX0a/x4jaOEweTTWE2+9sr0Qqqevj2Uv5XorvusThmc9XGYpS9yI+fhh8RTafBtGposw=="
+        }
+      }
+    },
     "@humanwhocodes/config-array": {
       "version": "0.10.5",
       "resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.10.5.tgz",
@@ -18883,6 +19166,11 @@
         "source-map": "^0.7.3"
       }
     },
+    "@popperjs/core": {
+      "version": "2.11.6",
+      "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.6.tgz",
+      "integrity": "sha512-50/17A98tWUfQ176raKiOGXuYpLyyVMkxxG6oylzL3BPOlA6ADGdK7EYunSa4I064xerltq9TGXs8HmOk5E+vw=="
+    },
     "@rollup/plugin-babel": {
       "version": "5.3.1",
       "resolved": "https://registry.npmjs.org/@rollup/plugin-babel/-/plugin-babel-5.3.1.tgz",
@@ -18957,6 +19245,11 @@
         "@sinonjs/commons": "^1.7.0"
       }
     },
+    "@stencil/core": {
+      "version": "2.15.1",
+      "resolved": "https://registry.npmjs.org/@stencil/core/-/core-2.15.1.tgz",
+      "integrity": "sha512-NYjRwQnjzscyFfqK+iIwRdr/dgYn33u6KE7kyQWdi7xsCkqMHalXYgJlN/QBQ9PN3qXmXKeBrJNG8EkNdCbK5g=="
+    },
     "@surma/rollup-plugin-off-main-thread": {
       "version": "2.2.3",
       "resolved": "https://registry.npmjs.org/@surma/rollup-plugin-off-main-thread/-/rollup-plugin-off-main-thread-2.2.3.tgz",
@@ -19295,6 +19588,27 @@
         "@types/node": "*"
       }
     },
+    "@types/color": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/@types/color/-/color-3.0.3.tgz",
+      "integrity": "sha512-X//qzJ3d3Zj82J9sC/C18ZY5f43utPbAJ6PhYt/M7uG6etcF6MRpKdN880KBy43B0BMzSfeT96MzrsNjFI3GbA==",
+      "requires": {
+        "@types/color-convert": "*"
+      }
+    },
+    "@types/color-convert": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/@types/color-convert/-/color-convert-2.0.0.tgz",
+      "integrity": "sha512-m7GG7IKKGuJUXvkZ1qqG3ChccdIM/qBBo913z+Xft0nKCX4hAU/IxKwZBU4cpRZ7GS5kV4vOblUkILtSShCPXQ==",
+      "requires": {
+        "@types/color-name": "*"
+      }
+    },
+    "@types/color-name": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/@types/color-name/-/color-name-1.1.1.tgz",
+      "integrity": "sha512-rr+OQyAjxze7GgWrSaJwydHStIhHq2lvY3BOC2Mj7KnzI7XK0Uw1TOOdI9lDoajEbSWLiYgoo4f1R51erQfhPQ=="
+    },
     "@types/connect": {
       "version": "3.4.35",
       "resolved": "https://registry.npmjs.org/@types/connect/-/connect-3.4.35.tgz",
@@ -20147,6 +20461,11 @@
         "picomatch": "^2.0.4"
       }
     },
+    "arcgis-js-api": {
+      "version": "4.24.7",
+      "resolved": "https://registry.npmjs.org/arcgis-js-api/-/arcgis-js-api-4.24.7.tgz",
+      "integrity": "sha512-cdBUQBdCOI4bqFwzk86ndjVivAeRH6qt9LF35caDl5es1Kj6eB4QdsQ+vUXcGBQHob6+u9NcXqJ5gKmvVEeyfg=="
+    },
     "arg": {
       "version": "5.0.2",
       "resolved": "https://registry.npmjs.org/arg/-/arg-5.0.2.tgz",
@@ -20807,6 +21126,30 @@
       "resolved": "https://registry.npmjs.org/collect-v8-coverage/-/collect-v8-coverage-1.0.1.tgz",
       "integrity": "sha512-iBPtljfCNcTKNAto0KEtDfZ3qzjJvqE3aTGZsbhjSBlorqpXJlaWWtPO35D+ZImoC3KWejX64o+yPGxhWSTzfg=="
     },
+    "color": {
+      "version": "4.2.3",
+      "resolved": "https://registry.npmjs.org/color/-/color-4.2.3.tgz",
+      "integrity": "sha512-1rXeuUUiGGrykh+CeBdu5Ie7OJwinCgQY0bc7GCRxy5xVHy+moaqkpL/jqQq0MtQOeYcrqEz4abc5f0KtU7W4A==",
+      "requires": {
+        "color-convert": "^2.0.1",
+        "color-string": "^1.9.0"
+      },
+      "dependencies": {
+        "color-convert": {
+          "version": "2.0.1",
+          "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
+          "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
+          "requires": {
+            "color-name": "~1.1.4"
+          }
+        },
+        "color-name": {
+          "version": "1.1.4",
+          "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
+          "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA=="
+        }
+      }
+    },
     "color-convert": {
       "version": "1.9.3",
       "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz",
@@ -20820,6 +21163,15 @@
       "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.3.tgz",
       "integrity": "sha512-72fSenhMw2HZMTVHeCA9KCmpEIbzWiQsjN+BHcBbS9vr1mtt+vJjPdksIBNUmKAW8TFUDPJK5SUU3QhE9NEXDw=="
     },
+    "color-string": {
+      "version": "1.9.1",
+      "resolved": "https://registry.npmjs.org/color-string/-/color-string-1.9.1.tgz",
+      "integrity": "sha512-shrVawQFojnZv6xM40anx4CkoDP+fZsw/ZerEMsW/pyzsRbElpsL/DBVW7q3ExxwusdNXI3lXpuhEZkzs8p5Eg==",
+      "requires": {
+        "color-name": "^1.0.0",
+        "simple-swizzle": "^0.2.2"
+      }
+    },
     "colord": {
       "version": "2.9.3",
       "resolved": "https://registry.npmjs.org/colord/-/colord-2.9.3.tgz",
@@ -21149,6 +21501,11 @@
       "resolved": "https://registry.npmjs.org/cssesc/-/cssesc-3.0.0.tgz",
       "integrity": "sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg=="
     },
+    "cssfilter": {
+      "version": "0.0.10",
+      "resolved": "https://registry.npmjs.org/cssfilter/-/cssfilter-0.0.10.tgz",
+      "integrity": "sha512-FAaLDaplstoRsDR8XGYH51znUN0UY7nMc6Z9/fvE8EXGwvJE9hu7W2vHwx1+bd6gCYnln9nLbzxFTrcO9YQDZw=="
+    },
     "cssnano": {
       "version": "5.1.13",
       "resolved": "https://registry.npmjs.org/cssnano/-/cssnano-5.1.13.tgz",
@@ -22169,6 +22526,11 @@
         "estraverse": "^5.2.0"
       }
     },
+    "esri-loader": {
+      "version": "3.6.0",
+      "resolved": "https://registry.npmjs.org/esri-loader/-/esri-loader-3.6.0.tgz",
+      "integrity": "sha512-hvFnBLcHDVcymOXTg2IxptPAxDKq1lOQjO1bFlaJTZxmruvGR+41HjW12BgemPhiEBrH782q2nFuUytwWPVAMg=="
+    },
     "estraverse": {
       "version": "5.3.0",
       "resolved": "https://registry.npmjs.org/estraverse/-/estraverse-5.3.0.tgz",
@@ -22473,6 +22835,14 @@
       "resolved": "https://registry.npmjs.org/flatted/-/flatted-3.2.7.tgz",
       "integrity": "sha512-5nqDSxl8nn5BSNxyR3n4I6eDmbolI6WT+QqR547RwxQapgjQBmtktdP+HTBb/a/zLsbzERTONyUB5pefh5TtjQ=="
     },
+    "focus-trap": {
+      "version": "6.9.4",
+      "resolved": "https://registry.npmjs.org/focus-trap/-/focus-trap-6.9.4.tgz",
+      "integrity": "sha512-v2NTsZe2FF59Y+sDykKY+XjqZ0cPfhq/hikWVL88BqLivnNiEffAsac6rP6H45ff9wG9LL5ToiDqrLEP9GX9mw==",
+      "requires": {
+        "tabbable": "^5.3.3"
+      }
+    },
     "follow-redirects": {
       "version": "1.15.2",
       "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.2.tgz",
@@ -22591,6 +22961,11 @@
         "mime-types": "^2.1.12"
       }
     },
+    "form-request-submit-polyfill": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/form-request-submit-polyfill/-/form-request-submit-polyfill-2.0.0.tgz",
+      "integrity": "sha512-p0+M92y2gFnP0AuuL8VJ0GYVzAT0bYp3GsSkmPFhvUopdnfDLP/9xplQTBBc4w8qOjKRzdK7GaFcdL9IhlXdTQ=="
+    },
     "forwarded": {
       "version": "0.2.0",
       "resolved": "https://registry.npmjs.org/forwarded/-/forwarded-0.2.0.tgz",
@@ -24994,11 +25369,21 @@
       "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz",
       "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg=="
     },
+    "lodash-es": {
+      "version": "4.17.21",
+      "resolved": "https://registry.npmjs.org/lodash-es/-/lodash-es-4.17.21.tgz",
+      "integrity": "sha512-mKnC+QJ9pWVzv+C4/U3rRsHapFfHvQFoFB92e52xeyGMcX6/OlIl78je1u8vePzYZSkkogMPJ2yjxxsb89cxyw=="
+    },
     "lodash.debounce": {
       "version": "4.0.8",
       "resolved": "https://registry.npmjs.org/lodash.debounce/-/lodash.debounce-4.0.8.tgz",
       "integrity": "sha512-FT1yDzDYEoYWhnSGnpE/4Kj1fLZkDFyqRb7fNt6FdYOSxlUWAtp42Eh6Wb0rGIv/m9Bgo7x4GhQbm5Ys4SG5ow=="
     },
+    "lodash.isplainobject": {
+      "version": "4.0.6",
+      "resolved": "https://registry.npmjs.org/lodash.isplainobject/-/lodash.isplainobject-4.0.6.tgz",
+      "integrity": "sha512-oSXzaWypCMHkPC3NvBEaPHf0KsA5mvPrOPgQWDsbg8n7orZ290M0BmC/jgRZ4vcJ6DTAhjrsSYgdsW/F+MFOBA=="
+    },
     "lodash.memoize": {
       "version": "4.1.2",
       "resolved": "https://registry.npmjs.org/lodash.memoize/-/lodash.memoize-4.1.2.tgz",
@@ -25043,6 +25428,11 @@
         "yallist": "^4.0.0"
       }
     },
+    "luxon": {
+      "version": "2.4.0",
+      "resolved": "https://registry.npmjs.org/luxon/-/luxon-2.4.0.tgz",
+      "integrity": "sha512-w+NAwWOUL5hO0SgwOHsMBAmZ15SoknmQXhSO0hIbJCAmPKSsGeK8MlmhYh2w6Iib38IxN2M+/ooXWLbeis7GuA=="
+    },
     "lz-string": {
       "version": "1.4.4",
       "resolved": "https://registry.npmjs.org/lz-string/-/lz-string-1.4.4.tgz",
@@ -27243,6 +27633,21 @@
       "resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-3.0.7.tgz",
       "integrity": "sha512-wnD2ZE+l+SPC/uoS0vXeE9L1+0wuaMqKlfz9AMUo38JsyLSBWSFcHR1Rri62LZc12vLr1gb3jl7iwQhgwpAbGQ=="
     },
+    "simple-swizzle": {
+      "version": "0.2.2",
+      "resolved": "https://registry.npmjs.org/simple-swizzle/-/simple-swizzle-0.2.2.tgz",
+      "integrity": "sha512-JA//kQgZtbuY83m+xT+tXJkmJncGMTFT+C+g2h2R9uxkYIrE2yy9sgmcLhCnw57/WSD+Eh3J97FPEDFnbXnDUg==",
+      "requires": {
+        "is-arrayish": "^0.3.1"
+      },
+      "dependencies": {
+        "is-arrayish": {
+          "version": "0.3.2",
+          "resolved": "https://registry.npmjs.org/is-arrayish/-/is-arrayish-0.3.2.tgz",
+          "integrity": "sha512-eVRqCvVlZbuw3GrM63ovNSNAeA1K16kaR/LRY/92w0zxQ5/1YzwblUX652i4Xs9RwAGjW9d9y6X88t8OaAJfWQ=="
+        }
+      }
+    },
     "sisteransi": {
       "version": "1.0.5",
       "resolved": "https://registry.npmjs.org/sisteransi/-/sisteransi-1.0.5.tgz",
@@ -27263,6 +27668,11 @@
         "websocket-driver": "^0.7.4"
       }
     },
+    "sortablejs": {
+      "version": "1.15.0",
+      "resolved": "https://registry.npmjs.org/sortablejs/-/sortablejs-1.15.0.tgz",
+      "integrity": "sha512-bv9qgVMjUMf89wAvM6AxVvS/4MX3sPeN0+agqShejLU5z5GX4C75ow1O2e5k4L6XItUyAK3gH6AxSbXrOM5e8w=="
+    },
     "source-list-map": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/source-list-map/-/source-list-map-2.0.1.tgz",
@@ -27629,6 +28039,11 @@
       "resolved": "https://registry.npmjs.org/symbol-tree/-/symbol-tree-3.2.4.tgz",
       "integrity": "sha512-9QNk5KwDF+Bvz+PyObkmSYjI5ksVUYtjW7AU22r2NKcfLJcXp96hkDWU3+XndOsUb+AQ9QhfzfCT2O+CNWT5Tw=="
     },
+    "tabbable": {
+      "version": "5.3.3",
+      "resolved": "https://registry.npmjs.org/tabbable/-/tabbable-5.3.3.tgz",
+      "integrity": "sha512-QD9qKY3StfbZqWOPLp0++pOrAVb/HbUi5xCc8cUo4XjP19808oaMiDzn0leBY5mCespIBM0CIZePzZjgzR83kA=="
+    },
     "tailwindcss": {
       "version": "3.1.8",
       "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.1.8.tgz",
@@ -28707,6 +29122,22 @@
       "resolved": "https://registry.npmjs.org/xmlchars/-/xmlchars-2.2.0.tgz",
       "integrity": "sha512-JZnDKK8B0RCDw84FNdDAIpZK+JuJw+s7Lz8nksI7SIuU3UXJJslUthsi+uWBUYOwPFwW7W7PRLRfUKpxjtjFCw=="
     },
+    "xss": {
+      "version": "1.0.14",
+      "resolved": "https://registry.npmjs.org/xss/-/xss-1.0.14.tgz",
+      "integrity": "sha512-og7TEJhXvn1a7kzZGQ7ETjdQVS2UfZyTlsEdDOqvQF7GoxNfY+0YLCzBy1kPdsDDx4QuNAonQPddpsn6Xl/7sw==",
+      "requires": {
+        "commander": "^2.20.3",
+        "cssfilter": "0.0.10"
+      },
+      "dependencies": {
+        "commander": {
+          "version": "2.20.3",
+          "resolved": "https://registry.npmjs.org/commander/-/commander-2.20.3.tgz",
+          "integrity": "sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ=="
+        }
+      }
+    },
     "xtend": {
       "version": "4.0.2",
       "resolved": "https://registry.npmjs.org/xtend/-/xtend-4.0.2.tgz",
diff --git a/package.json b/package.json
index a526108..9142df2 100644
--- a/package.json
+++ b/package.json
@@ -3,9 +3,12 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "@arcgis/core": "^4.24.7",
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",
+    "arcgis-js-api": "^4.24.7",
+    "esri-loader": "^3.6.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-scripts": "5.0.1",
diff --git a/src/App.css b/src/App.css
index 74b5e05..83b7c5e 100644
--- a/src/App.css
+++ b/src/App.css
@@ -1,38 +1,38 @@
 .App {
-  text-align: center;
+	text-align: center;
 }
 
 .App-logo {
-  height: 40vmin;
-  pointer-events: none;
+	height: 40vmin;
+	pointer-events: none;
 }
 
 @media (prefers-reduced-motion: no-preference) {
-  .App-logo {
-    animation: App-logo-spin infinite 20s linear;
-  }
+	.App-logo {
+		animation: App-logo-spin infinite 20s linear;
+	}
 }
 
 .App-header {
-  background-color: #282c34;
-  min-height: 100vh;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  font-size: calc(10px + 2vmin);
-  color: white;
+	background-color: #282c34;
+	min-height: 100vh;
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	justify-content: center;
+	font-size: calc(10px + 2vmin);
+	color: white;
 }
 
 .App-link {
-  color: #61dafb;
+	color: #61dafb;
 }
 
 @keyframes App-logo-spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
+	from {
+		transform: rotate(0deg);
+	}
+	to {
+		transform: rotate(360deg);
+	}
 }
diff --git a/src/App.js b/src/App.js
index 3784575..f8e788b 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,25 +1,31 @@
-import logo from './logo.svg';
-import './App.css';
+import React, { useRef, useEffect } from "react";
+import "./App.css";
+import Map from "@arcgis/core/Map";
+import MapView from "@arcgis/core/views/MapView";
+import esriConfig from "@arcgis/core/config"; // https://developers.arcgis.com/javascript/latest/api-reference/esri-config.html
+
+//! Uncomment this for online api use
+/*esriConfig.apiKey =
+	"//! FREE_API_KEYS_ARE_AVAIABLE_HERE: https://developers.arcgis.com/api-keys/";*/
 
 function App() {
-  return (
-    <div className="App">
-      <header className="App-header">
-        <img src={logo} className="App-logo" alt="logo" />
-        <p>
-          Edit <code>src/App.js</code> and save to reload.
-        </p>
-        <a
-          className="App-link"
-          href="https://reactjs.org"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          Learn React
-        </a>
-      </header>
-    </div>
-  );
+	const MapEl = useRef(null);
+	useEffect(() => {
+		const map = new Map({
+			basemap: "topo-vector", //"arcgis-topographic" for online api use
+		});
+
+		const view = new MapView({
+			container: MapEl.current,
+			map: map,
+		});
+	});
+	return <div style={{ height: 800 }} ref={MapEl}></div>;
 }
 
 export default App;
+
+/*
+https://developers.arcgis.com/javascript/latest/tooling-intro/
+https://developers.arcgis.com/javascript/latest/get-started/
+*/
diff --git a/src/Map.jsx b/src/Map.jsx
new file mode 100644
index 0000000..e9c7cd3
--- /dev/null
+++ b/src/Map.jsx
@@ -0,0 +1,36 @@
+import React, { useRef, useEffect } from "react";
+import { loadModules } from "esri-loader";
+import esriConfig from "@arcgis/core/config";
+esriConfig.apiKey =
+	"AAPK9928ede1767b45ac9580fcf5d81db099rEWnuzCXUeor-FPlge6bydprGlILUxdTVtlVLso0ngwUt2OnR0As2NeUJlXsmRD6";
+function Map() {
+	const MapEl = useRef(null);
+
+	useEffect(() => {
+		let view;
+		loadModules(["esri/views/MapView", "esri/Map"], {
+			css: true,
+		}).then(([MapView, Map]) => {
+			const map = new Map({
+				// Map
+				basemap: "arcgis-topographic",
+			});
+			view = new MapView({
+				// basically the div container
+				map: map,
+				center: [],
+				zoom: 8,
+				container: MapEl.current, // Connection to div element below
+			});
+		});
+		return () => {
+			if (!!view) {
+				view.destroy();
+				view = null;
+			}
+		};
+	});
+	return <div style={{ height: 800 }} ref={MapEl}></div>;
+}
+
+export default Map;
diff --git a/src/index.css b/src/index.css
index ec2585e..009baa4 100644
--- a/src/index.css
+++ b/src/index.css
@@ -1,13 +1,14 @@
+@import "@arcgis/core/assets/esri/themes/light/main.css";
 body {
-  margin: 0;
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
-    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
-    sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
+	margin: 0;
+	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
+		"Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
+		sans-serif;
+	-webkit-font-smoothing: antialiased;
+	-moz-osx-font-smoothing: grayscale;
 }
 
 code {
-  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
-    monospace;
+	font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
+		monospace;
 }