topic Re: InfoWindow not showing up, help! in ArcGIS JavaScript Maps SDK Questions

InfoWindow not showing up, help!

Anonymous User — Wed, 18 Jan 2012 13:39:36 GMT

So I've been using a few of the samples to put an application together, I'm not a JavaScript coding expert, so this should be easy for those who are.
I want the app to Geocode, then do a spatial query on that geocoded point, highlight the feature and show an infoWindow. I also would like to be able to query by clicking. Bottom line: all of that works EXCEPT showing the infoWindow after the geocde spatial query, the info window DOES show when I click on the map. I think it has to do with this line:

(evt) ? map.infoWindow.show(evt.screenPoint,map.getInfoWindowAnchor(evt.screenPoint)) : null;

Below is the relevant code, please help! (some code has been removed because I know it works and is not relevant to te problem)

 
//Click Query Functions
function clickQuery(evt) {
esri.show(dojo.byId('loadingImg'));
map.infoWindow.hide();
map.graphics.clear();
featureSet = null;
//onClick event returns the evt point where the user clicked on the map.
//This contains the mapPoint (esri.geometry.point) and the screenPoint (pixel xy where the user clicked).
//set query geometry = to evt.mapPoint Geometry
geom = evt.mapPoint;
query.geometry = geom;
query.spatialRelationship = esri.tasks.Query.SPATIAL_REL_INTERSECTS;
//Execute task and call showResults on completion
queryTask.execute(query, function(fset) {
if (fset.features.length === 1) {
showFeature(fset.features[0],evt);} 
else {esri.hide(dojo.byId('loadingImg'));
}
});
}
 
//Geocode query function
function geoQuery(loc) { 
var geom = new esri.geometry.Point(loc.x,loc.y, map.spatialReference);  
query.geometry = geom;
query.spatialRelationship = esri.tasks.Query.SPATIAL_REL_INTERSECTS;
queryTask.execute(query, function(fset) {
if (fset.features.length === 0) {
showError();
} 
else if (fset.features.length === 1) {
showFeature(fset.features[0],evt);
} 
else {
esri.hide(dojo.byId('loadingImg'));
}
});
}
 
// Query Show Feature
function showFeature(feature,evt) {

//set symbol
var symbol = new esri.symbol.SimpleFillSymbol(esri.symbol.SimpleFillSymbol.STYLE_SOLID, 
new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_SOLID, 
new dojo.Color([102,204,0]),3), new dojo.Color([102,204,0,0.6]));
  
feature.setSymbol(symbol);
    
//construct infowindow title and content
var attr = feature.attributes;
 
map.infoWindow.setTitle("My Title");
map.infoWindow.setContent("My infoWindow Content");

map.graphics.add(feature);

(evt) ? map.infoWindow.show(evt.screenPoint,map.getInfoWindowAnchor(evt.screenPoint)) : null;

map.setExtent(feature.geometry.getExtent(),true);  
}

Re: InfoWindow not showing up, help!

derekswingley1 — Sat, 11 Dec 2021 14:53:55 GMT

Unless evt is global, evt is undefined when you pass it to showFeature from geoQuery. Also, your code as it stands would be trying to show the info window at some event point, rather than from the geocoded point. I would recommend using the point from your geocode result to show your info window. Try this in your showFeature function:

  // if the evt object exists, use its screen geometry
  // otherwise, use the feature's geometry to anchor the info window
  var screenPoint = (evt) ? evt.screenPoint :
    esri.geometry.toScreenGeometry(map.extent, map.width, map.height, feature.geometry);
  map.infoWindow.show(screenPoint, map.getInfoWindowAnchor(screenPoint));

Re: InfoWindow not showing up, help!

Anonymous User — Sat, 11 Dec 2021 14:53:58 GMT

That didn't work 😞 , still behaving the same. I get the infoWindow and highlighted feature with the click, but only the highlighted feature with the geocode.
Like I said, I'm a noob, so I have geom, loc, & evt all declared as global variables at the begining of my .js, does this matter?

dojo.require("esri.map");
dojo.require("esri.tasks.locator");
dojo.require("esri.tasks.query");

