topic Re: Cannot change webmap feature layer popup title in ArcGIS JavaScript Maps SDK Questions

Cannot change webmap feature layer popup title

SamLarsen — Sat, 11 Dec 2021 23:38:00 GMT

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

Re: Cannot change webmap feature layer popup title

SamLarsen — Sat, 11 Dec 2021 23:38:02 GMT

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;
});

Re: Cannot change webmap feature layer popup title

KellyHutchins — Thu, 04 Oct 2012 16:13:49 GMT

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/

Re: Cannot change webmap feature layer popup title

SamLarsen — Thu, 04 Oct 2012 16:21:17 GMT

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

Re: Cannot change webmap feature layer popup title

SamLarsen — Thu, 04 Oct 2012 16:22:45 GMT

Any commend on the deferred problem in my second post?

Re: Cannot change webmap feature layer popup title

CraigMcDade — Sat, 11 Dec 2021 23:38:05 GMT

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);

Re: Cannot change webmap feature layer popup title

KellyHutchins — Sat, 11 Dec 2021 23:38:08 GMT

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);

Re: Cannot change webmap feature layer popup title

KellyHutchins — Fri, 05 Oct 2012 15:53:00 GMT

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?

Re: Cannot change webmap feature layer popup title

CraigMcDade — Sat, 11 Dec 2021 23:38:10 GMT

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);

Re: Cannot change webmap feature layer popup title

KellyHutchins — Sun, 12 Dec 2021 16:36:41 GMT

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.

Re: Cannot change webmap feature layer popup title

CraigMcDade — Fri, 05 Oct 2012 17:25:52 GMT

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.

Re: Cannot change webmap feature layer popup title

KellyHutchins — Fri, 05 Oct 2012 18:22:51 GMT

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.

Re: Cannot change webmap feature layer popup title

CraigMcDade — Fri, 05 Oct 2012 18:50:26 GMT

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.

Re: Cannot change webmap feature layer popup title

KellyHutchins — Fri, 05 Oct 2012 19:38:59 GMT

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.

Re: Cannot change webmap feature layer popup title

CraigMcDade — Fri, 05 Oct 2012 19:46:06 GMT

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?

Re: Cannot change webmap feature layer popup title

KellyHutchins — Sat, 11 Dec 2021 23:38:13 GMT

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')

Re: Cannot change webmap feature layer popup title

SamLarsen — Mon, 08 Oct 2012 08:23:13 GMT

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_infowindowdeferred.html 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

Re: Cannot change webmap feature layer popup title

KellyHutchins — Mon, 08 Oct 2012 15:09:48 GMT

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

Re: Cannot change webmap feature layer popup title

deleted-user-ugCMpXci8bn5 — Tue, 17 Sep 2013 15:13:09 GMT

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?

Re: Cannot change webmap feature layer popup title

deleted-user-ugCMpXci8bn5 — Tue, 17 Sep 2013 16:44:54 GMT

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?