topic Re: How to use Multiple Sources in Search Widget in ArcGIS JavaScript Maps SDK Questions

How to use Multiple Sources in Search Widget

Rocky_ — Wed, 19 Sep 2018 18:56:59 GMT

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");

Re: How to use Multiple Sources in Search Widget

KellyHutchins — Wed, 19 Sep 2018 20:35:41 GMT

I'm not sure I understand the question but we do have a sample in the help that shows how to search multiple sources. When you run the sample you'll see that the 'All' option is selected by default which means it will search all the sources you have defined in the search widget without having to select a particular layer or locator:

Search widget with multiple sources | ArcGIS API for JavaScript 4.8

Re: How to use Multiple Sources in Search Widget

Rocky_ — Wed, 19 Sep 2018 22:06:00 GMT

Hello Kelly,

Actually I am having 4 feature service urls. All of these url sources having 2 search search fields ["OBJID", "TRACKNUM"]... i want to search according to these fields.

So in search widget user can select search field and then it shows suggestions of all related search using all 4 feature layers..

Re: How to use Multiple Sources in Search Widget

RobertScheitlin__GISP — Thu, 20 Sep 2018 12:56:00 GMT

RAJ,

That example Kelly provided show a Search widget using multiple sources and by default the widget WILL search all sources using the search term entered using each sources search fields.

Re: How to use Multiple Sources in Search Widget

Rocky_ — Thu, 20 Sep 2018 14:58:08 GMT

I already tried used this one..Its working perfectly...but is there any way to use same multiple number of sources in widget and user can search by only selecting the search fields.. Cause all sources having same search fields..

In below sample they use only 2 sources with different search fields...

for eg. ArcGIS API for JavaScript Sandbox

but what if I am having more than 2 sources and wanna search with 2 search fields ["OBJID", "TRACKNUM"]. which are available in all sources.. so i am trying to display a search widget menu like below

Re: How to use Multiple Sources in Search Widget

RobertScheitlin__GISP — Thu, 20 Sep 2018 15:00:18 GMT

RAJ,

You are missing how the search widget actually works. If a sources has two fields defines as search fields BOTH fields will be search for the search term for that source.

Re: How to use Multiple Sources in Search Widget

Rocky_ — Thu, 20 Sep 2018 15:04:58 GMT

Really sorry. but I didn't get that.. Will you please elaborate more with snippet

Re: How to use Multiple Sources in Search Widget

Rocky_ — Thu, 20 Sep 2018 15:17:02 GMT

Ok let me try one more time to explain, may be am not able to explaining my issue properly.

As you can see in actual Que above.. right now am using 2 different sources with their search fields separately in each source.. I just want to concatenate my code.. so i can use array of sources only once and define the search fields and other settings at only once..cause every source having same name search field..

and trying to display widget like below

Re: How to use Multiple Sources in Search Widget

RobertScheitlin__GISP — Thu, 20 Sep 2018 15:32:46 GMT

RAJ,

This is whats confusing. A sources is the layer that will be searched but you seem to be showing two sources in your image based on the field...

If layer A has the field OBJID and TRACKID and so does layer B, Layer C, etc. then you define a source for each of those layers and set the search fields to be OBJID and TRACKID. Then by DEFAULT the search widget will search all sources using the defined search fields OBJID and TRACKID and show the results for each layer.

Re: How to use Multiple Sources in Search Widget

Rocky_ — Sat, 11 Dec 2021 19:05:08 GMT

If you dont mind.. can you please modify my snippet

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"
}
}]
}‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Re: How to use Multiple Sources in Search Widget

RobertScheitlin__GISP — Sat, 11 Dec 2021 19:05:11 GMT

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"
          }
        }]
      });‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Re: How to use Multiple Sources in Search Widget

Rocky_ — Thu, 20 Sep 2018 16:55:10 GMT

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..

Re: How to use Multiple Sources in Search Widget

RobertScheitlin__GISP — Thu, 20 Sep 2018 17:07:42 GMT

Just the way it is.

Re: How to use Multiple Sources in Search Widget

Rocky_ — Sat, 11 Dec 2021 19:05:14 GMT

Have you ever tried

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

Re: How to use Multiple Sources in Search Widget

RobertScheitlin__GISP — Sat, 11 Dec 2021 19:05:17 GMT

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/FeatureServer/0",
            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>‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Re: How to use Multiple Sources in Search Widget

kawishabbas — Wed, 10 Oct 2018 05:16:47 GMT

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.

Re: How to use Multiple Sources in Search Widget

kawishabbas — Wed, 10 Oct 2018 05:21:45 GMT

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.

Re: How to use Multiple Sources in Search Widget

PriyankaKammari — Mon, 28 Oct 2024 22:37:15 GMT

Did you get solution for this? Looking for the similar approach