diff --git a/.gitignore b/.gitignore
index 3c3629e..c3ea58a 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1 +1,26 @@
-node_modules
+dist/
+www/
+loader/
+
+*~
+*.sw[mnpcod]
+*.log
+*.lock
+*.tmp
+*.tmp.*
+log.txt
+*.sublime-project
+*.sublime-workspace
+
+.stencil/
+.idea/
+.vscode/
+.sass-cache/
+.versions/
+node_modules/
+$RECYCLE.BIN/
+
+.DS_Store
+Thumbs.db
+UserInterfaceState.xcuserstate
+.env
diff --git a/src/components.d.ts b/src/components.d.ts
index 6d5dd29..fe1c173 100644
--- a/src/components.d.ts
+++ b/src/components.d.ts
@@ -8,6 +8,10 @@ import { HTMLStencilElement, JSXBase } from "@stencil/core/internal";
 export namespace Components {
     interface HubCompassMap {
         "addDatasetToMap": (datasetId: any) => Promise<void>;
+        /**
+          * Basemap string Options: https://developers.arcgis.com/javascript/latest/api-reference/esri-WebMap.html#basemap
+         */
+        "basemap": string;
         /**
           * Optional [longitude, latitude] map center
          */
@@ -89,6 +93,10 @@ declare global {
 }
 declare namespace LocalJSX {
     interface HubCompassMap {
+        /**
+          * Basemap string Options: https://developers.arcgis.com/javascript/latest/api-reference/esri-WebMap.html#basemap
+         */
+        "basemap"?: string;
         /**
           * Optional [longitude, latitude] map center
          */
diff --git a/src/components/hub-compass-map/hub-compass-map.tsx b/src/components/hub-compass-map/hub-compass-map.tsx
index 3331043..b04069d 100644
--- a/src/components/hub-compass-map/hub-compass-map.tsx
+++ b/src/components/hub-compass-map/hub-compass-map.tsx
@@ -128,6 +128,12 @@ export class HubCompassMap {
    */
   @Prop() session = null;
 
+  /**
+   * Basemap string
+   * Options: https://developers.arcgis.com/javascript/latest/api-reference/esri-WebMap.html#basemap
+   */
+  @Prop() basemap: string = "arcgis-topographic";
+
   /**
    * If map has already been saved, update it.
    */
@@ -267,7 +273,7 @@ export class HubCompassMap {
     // esriConfig.apiKey = "AAPK42ebee6b2e134974bffd492cdf7f365dXxAPfRSdf05kJ3AtuEevSfJqUEZ34Vhy2UfrxPtSXrQAfwL04Zij-GfOEQU9OD_9";
 
     this.webMap = new WebMap({
-      basemap: "arcgis-topographic" // Basemap layer service
+      basemap: this.basemap // Basemap layer service
     });
     this.mapView = new MapView({
       map: this.webMap,
diff --git a/src/index.html b/src/index.html
index e4cddb1..6b07fee 100644
--- a/src/index.html
+++ b/src/index.html
@@ -111,6 +111,7 @@
     componentEl.showSearch = true;
     componentEl.showTable = true;
     componentEl.showServiceAreas = false;
+    componentEl.basemap = "gray-vector";
 
     function moveMap(center, zoom) {
       componentEl.center = center;