Launch webmap popup programmatically

5614
12
Jump to solution
05-14-2013 08:17 AM
by Anonymous User
Not applicable
Original User: zconlen

Hi,
My application consumes a webmap, which is where the popups are designed and configured. A feature of the app is for a user to select an asset from a combo box and the map will zoom to that feature on the map, highlight it and open the popup for that feature. I have the zoom to working, but struggling to get the popup to behave as desired.

I'm calling the show method of infoWindow, like
map.infoWindow.show(screenPoint);  


The results vary. If no feature has been identified previously, I get an empty unformated popup.
[ATTACH=CONFIG]24297[/ATTACH]

If a feature has previously been selected, I get the formatted popup, at the correct location, but showing the information for the previous manual identify.
[ATTACH=CONFIG]24299[/ATTACH]

As you can see, in the second scenario, the wrong feature is highlighted, and the information in the popup corresponds to that wrong feature (the pipe to the west), not the manhole which the popup is supposed to be showing. It is positioned correctly though.

It seems that the popup displays information for the "selected" feature. So, perhaps I need to first select the desired feature, but not sure how.

Obviously, I want to avoid trying to programmatically re-create the popup and the highlighting that is used by default in the webmap. Must be an easier way.

Here is the function which is supposed to handle this. Results are from a query task, which will return one feature only:
//Zoom to user selected feature, highlight it and display popup function zoomExtent(results) {   var featureSet = results;   var features = featureSet.features;   var extent = esri.graphicsExtent(features);    //result may be either a line or a point feature. If line feature, the above extent variable is fine. If a point   //feature, that extent is undefined, so we need to create a valid extent   if (!extent) {      var point = features[0];     extent = new esri.geometry.Extent(point.geometry.x - 100, point.geometry.y - 100, point.geometry.x + 100, point.geometry.y + 100, new esri.SpatialReference({ wkid:3857}));     }    //zoom to extent   map.setExtent(extent);   //get location to use for positioning popup   var screenPoint = map.toScreen(extent.getCenter());   map.infoWindow.show(screenPoint);   }


Thanks
0 Kudos
12 Replies
ZorbaConlen
Occasional Contributor
Shaun,

The only solution I found was to recreate the webmap popup info template. Seems like there should be an easier way but apparently not. It goes something like this:

//Use html to mimic look and feel of default webmap popup
var infoTemplate = new esri.InfoTemplate("test", "<div id='searchPopup'><strong>${LAYER}: ${ASSETNUMBER}</strong><hr><table cellpadding='5'><tr><td></td></tr><tr></tr><tr><td><font color='grey'>Description</font></td> <td>${Description}</td></tr><tr><td><font color='grey'>Date Discovered </font></td><td>${DateDiscovered:DateFormat(selector: 'date', fullYear: true)}</td></tr><tr><td><font color='grey'>Severity </font></td><td>${Severity}</td></tr></table><br></div>");
//call defineInfoTemplate func, to apply above infoTemplate to features
defineInfoTemplate(features, infoTemplate);
//set infowindow features to full array
map.infoWindow.setFeatures(features);
//text for title bar indicating how many features....
map.infoWindow.setTitle('(1 of ' + features.length + ')');
// center and zoom map
map.centerAndZoom(extent.getCenter(),18);
var screenPoint = map.toScreen(extent.getCenter()); 
map.infoWindow.show(screenPoint);


The defineInfoTemplate function just loops through the features returned from the query task and applys the template to each.

Hope that helps.
0 Kudos
by Anonymous User
Not applicable
Original User: WestonSF

Oh yup cheers that's pretty much what I did too.
0 Kudos
DanBrellis
New Contributor

Can you advise on how to do this? Is this not possible with the Javascript API? I've found that you can do it with Silverlight...

0 Kudos