How to use Multiple Sources in Search Widget

2261
16
Jump to solution
09-19-2018 11:56 AM
Rocky_
by
Occasional Contributor

    Can anyone please tell me how to use below array of sources

var searchWidget = new Search(); var sources = [{ ... }, { ... }, { ... }]; //array of sources

searchWidget.sources = sources;

 

when we want to search multiple layers which having same search-fields in it.

So we can search it using search-fields not with selecting feature layer.

Right now am using it like below

 

const searchWidget = new Search({
view: view,
locationEnabled: true,
withinViewEnabled: true,
sources: [{
featureLayer: {
Placeholder: "OBJID",
url: "------------------------------------------",
popupTemplate: PopupTemp1
},
searchFields: ["OBJID", "TRACKNUM"],
suggestionTemplate: "{OBJID}, {TRACKNUM}",
exactMatch: true,
outFields: ["*"],
placeholder: "eg: SD0051S Or 2336767 or ",
zoomScale: 5000,
resultSymbol: {
type: "simple-line",
color: "black",
width: 8,
cap: "round",
style: "short-dashdotdot"
}
},
{
featureLayer: {
url: "-------------------------------------------",
popupTemplate: PopupTemp2
},
searchFields: ["OBJID", "TRACKNUM"],
suggestionTemplate: "{OBJID}, {TRACKNUM}",
exactMatch: true,
outFields: ["*"],
placeholder: "eg:SD0051S Or 2336767",
zoomScale: 5000,
resultSymbol: {
type: "simple-line",
color: "black",
width: 8,
cap: "round",
style: "short-dashdotdot"
}
}]
}, "SearchDivOpen", "top-right");

0 Kudos
16 Replies
RobertScheitlin__GISP
MVP Emeritus

RAJ,

Assuming you have provided accurate details (i.e. both layers are line feature classes). this should work:

      var searchWidget = new Search({
        view: view,
        allPlaceholder: "Search All",
        locationEnabled: true,
        withinViewEnabled: true,
        sources: [{
          featureLayer: {
            url: "-----------------",
            popupTemplate: PopupTemp1
          },
          searchFields: ["OBJID", "TRACKNUM"],
          suggestionTemplate: "{OBJID}, {TRACKNUM}",
          exactMatch: true,
          outFields: ["*"],
          zoomScale: 5000,
          name: "RAJ 1",
          placeholder: "eg: SD0051S Or 2336767",
          resultSymbol: {
            type: "simple-line",
            width: 8,
            color: "black",
            style: "short-dashdotdot"
          }
        }, {
          featureLayer: {
            url: "-------------------------",
            popupTemplate: PopupTemp2
          },
          searchFields: ["OBJID", "TRACKNUM"],
          suggestionTemplate: "{OBJID}, {TRACKNUM}",
          exactMatch: true,
          outFields: ["*"],
          placeholder: "eg:SD0051S Or 2336767",
          name: "RAJ 2",
          zoomScale: 5000,
          resultSymbol: {
            type: "simple-line",
            width: 8,
            color: "black",
            style: "short-dashdotdot"
          }
        }]
      });
Rocky_
by
Occasional Contributor

Thanks a lot for the code.. Sir can you tell me why we need to write code double, if there is only difference in source..all the remaining attribute are same... why we cant add all sources in array and define all attributes at only once..

0 Kudos
RobertScheitlin__GISP
MVP Emeritus

Just the way it is.

0 Kudos
Rocky_
by
Occasional Contributor

Have you ever tried 

var searchWidget = new Search(); var sources = [{ ... }, { ... }, { ... }]; //array of sources
searchWidget.sources = sources;
0 Kudos
RobertScheitlin__GISP
MVP Emeritus

Sure. Here is a sample of that working:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
  <title>Search widget with multiple sources - 4.8</title>

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

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

  <script>
    require([
      "esri/Map",
      "esri/views/MapView",
      "esri/widgets/Search",
      "dojo/domReady!"
    ], function(
      Map,
      MapView,
      Search) {

      var map = new Map({
        basemap: "dark-gray"
      });

      var view = new MapView({
        container: "viewDiv",
        map: map,
        center: [-97, 38], // lon, lat
        scale: 10000000
      });
      
      var mySources = [{
          featureLayer: {
            url: "https://services.arcgis.com/V6ZHFr6zdgNZuVG0/arcgis/rest/services/CongressionalDistricts/FeatureServ...",
            popupTemplate: { // autocasts as new PopupTemplate()
              title: "Congressional District {DISTRICTID} </br>{NAME}, {PARTY}",
              overwriteActions: true
            }
          },
          searchFields: ["DISTRICTID"],
          displayField: "DISTRICTID",
          exactMatch: false,
          outFields: ["DISTRICTID", "NAME", "PARTY"],
          name: "Congressional Districts",
          placeholder: "example: 3708",
        }, {
          featureLayer: {
            url: "https://services.arcgis.com/V6ZHFr6zdgNZuVG0/arcgis/rest/services/US_Senators/FeatureServer/0",
            popupTemplate: { // autocasts as new PopupTemplate()
              title: "<a href={Web_Page} target='_blank'> {Name}</a>, ({Party}-{State}) ",
              overwriteActions: true
            }
          },
          searchFields: ["Name", "Party"],
          suggestionTemplate: "{Name}, Party: {Party}",
          exactMatch: false,
          outFields: ["*"],
          placeholder: "example: Casey",
          name: "Senators",
          zoomScale: 500000,
          resultSymbol: {
            type: "picture-marker", // autocasts as new PictureMarkerSymbol()
            url: "images/senate.png",
            height: 36,
            width: 36
          }
        }];

      var searchWidget = new Search({
        view: view,
        allPlaceholder: "District or Senator",
        sources: mySources
      });

      // Add the search widget to the top left corner of the view
      view.ui.add(searchWidget, {
        position: "top-right"
      });
    });
  </script>
</head>

<body>
  <div id="viewDiv"></div>
</body>
</html>
kawishabbas
Occasional Contributor

Hi
I have used this widget many times and layers show as a drop down list in this search widget. My question is that is there possible, if i select layer from drop down of search widget the map goes to layer location automatically.

0 Kudos
kawishabbas
Occasional Contributor

Two layers use in search widget an both have different location like one is for "A" district and other is for "B" district i want to select layer and map goes to that location.

0 Kudos