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.
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"
}
}]
});
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..
Just the way it is.
Have you ever tried
var searchWidget = new Search(); var sources = [{ ... }, { ... }, { ... }]; //array of sources
searchWidget.sources = sources;
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>
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.
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.