Is it possible to access ArcMap's HTML popup from the JS API?

StephenLead · ‎08-22-2011

In ArcMap, you can configure an HTML Popup for a layer.

Can we access this in ArcGIS Server using the JS API? Or do we need to build our own version of this using an infoWindow or (JS API) popup dijit?

The sample ArcGIS Server lists:

HTML Popup Type: esriServerHTMLPopupTypeNone

which implies that the HTML popup is carried through to ArcGIS Server.

Thanks,
Steve

KellyHutchins · ‎08-23-2011

You could do something like this:

var template = new esri.InfoTemplate();
template.setTitle("<b>HTML Popup Test</b>");

template.setContent("<iframe src='http://sampleserver3.arcgisonline.com/ArcGIS/rest/services/Petroleum/StantonCountyKSLeases/MapServer/0/${OBJECTID}/htmlPopup?f=html' frameborder='0' width='100%' height='100%' style='width: 100%; height: 100%; display: block; padding: 0px; margin: 0px;'></iframe>");
        
var oilLayer = new esri.layers.FeatureLayer("http://sampleserver3.arcgisonline.com/ArcGIS/rest/services/Petroleum/StantonCountyKSLeases/MapServer/0",{
          infoTemplate:template
 });

StephenLead · ‎08-23-2011

Hi Kelly,

That works well for a Text popup - but do you know how to open a URL popup at the Content Url parameter?

The sample attached returns an iFrame linking to the REST URL (eg this example), rather than actually opening the Content Url itself.

So rather than seeing this in the popup, I'd like to see this (the URL specified in Content Url).

Thanks,
Steve

PatKeegan · ‎08-26-2011

Steve,

Were you able to get this working?

It would be a clever way to have a rich popup. I also like the idea of desktop and web having same popup.

-Pat Keegan

StephenLead · ‎08-28-2011

Pat,

I haven't been able to get the HTML Popup to work directly.

Luckily I'm able to edit the source in ArcMap and add the URL as an attribute. This allows me to workaround the problem, but it would be good to do this directly via the HTML Popup property.

Steve

KellyHutchins · ‎12-02-2011

Steve,

Sorry for the delay in responding - somehow I missed the responses to this thread. Will this approach work for you?

