I'm currently developing a basic web map app for showing various projects. I'm using v3.10 of the API and started with the "Popup content in side panel" sample. Instead of a static side panel for a selected feature's information, I decided to use a jQuery slide panel that appears when the user clicks on a feature (see the screenshot). I have added a close button within my slide panel which will close the panel and fire map.graphics.clear() to remove the graphic of the currently selected item. This all works just fine.
What I want to do (can can't figure out the best way to do it) is close my side panel if the user clicks someplace on the map (but not on another feature). I tried to account for this using the following:
map.on("click", function() {
if(map.graphics.graphics.length == 0) {
//Close my side panel here
}
}
but the problem is that the click event fires before the selected graphic is removed and so map.graphics.graphics.length never equals zero. I've also thought about trying to tie into the map's graphicLayer and it's "graphics-clear" event but I can't seem to do it. The following returns null:
theGraphicsLayer = map.graphics;
So what am I missing? The app isn't public facing yet so I can't link to a live example.
Thanks!
Steve
Screenshot:
Solved! Go to Solution.
That's pretty nice, Robert. I do like your different solution. Hmm..
As for why I used the click event of the featureLayer, it all boils down to what I originally learned and the comfort & familiarity of that. For the infoWindows I've worked with, I've always had to tweak & reformat the content going to the infoWindow and your solution (along with the original ESRI sample) just pumps the info automatically into the infoWindow. I just had difficulty determining how to inject myself in that process. With the click event, I already know how to do that so I just went with it.
I really do like your solution since it eliminates the issue I can't otherwise get rid of. I'll have to chew on that.
Thanks, Robert. I appreciate all the help on this!
Steve
Steve,
You know how you are doing your formatting of the attributes in your original code, well you can continue to do exactly that instead of having the info just pumped in. You are using the evt.graphic.attributes to get to the clicked graphics attributes well you can do the same in the displayPopupContent function just use this line of code instead.
attrib = feature.attributes;
then the rest of your original code for getting and formatting the specific attribute.
Thanks for the modified sample, Robert. I've marked it as answered I spent the day re-working my code to fit the logic from your sample and it does eliminate the click issue that originally prompted my post.
The setTimeout of 500 is too much of a pause while clicking around the map. I was actually able to reduce that value to as little as 5 and the functionality still works as designed and is more responsive. Unfortunately for me, the re-work of the coding has broken some other aspect of my slide out panel functionality but that's a JavaScript issue and not an API issue.