var map, symbol, locator, queryTask, query, feature, featureSet, params, geom, loc, evt;
var startExtent = new esri.geometry.Extent(-9501963.4729, 5077426.8804,-9061074.6938, 5529934.0878, new esri.SpatialReference({wkid:102100}));

function Init()...

Re: InfoWindow not showing up, help!

derekswingley1 — Wed, 18 Jan 2012 15:03:56 GMT

Don't declare evt as a global. If it's not global, then it will be undefined when showFeature is called from geoQuery which will cause the false portion of the ternary statement to be executed.

Re: InfoWindow not showing up, help!

Anonymous User — Wed, 18 Jan 2012 16:25:18 GMT

I deleted evt from the global variables and it didn't work, in fact it didn't even finish the query, highlight, and zoom to the feature, so I deleted evt from this line in the geoQuery function:

showFeature(fset.features[0],evt);

This made it behave the same as before, but still no infowindow after geocode & query.

Re: InfoWindow not showing up, help!

derekswingley1 — Wed, 18 Jan 2012 16:31:02 GMT

I think we need to see more of your code. Can you post a simple repro case on jsfiddle?

Re: InfoWindow not showing up, help!

Anonymous User — Sat, 11 Dec 2021 14:54:01 GMT

I can't do that, the services are on our intranet, here's all of the ORIGINAL code in my .js:

dojo.require("esri.map");
dojo.require("esri.tasks.locator");
dojo.require("esri.tasks.query");

var map, symbol, locator, queryTask, query, feature, featureSet, params, geom, loc, evt;

var startExtent = new esri.geometry.Extent(-9501963.4729, 5077426.8804,-9061074.6938, 5529934.0878, new esri.SpatialReference({wkid:102100}));

