nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

Popups and Zoom are Not in Correct Spot

CraigMcDade

I've been updating my app to v3.7 and I'm getting some odd behavior in my popups and zoom.

The popups show a couple inches to the top and right of where I click. The Zoom centers similarly to the top and right of wherever my mouse is.

At first I thought it might be a projection issue with some of my services, but I have (I think) ruled that out because I noticed that once I resize the map, the issue goes away and the popups and zoom are in the correct spot. I'm not sure where to go from here, any ideas?

My app is HERE.

Finde mehr Beiträge mit dem Tag

Accepted answers

All comments

JasonZou

There is one issue in your code. The position of "esri/dijit/Popup" module does not match the position in the alias list. Change the top part to:

    require([
      "esri/map", 
      "esri/dijit/BasemapToggle", 
      "esri/dijit/HomeButton",
      "esri/config",
      "esri/dijit/Popup",
      "dijit/dijit", // optimize: load dijit layer
      "dijit/layout/BorderContainer", //HTML CONTAINER
      "dijit/layout/ContentPane", //CONTAINER
      "dijit/TitlePane", //CONTAINER
      "esri/arcgis/utils", //Elements
      "dijit/form/ToggleButton", //HTML
      "dijit/form/Button", //HTML
      "dijit/Dialog", //Required for Custom Splash Page
      "esri/dijit/BasemapGallery", // Required for Basemap Gallery
      "dijit/layout/AccordionContainer",
      "dojo/fx", // needed if use jsapi 3.0
      "agsjs/dijit/TOC",
      "dojo/ready",
      "dojo/domReady!"
    ], function(
      Map, BasemapToggle, HomeButton, esriConfig, Popup
    )  {

CraigMcDade

Thanks for pointing that out. I have made the change, however, the issue still is there.

JasonZou

The main cause is that the map object is initialized before the dom elements are ready and parsed. When the map object is created, the dom element "map" occupies the whole page. That causes the offset of the popup. Do this.

Change djConfig to below. Note you forgot to set async to true which is required for AMD mode.

var djConfig = {
    parseOnLoad: false,
    async: true,
    packages: [{
          "name": "agsjs",
          "location": location.pathname.replace(/\/[^/]+$/, "") + '/agsjs'
    }]
};

Then, include "dojo/parser" to the dependency list, and set its alias to parser.

    require([
      "dojo/parser",
      "esri/map", 
      "esri/dijit/BasemapToggle", 
      "esri/dijit/HomeButton",
      "esri/config",
      "esri/dijit/Popup",
      "dijit/dijit", // optimize: load dijit layer
      "dijit/layout/BorderContainer", //HTML CONTAINER
      "dijit/layout/ContentPane", //CONTAINER
      "dijit/TitlePane", //CONTAINER
      "esri/arcgis/utils", //Elements
      "dijit/form/ToggleButton", //HTML
      "dijit/form/Button", //HTML
      "dijit/Dialog", //Required for Custom Splash Page
      "esri/dijit/BasemapGallery", // Required for Basemap Gallery
      "dijit/layout/AccordionContainer",
      "dojo/fx", // needed if use jsapi 3.0
      "agsjs/dijit/TOC",
      "dojo/ready",
      "dojo/domReady!"
    ], function(
      parser, Map, BasemapToggle, HomeButton, esriConfig, Popup
    )  {
      parser.parse();      // parse the page before the map is initialized.

CraigMcDade

Great explanation. Thanks for your help. I'm sure this fixes the original issue, however, making those changes introduces a few new errors and stops the map from displaying properly. Most likely due to other issues in my code:

l
SCRIPT438: Object doesn't support property or method 'require' 
identifyMultiple.js, line 4 character 1
dojo/parser::parse() errorError: Unable to resolve constructor for: 'dojox.grid.DataGrid' 
Error parsing in _ContentSetter#undefinedError: Unable to resolve constructor for: 'dojox.grid.DataGrid' 
Error undefined running custom onLoad code: This deferred has already been resolved 
LOG: [object Object] 
LOG: toggle[Widget esri.dijit.BasemapToggle, BasemapToggle] 
TypeError: Unable to set value of the property 'canSort': object is null or undefined 
LOG: message:Unable to set value of the property 'canSort': object is null or undefined 
LOG: description:Unable to set value of the property 'canSort': object is null or undefined 
LOG: number:-2146823281 
LOG: info:Unable to set value of the property 'canSort': object is null or undefined 
LOG: name:TypeError 
LOG: . 
LOG: TOC loaded

I'll start sorting through those in firebug.

JasonZou

These new errors must be introduced by async: true. Your code looks kind of mixed mode: partial AMD and partial legacy. You might need to make it either pure AMD or legacy.

RyanGraves

I was having the same problem and as soon as I called parser.parse() instead of parsing on load this fix my issue. Thank you very much! It was driving me nuts because as soon as I resized my browser window everything was working properly.

JasonZou

Glad to help:)

Nimm an der Diskussion teil

Angemeldete Mitglieder können Beiträge verfassen, Updates folgen und mehr. Neu hier? Registriere ein kostenloses Konto.

Anmelden
Registrieren

Schnellzugriffe

Community Help
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.