Select to view content in your preferred language

Search Widget Mulitple sources in 4.4

778
1
Jump to solution
07-25-2017 01:53 PM
Henryobaseki
Occasional Contributor

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({
      popupTemplate: { // autocasts as new popupTemplate()
        title: "Post Code: ${Postcode}</br>UPRN: ${UPRN}</br>ADDRESS: ${ADDRESS}",
          overwriteActions: true
      }
    })

    var featureSource1 = new FeatureLayer({
      popupTemplate: { // autocasts as new popupTemplate()
        title: "Post Code: ${Postcode}</br>UPRN: ${UPRN}</br>ADDRESS: ${ADDRESS}",
        overwriteActions: true
      }
    })

    var featureSource2 = new FeatureLayer({
      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({
            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>
 
Tags (1)
0 Kudos
1 Solution

Accepted Solutions
Henryobaseki
Occasional Contributor

Hi All,

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

Thank you

View solution in original post

0 Kudos
1 Reply
Henryobaseki
Occasional Contributor

Hi All,

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

Thank you

0 Kudos