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");
Solved! Go to Solution.
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>
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
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..
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.
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
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.
Really sorry. but I didn't get that.. Will you please elaborate more with snippet
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
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.
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" } }] }