function Init() {

 //varible to keep track of when all layers have been loaded.
 var layersLoaded = 0;
 //loading image. id
    var loading = dojo.byId("loadingImg");

 // defining levels of detail
    var lods = [ 
  {"level" : 7, "resolution" : 1222.99245256249, "scale" : 4622324.434309},
  {"level" : 8, "resolution" : 611.49622628138, "scale" : 2311162.217155}, 
  {"level" : 9, "resolution" : 305.748113140558, "scale" : 1155581.108577}, 
  {"level" : 10, "resolution" : 152.874056570411, "scale" : 577790.554289}, 
  {"level" : 11, "resolution" : 76.4370282850732, "scale" : 288895.277144}, 
  {"level" : 12, "resolution" : 38.2185141425366, "scale" : 144447.638572}, 
  {"level" : 13, "resolution" : 19.1092570712683, "scale" : 72223.819286}, 
  {"level" : 14, "resolution" : 9.55462853563415, "scale" : 36111.909643}
          
   ];
 
 //zoom slider configs
 esriConfig.defaults.map.slider = { left:"15px", top:"15px", width:null, height:"150px" };
    esriConfig.defaults.map.sliderLabel = null;
 
 
 
 //configure map zoom animation to be slower
 //esriConfig.defaults.map.zoomDuration = 800; //time in milliseconds; default is 250
    //esriConfig.defaults.map.zoomRate = 200; //refresh rate of zoom animation; default is 25
 
 //adding map
 map = new esri.Map("map",{
  extent:startExtent, lods:lods
 }); 
 
 //resize listener
 dojo.connect(map, 'onLoad', function(map) {
  dojo.connect(dijit.byId('map'), 'resize', resizeMap);
    });
  
 //loading icon listeners
 dojo.connect(map, "onUpdateStart", showLoading);
    dojo.connect(map, "onZoomStart", showLoading);
    dojo.connect(map, "onPanStart", showLoading);
 dojo.connect(map, "onload", showDialog());

 
 //Listen for infoWindow onHide event and clear map
    dojo.connect(map.infoWindow, "onHide", function() {map.graphics.clear();});
 //dojo.connect(map.infoWindow, "onHide", function() {showDialog();});

   
 //add locator service
 locator = new esri.tasks.Locator(LocatorURL);
    dojo.connect(locator, "onAddressToLocationsComplete", showResults);
 
 //add basemap service
 var streetMap = new esri.layers.ArcGISTiledMapServiceLayer(BasemapURL, {opacity:1});
 map.addLayer(streetMap);
 dojo.connect(streetMap, "onUpdateEnd", hideLoading);
 
 //query listener
    dojo.connect(map, "onClick", clickQuery); 
 //build query task
    queryTask = new esri.tasks.QueryTask(queryURL);
    //build query filter
    query = new esri.tasks.Query();
    query.returnGeometry = true;
    query.outFields = ["MAX_COMPLETION_YEAR_","LastYear","FirstCycle"];
 map.infoWindow.resize(250, 222);
 
 //loading icon functions
 
 //show
 function showLoading() {
    esri.show(loading);
    //map.hideZoomSlider();
 //map.disableMapNavigation();
    }
 
    //hide
 function hideLoading() {
    layersLoaded++;
  if (layersLoaded === map.layerIds.length) {
            esri.hide(loading);
            //map.disableMapNavigation();
            //map.hideZoomSlider();
            layersLoaded = 0;
        }
    }
 
}
//-----------------END INIT---------------------
 //Enables map navigation
 function EnableMapNav(){
  map.showZoomSlider();
  map.showPanArrows();
  map.enableMapNavigation();
 }
 
 //enter key fires search
 function processKey(e)
 {
  if (null == e)
   e = window.event ;
  if (e.keyCode == 13)  {
   locate();
   hideDialog();
  }
 }
 
 //resize the map when the browser resizes
 function resizeMap() {
        var resizeTimer;
        clearTimeout(resizeTimer);
        resizeTimer = setTimeout(function() {
          map.resize();
          map.reposition();
        }, 500);
    }

    //Locate function
    function locate() {
  esri.show(dojo.byId('loadingImg'));
  //map.graphics.clear();
  //map.infoWindow.hide();
  var address = {"SingleLine":dojo.byId("address").value};
  var params = {address: address/*, searchExtent: startExtent*/};
  //var searchExtent = {startExtent};
        locator.outSpatialReference= map.spatialReference;
        locator.addressToLocations(params,["Loc_name"]); //on complete, showResults

    }

 //Locator show results
 function showResults(candidates) {
  map.graphics.clear();
  var candidate;
  var symbol = new esri.symbol.SimpleMarkerSymbol();

  symbol.setStyle(esri.symbol.SimpleMarkerSymbol.STYLE_DIAMOND);
  symbol.setColor(new dojo.Color("black"));
   
  dojo.every(candidates,function(candidate){
   console.log(candidate.score);
   if (candidate.score > 80) {
    console.log(candidate.location);
    geom = candidate.location;
    var graphic = new esri.Graphic(geom, symbol);
    //add a graphic to the map at the geocoded location
    map.graphics.add(graphic);
    //add a text symbol to the map listing the location of the matched address.
    var displayText = candidate.address;
    var font = new esri.symbol.Font("12pt",esri.symbol.Font.STYLE_NORMAL, esri.symbol.Font.VARIANT_NORMAL,esri.symbol.Font.WEIGHT_BOLD,"Helvetica");
    var textSymbol = new esri.symbol.TextSymbol(displayText,font,new dojo.Color("black"));
    textSymbol.setOffset(0,16);
    map.graphics.add(new esri.Graphic(geom, textSymbol));
    geoQuery(geom);
    return false; //break out of loop after one candidate with score greater  than 80 is found.
   }
  });
   if(geom !== undefined){
     //map.centerAndZoom(geom,7);
   }

    }
 
 //Click Query Functions
 function clickQuery(evt) {
  esri.show(dojo.byId('loadingImg'));
        map.infoWindow.hide();
        map.graphics.clear();
        featureSet = null;
        //onClick event returns the evt point where the user clicked on the map.
        //This contains the mapPoint (esri.geometry.point) and the screenPoint (pixel xy where the user clicked).
        //set query geometry = to evt.mapPoint Geometry
        geom = evt.mapPoint;
  query.geometry = geom;
  query.spatialRelationship = esri.tasks.Query.SPATIAL_REL_INTERSECTS;

        //Execute task and call showResults on completion
  //show FeatureSet if more than one polygon results
        queryTask.execute(query, function(fset) {
   if (fset.features.length === 1) {
    showFeature(fset.features[0],evt);
   } 
   else {
    esri.hide(dojo.byId('loadingImg'));
    //map.graphics.clear();
   }
        });
    }
 
 //Geocode query function
 function geoQuery(loc) { 
   var geom = new esri.geometry.Point(loc.x,loc.y, map.spatialReference);  
   query.geometry = geom;
   query.spatialRelationship = esri.tasks.Query.SPATIAL_REL_INTERSECTS;

  queryTask.execute(query, function(fset) {
   if (fset.features.length === 1) {
    showFeature(fset.features[0],evt);
   }
   else if (fset.features.length === 0) {
    showError();
   } 
   else {
    esri.hide(dojo.byId('loadingImg'));
    //map.graphics.clear();
   }
        });
 }
 
 // Query Show Feature
    function showFeature(feature,evt) {
  esri.hide(dojo.byId('loadingImg'));
        //map.graphics.clear();
 
        //set symbol
        var symbol = new esri.symbol.SimpleFillSymbol(esri.symbol.SimpleFillSymbol.STYLE_SOLID, 
   new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_SOLID, 
   new dojo.Color([102,204,0]),3), new dojo.Color([102,204,0,0.6]));
  
  feature.setSymbol(symbol);
    
        //construct infowindow title and content
        var attr = feature.attributes;
  
  var frst = attr.FirstCycle;
   if (frst == 0)
   {frst = "<I>Not Available</I>"}
   else 
   {frst = attr.FirstCycle}
   
  var lst = attr.LastYear;
   if (lst == 0)
   {lst = "<I>Over three years ago.</I>"}
   else 
   {lst = attr.LastYear}
   
  var max = attr.MAX_COMPLETION_YEAR_;
   if (max == 0)
   {max = "<I>Over three years ago.</I>"}
   else 
   {max = attr.MAX_COMPLETION_YEAR_}
   
        map.infoWindow.setTitle("Your Circuit Area");
  map.infoWindow.setContent(
   "<a href="+treeURL+" target='_blank'><img border='0' src='tree.png' alt='Tree Trim FAQ'/></a>"
   + "<big><B>  Line Clearance</B></big>"
   + "<br>"
   + "<br>Next Clearing: " + frst
   + "<br>Last Clearing: " + lst
   + "<br>"
   + "<br>"
   + "<br><a href="+ptmURL+" target='_blank'><img border='0' src='tool.png' alt='Maintenance FAQ'/></a>"
   + "<big><B>  Maintenance</B></big>"
   + "<br>"
   + "<br>Last Performed: " + max
   );

  map.graphics.add(feature);

  (evt) ? map.infoWindow.show(evt.screenPoint,map.getInfoWindowAnchor(evt.screenPoint)) : null;

  
  map.setExtent(feature.geometry.getExtent(),true);
  
  
    }

