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
