Popup issues

JamesMcCarthy · ‎07-14-2011

Hi all, I'm having issues making use of the new Popup and PopupMobile dijits. What it boils down to is that I can either show a Title or I can show a description, but not both.

The way I expect it to work is like this...

I have this in my init() function (greenURL is defined elsewhere):

var popup= new esri.dijit.PopupMobile(null,dojo.create("div")); 
   
//Create map object.  Set nav to true to enable pan buttons.
map = new esri.Map("map", {
      nav: false,
      slider: true,
      displayGraphicsOnPan: true,
      infoWindow:popup
});
dojo.place(popup.domNode,map.root);

var popupTemplate = new esri.dijit.PopupTemplate({
         title: "{NAME}",description:"{DESCRIPTION}"
});

greenLayer = new esri.layers.FeatureLayer(greenURL,{mode:esri.layers.FeatureLayer.MODE_ONDEMAND,outFields: ["*"],infoTemplate:popupTemplate});

map.addLayer(greenLayer);

When I use this approach I end up with the title showing, but no description. Even if I don't use placeholders and just use strings it doesn't work.

To get around it I tried to set the infoTemplate on the feature in the results of an IdentifyTask like so (after taking out the infoTemplate option in the FeatureLayer definition above):

var template = new esri.dijit.PopupTemplate({title:"{NAME}",description:response});
feature.setInfoTemplate(template);

This gives me the opposite behaviour where the description is shown instead of the title, although in this case the title does at least show up when you expand the PopupMobile dijit.

In the examples I've checked the popup seems to 'just work' once it's defined, so I feel like I'm not understanding something about how the Popup/PopupMobile dijits work.

JeffPace · ‎07-18-2011

I believe you should be setting "content" not "description".

KellyHutchins · ‎07-18-2011

Here's an example that shows using the PopupMobile with the PopupTemplate:

