AnsweredAssumed Answered

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

Question asked by GlobalAdams on Oct 28, 2013
Latest reply on Oct 29, 2013 by GlobalAdams
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>

Outcomes