Highlight a selected feature from search result list.

[AliciaPaulus]

Let me preface this question with some facts. First, I am a third grader when it comes to coding; I gave a basic understanding at best. Second, the code I'm working on is adapted from code we were given permission to use. Now, on to my question.

I'm trying to get my code to highlight the in map feature when I select the feature from my search results. Right now my code symbolizes my search results but when I select a name from my list, the map centers on that selected feature but the symbol remains the same. So, if you have a number of search results in the same area, there is no way to tell for certainty which individual you selected from the list without identifying each possibility.

I can't even identify where in the code I should be looking to edit. I've tried a few things but it doesn't make any change in map.

Here is a working copy of our code.

Adams County Veteran Cemetery Project

Any help will be appreciated.

Alicia

[JakeSkinner]

Hi Alicia,

I've attached an update to the code that should accomplish what you're looking for.  Map class graphics will always draw on top, so I added a couple of GraphicLayers to the application so that you can control the drawing order.  The query results of the FindTask will be stored in one GraphicsLayer.  When a row is clicked, a graphic will be added to the other GraphicsLayer with a different color so you can easily see which feature is selected.

[AliciaPaulus]

Perfect that's exactly what I was trying to accomplish. Thank you so much for all your help!

Only one issue that I found with the updated code. When doing a search the selected map features; the blue ones, aren't getting cleared. They are just compounding, so when you preform a new search, it has all the previous search results displayed as well.

[JakeSkinner · Accepted solution]

You're right, I missed this.  To fix this you will just need to update the first line under 'function showResults(results){'.  Change 'map.graphics.clear()' to:

queryLayer.clear();

[AliciaPaulus]

I might be mistaken but it still seems to have the issue of not clearing results between searches.

[JakeSkinner]

Try clearing your browser cache after making the update.

[AliciaPaulus]

Hooray!! It works!

Thank you so much for all your help. This project has really been a journey. I really can't express how thankful and appreciative I am for your help. This highlighting issue really was the last obstacle we had to solve before we presented this project next week. You saved me hours of work, headaches, and having to use my colorful vocabulary due to frustration.

Thank you again.

[RobertScheitlin__GISP]

Alicia,

  Just to add to what Jake has done you will want to remove all the Legacy coding you have in your app as well. You have all your needed requires and vars in place for your code to be pure AMD but you still use Legacy lines like this:

map = new esri.Map("map", {

Every where you have esri dot you need to drop that format and switch to the AMD var you have already established. So for the map it would be:

map = new Map("map", {

var Layer4 = new esri.layers.ArcGISDynamicMapServiceLayer(

should be:

var Layer4 = new ArcGISDynamicMapServiceLayer(

In the 4.0 version of the API legacy code like this will not be supported.

[KenBuja]

Another suggestion on modernizing your code would be to remove the "dojo.connect" event handling wiring and replace that with "on". You are already using this in your code

map.on("load", function() {

but you still have the legacy style elsewhere

dojo.connect(map, "onLayersAddResult", function(results) {

This style of event wiring will be removed when Dojo 2.0 comes out.

[AliciaPaulus]

Thank you for the tip.

As soon as I can get this code to do everything that I want it to, adding notes and syntax clean up is will be my new #1 priority.