Why are my Popup &quot;Next,Previous&quot; buttons not showing?

JA4 · ‎10-28-2013

I'm working with a feature layer of points where some overlap and some don't. I'm having an issue showing popup windows with multiple features. I've been able to load my data into ArcGIS online and view Popups that show "Next feature/Previous feature" arrow buttons in the title pane area, but when I try to do this using a Popup in my script I never see those buttons. I am new to working with javascript and the ESRI JS API, so I have not been able to pinpoint where my script is failing to do the correct operation. You can see my script below where I've tried setting "pagingControls" to true, but I think the issue is something to do with the process of selecting what features are going to be returned to the popup window. Currently my popups will correctly show the fields I've specified in my popupTemplate, but they never show next/previous buttons where I know they should.

First, can I please get an explanation of the process that takes place when a graphic on the map (like a point) is clicked and an infoWindow or popup is show? Is this using an identify or query task? Why is the default behavior for the returned results different between the simple script I created and what ArcGIS online does? I notice that when using ArcGIS online's popup viewer it will show multiple features if I am zoomed out and click in an area with points clustered together so that the graphics look like they're overlapping, and when fully zoomed in it will show multiple points that are in the exact same location (still overlapping). What parameter is controlling this behavior? Is there a distance query that I need to specify so that even points that have identical locations will be selected and returned in my popup window?

Second, I'm confused how the required modules work with functions in the map. Why is it possible that without requiring the Popup module, a popup window can be shown if I've only loaded the popupTemplate and specified my popuptemplate as the infoTemplate to my feature layer?
Why is it possible to see the attributes of a point graphic if I've not loaded the Identify or Query modules? I feel like there's a lot of stuff going on behind the scenes yet I can't pinpoint it using Firebug or Chrome's Dev Tools.

Big thank you to anyone who can help me understand this better.

<!DOCTYPE html> <html>     <head>     <meta http-equiv="Content-Type" content="text/html; charset=utf-8">     <meta http-equiv="X-UA-Compatible" content="IE=7, IE=9, IE=10">     <!--The viewport meta tag is used to improve the presentation and behavior of the     samples on iOS devices-->     <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">     <title>       Points     </title>     <link rel="stylesheet" href="http://js.arcgis.com/3.7/js/dojo/dijit/themes/claro/claro.css">     <link rel="stylesheet" href="http://js.arcgis.com/3.7/js/esri/css/esri.css">     <style>       html, body, #map {         height: 100%;         width: 100%;         margin: 0px;         padding: 0px;       }        #search {         display: block;         position: absolute;         z-index: 3;         top: 20px;         left: 75px;       }             </style>          <script src="http://js.arcgis.com/3.7/"></script>      <script>       var map;       require([         "esri/map",         "esri/layers/ArcGISDynamicMapServiceLayer",         "esri/layers/FeatureLayer",         "esri/dijit/Popup",         "esri/dijit/PopupTemplate",         "esri/tasks/GeometryService",         "esri/symbols/SimpleMarkerSymbol",          "esri/layers/ArcGISTiledMapServiceLayer",          "dojo/parser",         "dojo/_base/Color",         "dojo/_base/array",         "dojo/dom",         "esri/arcgis/utils",         "esri/domUtils",         "dojo/dom-style",         "dojo/dom-class",         "dijit/registry",         "dojo/dom-construct",          "dijit/layout/BorderContainer",          "dijit/layout/ContentPane",         "dijit/layout/AccordionContainer",          "dojo/domReady!"       ], function(         Map,          ArcGISDynamicMapServiceLayer, FeatureLayer, Popup,         PopupTemplate, GeometryService, SimpleMarkerSymbol,          ArcGISTiledMapServiceLayer,         parser, Color, arrayUtils, dom, arcgisUtils, domUtils,          domStyle, domClass, registry, domConstruct         ) {           parser.parse();            esri.config.defaults.geometryService = new esri.tasks.GeometryService("http://localhost:6080/arcgis/rest/services/Utilities/Geometry/GeometryServer");          var popup = new Popup({             offsetX:10,             offsetY:10,             titleInBody: true,             pagingControls: true,             pagingInfo: true,             zoomFactor: 2         }, domConstruct.create("div"));            map = new Map("map", {             basemap: "satellite",             center: [-112.072327, 33.444047],             zoom: 14,             infoWindow: popup           });          var popupTemplate = new PopupTemplate({           title: "Address: {FullAddress}",           fieldInfos: [           {fieldName: "PIN", visible: true, label:"PIN: "},           {fieldName: "APN", visible:true, label:"APN: "},           {fieldName: "City", visible:true, label:"City: "},           {fieldName: "Zip", visible:true, label:"Zip: "},           {fieldName: "QS", visible:true, label:"QS: "},           {fieldName: "LAT", visible:true, label:"LAT: "},           {fieldName: "LONG", visible:true, label:"LONG: "},           {fieldName: "X", visible:true, label:"X: "},           {fieldName: "Y", visible:true, label:"Y: "},           ],           showAttachments:false         });           var kPoints = new FeatureLayer("http://localhost:6080/arcgis/rest/services/Layers/K_POINTS/MapServer/0", {           infoTemplate: popupTemplate,           outFields: ["*"]         });          map.addLayer(kPoints);        });     </script>     </head>     <body class="claro">       <div id="search"></div>        <div id="map"></div>      </body> </html>

