Using Search widget to query on locator source, but bring up featurelayer data in popup.

StevePeralta — Sun, 12 Dec 2021 00:40:09 GMT

Here's what I have so far. 4.6 API. Any help appreciated!!

// Search widget
 var searchWidget = new Search({ 
 view: view,
 sources: [{
 locator: new Locator({ url: locatorServiceUrl }),
 singleLineFieldName: "SingleLine",
 name: "Place",
 localSearchOptions: {
 minScale: 300000,
 distance: 50000
 },
 placeholder: "Search Places",
 maxResults: 3,
 maxSuggestions: 6,
 suggestionsEnabled: true,
 popupEnabled: false,
 minSuggestCharacters: 0
 },
 {
 featureLayer: houseLyr,
 searchFields: ["LAST_NAME", "DISTRICT"],
 displayField: "LAST_NAME",
 exactMatch: false,
 outFields: ["*"],
 name: "House Members",
 maxResults: 10,
 maxSuggestions: 10,
 suggestionsEnabled: true,
 minSuggestCharacters: 0,
 placeholder: "District No. or Last Name"
 },
 {
 featureLayer: senateLyr,
 searchFields: ["LAST_NAME", "DISTRICT"],
 displayField: "LAST_NAME",
 exactMatch: false,
 outFields: ["*"],
 name: "Senate Members",
 placeholder: "District No. or Last Name",
 maxResults: 6,
 maxSuggestions: 6,
 suggestionsEnabled: true,
 minSuggestCharacters: 0
 }]
 
 });
 
 searchWidget.on("select-result", function(event){
 //DEBUG
 console.log(JSON.stringify(event));
 if(!event.result.feature.geometry.rings)
 {
 view.popup.open({
 title: "Feature Layer data!",
 content: "Want that data here.",
 location: event.result.feature.geometry
 });
 }
 });‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Re: Using Search widget to query on locator source, but bring up featurelayer data in popup.

StevePeralta — Sun, 12 Dec 2021 00:40:12 GMT

Haven't had a lot of luck getting pointers from people here, but I finally ended up answering my own question. Here is how I did it. Any help in improving this code is appreciated.

// Search widget
 let searchWidget = new Search({
 view: view,
 sources: [{
 locator: new Locator({
 url: locatorServiceUrl
 }),
 singleLineFieldName: "SingleLine",
 name: "Place",
 localSearchOptions: {
 minScale: 300000,
 distance: 50000
 },
 placeholder: "Search Places",
 maxResults: 3,
 maxSuggestions: 6,
 suggestionsEnabled: true,
 popupEnabled: false,
 minSuggestCharacters: 0
 }, {
 featureLayer: houseLyr,
 searchFields: ["LAST_NAME", "DISTRICT"],
 displayField: "LAST_NAME",
 exactMatch: false,
 outFields: ["*"],
 name: "House Members",
 maxResults: 10,
 maxSuggestions: 10,
 suggestionsEnabled: true,
 minSuggestCharacters: 0,
 placeholder: "District No. or Last Name"
 }, {
 featureLayer: senateLyr,
 searchFields: ["LAST_NAME", "DISTRICT"],
 displayField: "LAST_NAME",
 exactMatch: false,
 outFields: ["*"],
 name: "Senate Members",
 placeholder: "District No. or Last Name",
 maxResults: 6,
 maxSuggestions: 6,
 suggestionsEnabled: true,
 minSuggestCharacters: 0
 }]
});
 
 //LAYERS QUERY
 function getQuery(address) {
 //Queries House and Senate layers for hits within 1 meter of queried address
 let query = new Query();
 query.geometry = address;
 query.distance = 1;
 query.units = "meters";
 query.outFields = ["*"];
 
 try{
 return query;
 } catch(error) {
 console.log(error);
 }
 }
 
 searchWidget.on("select-result", event => {
 
 let query = getQuery(event.result.feature.geometry);
 
 //Only one result per address.
 //Senate results. These results are only available in a promise. See Dojo docs.
 let senateResults = senateLyr.queryFeatures(query).then(results => {
 return results;
 }).otherwise(function(error) {
 console.log("Senate error message: ", error);
 });
 
 //House Results. These results are only available in a promise. See Dojo docs.
 let houseResults = houseLyr.queryFeatures(query).then(results => {
 return results;
 }).otherwise(function(error) {
 console.log("House error message: ", error);
 });
 
 
 //Only on search results
 if (!event.result.feature.geometry.rings) {
 
 all([senateResults, houseResults]).then(results => {
 
 let senateAttributes = results[0].features[0].attributes;
 let houseAttributes = results[1].features[0].attributes;
 
 //Combined results
 view.popup.open({
 title: "Your Legislator Information",
 content: '<b>Senator ' + senateAttributes.FIRST_NAME + ' ' + senateAttributes.LAST_NAME + '</b>' +
 '<div class="findLegContainer"><div><img class="headshot" src="https://leg.colorado.gov/sites/default/files/' + senateAttributes.MEMBER_PICTURE +'" /></div>' +
 '<div><b>'+ senateAttributes.CHAMBER + 'enate District ' + senateAttributes.DISTRICT + '</b><br />' +
 'E-mail: <a href="mailto: ' + senateAttributes.EMAIL +'">' + senateAttributes.EMAIL + '</a><br />' +
 'Webpage: <a href="https://leg.colorado.gov/node/' + senateAttributes.WEBSITE + '" target="_blank">' + senateAttributes.FIRST_NAME + ' ' + senateAttributes.LAST_NAME + '</a></div></div><b>Representative ' + houseAttributes.FIRST_NAME + ' ' + houseAttributes.LAST_NAME + '</b>' +
 '<div class="findLegContainer"><div><img class="headshot" src="https://leg.colorado.gov/sites/default/files/' + houseAttributes.MEMBER_PICTURE +'" /></div>' +
 '<div><b>'+ houseAttributes.CHAMBER + 'ouse District ' + houseAttributes.DISTRICT + '</b><br />' +
 'E-mail: <a href="mailto: ' + houseAttributes.EMAIL +'">' + houseAttributes.EMAIL + '</a><br />' +
 'Webpage: <a href="https://leg.colorado.gov/node/' + houseAttributes.WEBSITE + '" target="_blank">' + houseAttributes.FIRST_NAME + ' ' + houseAttributes.LAST_NAME + '</a></div></div>',
 location: event.result.feature.geometry,
 });
 }).otherwise(error => {
 console.log(error);
 });
 };
 });‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

topic Re: Using Search widget to query on locator source, but bring up featurelayer data in popup. in ArcGIS JavaScript Maps SDK Questions

Using Search widget to query on locator source, but bring up featurelayer data in popup.

Re: Using Search widget to query on locator source, but bring up featurelayer data in popup.