topic Re: InfoWindow title not showing on first occurrence. in ArcGIS JavaScript Maps SDK Questions

InfoWindow title not showing on first occurrence.

Anonymous User — Fri, 10 Dec 2021 21:50:58 GMT

Original User: odoe

So I'm coming across a little annoyance in my app when it comes to setting the InfoWindow title.
I have a FeatureLayer that I listen for click events.

dojo.connect(featureLayer, 'onClick', function(e){
 var g = e.graphic;
 map.infoWindow.resize(260, 175);
 ParcelData.GetDetailedInfoTemplate(map, featureLayer, g.attributes.AIN);
});

I use the click event to send a request to one of our web services to pull in some more detailed information about this item that was clicked, in this case Parcel information.

Once I have the detailed info, I create an InfoTemplate with the returned attributes and attach it to the FeatureLayer.

var infoTemplate = buildParcelInfoTemplate(g.attributes); // small function to parse attributes to HTML
featureLayer.setInfoTemplate(infoTemplate);

This works great and is suprisingly fast.
The issue I am having is that the first time I click on an item in the FeatureLayer, everything fires as it should and I can verify the FeatureLayer InfoTemplate is being populated by my InfoTemplate, but it does not show up.

So I added this little bit after assigning the InfoTemplate

if (!map.infoWindow.isShowing) {
 map.infoWindow.setTitle("Parcel");
 map.infoWindow.setContent(infoTemplate.content);
 map.infoWindow.show(esri.graphicsExtent(featureSet.features).getCenter());
}

This will work as far as showing the InfoWindow with my InfoTemplate content, but the title is still empty.

Every other click of the FeatureLayer after the first one works perfectly, it's just the first click event that this happens on.

I added a couple of image atachments to show what is happening.
I have tested in both Chrome 9.0.597.84 and IE8 with the same results.

It's not a deal breaker, but is a little annoying. Is there some step I am missing or any suggestions on possible remedies?
Thanks.

Re: InfoWindow title not showing on first occurrence.

KellyHutchins — Fri, 10 Dec 2021 21:51:01 GMT

If you are using version 2.2 of the API you can use the new formatting capabilities of the info window to generate a title when the feature is clicked. The 'Formating Info Window content' help topic has details on how to accomplish this - see the 'Deferred Object' section.

Here's a code sample that shows how to generate the title, in this case we use an attribute from the graphics for demonstration purposes.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
  
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <!--The viewport meta tag is used to improve the presentation and behavior of the samples 
      on iOS devices-->
    <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no"/>
    <title>
    </title>
    <link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/2.2/js/dojo/dijit/themes/Claro/Claro.css">
    <style type="text/css">
      html, body { 
        height: 100%; width: 100%;
        margin: 0; padding: 0;
      } 
      body{
        background-color:white; overflow:hidden; 
        font-family: "Kimberley", sans-serif
      } 
 
      #map {
        margin:5px;
        border:solid 4px #2A2F30;
        padding:0px;
      }
      .shadow{
        -moz-border-radius: 6px;
        -webkit-border-radius: 6px;
         border-radius: 6px;
        box-shadow: 8px 8px 16px #323834;
        -webkit-box-shadow: 8px 8px 16px #323834;
        -moz-box-shadow: 8px 8px 16px #323834;
        -o-box-shadow: 8px 8px 16px #323834;
      }
      
    </style>
    <script type="text/javascript">
      var djConfig = {
        parseOnLoad: true
      };
    </script>
    <script type="text/javascript" src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=2.2">
    </script>
    <script type="text/javascript"> 
      dojo.require("dijit.dijit"); // optimize: load dijit layer
      dojo.require("dijit.layout.BorderContainer");
      dojo.require("dijit.layout.ContentPane");
      dojo.require("esri.map");
      dojo.require("dojo.number");
      dojo.require("esri.layers.FeatureLayer");
      
      var map,trailLayer;
      var template;

      function init() {
        
        var initExtent = new esri.geometry.Extent({"xmin":-13042392,"ymin":4324579,"xmax":-13021640,"ymax":4335968,"spatialReference":{"wkid":102100}});
        map = new esri.Map("map",{extent:initExtent});
        map.infoWindow.resize(150, 150);
        
        var basemap = new esri.layers.ArcGISTiledMapServiceLayer("http://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer");
        map.addLayer(basemap);
        
        
        //add the trails feature layer to the map
        template = new esri.InfoTemplate();
        template.setTitle(getTitle);
        template.setContent(getTextContent);
        
        trailLayer = new esri.layers.FeatureLayer("http://sampleserver5.arcgisonline.com/ArcGIS/rest/services/LocalGovernment/Recreation/MapServer/1", {
          mode: esri.layers.FeatureLayer.MODE_ONDEMAND,
          infoTemplate:template,
          outFields: ["*"]
        });
       
       //create a new renderer for the feature layer
       var lineSymbol = new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_SOLID,new dojo.Color([0,255,0,.70]), 5);
       trailLayer.setRenderer(new esri.renderer.SimpleRenderer(lineSymbol));
       map.addLayer(trailLayer);
       
       //add world place names to the map
        var referenceLayer = new esri.layers.ArcGISTiledMapServiceLayer("http://server.arcgisonline.com/ArcGIS/rest/services/Reference/World_Boundaries_and_Places/MapServer");
        map.addLayer(referenceLayer);

      }

      function getTitle(graphic){
        var deferred = new dojo.Deferred();
        setTimeout(function() {
          deferred.callback("Title: " + graphic.attributes["notes"]);
        }, 500);
        return deferred;

      }
      //Generate the content for the info window when the feature is clicked.
      function getTextContent(graphic) {
        return 'My Test Content';
      }


      dojo.addOnLoad(init);
    </script> 

  </head> 
  <body class="claro"> 
   <div id="mainWindow" dojotype="dijit.layout.BorderContainer" design="headline" gutters="false" style="width:100%; height:100%;">
     <div id="map" dojotype="dijit.layout.ContentPane" class="shadow" region="center"></div>
   </div>
  </body> 
</html>

Re: InfoWindow title not showing on first occurrence.

Anonymous User — Wed, 11 May 2011 16:39:10 GMT

Original User: odoe

Thanks, passing the deferred object and setting the title/content via the callback worked great. Slightly slower than my onClick method, but it's consistent.