looking for a Right popup sample

Question

Hi all,

I was looking for a sample for popup function.
However all the samples have only clickable from one layer.
I would like to have multiple layers to be able to click and show popup window.

Is there any sample that I can get the idea of it?

kenbuja · Answer

For another way to do this, take a look at this post showing how to use a DeferredList with multiple services.

GyeyoungChoi · Answer

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('

Gage Location:	${NAME}
Latest Graph:	Click to View<\a>

'); 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 Thank you Steve!

evtguy · Answer

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('

Gage Location:	${NAME}
Latest Graph:	Click to View<\a>

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