The process would be something like this:
- Create a new popup / infoWindow for your app as shown in all the examples
- For each layer that needs a popup, create an infoTemplate and then specify it during the layer creation
- Create on onClick event listeners (dojo.connec in legacy Dojo) for each layer which contains a query on the layer
Here's some cobbled together legacy code (v3.3 of the API) as a guide: var usgsTemplate = new esri.InfoTemplate();
usgsTemplate.setContent('<table cellspacing=\"5\" style=\"font-size:90%\"><tr><td style=\"text-align:top\"><b>Gage Location:</b></td><td style=\"vertical-align:top\">${NAME}</td></tr><tr><td style=\"vertical-align:top\"><b>Latest Graph:</b></td><td style=\"vertical-align:top\"><a href=\"${url}\" target=\"_blank\">Click to View<\a></td></tr></table>');
usgsTemplate.setTitle('USGS Stream Gage');
var floodplainTemplate = new esri.InfoTemplate();
floodplainTemplate.setContent(setFloodplainPopupContent);
floodplainTemplate.setTitle('100-Year Floodplain');
popup = new esri.dijit.Popup({
fillSymbol: new esri.symbol.SimpleFillSymbol(esri.symbol.SimpleFillSymbol.STYLE_SOLID, new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_SOLID, new dojo.Color([255,0,0]), 2), new dojo.Color([255,255,0,0.25]))
}, dojo.create("div"));
// Create the map
map = new esri.Map("map", {
extent:initExtent,
minScale: 4750000,
basemap: 'streets',
infoWindow:popup,
outFields: ["*"]
});
theUsgsLayer = new esri.layers.FeatureLayer(SERVERPATH + "/hydrography/swmStreamGages/MapServer/0", {
id: 'usgsGageLayer',
mode: esri.layers.FeatureLayer.MODE_ONDEMAND,
infoTemplate:usgsTemplate,
outFields: ["*"],
visible: true
});
theFloodplainLayer = new esri.layers.FeatureLayer(SERVERPATH + "/environmental/femaFloodPlain/MapServer/0", {
id: 'femaFloodplainLayer',
mode: esri.layers.FeatureLayer.MODE_ONDEMAND,
infoTemplate:floodplainTemplate,
outFields: ["*"],
opacity:0.35,
visible: false
});
.
. //Later on in the init() function...
.
.
//Listener event for feature selection and the popup info widow
dojo.connect(theUsgsLayer,"onClick",function(evt){
//Listener event for feature selection and the popup info widow
var query = new esri.tasks.Query();
query.geometry = pointToExtent(map,evt.mapPoint,15);
var deferred = theUsgsLayer.selectFeatures(query,esri.layers.FeatureLayer.SELECTION_NEW);
map.infoWindow.resize(350,300);
map.infoWindow.setFeatures([deferred]);
map.infoWindow.show(evt.mapPoint);
});
//Listener event for feature selection and the popup info widow
dojo.connect(theFloodplainLayer,"onClick",function(evt){
//Listener event for feature selection and the popup info widow
var query = new esri.tasks.Query();
query.geometry = pointToExtent(map,evt.mapPoint,15);
var deferred = theFloodplainLayer.selectFeatures(query,esri.layers.FeatureLayer.SELECTION_NEW);
map.infoWindow.resize(200,175);
map.infoWindow.setFeatures([evt.graphic]);
map.infoWindow.show(evt.mapPoint);
});
Hope that points you in the right direction. You can also search the forum for identifyTask an popup/infoWindow and you might find some other examples.Good luck!Steve