JA4 · ‎10-29-2013

What a difference a good night's sleep can make...
I'm going to answer my own question just in case anyone else was stumbling over this issue. Using the example from this older Popup sample (here), I modified my script to run an identify task when the map is clicked. Still haven't reached where I want to be with this script but at least I'm not banging my head trying to figure out why the next and previous buttons weren't showing up.
The key point I needed to know was the tolerance (in pixels) that is used to search for features when the map is clicked. Declaring a new IdentifyParameters class and setting the identify parameter for tolerance (identifyParams.tolerance) gives me control over that.

My current script works but I have to click twice to get the results I want. Since I converted the example from an older pre-AMD style I think I still have some rearranging to do. Ideally I want the first click event to trigger the identify function.

<!DOCTYPE html> <html>     <head>     <meta http-equiv="Content-Type" content="text/html; charset=utf-8">     <meta http-equiv="X-UA-Compatible" content="IE=7, IE=9, IE=10">     <!--The viewport meta tag is used to improve the presentation and behavior of the     samples on iOS devices-->     <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">     <title>       Points     </title>     <link rel="stylesheet" href="http://js.arcgis.com/3.7/js/dojo/dijit/themes/claro/claro.css">     <link rel="stylesheet" href="http://js.arcgis.com/3.7/js/esri/css/esri.css">     <style>       html, body, #map {         height: 100%;         width: 100%;         margin: 0px;         padding: 0px;       }              #rightPane {         width: 20%;       }       #search {         display: block;         position: absolute;         z-index: 3;         top: 20px;         left: 75px;       }             </style>          <script src="http://js.arcgis.com/3.7/"></script>      <script>       var map;        require([         "esri/map",         "esri/tasks/IdentifyTask",         "esri/tasks/IdentifyParameters",         "esri/layers/ArcGISDynamicMapServiceLayer",         "esri/layers/FeatureLayer",         "esri/dijit/Popup",         "esri/dijit/PopupTemplate",         "esri/tasks/GeometryService",         "esri/symbols/SimpleMarkerSymbol",         "esri/layers/ArcGISTiledMapServiceLayer",          "dojo/parser",         "dojo/_base/Color",         "dojo/_base/array",         "dojo/_base/connect",         "dojo/dom",         "esri/arcgis/utils",         "esri/domUtils",         "dojo/dom-style",         "dojo/dom-class",         "dijit/registry",         "dojo/dom-construct",          "dijit/layout/BorderContainer",          "dijit/layout/ContentPane",         "dijit/layout/AccordionContainer",          "dojo/domReady!"       ], function(         Map, IdentifyTask, IdentifyParameters,         ArcGISDynamicMapServiceLayer, FeatureLayer, Popup,         PopupTemplate, GeometryService, SimpleMarkerSymbol,          ArcGISTiledMapServiceLayer,         parser, Color, arrayUtils, connect, dom, arcgisUtils, domUtils,          domStyle, domClass, registry, domConstruct         ) {           parser.parse();            esri.config.defaults.geometryService = new GeometryService("http://localhost:6080/arcgis/rest/services/Utilities/Geometry/GeometryServer");          var popup = new Popup({             offsetX:10,             offsetY:10,             titleInBody: true,             pagingControls: true,             pagingInfo: true,             zoomFactor: 2         }, domConstruct.create("div"));            map = new Map("map", {             basemap: "satellite",             center: [-112.072327, 33.444047],             zoom: 14,             infoWindow: popup           });          var popupTemplate = new PopupTemplate({           title: "Address: {FullAddress}",           fieldInfos: [           {fieldName: "PIN", visible: true, label:"PIN: "},           {fieldName: "APN", visible:true, label:"APN: "},           {fieldName: "City", visible:true, label:"City: "},           {fieldName: "Zip", visible:true, label:"Zip: "},           {fieldName: "QS", visible:true, label:"QS: "},           {fieldName: "LAT", visible:true, label:"LAT: "},           {fieldName: "LONG", visible:true, label:"LONG: "},           {fieldName: "X", visible:true, label:"X: "},           {fieldName: "Y", visible:true, label:"Y: "},           ],           showAttachments:false         });           var kPoints = new FeatureLayer("http://localhost:6080/arcgis/rest/services/Layers/K_POINTS/MapServer/0", {           mode: esri.layers.FeatureLayer.MODE_ONDEMAND,           infoTemplate: popupTemplate,           outFields: ["*"]         });          map.addLayer(kPoints);          map.on("click", executeIdentifyTask);          function executeIdentifyTask(evt) {           console.log("first");           var identifyTask = new IdentifyTask("http://localhost:6080/arcgis/rest/services/Layers/K_POINTS/MapServer");           identifyParams = new IdentifyParameters();           identifyParams.tolerance = 5;           identifyParams.returnGeometry = true;           identifyParams.layerIds = [0];           identifyParams.layerOption = esri.tasks.IdentifyParameters.LAYER_OPTION_ALL;           identifyParams.width  = map.width;           identifyParams.height = map.height;           identifyParams.geometry = evt.mapPoint;           identifyParams.mapExtent = map.extent;           var deferred = identifyTask.execute(identifyParams);                      deferred.addCallback(function(response) {             return dojo.map(response, function(result) {               var feature = result.feature;               feature.attributes.layerName = result.layerName;               feature.setInfoTemplate(popupTemplate);               console.log(feature);               return feature;             });           });          map.infoWindow.setFeatures([deferred]);         map.infoWindow.show(evt.mapPoint);       }        });     </script>     </head>     <body class="claro">       <div id="mainWindow" data-dojo-type="dijit.layout.BorderContainer" data-dojo-props="design:'headline',gutters:false" style="width:100%; height:100%;">       <div id="map" data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'center'">       </div>       <div id="search"></div>      </body> </html>