<head>
  <script type="text/javascript" src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=2.4">
  </script>
  <link href="http://serverapi.arcgisonline.com/jsapi/arcgis/2.4/js/dojo/dijit/themes/claro/claro.css"
  rel="stylesheet" type="text/css">
  <link rel="stylesheet" type='text/css' href='http://serverapi.arcgisonline.com/jsapi/arcgis/2.4/js/esri/dijit/css/Popup.css'
  />
  <title>
    popup test
  </title>
  <script type="text/javascript">
   dojo.require("esri.map");
 dojo.require("esri.layers.FeatureLayer");

 function init() {

   var spatialRef = new esri.SpatialReference({
     wkid: 102113
   });
   var startExtent = new esri.geometry.Extent();
   startExtent.xmin = -3474427;
   startExtent.ymin = 3213361;
   startExtent.xmax = 3409296;
   startExtent.ymax = 11057509;
   startExtent.SpatialReference = spatialRef;

   var map = new esri.Map("mapDiv", {
     extent: startExtent
   });
   map.setExtent(startExtent);
   var basemap = new esri.layers.ArcGISTiledMapServiceLayer("http://server.arcgisonline.com/ArcGIS/rest/services/World_Topo_Map/MapServer");
   map.addLayer(basemap);

   var biotemplate = new esri.InfoTemplate();
   biotemplate.setTitle("<b>HTML Popup Test</b>");

   /*biotemplate.setContent("<iframe src='http://discomap.eea.europa.eu/ArcGIS/rest/services/Bio/LifeProjects_Dyna_WGS84/MapServer/0/${OBJECTID}/htmlPopup?f=html' frameborder='0' width='100%' height='100%' style='width: 100%; height: 100%; display: block; padding: 0px; margin: 0px;'></iframe>");*/
    biotemplate.setContent(updatePopup);

   var bioLayer = new esri.layers.FeatureLayer("http://discomap.eea.europa.eu/ArcGIS/rest/services/Bio/LifeProjects_Dyna_LAEA/MapServer/0", {
     infoTemplate: biotemplate
   });
   map.addLayer(bioLayer);

   var oiltemplate = new esri.InfoTemplate();
   oiltemplate.setTitle("<b>HTML Popup Test</b>");

   oiltemplate.setContent("<iframe src='http://sampleserver3.arcgisonline.com/ArcGIS/rest/services/Petroleum/StantonCountyKSLeases/MapServer/0/${OBJECTID}/htmlPopup?f=html' frameborder='0' width='100%' height='100%' style='width: 100%; height: 100%; display: block; padding: 0px; margin: 0px;'></iframe>");


   var oilLayer = new esri.layers.FeatureLayer("http://sampleserver3.arcgisonline.com/ArcGIS/rest/services/Petroleum/StantonCountyKSLeases/MapServer/0", {
     infoTemplate: oiltemplate
   });

   map.addLayer(oilLayer);

   map.infoWindow.resize(600, 300);

 }
  function updatePopup(graphic){
      var deferred = new dojo.Deferred();
      var url = graphic.getLayer().url + "/" + graphic.attributes.OBJECTID + "/htmlPopup?f=json";
      esri.request({
      url: url,
      content:url.query,
      callbackParamName: "callback",
      load: function(response) {
          //esriServerHTMLPopupTypeAsURL
          deferred.callback( "<iframe src='" + response.content +"' frameborder='0' width='100%' height='100%' style='width: 100%; height: 100%; display: block; padding: 0px; margin: 0px;'></iframe>");

      },
      error: function(error) {
         deferred.errback("Error occurred while generating profile");
      }
      });
      return deferred;
     
      return requestHandle;
 
  }
 dojo.addOnLoad(init);
  </script>
</head>
<body class="claro">
  <div id="head">
  </div>
  <div id="mapDiv" style="width:100%; height:90%; border:1px solid #000;">
  </div>
</body>

StephenLead · ‎12-06-2011

Hi Kelly,

Thanks for the follow-up. I ended up using the workaround above, but hopefully this will be useful information for someone else in the future.

Steve

AlexDeVine · ‎10-11-2012

Hi Kelly,

