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

690
1
Jump to solution
03-28-2018 01:41 PM
StevePeralta
New Contributor II

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

khutchins-esristaff

// 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
 });
 }
 });‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍
0 Kudos
1 Solution

Accepted Solutions
StevePeralta
New Contributor II

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

View solution in original post

0 Kudos
1 Reply
StevePeralta
New Contributor II

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);
 });
 };
 });
0 Kudos