tying an info window to a graphic layer

timgogl — Tue, 26 Oct 2010 22:04:07 GMT

i have looked at some samples, and at other posts in the forums, and they all point to samples. but the samples don't reflect my issue.

so here is the story:

i have a layer on my map. i have the user type an id and run a FindTask on the id they have entered.

the map then centers and zoom onto the found item and a symbol is placed on that item.

what i want to do next, is have an info window pop up on that symbol with the details of the item.

i can seem to get all of this to work, except for the infowindow. heh. i have been working on this most of the day, and even had the infowindows popint up, but not in the correct locations.

i realized i that the location was likely messed up because the info windows were probably being put in, before the zoom was completed, thus the extent was wrong for the screenpoint.

however when try to use the onZoomEnd event, i get very undesirable results.

anyway, that is my explaination, here is the code if you're still reading.

  function initializeMap() {
   //set extent at state level
   startExtent = new esri.geometry.Extent({"xmin":-13916067,"ymin":5103921,"xmax":-12915284,"ymax":5871763,"spatialReference":{"wkid":102100}});
   
   //this configures the shift+mousedrag for zooming
   var zoomSymbol = new esri.symbol.SimpleFillSymbol(esri.symbol.SimpleFillSymbol.STYLE_SOLID, new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_DASHDOT, new dojo.Color([0,0,255]), 2), new dojo.Color([255,255,0,0.5]));
   esriConfig.defaults.map.zoomSymbol = zoomSymbol.toJson();

   map = new esri.Map("mapCanvas",{extent:startExtent,logo:false,slider:false});

   dojo.connect(map, "onLoad", function() {
    dojo.connect(dijit.byId('mapCanvas'), 'resize', function() {
     resizeMap();
    });
   });
 
   basemap = new esri.layers.ArcGISTiledMapServiceLayer("http://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer");
   map.addLayer(basemap);

   photoLayer = new esri.layers.ArcGISDynamicMapServiceLayer(FOTOSLAYER);
         utilsLayer = new esri.layers.ArcGISDynamicMapServiceLayer(UTILSLAYER);
         
         map.addLayers([photoLayer,utilsLayer]);       
  }  
  
  function runFind(nbr){
   findTask = new esri.tasks.FindTask('http://gisweb1-64/ArcGIS/rest/services/UtilityPoints/MapServer');
   findParams = new esri.tasks.FindParameters();
   findParams.returnGeometry = true;
   findParams.layerIds = [0,1];
   findParams.searchFields = ["HUB_ID"];// may want to put variable in here, so we can dynamically search items.
   findParams.outSpatialReference = map.spatialReference;
   
   //this is item to look for.
   findParams.searchText = nbr;
   //this executes the search
   findTask.execute(findParams,showResults);
  }
    
  function showResults(results){
   map.graphics.clear();
   handler=dojo.connect(map,"onZoomEnd",showInfoWindow);
   
   var centerPoint;
   if(results.length == 0){
    alert('No Assets Returned for ' + assetNbr);
    return;
   }
   var r = results[0].feature;
   var isPoint = (r.geometry.type == 'point');

   if(isPoint){
    var symbol =  new esri.symbol.SimpleMarkerSymbol(esri.symbol.SimpleMarkerSymbol.STYLE_DIAMOND, 14, 
                new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_SOLID,
                  new dojo.Color([255,0,0]), 1), new dojo.Color([0,255,0,0.25]));
    r.setSymbol(symbol);
    map.graphics.add(r);
    centerPoint = r.geometry;
   }else{
    var symbol = new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_SOLID, new dojo.Color([255,0,0]), 3);  
    //var graphic = results[0].feature;
    var testExtent = r.geometry.getExtent();
    r.setSymbol(symbol);
    map.graphics.add(r);
    centerPoint = testExtent.getCenter();
   }
   
   map.centerAndZoom(centerPoint,17);//be nice to have this number dynamically scale to the size of the symbol.
   showInfo(r);
  }

  function showInfo(r){
   // r is a FindResult.feature
   var info = r.attributes;
   var infoPoint;
   var contentPanel = new dijit.layout.ContentPane();
   var content="";
   
//   console.debug(r);

   content+="<table>";
   content+="<tr><td>ID: </td><td>"+info.HUB_ASSET_ID+"</td></tr>";
   content+="<tr><td>Name: </td><td>"+info.HUB_ASSET_NAME+"</td></tr>";
   content+="<tr><td>Description: </td><td>"+info.FMS_ASSET_DESCR+"</td></tr>";
   content+="<tr><td colspan='2'><a href='##'>Asset Summary Page</a></td></tr>";
   content+="</table>";
   
   contentPanel.attr("content",content);

   map.infoWindow.setTitle("Asset Found: " + assetNbr);
   map.infoWindow.setContent(contentPanel);
   
   //map.infoWindow.show(infoPoint, map.getInfoWindowAnchor(infoPoint));  
  }
  
  function showInfoWindow(){
   dojo.disconnect(handler);
   
   var infoPoint;
   
// split out different way to handle points from polygons from lines here maybe.

   infoPoint = esri.geometry.toScreenPoint(map.extent,map.width,map.height,map.extent.getCenter());
   
   map.infoWindow.show(infoPoint,map.getInfoWindowAnchor(infoPoint));
  }

there is more code, this is just what is pertinent to the question.

Re: tying an info window to a graphic layer

timgogl — Tue, 26 Oct 2010 22:09:14 GMT

wow i hate it when that happens... i went through that code to make sure it was correct before posting... and there was a typo....

my info windows are back for my points... i still cant seem to get the polygons to show.

again. thanks for looking.

topic tying an info window to a graphic layer in ArcGIS JavaScript Maps SDK Questions

tying an info window to a graphic layer

Re: tying an info window to a graphic layer