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>�??

CraigMcDade · ‎10-05-2012

thanks for the help. You are right, that is what I've done, however, when I comment that line out, the infowindow does not show at all.

KellyHutchins · ‎10-05-2012

You'll also need to remove the 'setFeatures' code. Can you post your full code?

thanks for the help. You are right, that is what I've done, however, when I comment that line out, the infowindow does not show at all.

CraigMcDade · ‎10-05-2012

You'll also need to remove the 'setFeatures' code. Can you post your full code?

I really appreciate your help.

Attached is my code. Full disclosure: its a mess 🙂 I'm a novice.

KellyHutchins · ‎10-05-2012

Craig,

You'll have to make a few changes to your code to use an info window instead of a popup but before making those changes you may want to consider the side-effects of this switch. The popup is designed to work with multiple features and displays navigation arrows in the title area that lets you navigate through the selected set of features. The info window does not support multiple features - you can work around this by adding the capability in to the app - see this sample that adds tabs to the window:

http://help.arcgis.com/en/webapi/javascript/arcgis/samples/find_drilldown/index.html

You also loose the 'zoom to' selected feature capability you get with the popup.

CraigMcDade · ‎10-05-2012

hmm. I like the look and feel of what I have, is there any addition I can use to add some sort of title with the code I currently have?

KellyHutchins · ‎10-05-2012

You can get a title to display it just won't be in the 'header' portion of the popup. If you switch your code from using an InfoTemplate to a PopupTemplate like this:

              var template = new esri.dijit.PopupTemplate({
    title:"My Title", 
    description:"{Postal Address} <br/> Owner of record: {First Owner Name}"
     });
              feature.setInfoTemplate(template);

The title would display as shown in the attached image (see 'My Title')

SamLarsen · ‎10-08-2012

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

Kelly,

In this sample http://help.arcgis.com/en/webapi/javascript/arcgis/help/jssamples_start.htm#jssamples/widget_infowin... you can return a deferred object to the setContent method of an infoTemplate. I have not been able to get this to work with a PopupTemplate (i.e. map & popup created by arcgis.utils.createMap) even though the popupTemplate inherits from the infoTemplate.

I got around it by listening to the 'onShow' event of the popup and dynamically inserting my content after a callback.

Sam

KellyHutchins · ‎10-08-2012

Hi Sam,

The Popup window doesn't support using the deferred option for setting content - you'll need to use the info window instead. We have snippet of info on this buried in the 'Format Popup Content' help topic:
http://help.arcgis.com/en/webapi/javascript/arcgis/help/jshelp/intro_popuptemplate.htm

Kelly

deleted-user-ugCMpXci8bn5 · ‎09-17-2013

Hello,

This thread helped me to get a title in my popup InfoWindow, but I have one small problem:

My app uses both feature layers and dynamic service layers. The infoWindow for the map is initialized as a popup.

I added the code given above to get a title into my popup InfoWindow for the Dynamic Service Layers, but the formatting is different than the popup for the Feature Layers. My title appears in the white body of the popup, as opposed to in the dark grey border at the top with white lettering, which I prefer.

Is there a way I can make the popup infoWindow for my Dynamic Service Layers the same layout as for the Feature Layers?

deleted-user-ugCMpXci8bn5 · ‎09-17-2013

My title appears in the white body of the popup, as opposed to in the dark grey border at the top with white lettering, which I prefer.

Sorry, I see you mentioned this above..are there any workarounds for this?