Why aren't my dialog pop ups showing?

553
14
Jump to solution
05-22-2018 01:41 PM
CaraMayo
New Contributor

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...  ";
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) {

var target = $(this).attr("id");
var result = target.split(",");
console.log(result + ", " + typeof result); //id of card "selected"

project.forEach(function(id) {
if(id == result){
console.log("same: " + id);
var same = id;
console.log("same id: " + same);

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);
dijitPopup.open({
popup: dialog,
x: evt.pageX,
y: evt.pageY
});
}
}
});
});
});
});

function closeDialog() {
map.graphics.clear();
dijitPopup.close(dialog);
$(".clickable").mouseleave(function(e) {
map.graphics.clear();
dijitPopup.close(dialog);

});

}

var legend = new Legend({
map: map,
layerInfos: [{
layer: layer,
title: "Habitat Type"
}]
}, "legendDiv");

map.on("load", function(evt){
legend.startup();

});
}); // end Function

0 Kudos
1 Solution

Accepted Solutions
RobertScheitlin__GISP
MVP Esteemed Contributor

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
              });
            }

View solution in original post

0 Kudos
14 Replies
RobertScheitlin__GISP
MVP Esteemed Contributor

Cara,

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

  1. The token provide is expired.
  2. 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).
  3. Is this code to go in the filtertool.js or the cardswap.js or is this something completely new?
0 Kudos
CaraMayo
New Contributor

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!

0 Kudos
RobertScheitlin__GISP
MVP Esteemed Contributor

Cara,

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

0 Kudos
CaraMayo
New Contributor

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?

0 Kudos
RobertScheitlin__GISP
MVP Esteemed Contributor

Cara,

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

0 Kudos
CaraMayo
New Contributor

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? 

0 Kudos
RobertScheitlin__GISP
MVP Esteemed Contributor

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?

0 Kudos
RobertScheitlin__GISP
MVP Esteemed Contributor

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
              });
            }

View solution in original post

0 Kudos
CaraMayo
New Contributor

Ah, I see! Thank you!

0 Kudos