I'm trying to add functionality to select a group of parcels as laid out in this example, and display queried information for those parcels in a popup info window. I've got it displaying the queried data in an infowindow correctly, and it highlights the correct parcel for the info being displayed, but I'm having issues highlighting every selected parcel. In the above example it sets the selection symbol with setSelectionSymbol(), but for whatever reason this isn't working for me, and I'm not exactly sure what I'm doing wrong.
I've included the parts of my code that are relevant to my problem, including parts that deal with toggling the parcel layer on and off in a legend.
function init() {
//initialize 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"));
//add geometry service from server
esri.config.defaults.geometryService = new esri.tasks.GeometryService("http://2501s-jjohnson:6080/arcgis/rest/services/Utilities/Geometry/GeometryServer");
//initalize map
app.map = new esri.Map("map", {
basemap : "satellite",
center : [-111.924531, 40.611871],
zoom : 13,
infoWindow: popup
});
//query parcel and show info in popup window
function executeIdentifyTask(evt) {
var query = new esri.tasks.Query();
query.geometry = pointToExtent(app.map,evt.mapPoint,10);
var deferred = featureParcel.selectFeatures(query,esri.layers.FeatureLayer.SELECTION_NEW);
app.map.infoWindow.setFeatures([deferred]);
app.map.infoWindow.show(evt.mapPoint);
console.log(evt.mapPoint);
}
//trigger feature layer parcel query if parcels are turned on
function clickConnect(connect){
if(connect){
//perform the identify task on click
clickHandler = dojo.connect(app.map, "onClick", executeIdentifyTask);
}else{
//disconnect the click handler
dojo.disconnect(clickHandler);
clickHandler = null;
}
}
//add parcel layer
var parcels = new esri.layers.ArcGISDynamicMapServiceLayer("http://2501s-jjohnson:6080/arcgis/rest/services/Parcels_UT/MapServer", {
id : 'parcels',
visible : false
});
parcelLayer.push({
layer : parcels,
title : 'Parcels'
});
//add parcel feature layer query info for popup window
var content = "<b>Address</b>: ${ADDR}" + "<br /><b>Owner Name</b>: ${OWNER}" + "<br /><b>Parcel ID</b>: ${APN}" + "<br /><b>City</b>: ${CITY}" + "<br /><b>Acres</b>: ${TOTAL_ACRES}"+ " <br /><a href='${COUNTY_LINK}' target='_blank'>County Assessor Site</a>"
var popUpTemplate = new esri.InfoTemplate("Parcel", content);
//add parcel feature layer
featureParcel = new esri.layers.FeatureLayer("http://2501s-jjohnson:6080/arcgis/rest/services/Parcels_UT/MapServer/0",{
mode: esri.layers.FeatureLayer.MODE_SELECTION,
outFields: ["*"],
infoTemplate:popUpTemplate
});
//set selection Symbol
var selectionSymbol = new esri.symbol.SimpleFillSymbol().setColor(new dojo.Color([255,255,0,0.5]));
selectionSymbol.setOutline(new esri.symbol.SimpleLineSymbol("solid", new dojo.Color([255,0,0]), 2));
featureParcel.setSelectionSymbol(selectionSymbol);
//create legend
dojo.connect(app.map, 'onLayersAddResult', function(results) {
var legend = new esri.dijit.Legend({
map : app.map,
layerInfos : legendLayers
}, "retail");
legend.startup();
});
//add all layers to map
app.map.addLayers([parcels]);
//add layer arrays into legend object
legendLayers["parcel"] = parcelLayer;
dojo.connect(app.map, 'onLayersAddResult', function(results) {
//for each layer array in legend object
for (var k in legendLayers){
//add legend check boxes for each layer
//to toggle layer visibility
dojo.forEach(legendLayers[k], function(layer) {
var layerName = layer.title;
var checkBox = new dijit.form.CheckBox({
name : "checkBox" + layer.layer.id,
value : layer.layer.id,
checked : layer.layer.visible,
onChange : function(evt) {
var clayer = app.map.getLayer(this.value);
clayer.setVisibility(!clayer.visible);
this.checked = clayer.visible;
//toggle the feature layer parcel query
//parcelClick indicates whether the parcel layer is on
if (this.value ==="parcels" && this.checked === true){
clickConnect(true);
parcelClick = true;
} else if (this.value ==="parcels"){
clickConnect(false);
parcelClick = false;
}
}
});
//add the check box and label to the table of contnents
dojo.place(checkBox.domNode, dojo.byId(k), "after");
var checkLabel = dojo.create('label', {
'for' : checkBox.name,
innerHTML : layerName
}, checkBox.domNode, "after");
dojo.place("<br />", checkLabel, "after");
});
}
});
dojo.connect(app.map, "onLoad", initSelectToolbar);
}
function initSelectToolbar(map) {
selectionToolbar = new esri.toolbars.Draw(map);
var selectQuery = new esri.tasks.Query();
dojo.connect(selectionToolbar, "onDrawEnd", function(geometry) {
selectionToolbar.deactivate();
selectQuery.geometry = geometry;
var deferred = featureParcel.selectFeatures(selectQuery, esri.layers.FeatureLayer.SELECTION_NEW);
app.map.infoWindow.setFeatures([deferred]);
app.map.infoWindow.show();
});
}
function pointToExtent(map, point, toleranceInPixel) {
var pixelWidth = map.extent.getWidth() / map.width;
var toleraceInMapCoords = toleranceInPixel * pixelWidth;
return new esri.geometry.Extent( point.x - toleraceInMapCoords,
point.y - toleraceInMapCoords,
point.x + toleraceInMapCoords,
point.y + toleraceInMapCoords,
map.spatialReference );
}
dojo.ready(init);