dojo.addOnLoad(Init);

Re: InfoWindow not showing up, help!

Anonymous User — Wed, 18 Jan 2012 18:22:34 GMT

Any help, would having the .html help? I didn't think it was relevant...

Re: InfoWindow not showing up, help!

derekswingley1 — Wed, 18 Jan 2012 18:26:30 GMT

Just started looking at this...are you using any JavaScript inline in your html?

Re: InfoWindow not showing up, help!

Anonymous User — Wed, 18 Jan 2012 18:33:31 GMT

Just started looking at this...are you using any JavaScript inline in your html?

Not really, I call some stuff up for dojo dialog boxes and buttons, that's it.

Also, since last posting my code I deleted all the global variables that weren't necesary.

Re: InfoWindow not showing up, help!

derekswingley1 — Wed, 18 Jan 2012 18:36:05 GMT

Using evt as a global is still likely the root of the problem. Try using some console.log statements in your showFeature function to see what evt actually is. Or you could use breakpoints, whatever you're comfortable with.

Re: InfoWindow not showing up, help!

Anonymous User — Sat, 11 Dec 2021 14:54:04 GMT

I got it to work!!

Although I don't really know what I'm doing, I've been looking at an app that does the same thing. I kept evt as a global variable, and this is at the end of my showFeature function:

var point = map.toScreen(geom)
map.infoWindow.show(point,map.getInfoWindowAnchor(point));

It won't work without evt being a global.