Dynamic popup attribute info - example

AdrianMarsden — Sat, 11 Dec 2021 17:51:08 GMT

Hi

I thought I'd give something back for a change and couldn't see anything like this already posted.

I wanted to use the popup widget as demonstrated on this sample. But use it so that the layer/field definitions were generated from the map service, in order to cut out hard coding changes, so if a new layer or field are added all that needs to be done is to ensure the alias is set in the MXD.

Hacking around a few other samples and I ended up with this.

  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;

                var infotext;
  var rowc = 0;
  infotext = "<table width=99% class='popuptable'>";
                infotext += "<tr><th colspan='2' scope='col'>" + result.layerName + "</th></tr>";
                for (j in result.feature.attributes) {
                    var template = new esri.InfoTemplate("", result.feature.attributes);
                    
     if (isEven(rowc)) {rowstyle='idlineeven'}
     else{
      rowstyle='idlineodd'
     }
     console.debug(result)
     
     if (j.toUpperCase() != "OBJECTID" && j.toUpperCase() != "SHAPE" && j.toUpperCase() != "SHAPE_AREA" && j.toUpperCase() != "SHAPE_LENGTH") {

                        infotext += "<tr class='" + rowstyle + "'><th>" + j + ": </strong><td>";
                        infotext += result.feature.attributes +  "</td></tr>" ;
      rowc = rowc +1
                    }
                }
    infotext += "</table>"
                var template = new esri.InfoTemplate("", infotext);
                feature.setInfoTemplate(template);
    map.infoWindow.resize(400, 200);

    return feature;
            });
        });

        map.infoWindow.setFeatures([deferred]);
        map.infoWindow.show(evt.mapPoint);
    }

I also needed a "Is a number odd or even function"

function isEven(value)
{
return /^\d+$/.test(value.toString()) ? (value%2 === 0 ? true : false ) : false;
};

In order to style the output nicely using basic CSS


.idlineeven {
 background-color:#F30
 
 }
 
.idlineodd {
 background-color:#3C0
}

.popuptable{text-align:left}

Working example on my personal site

Any comments or suggestions for improvement or areas where I've used bad practice would be welcome. As it mainly was a cut and paste job from various other examples I have no idea really how it works, it just does, 😄

Cheers

ACM

topic Dynamic popup attribute info - example in ArcGIS JavaScript Maps SDK Questions

Dynamic popup attribute info - example