topic Re: Hover Popup Not Working in ArcGIS JavaScript Maps SDK Questions

Hover Popup Not Working

LindaDunklee — Fri, 25 Aug 2017 01:39:37 GMT

I am using code almost exactly from the Feature Layer Hover sample and it works in the sandbox, but not when I integrate with the rest of my code. The query runs fine and adds graphics to the map, but the mouse over event does nothing. Would anyone have any ideas on things to troubleshoot?

- I am calling the setUpQuery function from a separate file, after the map is constructed. It is in a series of other map.on("load") functions and moving around this call is having no effect.

- I verified that mouseevents are being enabled by logging the countiesGraphics layer to the console. The property shows true.

- I wasn't sure if there was a graphics layer masking the graphics layer I'm trying to access. Getting graphics layers IDs show that only the countiesGraphicsLayer and my one feature layer are present. Changing the order of these layers does nothing.

- Instead of adding a new graphics layer, I tried adding the query results directly to the map.graphics layer and mousing over that layer instead. No mouseover event fires.

var countiesGraphicsLayer;

require([
"dojo/dom",
"dojo/on",
"esri/map",
"esri/graphic",
"esri/InfoTemplate",
"esri/SpatialReference",
"esri/geometry/Extent",
"esri/layers/GraphicsLayer",
"esri/symbols/SimpleFillSymbol",
"esri/symbols/SimpleLineSymbol",
"esri/symbols/SimpleMarkerSymbol",
"esri/tasks/query",
"esri/tasks/QueryTask",
"esri/Color",
"dojo/domReady!"
],
function (
dom, on, Map, Graphic, InfoTemplate, SpatialReference, Extent, GraphicsLayer,
SimpleFillSymbol, SimpleLineSymbol, SimpleMarkerSymbol,Query, QueryTask, Color
) {

setUpQuery = function(){
var queryTask = new QueryTask(url);

//build query filter
var query = new Query();
query.returnGeometry = true;
query.outFields = ["*"];
//query.outSpatialReference = { "wkid": 102100 };
query.where = "Status ='Active'";

var infoTemplate = new InfoTemplate();
var content = "test";
infoTemplate.setTitle("${Status}");
infoTemplate.setContent(content);

map.infoWindow.resize(245, 125);

//Can listen for complete event to process results
//or can use the callback option in the queryTask.execute method.
queryTask.on("complete", function (event) {
console.log("query task complete");
map.graphics.clear();
var highlightSymbol = new SimpleMarkerSymbol(SimpleMarkerSymbol.STYLE_CIRCLE, 7,
// pink
new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID, new Color([254, 0, 239])));

var symbol = new SimpleMarkerSymbol(SimpleMarkerSymbol.STYLE_CIRCLE, 7,
// white
new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID, new Color([255, 255, 25])));

var features = event.featureSet.features;
countiesGraphicsLayer = new GraphicsLayer();
//QueryTask returns a featureSet.
//Loop through features in the featureSet and add them to the map.
var featureCount = features.length;
for (var i = 0; i < featureCount; i++) {
//Get the current feature from the featureSet.
var graphic = features; //Feature is a graphic
graphic.setSymbol(symbol);
graphic.setInfoTemplate(infoTemplate);

countiesGraphicsLayer.add(graphic);
}
map.addLayer(countiesGraphicsLayer);
countiesGraphicsLayer.enableMouseEvents();

console.log(countiesGraphicsLayer);
//listen for when the mouse-over event fires on the countiesGraphicsLayer
//when fired, create a new graphic with the geometry from event.graphic
//and add it to the maps graphics layer
countiesGraphicsLayer.on("mouse-over",function (event) {
map.graphics.clear(); //use the maps graphics layer as the highlight layer
var graphic = event.graphic;
map.infoWindow.setContent(graphic.getContent());
map.infoWindow.setTitle(graphic.getTitle());
var highlightGraphic = new Graphic(graphic.geometry, highlightSymbol);
map.graphics.add(highlightGraphic);
map.infoWindow.show(event.screenPoint,
map.getInfoWindowAnchor(event.screenPoint));
});

//listen for when map.graphics mouse-out event is fired
//and then clear the highlight graphic
//and hide the info window
map.graphics.on("mouse-out", function () {
console.log("test");
map.graphics.clear();
map.infoWindow.hide();
});
});

queryTask.execute(query);
}

});

