need help with set pop up window for Dynamic map service layer

JinZhang · ‎08-26-2013

Hello,

I am very new to ArcGIS in general, any help is appreciated!

I have a dynamic map service that has only one layer that shows the asset related work order. This layer is a spatial view created by joining a feature class table(a gis asset table) to a non spatial database table(work order) on a matching field ASSET_NAME. I want to set up the the pop up window so when user click on the map, the work order associated to the clicked asset will pop up.

I have searched this forum and found the following thread:

http://forums.arcgis.com/threads/36210-popup-widget-for-ArcGISDynamicMapServiceLayer?highlight=dynam...

This example works with our other dynamic map services that do not have layers from spatial views. But for the dynamic map service that has spatial view as the query layer, i can't seem to get it to work:

Here is my code:

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=7,IE=9" />
    <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no"/>
    <title></title>
    <link rel="stylesheet" href="http://serverapi.arcgisonline.com/jsapi/arcgis/2.5/js/dojo/dijit/themes/tundra/tundra.css">
    <link rel="stylesheet" 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; }
      #map{ margin: 0; padding: 0; }
    </style>
    <script>
        var dojoConfig = { parseOnLoad: true };
            </script>
    <script src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=2.7"></script>
    <script type="GIS_WAM_TEST\jsapi_vsdoc10_v36.js"></script>
    <script>
        dojo.require("dijit.layout.BorderContainer");
        dojo.require("dijit.layout.ContentPane");
        dojo.require("esri.map");
        dojo.require("esri.tasks.query");
        dojo.require("esri.dijit.Popup");


        var map;
        function init() {
            var dynSvc = new esri.layers.ArcGISDynamicMapServiceLayer("http://10.1.22.31/arcgis/rest/services/test/stormwater_wo_rd/MapServer", { "opacity": 0.5 });
            dynSvc.hasAttributionData = true;
            var ext = new esri.geometry.Extent({ "xmin": 2125148.0132503808, "ymin": 596823.7652553022, "xmax": 2258287.4035612047, "ymax": 675346.1662348956, "spatialReference": { "wkid": 3734} });
            var popup = new esri.dijit.Popup(null, dojo.create("div"));

            map = new esri.Map("map", {
                "extent": ext,
                "infoWindow": popup
            });
            map.addLayer(dynSvc);

            dojo.connect(map, 'onClick', queryCounties);

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

        function queryCounties(e) {
            // build an extent around the click point
            var pad = map.extent.getWidth() / map.width * 3;
            var queryGeom = new esri.geometry.Extent(e.mapPoint.x - pad, e.mapPoint.y - pad, e.mapPoint.x + pad, e.mapPoint.y + pad, map.spatialReference);
            var q = new esri.tasks.Query();

            q.outSpatialReference = { "wkid": 3734 };

            q.returnGeometry = false;
            q.outFields = ["ASSET_NAME,ASSET_TYPE"];
            q.geometry = queryGeom;



            var popupTemplate = new esri.dijit.PopupTemplate({
                title: "{NAME}",
                fieldInfos: [
            { fieldName: "ASSET_NAME", visible: true, label: "ASSET_NAME: " },
            { fieldName: "ASSET_TYPE", visible: true, label: "ASSET_TYPE: " }
          ]
            });

            var qt = new esri.tasks.QueryTask("http://10.1.22.31/arcgis/rest/services/test/stormwater_wo_rd/MapServer/0");
            var def = qt.execute(q);
            def.addCallback(function (result) {
                return dojo.map(result.features, function (f) {
                    f.setInfoTemplate(popupTemplate);
                    return f;
                });
            });

            // use the deferred returned from the query task to set
            // the popup features
            map.infoWindow.setFeatures([def]);
            // show the popup
            map.infoWindow.show(e.screenPoint, map.getInfoWindowAnchor(e.screenPoint));
        }
        dojo.ready(init);
    </script>
</head>

<body class="tundra">
    <div data-dojo-type="dijit.layout.BorderContainer"
         data-dojo-props="design:'headline',gutters:false"
         style="width: 100%; height: 100%; margin: 0;">
      <div id="map"
           data-dojo-type="dijit.layout.ContentPane"
           data-dojo-props="region:'center'">
      </div>
    </div>
</body>
</html>

i am able to see query result from rest point of the map service,for example

NAME: Blodgett Creek
Polyline:
[2145918.8909744024, 610092.0131329745] , [2145906.221844673, 610108.106422767] , [2145891.728881374, 610117.7147980779] more...

However, when I run my code, it seems there is no feature returns and the pop up window just say"no information available". here is what I get from Chrome's network window:

dojo.io.script.jsonp_dojoIoScript2._jsonpCallback({"displayFieldName":"NAME","fieldAliases":{"ASSET_NAME":"ASSET_NAME","ASSET_TYPE":"ASSET_TYPE"},"fields":[{"name":"ASSET_NAME","type":"esriFieldTypeString","alias":"ASSET_NAME","length":15},{"name":"ASSET_TYPE","type":"esriFieldTypeString","alias":"ASSET_TYPE","length":25}],"features":[]});

JinZhang · ‎08-28-2013

Thank you Jason for all your help. I will give it a try.