I used the sample you provided in this thread and tried to combine it with another sample from the API reference page Display Identify Results in Popup. When I try to run updatePopup in the switch function, it throws back an error "TypeError: Cannot read property 'url' of null {}" which seems to be saying to me that the graphic does not exist. I am very confused and if you could look over my code and perhaps see where I am going wrong, I would appreciate it.


       //Set templates up for sustainability infowindows
        sustaintemplate = new esri.InfoTemplate();


        //Set infoTemplates for sustainability layers
        setSustainInfoTemplates();

        function setSustainInfoTemplates() {
            for (var j = 0; j < featureLayers.length; j++) {
                featureLayers.setInfoTemplate(sustaintemplate);
            }
        }

     }

     function mapReady(map) {
         map.infoWindow.resize(400, 430);   

         dojo.connect(map, "onClick", executeIdentifyTask);

         identifyTask1 = new esri.tasks.IdentifyTask("http://falcon.camplan.uga.edu/OUAGISSERVER/rest/services/UGA_SustainBase/MapServer");

         identifyParams1 = new esri.tasks.IdentifyParameters();
         identifyParams1.tolerance = 5;
         identifyParams1.returnGeometry = true;
         identifyParams1.layerIds = [0,1,2,3,4,5,6,7,8,9,10,12,14];
         identifyParams1.layerOption = esri.tasks.IdentifyParameters.LAYER_OPTION_ALL;
         identifyParams1.width = map.width;
         identifyParams1.height = map.height;

         //resize the map when the browser resizes
         dojo.connect(dijit.byId('map'), 'resize', map, map.resize);      
     }

     function executeIdentifyTask(evt) {
         //create identify task and setup parameters
         identifyParams1.geometry = evt.mapPoint;
         identifyParams1.mapExtent = map.extent;

         var deferred1 = identifyTask1.execute(identifyParams1);

         deferred1.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;
                switch(result.layerName){
                case 'UGA Buildings': 
                    alert("UGA Buildings!!");
                    var template = new esri.InfoTemplate();
                    feature.setInfoTemplate(template);
                    break;
                case 'Road Names':
                    alert("Road Names!!");
                    var template = new esri.InfoTemplate();
                    feature.setInfoTemplate(template);
                    break;
                case 'Cisterns_Point':
                    alert("Cisterns!!");
                    var sustaintemplate = new esri.InfoTemplate();
                    sustaintemplate.setTitle("<b>UGA Sustainability Info</b>");
                    sustaintemplate.setContent(updatePopup);
                    feature.setInfoTemplate(sustaintemplate);
                    break;
                case 'DinHall_Point':
                    alert("DinHall!!");
                    sustaintemplate.setTitle("<b>UGA Sustainability Info</b>");
                    sustaintemplate.setContent(updatePopup);
                    break;
                case 'GrRoofs_Point':
                    alert("Grroofs!!");
                    sustaintemplate.setTitle("<b>UGA Sustainability Info</b>");
                    sustaintemplate.setContent(updatePopup);
                    break;
                case 'HistBuild_Point':
                    alert("Histbuild!!");
                    sustaintemplate.setTitle("<b>UGA Sustainability Info</b>");
                    sustaintemplate.setContent(updatePopup);
                    break;
                case 'LEED_Point':
                    alert("LEED!!");
                    sustaintemplate.setTitle("<b>UGA Sustainability Info</b>");
                    sustaintemplate.setContent(updatePopup);
                    break;
                case 'Prod_Point':
                    alert("Prod!!");
                    sustaintemplate.setTitle("<b>UGA Sustainability Info</b>");
                    sustaintemplate.setContent(updatePopup);
                    break;
                case 'Retail_Point':
                    alert("Retail!!");
                    sustaintemplate.setTitle("<b>UGA Sustainability Info</b>");
                    sustaintemplate.setContent(updatePopup);
                    break;
                case 'StrRest_Point':
                    alert("Strrest!!");
                    sustaintemplate.setTitle("<b>UGA Sustainability Info</b>");
                    sustaintemplate.setContent(updatePopup);
                    break;
                case 'SusBuild_Point':
                    alert("Susbuild!!");
                    sustaintemplate.setTitle("<b>UGA Sustainability Info</b>");
                    sustaintemplate.setContent(updatePopup);
                    break;
                case 'RainGardens':
                    alert("Raingar!!");
                    sustaintemplate.setTitle("<b>UGA Sustainability Info</b>");
                    sustaintemplate.setContent(updatePopup);
                    break;
                case 'PorPave_Point':
                    alert("PorPave!!");
                    sustaintemplate.setTitle("<b>UGA Sustainability Info</b>");
                    sustaintemplate.setContent(updatePopup);
                    break;
                }
                 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([deferred1]);
         map.infoWindow.show(evt.mapPoint);


     }

     function updatePopup(graphic) {

         var deferred = new dojo.Deferred();
         var url = graphic.getLayer().url + "/" + graphic.attributes.OBJECTID + "/htmlPopup?f=json";
         esri.request({
             url: url,
             content: url.query,
             callbackParamName: "callback",
             load: function (response) {
                 //esriServerHTMLPopupTypeAsURL
                 deferred.callback("<iframe src='" + response.content + "' frameborder='0' width='100%' height='100%' style='width: 100%; height: 100%; display: block; padding: 0px; margin: 0px;'></iframe>");

             },
             error: function (error) {
                 deferred.errback("Error occurred while generating profile");
             }
         });
         console.log(url);
         return deferred;
         return requestHandle;

     }

Thank you,

Alex