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>