topic Re: Identify - Popup (can't get setTitle to display) in ArcGIS JavaScript Maps SDK Questions

Identify - Popup (can't get setTitle to display)

ChristopherPollard — Tue, 22 Nov 2011 17:21:15 GMT

Working off this example:
http://help.arcgis.com/en/webapi/javascript/arcgis/demos/find/find_popup.html

I am trying to get a Title (which would refer to layer being identified, ie...Parcel or Building) to display in the Title Pane of the infotemplate.
I have a web mapping application that is identiying 5 different features and I want a feature title to go along with the highlighting of that feature.

I even modified the code in the example and that didn't even work..

(The work around:)
I actually added a Title right into the 1st line of the content (check out attached image) but would like to add it next to the results (1 of 2) in the Title Pane.

Any help would be welcome....Thanks
Thanks,
Chris Pollard
Senior GIS Specialist
DVRPC

Re: Identify - Popup (can't get setTitle to display)

derekswingley1 — Tue, 22 Nov 2011 17:30:09 GMT

Are you using an infoTemplate? If you specify the name of your layer as the title for an info template you should see the layer name is the same spot where your work around currently puts it.

Re: Identify - Popup (can't get setTitle to display)

KellyHutchins — Tue, 22 Nov 2011 17:30:35 GMT

When using the popup with a set of features the title is ignored because the title area is used to display the navigation information (# of features and arrows). The workaround you used, adding the title to the content, is the recommended approach in this situation.

Re: Identify - Popup (can't get setTitle to display)

ChristopherPollard — Tue, 22 Nov 2011 18:01:17 GMT

Yes I'm using the infoTemplate but that wasn't working and I guess won't work or is ignored according to Kelly's response.
Thanks

I also have another question regarding the infoTemplate and multiple features being returned?

I want to be able to display a pie chart within an infoTemplate that has multiple features being returned (Tracts, Municipalities and Counties). I have only been able to find examples and API references for displaying charts/media in an infoTemplate popup for just 1 feature.

Here is my web mapping application I'd love to add charts to and would love some direction if its possible.
http://www.dvrpc.org/webmaps/ACS/
and this
http://www.dvrpc.org/webmaps/census2010/

(view source to see the code, but I used the sample identify - popup example that I refered to in my 1st post to build this)

Re: Identify - Popup (can't get setTitle to display)

KellyHutchins — Fri, 10 Dec 2021 20:19:57 GMT

In your example it looks like you are already defining separate templates for each layer you just need to setup the chart. You can do this using a PopupTemplate. The PopupTemplate has a mediaInfos section that allows you to define a chart. Here's a simplified version of your app that uses feature layers instead of an identify task and defines a separate popup chart for each layer.

View a live version of the code below here: http://jsfiddle.net/cUmtj/


<!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" />

<!--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>DVRPC - U.S. Census Data Profiles</title>

<link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/2.5/js/dojo/dijit/themes/claro/claro.css">
<link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/2.5/js/esri/dijit/css/Popup.css">
<style>
html, body {
height: 100%; width: 100%; margin: 0; padding: 0;
}
body{
background-color:white; overflow:hidden; font-family: "Trebuchet MS";
}

#header{
height:40px;
width:100%;
background-color:#0077ac;
}


h1{
color: White;
font-size:120%;
margin:0px 0px 0px 20px;
float:left;
width:360px;
}

.roundedCorners{
     -moz-border-radius: 4px;
}
.shadow{
/*slight shadow effect added for browsers that support this functionality*/
 -o-border-radius: 10px;
 -moz-border-radius: 10px;
 -webkit-border-radius: 10px;
  box-shadow: 4px 4px 8px #adadad;
  -webkit-box-shadow: 4px 4px 8px #adadad;
  -moz-box-shadow: 4px 4px 8px #adadad;
 -o-box-shadow: 4px 4px 8px #adadad;
  }

  #subheader {
    font-size:small;
    padding-left: 40px;
    color: peru;
  }

  #rightPane{
    background-color:white;
    color:peru;
    margin:5px;
    border: solid 2px cornflowerblue;
  }

  #mapArea, #map {
    background-color:white;
    border:solid 2px cornflowerblue;
    margin:5px;
  }

  #footer {
    border: solid 1px #7EABCD;
    background-color:white;color:peru;font-size:10pt; text-align:center; height:40px;
  }



</style>

<script type="text/javascript">var dojoConfig = {parseOnLoad: true};</script>
<script type="text/javascript" src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=2.5compact"></script>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.2/jquery-ui.min.js"></script>




<script type="text/javascript">

dojo.require("dijit.layout.BorderContainer");
dojo.require("dijit.layout.ContentPane");
dojo.require("esri.map");
dojo.require("esri.dijit.Popup");
dojo.require("dojo.number");
dojo.require("dijit.form.Button");
dojo.require("dijit.form.Textarea");
dojo.require("dijit.TitlePane");
dojo.require("esri.layers.FeatureLayer");

  var map;

  var initExtent;
  var census3, census4;


  function zoomExtent() {
    map.setExtent(initExtent);
  }


  function init() {
    initExtent = new esri.geometry.Extent({
      "xmin": -8502778.91,
      "ymin": 4784652.06,
      "xmax": -8227605.61,
      "ymax": 4968100.93,
      "spatialReference": {
        "wkid": 102100
      }
    });

    //setup the popup window 
    var popup = new esri.dijit.Popup({
      marginTop: 35,
      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,
      extent: initExtent
    });


    dojo.connect(map, "onClick", function (evt) {
      //dispaly popup when users clicks on census3 or census4 layers
      var query = new esri.tasks.Query();
      query.geometry = evt.mapPoint;
      var def = [];
      def.push(census4.selectFeatures(query, esri.layers.FeatureLayer.SELECTION_NEW));
      def.push(census3.selectFeatures(query, esri.layers.FeatureLayer.SELECTION_NEW));

      map.infoWindow.setFeatures(def);
      map.infoWindow.show(evt.mapPoint);

    });

    dojo.connect(map, "onLoad", mapReady);

    var basemap = new esri.layers.ArcGISTiledMapServiceLayer("http://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer");
    map.addLayer(basemap);

    var census = new esri.layers.ArcGISDynamicMapServiceLayer("http://gis.dvrpc.org/ArcGIS/rest/services/census/MapServer", {
      opacity: .65
    });
    map.addLayer(census);


    //define popup template for census layer 3
    var template = new esri.dijit.PopupTemplate({
      title: "Name {NAME00}",
      mediaInfos: [{
        type: "piechart",
        value: {
          fields: ["AllWhite", "AllBlk", "AllAsian", "HispTot"]
        }
      }]
    });

    census3 = new esri.layers.FeatureLayer("http://gis.dvrpc.org/ArcGIS/rest/services/census/MapServer/3", {
      mode: esri.layers.FeatureLayer.MODE_SELECTION,
      infoTemplate: template,
      outFields: ["*"]
    });

     //define popup template for census layer 4
    var template2 = new esri.dijit.PopupTemplate({
      title: "Name {NAME}",
      description: "Descriptive info can go here ....",
      mediaInfos: [{
        type: "piechart",
        value: {
          fields: ["TotMale", "TotFem"]
        }
      }]
    });
    census4 = new esri.layers.FeatureLayer("http://gis.dvrpc.org/ArcGIS/rest/services/census/MapServer/4", {
      mode: esri.layers.FeatureLayer.MODE_SELECTION,
      infoTemplate: template2,
      outFields: ["*"]

    });
    //add census layers to map in selection only mode. These layers will not be displayed unless selected. 
    map.addLayers([census3, census4]);
  }



  function mapReady(map) {

    dojo.connect(dijit.byId('map'), 'resize', map, map.resize);
  }



  dojo.addOnLoad(init);


</script>

</head>



<body class="claro">



<div id="mainWindow" dojotype="dijit.layout.BorderContainer" data-dojo-props="design:'headline'" design="headline" gutters="true" style="width:100%; height:100%;">



<div id="header" class="shadow" dojotype="dijit.layout.ContentPane" region="top">


<h1>U.S. Census Data Profiles<br><font size=2px;>2005-2009 American Community Survey 5-Year Estimates</font> </h1>






</div>



<div id="map" class="roundedCorners" dojotype="dijit.layout.ContentPane" region="center">



</div>





</body>



</html>

Re: Identify - Popup (can't get setTitle to display)

ChristopherPollard — Tue, 22 Nov 2011 19:32:51 GMT

amazing..thanks for the example.
just added fieldInfos: to get back all the attributes that I wanted displayed.

Can I add HTML breaks and lines to seperate Demographic subsets:
For instance:
Female:
Male:
Pie Chart here
Solid Line here "<hr>"___________________________________
White:
Black:
Pie Chart here

Re: Identify - Popup (can't get setTitle to display)

ChristopherPollard — Tue, 22 Nov 2011 19:42:33 GMT

Also...Can I add a Description and fieldInfo in the same template?
In trying to add some simple HTML tags I tried to include both description and fieldInfo and it seems to only use 1.

Sorry for all the questions but figured its best to ask the experts..

Re: Identify - Popup (can't get setTitle to display)

KellyHutchins — Fri, 10 Dec 2021 20:20:00 GMT

It's only fieldInfos or description. You could use description and format the content (including fields) any way you want.

If you define a title for the chart it will add a horizontal line below the title. Is that what you needed? You can also define multiple charts for one popup. If more than one chart is added then you'll see navigation arrows allowing you to move between the charts.

   //define popup template for census layer 4
    var template2 = new esri.dijit.PopupTemplate({
      title: "Name {NAME}",
      description: "Descriptive info can go here ....",
      mediaInfos: [{
        "title": "Male/Female",
        "type": "piechart",
        "caption": "Chart caption for male/female chart",
        "value": {
          "fields": ["TotMale", "TotFem"]
        }
      }, {
        "title": "Race",
        "type": "piechart",
        "caption": "Caption for race chart",
        "value": {
          "fields": ["AllWhite", "AllBlk", "AllAsian", "HispTot"]
        }
      }]

    });

Re: Identify - Popup (can't get setTitle to display)

ChrisBardash — Tue, 17 Nov 2015 15:06:57 GMT

Kelly,

Is there not a solution to this issue yet? I am also trying to add a title to my popup template using the setTitle method, with no luck. Adding the title into the content of the popup is not an aesthetically pleasing option. Why is there is method to set the title if it does not work? Thanks.

Re: Identify - Popup (can't get setTitle to display)

KellyHutchins — Fri, 10 Dec 2021 20:20:03 GMT

Chris Bardash if you set the titleInBody popup property to false the title will display in the popup header area. You can do this after creating the map. Here's an example:

      var map = new Map("map", {
        basemap: "topo",
        center: [-118.4, 34.08],
        zoom: 14//,
        //infoWindow: popup
      });
      map.infoWindow.set("titleInBody", false);

Re: Identify - Popup (can't get setTitle to display)

ChrisBardash — Tue, 17 Nov 2015 18:36:40 GMT

That did it. Thank you very much!!!