topic Re: Why aren't my dialog pop ups showing? in ArcGIS JavaScript Maps SDK Questions

Why aren't my dialog pop ups showing?

CaraMayo — Tue, 22 May 2018 20:41:15 GMT

I have a left-hand panel with project info cards and a map taking up the rest of the page with polygons of project locations. I've gotten it to the point where when I hover over a card, its corresponding polygon gets highlighted, but the dialog with the project title is not showing up. I can't figure out why. When I console log 'content' I get the correct title and it seems like I get output when I console.log 'dialog' as well, but I'm not getting a pop up on the map. Any help would be greatly appreciated!

Thanks!

Here's my code:

require([
"esri/map",
"esri/layers/FeatureLayer",
// "esri/dijit/PopupTemplate",
// "esri/InfoTemplate",
"esri/symbols/SimpleFillSymbol",
"esri/symbols/SimpleLineSymbol",
"esri/renderers/SimpleRenderer",
"esri/graphic",
"esri/lang",
"esri/Color",
"dojo/number",
"dojo/dom-style",
"dijit/TooltipDialog",
"dijit/popup",
"esri/dijit/Legend",
"dojo/_base/array",
"esri/tasks/query",
"esri/tasks/QueryTask",
"dojo/on",
"dojo/dom",
"dojo/dom-construct",
"dojo/domReady!"

], function(
Map,
FeatureLayer,
SimpleFillSymbol,
SimpleLineSymbol,
SimpleRenderer,
Graphic,
esriLang,
Color,
number,
domStyle,
TooltipDialog,
dijitPopup,
Legend,
array,
Query,
QueryTask,
on,
dom,
domConst

) {

var map = new Map("viewDiv", {
basemap: "gray-vector",
center: [ -85.20127, 35.12355 ],
zoom: 1
});

//Add layer to the map

var serviceUrl = "https://services2.arcgis.com/C8EMgrsFcRFL6LrL/arcgis/rest/services/HISAProjects_WFL1/FeatureServer/0?token=wN707m6ZvZuT-… ";
var layer = new FeatureLayer(serviceUrl, {
mode: FeatureLayer.MODE_SNAPSHOT,
outFields: [ "FY", "HISAProjects_final_1262017_cs_2", "HISAProjects_final_1262017_csv1", "HISAProjects_final_1262017_cs_4", "HISAProjects_final_1262017_cs_5", "HISAProjects_final_1262017_csv_", "HISAProjects_final_1262017_cs_3", "HISAProjects_final_1262017_cs_1", "HabitatData12_4_17_ProjectNum"],

});
map.addLayer(layer);

// "Global" Variables
var button = document.getElementById("button");
var idValues = [];
var elem = document.getElementsByClassName("clickable");
//var projNumArr = [];
var target;

map.infoWindow.resize(245,125);

//close the dialog when the mouse leaves the highlight graphic
map.on("load", function(){
//load map
map.graphics.enableMouseEvents();
map.graphics.on("mouse-out", closeDialog);
closeDialog();

});

dialog = new TooltipDialog({
id: "tooltipDialog",
style: "position: absolute; width: 250px; font: normal normal normal 10pt Helvetica;z-index:100"
});
dialog.startup();

var highlightSymbol = new SimpleFillSymbol(
SimpleFillSymbol.STYLE_SOLID,
new SimpleLineSymbol(
SimpleLineSymbol.STYLE_SOLID,
new Color([255,0,0]), 3
),
new Color([125,125,125,0.35])
);

layer.on('update-end', function(evt){
var projectID = [];
array.map(layer.graphics, function(gra){

projectID.push(gra.attributes.HabitatData12_4_17_ProjectNum);
var project = projectID;

//Read id number for each card
$(".clickable").mouseenter(function(e) {

});
}); // end Function

Re: Why aren't my dialog pop ups showing?

RobertScheitlin__GISP — Wed, 23 May 2018 13:19:56 GMT

Cara,

I would like to help you on this but I need more.

The token provide is expired.
The last time I helped you you provided some of the files for this project but none of the css files (that you really help me setup your project on my end for debugging).
Is this code to go in the filtertool.js or the cardswap.js or is this something completely new?

Re: Why aren't my dialog pop ups showing?

CaraMayo — Wed, 23 May 2018 22:31:05 GMT

Hi Robert! I've updated the code with a new token. I've also attached a zip file of my code (without the images because it said the file was too large). This code is in the filtertool.js file. Let me know if you need anything else and thank you for your help!

Re: Why aren't my dialog pop ups showing?

RobertScheitlin__GISP — Thu, 24 May 2018 13:38:49 GMT

Cara,

Sorry to say that the token is still invalid so I can not test.

Re: Why aren't my dialog pop ups showing?

CaraMayo — Thu, 24 May 2018 14:17:11 GMT

I'm sorry about that. I've updated the code, and the new service URL worked once, but now it's not working anymore. I'm just copying and pasting the entire Service URL from arcgis online. Is there something else I should do to make it work?

Re: Why aren't my dialog pop ups showing?

RobertScheitlin__GISP — Thu, 24 May 2018 14:25:42 GMT

Cara,

What is your token life set to? The new token worked for a few minutes then it expired again.

Re: Why aren't my dialog pop ups showing?

CaraMayo — Thu, 24 May 2018 14:35:33 GMT

I used a different account to get the service URL and it looks like it's working now. I'm not sure what the token life is set to on my other account. How do I find that?

Re: Why aren't my dialog pop ups showing?

RobertScheitlin__GISP — Thu, 24 May 2018 14:42:57 GMT

Editing token settings in Manager—ArcGIS Server Administration (Windows) | ArcGIS Enterprise

Nope the token is no good. You did update it in the filtertool.js right?

Re: Why aren't my dialog pop ups showing?

RobertScheitlin__GISP — Fri, 10 Dec 2021 21:32:28 GMT

Cara,

I think I have narrowed down your issue from studying your code. You are trying to show the popup using the evt.x and evt.y but the evt variable is from the layer update-end event and that does not have a x and y property.

Here is my suggestion:

get the graphics geometry extent center and convert that to screen coordinates and use that

            if(same == gra.attributes.HabitatData12_4_17_ProjectNum) {
              var t = "<b>${HISAProjects_final_1262017_cs_4}</b>";
              var content = esriLang.substitute(gra.attributes, t);
              var highlightGraphic = new Graphic(gra.geometry, highlightSymbol);
              map.graphics.add(highlightGraphic);
              dialog.setContent(content);
              domStyle.set(dialog.domNode, "opacity", 0.85);
              var pCent = gra.geometry.getExtent().getCenter();
              dijitPopup.open({
                popup: dialog,
                x: map.toScreen(pCent).x,
                y: map.toScreen(pCent).y
              });
            }‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Re: Why aren't my dialog pop ups showing?

CaraMayo — Thu, 24 May 2018 15:08:44 GMT

Ah, I see! Thank you!

Re: Why aren't my dialog pop ups showing?

CaraMayo2 — Tue, 24 Jul 2018 21:57:29 GMT

Hi Robert, I'm returning to this part of my code. When I hover over my cards, the pop ups don't appear directly over my polygons so that you know the . It looks like the pop up is trying to appear directly in the middle between the card and the polygon which makes it hard to know which polygon it's referring to. I'm not sure how to adjust this feature. Is there a property that controls where the pop up appears? I'm having trouble finding resources for this particular question for v3.2

Thanks!

Re: Why aren't my dialog pop ups showing?

RobertScheitlin__GISP — Tue, 24 Jul 2018 22:27:30 GMT

Cara,

The code looks like it should be using the graphics extent (bounding box) center. So in your image which graphic is this popup suppose to be for?

Re: Why aren't my dialog pop ups showing?

CaraMayo2 — Tue, 24 Jul 2018 23:01:14 GMT

It's supposed to be for the polygon highlighted in gold in the Gulf of Mexico.

Re: Why aren't my dialog pop ups showing?

RobertScheitlin__GISP — Fri, 10 Dec 2021 21:32:31 GMT

Cara,

Try:

              dijitPopup.open({
                popup: dialog,
                x: map.toScreen(pCent).x + map.position.x,
                y: map.toScreen(pCent).y + map.position.y
              });‍‍‍‍‍

Re: Why aren't my dialog pop ups showing?

CaraMayo2 — Wed, 25 Jul 2018 15:42:42 GMT

Hi Robert, ignore my last comment. I got mixed up. It works perfectly. Thank you so much for your time!