<!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"/>
    <title>
      Flickr
    </title>
    <link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/2.4/js/dojo/dijit/themes/claro/claro.css"/>
    <link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/2.4/js/esri/dijit/css/Popup.css"/>
    <link rel="stylesheet" type='text/css' href='http://serverapi.arcgisonline.com/jsapi/arcgis/2.4/js/esri/dijit/css/PopupMobile.css'/>
    <style>
      html, body { height: 100%; width: 100%; margin: 0; padding: 0; } .esriScalebar{
      padding: 20px 20px; } #map{ padding:0;}
    </style>
    <script type="text/javascript">
      var dojoConfig = {
        parseOnLoad: true
      };
    </script>
    <script type="text/javascript" src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=2.4">
    </script>
    <script type="text/javascript">
      dojo.require("dijit.layout.BorderContainer");
      dojo.require("dijit.layout.ContentPane");
      dojo.require("esri.map");
      dojo.require("esri.layers.FeatureLayer");
      dojo.require("esri.dijit.Popup");
      dojo.require("esri.dijit.PopupMobile");

      var map;
      var featureLayer;
      var resizeTimer;


      function init() {
        //setup the map's initial extent 
        var initExtent = new esri.geometry.Extent({"xmin":-16305479,"ymin":-635073,"xmax":5884495,"ymax":8307447,"spatialReference":{"wkid":102100}});

        //create a popup to replace the map's info window
        var popup = new esri.dijit.PopupMobile(null, dojo.create("div"));
        map = new esri.Map("map", {
          extent: initExtent,
          infoWindow: popup
        });
        
        dojo.place(popup.domNode, map.root);

        //Add the imagery layer to the map. View the ArcGIS Online site for services http://arcgisonline/home/search.html?t=content&f=typekeywords:service    
        var basemap = new esri.layers.ArcGISTiledMapServiceLayer("http://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer");
        map.addLayer(basemap);

        //create a feature collection for the flickr photos
        var featureCollection = {
          "layerDefinition": null,
          "featureSet": {
            "features": [],
            "geometryType": "esriGeometryPoint"
          }
        };
        featureCollection.layerDefinition = {
          "geometryType": "esriGeometryPoint",
          "objectIdField": "ObjectID",
          "drawingInfo": {
            "renderer": {
              "type": "simple",
              "symbol": {
                "type": "esriPMS",
                "url": "images/flickr.png",
                "contentType": "image/png",
                "width": 15,
                "height": 15
              }
            }
          },
          "fields": [{
            "name": "ObjectID",
            "alias": "ObjectID",
            "type": "esriFieldTypeOID"
          },{
            "name": "description",
            "alias": "Description",
            "type": "esriFieldTypeString"
          },{
            "name": "title",
            "alias": "Title",
            "type": "esriFieldTypeString"
          }]
        };

        //define a popup template
        var popupTemplate = new esri.dijit.PopupTemplate({
          title: "{title}",
          description:"{description}"
        });

        //create a feature layer based on the feature collection
        featureLayer = new esri.layers.FeatureLayer(featureCollection, {
          id: 'flickrLayer',
          infoTemplate: popupTemplate
        });
        
        //associate the features with the popup on click
        dojo.connect(featureLayer,"onClick",function(evt){
           map.infoWindow.setFeatures([evt.graphic]);
           map.infoWindow.show(evt.mapPoint);
        });
        
        dojo.connect(map,"onLayersAddResult",function(results){requestPhotos();});
        //add the feature layer that contains the flickr photos to the map
        map.addLayers([featureLayer]);
        
        //resize the map when the browser resizes - view the 'Resizing and repositioning the map' section in 
        //the following help topic for more details http://help.esri.com/EN/webapi/javascript/arcgis/help/jshelp_start.htm#jshelp/inside_guidelines.htm
        dojo.connect(map, 'onLoad', function(theMap) {
          dojo.connect(dijit.byId('map'), 'resize', function() { //resize the map if the div is resized
            clearTimeout(resizeTimer);
            resizeTimer = setTimeout(function() {
              map.resize();
              map.reposition();
            }, 500);
          });
        });
      }

      function requestPhotos(){
         //get geotagged photos from flickr
        //tags=flower&tagmode=all
        var requestHandle = esri.request({
          url: "http://api.flickr.com/services/feeds/geo?&format=json",
          callbackParamName: "jsoncallback",
          load: requestSucceeded,
          error: requestFailed
        }, {
          useProxy: false
        });
      }
      
      function requestSucceeded(response, io) {
        //loop through the items and add to the feature layer
        var features = [];
        dojo.forEach(response.items, function(item) {
          var attr = {};
          attr["description"] = item.description;
          attr["title"] = item.title ? item.title : "Flickr Photo";

          var geometry = esri.geometry.geographicToWebMercator(new esri.geometry.Point(item.longitude, item.latitude, map.spatialReference));

          var graphic = new esri.Graphic(geometry);
          graphic.setAttributes(attr);
          features.push(graphic);
        });

        featureLayer.applyEdits(features, null, null);       
      }

      function requestFailed(error) {
        console.log('failed');
      }
      dojo.ready(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'"
      style="border:1px solid #000;padding:0;">
      </div>
    </div>
  </body>

</html>

JamesMcCarthy · ‎07-22-2011

I believe you should be setting "content" not "description".

Thanks for the response Jeff. I thought that was it initially as well, but according to the documentation you use "content" for an infoTemplate and "description" for a popupTemplate.

JamesMcCarthy · ‎07-22-2011

Here's an example that shows using the PopupMobile with the PopupTemplate:

Thanks Kelly. The samples all work for me, but I can't seem to find the issue with my own code even looking at them side-by-side. I can't see anything different that I'm doing. I've stripped my code down to mostly the relevant parts but I'm still having the same problem:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta name="viewport" content="width=device-width, height=device-height, minimum-scale=1, initial-scale=1, maximum-scale=1, user-scalable=no"/>
        <meta name="apple-mobile-web-app-capable" content="yes" />
        <meta name="format-detection" content="telephone=yes">
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>PopupMobile Testing</title>
        <!-- MOBILE STYLESHEET -->
        <link href='http://serverapi.arcgisonline.com/jsapi/arcgis/2.4/js/dojo/dojox/mobile/themes/iPhone/iPhone.css' rel='stylesheet'>
        <link href="http://serverapi.arcgisonline.com/jsapi/arcgis/2.4/js/dojo/dojox/mobile/themes/buttons.css" rel="stylesheet">
  <link rel="stylesheet" type='text/css' href='http://serverapi.arcgisonline.com/jsapi/arcgis/2.4/js/esri/dijit/css/Popup.css'/>
  <link rel="stylesheet" type='text/css' href='http://serverapi.arcgisonline.com/jsapi/arcgis/2.4/js/esri/dijit/css/PopupMobile.css'/>
        <style type="text/css">
            html, body {
                height: 100%;
                margin: 0px;
                padding: 0px;
                width: 100%;
            }
        </style>
        <script type="text/javascript">
            var djConfig = {
                parseOnLoad: true
            };
        </script>
        <!-- Script/API Imports: Esri JS API -->
        <script type="text/javascript" src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=2.4compact">
        </script>

        <!-- Beginning of JS Code -->
        <script language="JavaScript" type="text/javascript">
            djConfig = dojo.config;
            
            //Dojo imports
            dojo.require("dojox.mobile.parser");
            dojo.require("dojox.mobile");
            dojo.requireIf(!dojo.isWebKit, "dojox.mobile.compat");
             
            
            //Esri imports
   dojo.require("esri.layers.FeatureLayer");
   dojo.require("esri.dijit.PopupMobile");
   dojo.require("esri.dijit.Popup");
   
            //GLOBAL VARS
            var service = "http://env-gisdev1.uwaterloo.ca/arcgis/rest/services/green-features/green-viz/MapServer";
   var greenURL = "http://env-gisdev1.uwaterloo.ca/arcgis/rest/services/green-features/green-viz/MapServer/1";
   
            var map;            
   
            //INIT
            function init(){
            
    var popup= new esri.dijit.PopupMobile(null,dojo.create("div")); 
   
                //Create map object.
                map = new esri.Map("map", {
                    nav: false,
                    slider: true,
                    displayGraphicsOnPan: true,
     infoWindow:popup
                });
    dojo.place(popup.domNode,map.root);
     
                baseMap = new esri.layers.ArcGISDynamicMapServiceLayer(service);
                map.addLayer(baseMap, 0);
    
    var popupTemplate = new esri.dijit.PopupTemplate({
     title: "{NAME}",
     description:"Descriptive text should go here: {DESCRIPTION}"
    });

    greenLayer = new esri.layers.FeatureLayer(greenURL,{
     mode: esri.layers.FeatureLayer.MODE_ONDEMAND,
     outFields: ["*"],
     infoTemplate:popupTemplate
    });
    map.addLayer(greenLayer);
            }
  
            //Run the initialize function when the document loads
            dojo.addOnLoad(init);
        </script>
    </head>
    <body>
        <!-- MAP VIEW -->
        <div id="mapView" dojoType="dojox.mobile.View" style="width:100%;height:90%" selected="true">
            <h1 dojoType="dojox.mobile.Heading">Popup Test
   </h1>

            <div style="width:100%;height:90%" id="map">
            </div>
        </div>  
    </body>
</html>

There's also a live version of it here if you want to test it to see the behaviour for yourself.

KellyHutchins · ‎07-25-2011

Popup and PopupMobile work with a set of features. Modify your code to listen for the feature layer's on click event and when it fires associate the current features with the popup.

    greenLayer = new esri.layers.FeatureLayer(greenURL,{
     mode: esri.layers.FeatureLayer.MODE_ONDEMAND,
     outFields: ["*"],
     infoTemplate:popupTemplate
    });
        
        //associate the features with the popup on click
        dojo.connect(greenLayer,"onClick",function(evt){
           map.infoWindow.setFeatures([evt.graphic]);
        });
        
    map.addLayer(greenLayer);

JamesMcCarthy · ‎07-26-2011

Popup and PopupMobile work with a set of features. Modify your code to listen for the feature layer's on click event and when it fires associate the current features with the popup.

    greenLayer = new esri.layers.FeatureLayer(greenURL,{
     mode: esri.layers.FeatureLayer.MODE_ONDEMAND,
     outFields: ["*"],
     infoTemplate:popupTemplate
    });
        
        //associate the features with the popup on click
        dojo.connect(greenLayer,"onClick",function(evt){
           map.infoWindow.setFeatures([evt.graphic]);
        });
        
    map.addLayer(greenLayer);

Kelly, that did it with one addition in the function you supplied:

map.infoWindow.show(evt.mapPoint);

Thanks for your help, it's much appreciated!