topic Re: looking for a Right popup sample in ArcGIS JavaScript Maps SDK Questions

looking for a Right popup sample

GyeyoungChoi — Wed, 04 Sep 2013 20:06:06 GMT

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?

Re: looking for a Right popup sample

SteveCole — Sat, 11 Dec 2021 18:43:23 GMT

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

Re: looking for a Right popup sample

GyeyoungChoi — Sat, 11 Dec 2021 18:43:25 GMT

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

Thank you Steve!

Re: looking for a Right popup sample

KenBuja — Mon, 09 Sep 2013 12:55:20 GMT

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