Popup not working correctly

GordonBooth — Thu, 23 Aug 2012 14:50:01 GMT

Redo of an earlier post. I really need some help.
I am struggling to get a popup to work correctly. I???m creating a site for the public to search for Sexual or Violent Offenders in our state. The user enters the offender???s last name and the results are displayed in a data grid and on the map. This works correctly. However, when I click on a symbol marker I get multiple offenders in the popup when I should only be getting one. When I click on row in the Data Grid the map centers and zooms properly on the single marker but the popup says there is ???no information???. I don't think the popup is getting the results of the find task. I would appreciate your help.
Thanks Gordon

   
    <link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.1/js/dojo/dijit/themes/claro/claro.css">
    <link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.1/js/dojo/dojox/grid/resources/Grid.css">
    <link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.1/js/dojo/dojox/grid/resources/claroGrid.css">
    <link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.1/js/esri/dijit/css/Popup.css">
         <script type="text/javascript">
             dojoConfig = {
                 parseOnLoad: true
             }
    </script>
    <style>
      html, body { height: 100%; width: 100%; margin: 0; padding: 0; }
    </style>
    <script type="text/javascript" src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=3.1"></script>

    <script type="text/javascript">
        dojo.require("esri.map");
        dojo.require("dojox.grid.DataGrid");
        dojo.require("dojo.data.ItemFileReadStore");
        dojo.require("esri.tasks.find");
        dojo.require("dijit.layout.BorderContainer");
        dojo.require("dijit.layout.ContentPane");
        dojo.require("dijit.form.Button");
        dojo.require("esri.dijit.Popup");
        dojo.require("esri.virtualearth.VETiledLayer");


        var findTask, findParams;
        var map, startExtent;
        var grid, store;
        var identifyTask, identifyParams;
        var veTileLayer;


        function init() {
            dojo.connect(grid, "onRowClick", onRowClickHandler);

            //Create map and add the ArcGIS Online imagery layer
            startExtent = new esri.geometry.Extent({
                "xmin": -12899042.78408774,
                "ymin": 5404409.951369693,
                "xmax": -11570872.980604872,
                "ymax": 6637186.343552687,
                "spatialReference": { "wkid": 102100 }
            });
           
            //setup the popup window
            var popup = new esri.dijit.Popup({
                fillSymbol: new esri.symbol.SimpleFillSymbol(esri.symbol.SimpleFillSymbol.STYLE_SOLID,
                new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_SOLID,
                new dojo.Color([255, 0, 0]), 2),
                new dojo.Color([255, 255, 0, 0.25]))
            }, dojo.create("div"));

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

            popup.resize(200, 400);
            dojo.connect(map, "onLoad", mapReady);
         
           //Add Bing base map - 
            veTileLayer = new esri.virtualearth.VETiledLayer({
                bingMapsKey: 'AhiRRQVARWk5YHjV3Mdw2wPvIP25gfhDWNwFMXstqKIbU-ro6OuWfs0jSmUKsp1q',
                //changed .MAP_STYLE_AERIAL to .MAP_STYLE_ROAD
                mapStyle: esri.virtualearth.VETiledLayer.MAP_STYLE_ROAD
            });

            map.addLayer(veTileLayer);


            //Create Find Task using the URL of the map service to search
            findTask = new esri.tasks.FindTask("http://doj.mtdoj.ads/DOJ_ArcGIS/rest/services/SVOW/MapServer");

            //Create the find parameters
            findParams = new esri.tasks.FindParameters();
            findParams.returnGeometry = true;
            findParams.layerIds = [1];
            findParams.searchFields = ["NAME"];
            findParams.outSpatialReference = map.spatialReference;

            dojo.connect(map, 'onLoad', function (theMap) {
                //resize the map when the browser resizes
                dojo.connect(dijit.byId('map'), 'resize', map, map.resize);
            });
        }
        //Search 
        function doFind() {
            //Set the search text to the value in the box
            findParams.searchText = dojo.byId("OffenderName").value;
            //added var SearchText
            findTask.execute(findParams, showResults);
        }

        function showResults(results) {
            //This function works with an array of FindResult that the task returns
            map.graphics.clear();
            // create marker symbols
            var symbol = new esri.symbol.SimpleMarkerSymbol(esri.symbol.SimpleMarkerSymbol.STYLE_DIAMOND, 10,
                new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_SOLID,
                new dojo.Color([0, 0, 0]), 1),
                new dojo.Color([255, 255, 0, 1])
             );

            //create array of attributes
            var items = dojo.map(results, function (result) {
                var graphic = result.feature;
                graphic.setSymbol(symbol);
                map.graphics.add(graphic);
                return result.feature.attributes;
            });


            //Create data object to be used in store
            var data = {
                identifier: "OBJECTID",  //This field needs to have unique values
                label: "OBJECTID", //Name field for display. Not pertinent to a grid but may be used elsewhere.
                items: items
            };

            //Create data store and bind to grid.
            store = new dojo.data.ItemFileReadStore({ data: data });
            var grid = dijit.byId('grid');
            grid.setStore(store);

            //Zoom back to the initial map extent
            map.setExtent(startExtent);

        }

        //Zoom to the point when the user clicks a row in data grid
        function onRowClickHandler(evt) {
            var clickedOffender = grid.getItem(evt.rowIndex).OBJECTID;
            var selectedAddress;
            for (var i = 0, il = map.graphics.graphics.length; i < il; i++) {
                var currentGraphic = map.graphics.graphics;
                //assign selection to a graphic
                if ((currentGraphic.attributes) && currentGraphic.attributes.OBJECTID == clickedOffender) {
                    selectedAddress = currentGraphic;
                    break;
                }
            }
            //set the point extent and zoom in - 500 works well
            var PointExtent = new esri.geometry.Extent();
            PointExtent.xmin = selectedAddress.geometry.x - 500;
            PointExtent.ymin = selectedAddress.geometry.y - 500;
            PointExtent.xmax = selectedAddress.geometry.x + 500;
            PointExtent.ymax = selectedAddress.geometry.y + 500;
            map.setExtent(PointExtent);

        }
        function mapReady(map) {

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

            //create identify tasks and setup parameters
            identifyTask = new esri.tasks.IdentifyTask("http://doj.mtdoj.ads/DOJ_ArcGIS/rest/services/SVOW/MapServer");

            identifyParams = new esri.tasks.IdentifyParameters();
            identifyParams.tolerance = 3;
            identifyParams.returnGeometry = true;
            identifyParams.layerIds = [1];
            identifyParams.layerOption = esri.tasks.IdentifyParameters.LAYER_OPTION_ALL;
            identifyParams.width = map.width;
            identifyParams.height = map.height;


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

        }

        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    
                // return an array of features.
                return dojo.map(response, function (result) {
                    var feature = result.feature;
                    feature.attributes.layerName = result.layerName;
                    if (result.layerName === 'SVOW') {
                        console.log(feature.attributes.SVOWID);
                        var template = new esri.InfoTemplate("", "<b>${NAME}</b> <br/> ${OFF_TYP} OFFENDER <br/> Tier Level ${TIER_LVL}<br/><font color=RED>NonCompliant: ${NONCOMPLIANT}<br/><br/><font color=BLACK>${ADDR_LN_1} ${ADDR_LN_2}<br/>${CITY}, ${STATE} ${ZIP}<br/><a href=${DETAIL_URL}>More info</a><br/><br/> <img src= ${PHOTO_URL} alt=(${OFF_TYP} WIDTH=128 HEIGHT=128 BORDER=2 />");
                        feature.setInfoTemplate(template);
                    }

                    return feature;
                });
            });

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

        dojo.addOnLoad(init);

    </script>

Re: Popup not working correctly

JohnGravois — Thu, 23 Aug 2012 22:50:03 GMT

i might be missing something here, but if you're already querying for your features and drawing them in a graphics layer on the client side, then there is no need to set up an additional identify task to be able to take advantage of popups.

this is because the graphics layer itself already stores both the geometry and attributes of the features and has a setInfoTemplate() method which allows you to configure an infoWindow which will display automatically when you click on the feature.

check out this fiddle to see how it works
http://jsfiddle.net/jagravois/ndmJY/1/

Re: Popup not working correctly

GordonBooth — Fri, 24 Aug 2012 15:11:02 GMT

John - That did it.
Thanks for taking the time to help. Have a good weekend.
Gordon

topic Re: Popup not working correctly in ArcGIS JavaScript Maps SDK Questions

Popup not working correctly

Re: Popup not working correctly

Re: Popup not working correctly