Possible to use esri.dijit.PopupMobile as replacement for default InfoWindow?

TomLougee · ‎04-05-2013

I'm developing a mobile app using ArcGIS JS API compact v3.4 and would like to use esri.dijit.PopupMobile as a replacement for esri.dijit.InfoWindow, as they both inherit from the same base class.

I'd like PopupMobile to be able to read and present attributes from graphics on a GraphicsLayer, via a custom InfoTemplate, like InfoWindow does. Ideally this would use the "click for more" arrow which PopupMobile offers. I'm not sure if there's a way to do this, though, as PopupMobile seems to require a FeatureLayer.

If I call

popup.setContent(content)

as I would with an InfoWindow, there's no error, but nothing seems to happen - PopupMobile appears with the correct title, but I don't get the right-hand "more" arrow as I'd expect (as shown in the attachment).

Adding a the graphic (which has the attributes) via

popup.setFeatures([graphic])

gets me the arrow but clicking it just hides the popup completely.

Is it possible use PopupMobile like the InfoWindow?

Thanks all!

KellyHutchins · ‎04-05-2013

In order to see the content for the selected feature you'll need to use the setFeatures method to associate the feature with the popup. Here's a code sample that shows this approach:


<!DOCTYPE html>
<html>
<head>
  <title>Create a Map</title>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=7,IE=9">
  <link rel="stylesheet" href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.4/js/dojo/dijit/themes/claro/claro.css">

  <link rel="stylesheet" href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.4/js/esri/css/esri.css">
  <style>
    html,body,#mapDiv,.map.container{
      padding:0;
      margin:0;
      height:100%;
    }
  </style>
  
  <script src="http://serverapi.arcgisonline.com/jsapi/arcgis/3.4/"></script>
  <script>
    dojo.require("esri.map");
    dojo.require("esri.dijit.PopupMobile");
    dojo.require("esri.layers.FeatureLayer");
  
    var map;
    function init(){

      var popup = new esri.dijit.PopupMobile({}, dojo.create("div"));


       map = new esri.Map("mapDiv", {
        center: [-122.41, 37.77],
        infoWindow:popup,
        zoom: 14,
        basemap: "streets"
      });



               
        var template = new esri.InfoTemplate();
        template.setContent(getTextContent);

        var featureLayer = new esri.layers.FeatureLayer("http://servicesbeta.esri.com/arcgis/rest/services/SanFrancisco/SFStreetTreesRendered/MapServer/0",{
          mode: esri.layers.FeatureLayer.MODE_SNAPSHOT,
          outFields: ["*"],
          infoTemplate:template
        });
        

         dojo.connect(featureLayer, "onClick", function(evt){
           map.infoWindow.setFeatures([evt.graphic]);
        });
        
        map.addLayer(featureLayer);

    }


   function getTextContent(graphic) {
       var attr = graphic.attributes.qSpecies.replace('"',"").split("::");
       var content;
       var scientificName = attr[0];
       //display the common name if it exists - otherwise just the scientific
       if(attr[1]){
         content = "<b>" + dojo.string.trim(attr[1].replace('"',"")) + "</b><br/><i>" + scientificName + "</i>";
       } else {
         content = "<i>" + scientificName + "</i>"
       }
       return  content + "<br>" + graphic.attributes.qAddress  + "<br/> Planted on " + formatDate(graphic.attributes.PlantDate);
      }

      function formatDate(value){
        var inputDate = new Date(value);
        return dojo.date.locale.format(inputDate, {
          selector: 'date',
          datePattern: 'MMMM d, y' 
        });
      }
      
    dojo.ready(init);
  </script>

</head>
<body class="claro">
  <div id="mapDiv"></div>
</body>
</html>

TomLougee · ‎04-09-2013

Thanks for your reply Kelly. I'll try this ASAP (been taken off onto other things for now!)