Search 1

app.js

@@ -16,6 +16,7 @@ require([
   "./modules/layerList.js",
   "./modules/coordinate.js",
   "./modules/lineOfSight.js",
+  "./modules/search.js",
 ], (
   Expand,
   Point,
@@ -29,7 +30,8 @@ require([
   initScene,
   initLayerList,
   initCoordinates,
-  initLoS
+  initLoS,
+  initSearch
 ) => {
   /************************************************************
    * Init scene (/w layers) and view
@@ -68,7 +70,12 @@ require([
     "e5c6a086a5ae4d1991d4ca35733fe0ed",
   ];
   const basemaps = initLayerList.setupBasemapGallery(view, basemapIds);
-  const basemapsExpand = initLayerList.setupExpand("List of Basemaps", view, basemaps, false);
+  const basemapsExpand = initLayerList.setupExpand(
+    "List of Basemaps",
+    view,
+    basemaps,
+    false
+  );
   view.ui.add(basemapsExpand, "top-left");
   /**************************************
    *  Coordinate tool
@@ -98,6 +105,15 @@ require([
 
   view.ui.add(expandLoS, "top-left");
 
+  /**************************************
+   * Initialize the Search Widget
+   **************************************/
+  const url = "http://inaadress.maaamet.ee/inaadress/gazetteer/";
+
+  const customSearchSource = initSearch.setupCustomSearchSource(url);
+  const searchWidget = initSearch.setupSearchWidget(view, customSearchSource);
+  view.ui.add(searchWidget, "top-right");
+
   /**************************************
    * Sketching (1): Init settings
    **************************************/

modules/search.js

@@ -0,0 +1,77 @@
+define([
+  "esri/widgets/Search",
+  "esri/widgets/Search/SearchSource",
+  "esri/Graphic",
+  "esri/geometry/Point",
+  "esri/request",
+  "esri/geometry/geometryEngine",
+], (Search, SearchSource, Graphic, Point, esriRequest, geometryEngine) => ({
+  setupCustomSearchSource: (url) =>
+    new SearchSource({
+      placeholder: "Find address with IN-ADS API",
+      // Provide a getSuggestions method
+      // to provide suggestions to the Search widget
+      getSuggestions: (params) => {
+        const keyword = params.suggestTerm; // keyword input by user
+        const suggestUrl = `${url}?address=${encodeURIComponent(keyword)}`;
+        return esriRequest(suggestUrl, { responseType: "json" }).then(
+          (results) => {
+            // Return Suggestion results to display
+            // in the Search widget
+            return results.data.addresses.map((address) => {
+              return {
+                text: address.pikkaadress,
+                magicKey: address.unik,
+              };
+            });
+          }
+        );
+      },
+
+      //Provide a getResults method to find
+      //results from the suggestions
+      getResults: (params) => {
+        const key = params.suggestResult.text; // keyword input by user
+        const newUrl = `${url}?address=${encodeURIComponent(key)}`;
+        return esriRequest(newUrl, {
+          responseType: "json",
+        }).then((results) => {
+          // Parse the results of your custom search
+
+          const searchResults = results.data.addresses.map((address) => {
+            const graphic = new Graphic({
+              geometry: new Point({
+                x: address.viitepunkt_l,
+                y: address.viitepunkt_b,
+              }),
+            });
+            //Optionally,provide an extent for a point result, so the view can zoom to it
+            const buffer = geometryEngine.geodesicBuffer(
+              graphic.geometry,
+              30,
+              "meters"
+            );
+            // Return a Search Result
+            const searchResult = {
+              extent: buffer.extent,
+              feature: graphic,
+              //name: address.pikkaadress,
+              name: `${address.pikkaadress}\n(ads_oid=${address.ads_oid})`,
+            };
+
+            return searchResult;
+          });
+
+          // Return an array of Search Results
+          return searchResults;
+        });
+      },
+    }),
+
+  setupSearchWidget: (view, sources) =>
+    new Search({
+      view: view,
+      sources: [sources],
+      includeDefaultSources: false,
+    }),
+}));

style.css

@@ -1,4 +1,4 @@
-@import "https://js.arcgis.com/4.27/@arcgis/core/assets/esri/themes/dark/main.css";
+@import "https://js.arcgis.com/4.27/@arcgis/core/assets/esri/themes/light/main.css";
 html,
 body,
 #viewDiv {