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