Search Widget Mulitple sources in 4.4

Henryobaseki — Tue, 25 Jul 2017 20:53:40 GMT

Hi All,

I m trying to use to search widget to search addresses from Esri geocoding service and also from two layer. Similar to the sample in 3.21https://developers.arcgis.com/javascript/3/jssamples/search_multiplesources.html

I have added the locator with the two feature Layers and doesn't seem to be working. Thanks in advance

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
  <title>Search Widget 3D - 4.4</title>

  <style>
    html,
    body,
    #viewDiv {
      padding: 0;
      margin: 0;
      height: 100%;
      width: 100%;
    }
  </style>

  <link rel="stylesheet" href="https://js.arcgis.com/4.4/esri/css/main.css">
  <script src="https://js.arcgis.com/4.4/"></script>

  <script>
require([
  "esri/Map",
  "esri/views/SceneView",
  "esri/widgets/Search",
  "esri/layers/FeatureLayer",
  "esri/symbols/PictureMarkerSymbol",
  "esri/config",
  "dojo/domReady!"
], function (
  Map,
  SceneView,
  Search, FeatureLayer, PictureMarkerSymbol, esriConfig) {

    esriConfig.request.corsEnabledServers.push("cdn4.iconfinder.com");
    var map = new Map({
      basemap: "satellite",
      ground: "world-elevation"
    });

    var view = new SceneView({
      scale: 123456789,
      container: "viewDiv",
      map: map
    });

     var locatorUrl = new Locator({
      url: "http://geocode.arcgis.com/arcgis/rest/services/World/GeocodeServer",
      popupTemplate: { // autocasts as new popupTemplate()
        title: "Post Code: ${Postcode}</br>UPRN: ${UPRN}</br>ADDRESS: ${ADDRESS}",
          overwriteActions: true
      }
    })
    var featureSource1 = new FeatureLayer({
      url: "https://services7.arcgis.com/uE69mPI6U3rpSmCT/arcgis/rest/services/aAdd_csv/FeatureServer/0",
      popupTemplate: { // autocasts as new popupTemplate()
        title: "Post Code: ${Postcode}</br>UPRN: ${UPRN}</br>ADDRESS: ${ADDRESS}",
        overwriteActions: true
      }
    })
    var featureSource2 = new FeatureLayer({
      url: "https://services7.arcgis.com/uE69mPI6U3rpSmCT/arcgis/rest/services/postcodesS/FeatureServer/0",
      popupTemplate: { // autocasts as new popupTemplate()
        title: "Post Code: ${Postcode_3}</br>Wards Name: ${Ward_Name}</br>Ward: ${Ward_Code}",
        overwriteActions: true
      }
    })
    var searchWidget = new Search({
      view: view,
      sources: [
        
     {
              //Pass in the custom locator to the sources
              locator: new Locator(locatorUrl),
              singleLineFieldName: "DataID",
              outFields: ["Match_addr"],
              name: "Address_search",
              //Create an InfoTemplate
              infoTemplate: new InfoTemplate("DataID", "ID: ${Match_addr}")
            }
        
        
        {
          featureLayer: featureSource1,
          searchFields: ["Postcode", "UPRN"],
          displayField: "Postcode",
          exactMatch: false,
          outFields: ["*"],
          name: "Postcode",
          placeholder: "example:  CM2 0HU",
          resultSymbol: new PictureMarkerSymbol({
            url: "https://cdn4.iconfinder.com/data/icons/pixel-perfect-at-24px-volume-2/24/2206-128.png",
            height: 36,
            width: 36
          })
        },
        
        
        
        {
          featureLayer: featureSource2,
          searchFields: ["Postcode_3", "Ward_Name"],
          name: "PostCode",
          exactMatch: false,
          displayField: "Postcode_3",
          placeholder: "example: ...",
          outFields: ["*"]
        }]
    });

    console.log(document.getElementById("submitButton"))
    document.getElementById("submitButton").onclick = (e) => {
      e.preventDefault()
      let el = document.getElementById("input")
      console.log(el.value)
      searchWidget.search(el.value).then((result) => {
        console.log("result", result)
      })
    }
  });

  </script>
</head>

<body>
  <div>
    <form>
      <input placeholder="Enter your address" type="text" id="input">
      <button id="submitButton">Submit</button>
    </form>
  </div>
  <div id="viewDiv"></div>
</body>

</html>

Re: Search Widget Mulitple sources in 4.4

Henryobaseki — Wed, 26 Jul 2017 01:10:56 GMT

Hi All,

Figured how it works pretty similar to the 3,21. Tested the code in 4.4 and it works!

Thank you

topic Re: Search Widget Mulitple sources in 4.4 in ArcGIS JavaScript Maps SDK Questions

Search Widget Mulitple sources in 4.4

Re: Search Widget Mulitple sources in 4.4