From 70dcbe381021223522df78abb36b83dd6c2bb12c Mon Sep 17 00:00:00 2001
From: Andrew Turner <ajturner@highearthorbit.com>
Date: Fri, 14 Jul 2023 10:32:09 -0400
Subject: [PATCH] Added Search

---
 src/components.d.ts                             |  8 ++++++++
 .../hub-compass-map/hub-compass-map.tsx         | 17 +++++++++++++++++
 src/index.html                                  |  4 ++--
 3 files changed, 27 insertions(+), 2 deletions(-)

diff --git a/src/components.d.ts b/src/components.d.ts
index a1e776e..bca080a 100644
--- a/src/components.d.ts
+++ b/src/components.d.ts
@@ -23,6 +23,10 @@ export namespace Components {
           * Optional location to calculate service center. Changing this will update the point
          */
         "serviceAreaPoint": any;
+        /**
+          * Option to show search input
+         */
+        "showSearch": boolean;
         /**
           * Optional travel mode: walking, etc.  TODO fix travel mode type and values
          */
@@ -62,6 +66,10 @@ declare namespace LocalJSX {
           * Optional location to calculate service center. Changing this will update the point
          */
         "serviceAreaPoint"?: any;
+        /**
+          * Option to show search input
+         */
+        "showSearch"?: boolean;
         /**
           * Optional travel mode: walking, etc.  TODO fix travel mode type and values
          */
diff --git a/src/components/hub-compass-map/hub-compass-map.tsx b/src/components/hub-compass-map/hub-compass-map.tsx
index f68fb60..0a99784 100644
--- a/src/components/hub-compass-map/hub-compass-map.tsx
+++ b/src/components/hub-compass-map/hub-compass-map.tsx
@@ -9,6 +9,7 @@ import FeatureSet from "@arcgis/core/rest/support/FeatureSet.js";
 import * as serviceArea from "@arcgis/core/rest/serviceArea.js";
 import * as networkService from "@arcgis/core/rest/networkService.js";
 // import TravelMode from "@arcgis/core/rest/support/TravelMode.js";
+import Search from "@arcgis/core/widgets/Search";
 
 @Component({
   tag: 'hub-compass-map',
@@ -37,6 +38,10 @@ export class HubCompassMap {
    */
   @Prop() datasetIds: string[] = [];
 
+  /** 
+   * Option to show search input
+   */
+  @Prop() showSearch: boolean = true;
   /**
    * TODO: only add new datasets, likely by diffing with old list
    */
@@ -89,7 +94,19 @@ export class HubCompassMap {
       container: this.mapEl // Div element
     });
 
+    if(this.showSearch) {
+      const searchWidget = new Search({
+        view: this.mapView
+      });
+
+      // Add the search widget to the top right corner of the view
+      this.mapView.ui.add(searchWidget, {
+        position: "top-right"
+      });
+    }
     this.mapView.when(() => {
+      // this.mapView.ui.components = (["compass", "zoom", "search"]);
+
       // this.createServiceAreas(this.mapView.center);
       const graphic = this.createGraphic(this.mapView.center);
       this.mapView.graphics.addMany([graphic], 0);
diff --git a/src/index.html b/src/index.html
index 6618e47..6c8b901 100644
--- a/src/index.html
+++ b/src/index.html
@@ -14,8 +14,8 @@
     type="text/css"
     href="https://js.arcgis.com/calcite-components/1.4.3/calcite.css"
   />
-  <!-- <link rel="stylesheet" href="https://js.arcgis.com/4.27/esri/themes/light/main.css">
-  <script src="https://js.arcgis.com/4.27/"></script> -->
+  <link rel="stylesheet" href="https://js.arcgis.com/4.27/esri/themes/light/main.css">
+  <!-- <script src="https://js.arcgis.com/4.27/"></script> -->
 
 </head>