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

Jason,

I was able to run the query against REST point by going to the map service's ArcGIS REST Services Directory, go into the map layer, in "supported operation", I go to query, then I specify 1=1 in where clause and do query(GET) and it shows me all the data returned with the following url show up in the browser:

http://10.1.22.31/arcgis/rest/services/test/stormwater_wo_rd/MapServer/3/query?where=3%3D1&text=&obj...

Yes, If i just copy paste the following url in the browser, I got all the data returned as well.
http://10.1.22.31/arcgis/rest/services/test/stormwater_wo_rd/MapServer/3/query?where=1%3D1&spatialRe...

So in my code if i can send query that look just like http://10.1.22.31/arcgis/rest/services/test/stormwater_wo_rd/MapServer/3/query?where=0%3D1&spatialRe... . It will work. Could you please provide further help?

Thank you again!

JasonZou · ‎08-28-2013

Which layer do you want to query? In your code, it's the layer 0 fed into the queryTask. But in your last post, you queried against the layer 3.

JinZhang · ‎08-28-2013

sorry that was a typo, should be layer 0. There is only one layer in that map service.

JasonZou · ‎08-28-2013

ok...I am pretty sure that the issue lies on the extent used to make the query. Please provide me two things.

layer0 extent

the extent used to make the query

JinZhang · ‎08-28-2013

Jason, here is the extent for layer0. I got this from the map service REST service directory.

Extent:
XMin: 2125148.0132503808
YMin: 596823.7652553022
XMax: 2258287.4035612047
YMax: 675346.1662348956
Spatial Reference: 102722 (3734)

I used the extent for layer 0 in the code, here is what I set the extent inside of function init()

var ext = new esri.geometry.Extent({ "xmin": 2125148.0132503808, "ymin": 596823.7652553022, "xmax": 2258287.4035612047, "ymax": 675346.1662348956, "spatialReference": { "wkid": 3734} });

JasonZou · ‎08-28-2013

Try the two tests in a browser window.

http://10.1.22.31/arcgis/rest/services/test/vw_regional_drainage/MapServer/0/query?f=json&returnGeometry=true&spatialRel=esriSpatialRelIntersects&geometry={"xmin":2149211.2547150566,"ymin":647347.9033248299,"xmax":2149974.8437035126,"ymax":648111.4923132863,"spatialReference":{"wkid":3734}}&geometryType=esriGeometryEnvelope&inSR=3734&outFields=ASSET_NAME,ASSET_TYPE&outSR=3734&callback=dojo.io.script.jsonp_dojoIoScript2._jsonpCallback

http://10.1.22.31/arcgis/rest/services/test/vw_regional_drainage/MapServer/0/query?f=json&returnGeometry=true&spatialRel=esriSpatialRelIntersects&geometry={"x":2145918.8909744024,"y":610092.0131329745,"spatialReference":{"wkid":3734}}&geometryType=esriGeometryPoint&inSR=3734&outFields=ASSET_NAME,ASSET_TYPE&outSR=3734&callback=dojo.io.script.jsonp_dojoIoScript2._jsonpCallback

JinZhang · ‎08-28-2013

I got identical response with no data returned from browser window:

Response for code:
http://10.1.22.31/arcgis/rest/services/test/vw_regional_drainage/MapServer/0/query?f=json&returnGeom...{"xmin":2149211.2547150566,"ymin":647347.9033248299,"xmax":2149974.8437035126,"ymax":648111.4923132863,"spatialReference":{"wkid":3734}}&geometryType=esriGeometryEnvelope&inSR=3734&outFields=ASSET_NAME,ASSET_TYPE&outSR=3734&callback=dojo.io.script.jsonp_dojoIoScript2._jsonpCallback

Response for code:
http://10.1.22.31/arcgis/rest/services/test/vw_regional_drainage/MapServer/0/query?f=json&returnGeom...{"x":2145918.8909744024,"y":610092.0131329745,"spatialReference":{"wkid":3734}}&geometryType=esriGeometryPoint&inSR=3734&outFields=ASSET_NAME,ASSET_TYPE&outSR=3734&callback=dojo.io.script.jsonp_dojoIoScript2._jsonpCallback

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

JasonZou · ‎08-28-2013

Now I may have to admit that the spatial view may cause some query issue. Can you make spatial query against the layer in ArcMap?

Another option would be to keep the feature class and the work order table on their own and build a relationship between them in MXD and publish again. In your code, you can first query the feature class by the click location, and then query the work order table based on the returned feature class ObjectIDs. Display the work order in the popup then.

JinZhang · ‎08-28-2013

Thanks Jason,

So i published the data table that contains work order data as a table and published the feature class that has asset name as a feature layer. How do i loop through the work order table to get the matched data based on the asset name? What function should I use? I am sorry that I ArcGIS API javascript is very new to me. This is the first project i am working on.

JasonZou · ‎08-28-2013

Assuming you save both the table and the asset feature class in a geodatabase. Create a relationship class to link the two together. Then load both the table and the feature class in ArcMap, and publish them. Once published, you should see a Relationships section of the layer or table page at the bottom.

Here is the code snippet of how to query the table based on the result from the feature layer. The code is to query the feature layer based on the asset name, and only return ObjectIDs for better performance. Then use the returned object ids to query the related work order table. If you like to highlight the features returned from the feature layer, you can use fl.selectFeatures method to replace fl.queryIds. In this case, you will make sure to return ObjectID field whose value will be used to query the related records.

function queryAsset() {
  var fl = new esri.layers.FeatureLayer("feature layer rest url");
  var q = new esri.tasks.Query();
  q.where = "ASSET_NAME = 'SomeValue'";
  fl.queryIds(q, function(objIds) {
    var relatedQuery = new esri.tasks.RelationshipQuery();
    relatedQuery.outFields = [list of output fields];
    relatedQuery.relationshipId = 1;    // relationship id showing on the service explorer.
    objectIds = objIds;
    fl.queryRelatedFeatures(relatedQuery, processRelatedRecords);
  });
}

function processRelatedRecords(relatedRecords) {
  // relatedRecords should be the work order records in your case
  // process them as you like.
}