InfoWindow not showing up, help!

1724
11
01-18-2012 05:39 AM
by Anonymous User
Not applicable
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);  
}
0 Kudos
11 Replies
derekswingley1
Frequent Contributor
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));
0 Kudos
by Anonymous User
Not applicable
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()... 
0 Kudos
derekswingley1
Frequent Contributor
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.
0 Kudos
by Anonymous User
Not applicable
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.
0 Kudos
derekswingley1
Frequent Contributor
I think we need to see more of your code. Can you post a simple repro case on jsfiddle?
0 Kudos
by Anonymous User
Not applicable
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);
0 Kudos
by Anonymous User
Not applicable
Any help, would having the .html help? I didn't think it was relevant...
0 Kudos
derekswingley1
Frequent Contributor
Just started looking at this...are you using any JavaScript inline in your html?
0 Kudos
by Anonymous User
Not applicable
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.
0 Kudos