Re: Hover Popup Not Working

RobertScheitlin__GISP — Fri, 25 Aug 2017 02:48:40 GMT

Linda,

What I am seeing is that you add your countiesGraphicsLayer to the map and add the event listeners before the layer is even created because the layer is created inside the queryTask complete event handler, and it is added to the map before that (a null is added). Do you not see any errors in your browsers web console?

Re: Hover Popup Not Working

LindaDunklee — Fri, 25 Aug 2017 03:29:01 GMT

There are no errors in the browser console, no. I'm not sure I understand when you say that the countiesGraphicsLayer is added as a null to the map before the query executes - how do I prevent this?

Re: Hover Popup Not Working

LindaDunklee — Fri, 25 Aug 2017 04:31:03 GMT

I am noticing now that the spatial reference of the countiesGraphics layer is 4326 and the spatial reference of the map is 102100 - the highlight symbols appear in the right location but this could still be a problem? I cannot figure out how to change the spatial reference of the countiesGraphicsLayer though.

Re: Hover Popup Not Working

RobertScheitlin__GISP — Fri, 25 Aug 2017 11:34:28 GMT

Linda,

The way your code looks to me is that the countiesGraphicsLayer is set to a new GraphicsLayer INSIDE the queryTask complete and yet it is added to the map outside that function which gets executed before that, So you need to set the countiesGraphicsLayer to a new GraphicsLayer OUTSIDE the QueryTask Complete function.

For the spatial reference you need to use:

query.outSpatialReference = map.spatialReference;‍

Re: Hover Popup Not Working

LindaDunklee — Fri, 10 Dec 2021 23:13:31 GMT

The line adding the layer to the map looks to also be inside of the queryTask.on("complete").

        queryTask.on("complete", function(event) {
          console.log("query task complete");
          map.graphics.clear();
          var highlightSymbol = new SimpleMarkerSymbol(SimpleMarkerSymbol.STYLE_CIRCLE, 7,
            // pink
            new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID, new Color([254, 0, 239])));
          var symbol = new SimpleMarkerSymbol(SimpleMarkerSymbol.STYLE_CIRCLE, 7,
            // white
            new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID, new Color([255, 255, 25])));
          var features = event.featureSet.features;
          countiesGraphicsLayer = new GraphicsLayer();
          //QueryTask returns a featureSet.
          //Loop through features in the featureSet and add them to the map.
          var featureCount = features.length;
          for(var i = 0; i < featureCount; i++) {
            //Get the current feature from the featureSet.
            var graphic = features[i]; //Feature is a graphic
            graphic.setSymbol(symbol);
            graphic.setInfoTemplate(infoTemplate);
            countiesGraphicsLayer.add(graphic);
          }
          map.addLayer(countiesGraphicsLayer);
          countiesGraphicsLayer.enableMouseEvents();
          console.log(countiesGraphicsLayer);
          //listen for when the mouse-over event fires on the countiesGraphicsLayer
          //when fired, create a new graphic with the geometry from event.graphic
          //and add it to the maps graphics layer
          countiesGraphicsLayer.on("mouse-over", function(event) {
            map.graphics.clear(); //use the maps graphics layer as the highlight layer
            var graphic = event.graphic;
            map.infoWindow.setContent(graphic.getContent());
            map.infoWindow.setTitle(graphic.getTitle());
            var highlightGraphic = new Graphic(graphic.geometry, highlightSymbol);
            map.graphics.add(highlightGraphic);
            map.infoWindow.show(event.screenPoint,
              map.getInfoWindowAnchor(event.screenPoint));
          });
          //listen for when map.graphics mouse-out event is fired
          //and then clear the highlight graphic
          //and hide the info window
          map.graphics.on("mouse-out", function() {
            console.log("test");
            map.graphics.clear();
            map.infoWindow.hide();
          });
        });‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

And when I uncomment the line setting the spatial reference of the query to 102100 (the same as the map), then the graphic features inside of the graphics layer have this spatial reference, but the graphics layer itself still shows a spatial reference of 4326.

Re: Hover Popup Not Working

RobertScheitlin__GISP — Sat, 26 Aug 2017 20:59:14 GMT

Ok. It was hard to tell without code formatting. So I developed a sample using the module code you provided and it worked great. The only thing I had to tweak was some code to match the esri sample Data I choose to use. See Attached full working sample:

