Cannot change webmap feature layer popup title

SamLarsen · ‎10-04-2012

Hi,

I am having trouble changing the popup title of a webmap feature layer as shown here.

The code below demonstrates creation of a new infoTemplate, setting a title function (or string for that matter) and applying the infoTemplate to the feature layer results in an empty title. Setting the popup content works, but not the title.

<!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">
    <meta http-equiv="X-UA-Compatible" content="IE=7,IE=9" /> 
    <!--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"/>
    <link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.2/js/dojo/dijit/themes/claro/claro.css">
    <link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.2/js/esri/css/esri.css" />
    <style type="text/css">
      html,body { height:100%; width:100%; margin:0; padding:0; }
      body{ background-color:#777; overflow:hidden; font-family:"Trebuchet MS"; }
      #map { overflow:hidden; padding:0; }
    </style>
    <script type="text/javascript">var dojoConfig={parseOnLoad: true};</script>
    <script type="text/javascript" src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=3.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("esri.arcgis.utils");   
      var map;
      function init() {
        var webmap = "1a40fa5cc1ab4569b79f45444d728067";
        var mapDeferred = esri.arcgis.utils.createMap(webmap, "map", {
          mapOptions: {
            slider: false,
            nav:false
          }
        });
        mapDeferred.addCallback(function(response) {
          map = response.map;
          //resize the map when the browser resizes
          dojo.connect(dijit.byId('map'), 'resize', map,map.resize);

          template = new esri.InfoTemplate();
          template.setTitle(function(){ return "i set the title" });
          template.setContent(function(){ return "i can set the content, but not the title :(" });   
          var layer = map.getLayer(map.graphicsLayerIds[0]);
          layer.setInfoTemplate(template)                    
        
        });
        mapDeferred.addErrback(function(error) {
          console.log("Map creation failed: ", dojo.toJson(error));
        });
      }
      function resizeMap() {
        var resizeTimer;
        clearTimeout(resizeTimer);
        resizeTimer = setTimeout(function() {
          map.resize();
          map.reposition();
        }, 500);
      }
      //show map on load
      dojo.addOnLoad(init);
    </script>
  </head>
  <body class="claro">
    <div data-dojo-type="dijit.layout.BorderContainer" data-dojo-props="design:'headline'" 
    style="width: 100%; height: 100%; margin: 0;">
      <div id="map" data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'center'">
        <div id="bingLogo" style="position: absolute;bottom: 2px;left: 3px;display:none;z-index:49;">
          <img src="images/bing_logo.png" border="0" />
        </div>
      </div>
    </div>
  </body>
</html>�??

SamLarsen · ‎10-04-2012

I am also having trouble using deferred callbacks in the content function of the infoTemplate as shown here.

template.setContent(function(){ 
    var deferred = new dojo.Deferred();
    setTimeout(function(){ deferred.callback("i set the content") }, 2000)
    return deferred;
});

KellyHutchins · ‎10-04-2012

When working with the popup the title bar area is reserved for feature navigation (1 of 3 >) etc. If you use the Popup Template you can set the title and this will appear in the content area. See the revised fiddle for an example:

http://jsfiddle.net/kEHGG/6/

SamLarsen · ‎10-04-2012

Interesting

I hadn't really noticed that before, but i guess you're right. It's not the answer i was hoping for, but it's an answer.

thanks

SamLarsen · ‎10-04-2012

Any commend on the deferred problem in my second post?

CraigMcDade · ‎10-04-2012

Kelly,

Does the same go for the infoTemplate? I have the following code and it is not displaying the title either in the dark gray title bar or in the content area:

if(result.layerName === 'Zoning Classifications'){
              console.log(feature.attributes.NAME);
              var template = new esri.InfoTemplate("Zoning", "<b>Zoning:</b> ${Zoning Classification} <br/> <b>Description:</b> ${Zoning Description} <br/> <b>File:</b> ${File Name}");
              feature.setInfoTemplate(template);

KellyHutchins · ‎10-05-2012

Craig,

If you are using the InfoTemplate with an InfoWindow (not a esri.dijit.Popup) then the title should display.

Kelly,

Does the same go for the infoTemplate? I have the following code and it is not displaying the title either in the dark gray title bar or in the content area:
if(result.layerName === 'Zoning Classifications'){
              console.log(feature.attributes.NAME);
              var template = new esri.InfoTemplate("Zoning", "Zoning: ${Zoning Classification} Description: ${Zoning Description} File: ${File Name}");
              feature.setInfoTemplate(template);

KellyHutchins · ‎10-05-2012

Sam,

I don't see a question about deferred's? Is it in another post?

Any commend on the deferred problem in my second post?

CraigMcDade · ‎10-05-2012

Craig,

If you are using the InfoTemplate with an InfoWindow (not a esri.dijit.Popup) then the title should display.

Hmm, As far as I can tell that is what I'm doing?

function mapReady(map){

       dojo.connect(map,"onClick",executeIdentifyTask);
    
    //create identify tasks and setup parameters 
       identifyTask = new esri.tasks.IdentifyTask("http://gisproduction/arcgis/rest/services/Dynamic/Zoning/MapServer");
       
       identifyParams = new esri.tasks.IdentifyParameters();
       identifyParams.tolerance = 3;
       identifyParams.returnGeometry = true;
     //Choose which layers in the array you would like to be ID'd in the popup  
    identifyParams.layerIds = [0,1,5];
       identifyParams.layerOption = esri.tasks.IdentifyParameters.LAYER_OPTION_ALL;
       identifyParams.width  = map.width;
       identifyParams.height = map.height;
    }
      
   function executeIdentifyTask(evt) {
        identifyParams.geometry = evt.mapPoint;
        identifyParams.mapExtent = map.extent;
       
        var deferred = identifyTask.execute(identifyParams);

        deferred.addCallback(function(response) {     
          // response is an array of identify result objects    
          // Let's return an array of features.
          return dojo.map(response, function(result) {
            var feature = result.feature;
            feature.attributes.layerName = result.layerName;
            if(result.layerName === 'Zoning Classifications'){
              console.log(feature.attributes.NAME);
              var template = new esri.InfoTemplate("Zoning", "<b>Zoning:</b> ${Zoning Classification} <br/> <b>Description:</b> ${Zoning Description} <br/> <b>File:</b> ${File Name}");
              feature.setInfoTemplate(template);
            }
            else if (result.layerName === 'Control Corners'){
              var template = new esri.InfoTemplate("Survey Benchmarks", "<b>Control Station:</b> <a target='_blank' href=http://gisdev2/surveybenchmarks/scans/${Corner Point Identifier}.pdf>${Corner Point Identifier}</a> <br/> <b>X Coordinate:</b> ${X or East Coordinate} <br/> <b>Y Coordinate:</b> ${Y or North Coordinate}");
              feature.setInfoTemplate(template);
            }
            return feature;
          });
        });

        // InfoWindow expects an array of features from each deferred
        // object that you pass. If the response from the task execution 
        // above is not an array of features, then you need to add a callback
        // like the one above to post-process the response and return an
        // array of features.
        map.infoWindow.setFeatures([ deferred ]);
        map.infoWindow.show(evt.mapPoint);

KellyHutchins · ‎10-05-2012

Craig,

In your code you use setFeatures method which is only available on a popup. So you've probably created the Popup class in your app and set it to be the map's info window when you create the map. Something like this:


   var popup = new esri.dijit.Popup({
          fillSymbol: new esri.symbol.SimpleFillSymbol(esri.symbol.SimpleFillSymbol.STYLE_SOLID, new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_SOLID, new dojo.Color([255,0,0]), 2), new dojo.Color([255,255,0,0.25]))
        }, dojo.create("div"));

 
        map = new esri.Map("map",{
          infoWindow:popup,
          outFields: ["*"]
        });

Try commenting out the line in the map's constructor that sets the infoWindow to the popup you created and the title you've defined should appear.