gbooth

Popup not working correctly

Discussion created by gbooth on Aug 23, 2012
Latest reply on Aug 24, 2012 by gbooth
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[i];
                //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>

Outcomes