Re: Hover Popup Not Working

LindaDunklee — Fri, 06 Oct 2017 03:26:39 GMT

So I've determined after a lot of troubleshooting that the hover popup isn't working for me because of some print functionality I have implemented. I am declaring the gfxRenderer in dojoConfig to be "canvas" in order to print the graphics to a canvas and then to PDF/PNG when the user chooses to. Unfortunately what this means is that the graphics are no longer rendered as SVG and lose their ability to respond to mouse events. When I remove the "canvas", the hover popup works, but the print does not. The print functionality I've modified from GitHub - WSDOT-GIS/arcgis-map-thumbnail-builder: Exports an image of an ArcGIS API for JavaScript map. , with the issue arising in the "map-to-canvas".

Would you have any ideas on how to make these compatible?

Re: Hover Popup Not Working

RobertScheitlin__GISP — Fri, 06 Oct 2017 12:25:40 GMT

Linda,

You can export an image of the map using the standard PrintTask... So what is it specifically you need this GitHub Repo for?

Re: Hover Popup Not Working

LindaDunklee — Fri, 06 Oct 2017 18:14:48 GMT

I'm trying that now, but get a vague error every time I run the print task. Just says "unable to complete operation". printFunction is tied onclick to a button in the app.

require([
"esri/map", "esri/tasks/PrintTask", "esri/tasks/PrintParameters"
], function(Map, PrintTask, PrintParameters) {

printFunction = function(){
var printTask = new PrintTask("my server's print task OR arcgis print task - neither works");
var params = new PrintParameters();
params.map = map;

printTask.execute(params, printResult);

function printResult(success){
console.log(success);
}
}
});

Re: Hover Popup Not Working

RobertScheitlin__GISP — Fri, 06 Oct 2017 18:30:18 GMT

Have you looked at this sample:

Print | ArcGIS API for JavaScript 3.22

Re: Hover Popup Not Working

LindaDunklee — Fri, 06 Oct 2017 19:00:34 GMT

Yes - trimming that down to

require([
"esri/map", "esri/toolbars/draw", "esri/dijit/Print",
"esri/layers/ArcGISTiledMapServiceLayer", "esri/layers/ArcGISDynamicMapServiceLayer",
"esri/layers/LayerDrawingOptions",
"esri/symbols/SimpleMarkerSymbol", "esri/symbols/SimpleLineSymbol",
"esri/symbols/SimpleFillSymbol", "esri/graphic",
"esri/renderers/ClassBreaksRenderer",
"esri/config",
"dojo/_base/array", "esri/Color", "dojo/parser",
"dojo/query", "dojo/dom", "dojo/dom-construct",
"dijit/form/CheckBox", "dijit/form/Button",

"dijit/layout/BorderContainer", "dijit/layout/ContentPane", "dojo/domReady!"
], function(
Map, Draw, Print,
ArcGISTiledMapServiceLayer, ArcGISDynamicMapServiceLayer,
LayerDrawingOptions,
SimpleMarkerSymbol, SimpleLineSymbol,
SimpleFillSymbol, Graphic,
ClassBreaksRenderer,
esriConfig,
arrayUtils, Color, parser,
query, dom, domConstruct,
CheckBox, Button
) {
parser.parse();

esriConfig.defaults.io.proxyUrl = "/proxy/";

// print dijit
var printer = new Print({
map: map,
url: "https://sampleserver6.arcgisonline.com/arcgis/rest/services/Utilities/PrintingTools/GPServer/Export%20Web%20Map%20Task"
}, dom.byId("printButton"));
printer.startup();

});

and integrating gives the error: Tried to register widget with id==dijit_layout_BorderContainer_0 but that id is already registered. Commenting out the parser or ignoring this error gives the error: PrintTask.js:33 Uncaught TypeError: Cannot read property 'length' of undefined

Re: Hover Popup Not Working

RobertScheitlin__GISP — Fri, 06 Oct 2017 19:11:55 GMT

Do you have a dojoConfig portion in your code?

Re: Hover Popup Not Working

LindaDunklee — Fri, 06 Oct 2017 19:36:18 GMT

I do not.

Re: Hover Popup Not Working

RobertScheitlin__GISP — Fri, 06 Oct 2017 19:44:29 GMT

You are talking about a native JS API app right? It is strange that you would get an "already registered" error if you have a parser parse and no dojoConfig.