View solution in original post

JA4 · ‎10-29-2013

What a difference a good night's sleep can make...
I'm going to answer my own question just in case anyone else was stumbling over this issue. Using the example from this older Popup sample (here), I modified my script to run an identify task when the map is clicked. Still haven't reached where I want to be with this script but at least I'm not banging my head trying to figure out why the next and previous buttons weren't showing up.
The key point I needed to know was the tolerance (in pixels) that is used to search for features when the map is clicked. Declaring a new IdentifyParameters class and setting the identify parameter for tolerance (identifyParams.tolerance) gives me control over that.

My current script works but I have to click twice to get the results I want. Since I converted the example from an older pre-AMD style I think I still have some rearranging to do. Ideally I want the first click event to trigger the identify function.

<!DOCTYPE html> <html>     <head>     <meta http-equiv="Content-Type" content="text/html; charset=utf-8">     <meta http-equiv="X-UA-Compatible" content="IE=7, IE=9, IE=10">     <!--The viewport meta tag is used to improve the presentation and behavior of the     samples on iOS devices-->     <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">     <title>       Points     </title>     <link rel="stylesheet" href="http://js.arcgis.com/3.7/js/dojo/dijit/themes/claro/claro.css">     <link rel="stylesheet" href="http://js.arcgis.com/3.7/js/esri/css/esri.css">     <style>       html, body, #map {         height: 100%;         width: 100%;         margin: 0px;         padding: 0px;       }              #rightPane {         width: 20%;       }       #search {         display: block;         position: absolute;         z-index: 3;         top: 20px;         left: 75px;       }             </style>          <script src="http://js.arcgis.com/3.7/"></script>      <script>       var map;        require([         "esri/map",         "esri/tasks/IdentifyTask",         "esri/tasks/IdentifyParameters",         "esri/layers/ArcGISDynamicMapServiceLayer",         "esri/layers/FeatureLayer",         "esri/dijit/Popup",         "esri/dijit/PopupTemplate",         "esri/tasks/GeometryService",         "esri/symbols/SimpleMarkerSymbol",         "esri/layers/ArcGISTiledMapServiceLayer",          "dojo/parser",         "dojo/_base/Color",         "dojo/_base/array",         "dojo/_base/connect",         "dojo/dom",         "esri/arcgis/utils",         "esri/domUtils",         "dojo/dom-style",         "dojo/dom-class",         "dijit/registry",         "dojo/dom-construct",          "dijit/layout/BorderContainer",          "dijit/layout/ContentPane",         "dijit/layout/AccordionContainer",          "dojo/domReady!"       ], function(         Map, IdentifyTask, IdentifyParameters,         ArcGISDynamicMapServiceLayer, FeatureLayer, Popup,         PopupTemplate, GeometryService, SimpleMarkerSymbol,          ArcGISTiledMapServiceLayer,         parser, Color, arrayUtils, connect, dom, arcgisUtils, domUtils,          domStyle, domClass, registry, domConstruct         ) {           parser.parse();            esri.config.defaults.geometryService = new GeometryService("http://localhost:6080/arcgis/rest/services/Utilities/Geometry/GeometryServer");          var popup = new Popup({             offsetX:10,             offsetY:10,             titleInBody: true,             pagingControls: true,             pagingInfo: true,             zoomFactor: 2         }, domConstruct.create("div"));            map = new Map("map", {             basemap: "satellite",             center: [-112.072327, 33.444047],             zoom: 14,             infoWindow: popup           });          var popupTemplate = new PopupTemplate({           title: "Address: {FullAddress}",           fieldInfos: [           {fieldName: "PIN", visible: true, label:"PIN: "},           {fieldName: "APN", visible:true, label:"APN: "},           {fieldName: "City", visible:true, label:"City: "},           {fieldName: "Zip", visible:true, label:"Zip: "},           {fieldName: "QS", visible:true, label:"QS: "},           {fieldName: "LAT", visible:true, label:"LAT: "},           {fieldName: "LONG", visible:true, label:"LONG: "},           {fieldName: "X", visible:true, label:"X: "},           {fieldName: "Y", visible:true, label:"Y: "},           ],           showAttachments:false         });           var kPoints = new FeatureLayer("http://localhost:6080/arcgis/rest/services/Layers/K_POINTS/MapServer/0", {           mode: esri.layers.FeatureLayer.MODE_ONDEMAND,           infoTemplate: popupTemplate,           outFields: ["*"]         });          map.addLayer(kPoints);          map.on("click", executeIdentifyTask);          function executeIdentifyTask(evt) {           console.log("first");           var identifyTask = new IdentifyTask("http://localhost:6080/arcgis/rest/services/Layers/K_POINTS/MapServer");           identifyParams = new IdentifyParameters();           identifyParams.tolerance = 5;           identifyParams.returnGeometry = true;           identifyParams.layerIds = [0];           identifyParams.layerOption = esri.tasks.IdentifyParameters.LAYER_OPTION_ALL;           identifyParams.width  = map.width;           identifyParams.height = map.height;           identifyParams.geometry = evt.mapPoint;           identifyParams.mapExtent = map.extent;           var deferred = identifyTask.execute(identifyParams);                      deferred.addCallback(function(response) {             return dojo.map(response, function(result) {               var feature = result.feature;               feature.attributes.layerName = result.layerName;               feature.setInfoTemplate(popupTemplate);               console.log(feature);               return feature;             });           });          map.infoWindow.setFeatures([deferred]);         map.infoWindow.show(evt.mapPoint);       }        });     </script>     </head>     <body class="claro">       <div id="mainWindow" data-dojo-type="dijit.layout.BorderContainer" data-dojo-props="design:'headline',gutters:false" style="width:100%; height:100%;">       <div id="map" data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'center'">       </div>       <div id="search"></div>      </body> </html>

Why are my Popup &amp;quot;Next,Previous&amp;quot; buttons not showing?

Why are my Popup "Next,Previous" buttons not showing?