executing the complete findtask url generated by my application from the address bar I get back a good json object that returns 112 features
I was trying to implement functionality similar to this sample http://developers.arcgis.com/javascript/samples/popup_sidepanel/. If you click right on the border or two states a pager appears in the upper left corner.
I can't see why the handlers for SelectionChange and SetFeatures in the InitializeSidebar Method aren't performing like the sample.
var map, myPopup, UtilTemplate;
//modules
// @formatter:off
require(["esri/map", //map
"esri/layers/ArcGISDynamicMapServiceLayer", //map
"esri/graphic", //map
"esri/geometry/Extent", //map
"esri/InfoTemplate", //map
"esri/layers/FeatureLayer", //map
"esri/layers/Field", //map
"esri/layers/LabelLayer", //map
"esri/layers/LayerInfo", //map
"esri/layers/ImageParameters", //map
"esri/tasks/query", //map
"esri/tasks/QueryTask", //map
"esri/tasks/FeatureSet", //map
"esri/tasks/FindTask",
"esri/tasks/FindParameters",
"esri/tasks/IdentifyParameters", //map
"esri/tasks/IdentifyTask", //map
"esri/tasks/IdentifyResult", //map
"esri/symbols/SimpleFillSymbol", //map
"esri/symbols/SimpleLineSymbol", //map
"esri/symbols/SimpleMarkerSymbol", //map
"esri/symbols/TextSymbol", //map
//"esri/renderers/Renderer",
"esri/renderers/SimpleRenderer", //map
"esri/symbols/Font", //map
"esri/dijit/PopupTemplate", //map
"esri/dijit/HomeButton", //map
"esri/dijit/Basemap",
"esri/dijit/BasemapLayer",
"esri/dijit/BasemapGallery",
//"esri/dijit/BasemapToggle", //map
"esri/dijit/Geocoder", //map
"esri/dijit/Scalebar", //map
"esri/dijit/Legend", //map
"esri/dijit/OverviewMap",
"esri/dijit/Measurement",
"esri/dijit/Popup",
"agsjs/dijit/TOC", //map
"dojo/ready", "dojo/parser", "dojo/on", "dojo/dom", //all
"dojo/dom-construct", "dojo/number", "dojo/query", "dojo/fx", //"dojo/Deferred", "dojo/promise/Promise", "dojo/promise/all",
"dojo/_base/Color", //all
"dojo/_base/declare", //all
"dojo/_base/array", //all
"dojo/_base/lang", //all
"dijit/layout/BorderContainer", "dijit/layout/ContentPane",
"dijit/registry", "dijit/form/Button",
"esri/graphicsUtils", "dojo/_base/connect", "esri/domUtils"
],
function(Map, ArcGISDynamicMapServiceLayer, Graphic, Extent, InfoTemplate,
FeatureLayer, Field, LabelLayer, LayerInfo, ImageParameters, Query, QueryTask, FeatureSet, FindTask, FindParameters, IdentifyParameters, IdentifyTask, IdentifyResult,
SimpleFillSymbol, SimpleLineSymbol, SimpleMarkerSymbol,TextSymbol, SimpleRenderer, Font, PopupTemplate, HomeButton, Basemap, BasemapLayer, BasemapGallery, Geocoder, Scalebar, Legend, OverviewMap, Measurement, Popup,
TOC, ready, parser, on, dom, domConstruct, number, query, fx, Color, declare, arrayUtils, lang,
BorderContainer, ContentPane, registry, Button, graphicsUtils, connect, domUtils) {
// @formatter:on
ready(function() {
//Setup Popup
var myPopup = new Popup({fillSymbol: new SimpleFillSymbol(SimpleFillSymbol.STYLE_NULL, new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID, new Color([102,0,204]), 5), new Color([255,255,0,0.25])),
lineSymbol: new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID, new Color([255,0,0]), 5),
titleInBody: false, offsetX: 100, offsetY: 100,
pagingInfo: false
}, domConstruct.create("div")); //1st color fill is for line, 2nd for fill
var extentInitial = new Extent({
"xmin" : -9230904.490170034,
"ymin" : 3111585.686814823,
"xmax" : -9086285.632654676,
"ymax" : 3173576.116754018,
"spatialReference" : {
"wkid" : 3857
} // center and zoom no longer needed
});
var myLods = [{"level" : 0, "resolution" : 4891.96981024998, "scale" : 18489297.737236}, //levels 5 - 19 of world street map; 0-14 index levels for center and zoom
{"level" : 1, "resolution" : 2445.98490512499, "scale" : 9244648.868618},
{"level" : 2, "resolution" : 1222.99245256249, "scale" : 4622324.434309},
{"level" : 3, "resolution" : 611.49622628138, "scale" : 2311162.217155},
{"level" : 4, "resolution" : 305.748113140558, "scale" : 1155581.108577},
{"level" : 5, "resolution" : 152.874056570411, "scale" : 577790.554289},
{"level" : 6, "resolution" : 76.4370282850732, "scale" : 288895.277144}, //initial extent zoom
{"level" : 7, "resolution" : 38.2185141425366, "scale" : 144447.638572},
{"level" : 8, "resolution" : 19.1092570712683, "scale" : 72223.819286},
{"level" : 9, "resolution" : 9.55462853563415, "scale" : 36111.909643},
{"level" : 10, "resolution" : 4.77731426794937, "scale" : 18055.954822},
{"level" : 11, "resolution" : 2.38865713397468, "scale" : 9027.977411},
{"level" : 12, "resolution" : 1.19432856685505, "scale" : 4513.988705},
{"level" : 13, "resolution" : 0.597164283559817, "scale" : 2256.994353},
{"level" : 14, "resolution" : 0.298582141647617, "scale" : 1128.497176}
];
//setup event handlers for the next/previous buttons
on(dom.byId("previous"), "click", selectPrevious);
on(dom.byId("next"), "click", selectNext);
map = new Map("cpCenter", {
basemap : "hybrid",
extent : extentInitial,
lods : myLods,
showAttribution: false,
infoWindow: myPopup,
displayGraphicsOnPan: false,
//nav: true
});
map.on("load", function () {
//Create the find parameters
findParams = new FindParameters();
findParams.returnGeometry = true;
findParams.layerIds = [0];
findParams.searchFields = ["ACCOUNT","Name1"];
findParams.outSpatialReference = map.spatialReference;
console.log("find sr: ", findParams.outSpatialReference);
});
//map.infoWindow.set("popupWindow",false);
map.infoWindow.popupWindow = false;
initializeSidebar(map);
function initializeSidebar(m){
var popup = m.infoWindow;
//when the selection changes update the side panel to display the popup info for the
//currently selected feature.
connect.connect(popup, "onSelectionChange", function(){
displayPopupContent(popup.getSelectedFeature());
});
//when the selection is cleared remove the popup content from the side panel.
connect.connect(popup, "onClearFeatures", function(){
//dom.byId replaces dojo.byId
dom.byId("featureCount").innerHTML = "Click to select feature(s)";
//registry.byId replaces dijit.byId
registry.byId("leftPane").set("content", "");
domUtils.hide(dom.byId("pager"));
});
//When features are associated with the map's info window update the sidebar with the new content.
connect.connect(popup, "onSetFeatures", function(){
displayPopupContent(popup.getSelectedFeature());
dom.byId("featureCount").innerHTML = popup.features.length + " feature(s) selected";
//enable navigation if more than one feature is selected
popup.features.length > 1 ? domUtils.show(dom.byId("pager")) : domUtils.hide(dom.byId("pager"));
});
}
function displayPopupContent(feature){
if(feature){
var content = feature.getContent();
registry.byId("leftPane").set("content", content);
}
}
function selectPrevious(){
map.infoWindow.selectPrevious();
}
function selectNext(){
map.infoWindow.selectNext();
}
var home = new HomeButton({
map: map
}, "HomeButton");
home.startup();
var overview = new OverviewMap({map: map, opacity: 0.5, attachTo: "bottom-left"});
overview.startup();
var measurement = new Measurement ({map: map},"measurementDiv");
measurement.startup();
connect.connect(measurement.area, "onClick", measureButtonClickHandler);
connect.connect(measurement.distance, "onClick", measureButtonClickHandler);
connect.connect(measurement.location, "onClick", measureButtonClickHandler);
function measureButtonClickHandler() {
if (this.checked){
myPopup.clearFeatures();
lyrParcels.disableMouseEvents();
}
else if (this.checked == false) {
lyrParcels.enableMouseEvents();
}
}
var scalebar = new Scalebar({
map: map,
scalebarUnit : "dual",
//attachTo: "botttom-left"
});
/*InfoTemplates*/ //Info Templates don't access domain descripts, popup templates do//
var wwwParFlds = ["ACCOUNT","Name1","Land_Val","Improvemt","Just"]; //"ACCOUNT","PID"
var plyParcels = new InfoTemplate();
plyParcels.setTitle("Parcel Info");
plyParcels.setContent("Account Number: <b>${ACCOUNT}</b><br>Land Value: <b> ${Land_Val:NumberFormat}</b><br>Improvement Value: <b> ${Improvemt:NumberFormat}</b><br>Just Value: <b> ${Just:NumberFormat}</b><br>Market Area:<br>Owner Name: <b> ${Name1}</b>");
//"<br><b> </b><a target='_blank' href=http://www.sc-pa.com/search/parcel_detail.asp?propid=${ACCOUNT}>View Property Detail</a>");
/*InfoTemplates*/
//STYLE PARCELS
var renderer = new SimpleRenderer(
new SimpleFillSymbol(SimpleFillSymbol.STYLE_SOLID,
new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID,
new Color([255,0,0]), 2),new Color([255,255,0,0.1])
));
var lyrParcels = new FeatureLayer("https://ags2.scgov.net/arcgis/rest/services/ScpaInternal/AppraiserWM/MapServer/0", {
mode : FeatureLayer.MODE_ONDEMAND,
opacity : 0.9,
infoTemplate : plyParcels,
maxAllowableOffset: calcOffset(),
outFields : wwwParFlds
});
lyrParcels.setMinScale(2256.994353);
lyrParcels.setRenderer(renderer);
var lyrBuildClass = new FeatureLayer("https://ags2.scgov.net/arcgis/rest/services/ScpaInternal/scpaAppraiserGIS_WM/MapServer/26", {
mode : FeatureLayer.MODE_ONDEMAND,
visible : false,
opacity : 0.8,
maxAllowableOffset: calcOffset(),
});
// lyrParcels.setVisibility(true);
/*calc feature layer offsets*/
on(map, 'zoom-end', function() {
lyrParcels.maxOffset = calcOffset();
lyrParcels.setMaxAllowableOffset(lyrParcels.maxOffset);
});
function calcOffset() {
return (map.extent.getWidth() / map.width);
}
/*add the layers!*/
map.addLayers([lyrParcels,lyrBuildClass]);
/*find by pid*/
registry.byId("search").on("click", doFind);
findTask = new FindTask("https://ags2.scgov.net/arcgis/rest/services/ScpaInternal/AppraiserWM/MapServer/");
function doFind() {
//Set the search text to the value in the box
findParams.searchText = dom.byId("searchText").value;
findTask.execute(findParams, showResults);
}
function showResults(results) {
//This function works with an array of FindResult that the task returns
map.graphics.clear();
var symbol = new SimpleFillSymbol(
SimpleFillSymbol.STYLE_SOLID,
new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID, new Color([98, 194, 204]), 2),
new Color([98, 194, 204, 0.5])
);
//create array of attributes
var items = arrayUtils.map(results, function (result) {
var graphic = result.feature;
graphic.setSymbol(symbol);
map.graphics.add(graphic);
return result.feature.attributes;
});
map.setExtent(graphicsUtils.graphicsExtent(map.graphics.graphics),true);
}
/*Find by PID*/
/*GeoCoder*/
var locatorUrl = "https://ags2.scgov.net/arcgis/rest/services/CompositeLocator/GeocodeServer";
var scgGeocoder = [{
url: locatorUrl,
name: "CompositeLocator",
singleLineFieldName: "SingleLine",
placeholder: "Find an Address"
}];
var geocoder = new Geocoder({
map: map,
autoComplete: true,
autoNavigate: false,
arcgisGeocoder: false,
geocoders: scgGeocoder,
},dom.byId("divSearch")); //dom.byId: if not present, will not clear text from text box, or selection graphics
geocoder.startup();
geocoder.on("select", showLocation);
geocoder.on("clear", removeInfoGraphics);
/*GeoCoder*/
function showLocation(evt) {
map.graphics.clear();
var point = evt.result.feature.geometry;
var ptSymbol = new SimpleMarkerSymbol(SimpleMarkerSymbol.STYLE_SQUARE, 10,
new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID,
new Color([255,0,0]), 1),
new Color([0,255,0,0.25]));
var graphicPoint = new Graphic(point, ptSymbol);
map.graphics.add(graphicPoint);
var queryParcels = new Query;
queryParcels.geometry = evt.result.feature.geometry;
var parcelsQuery = lyrParcels.selectFeatures(queryParcels,FeatureLayer.SELECTION_NEW); //deferred evacQuery
map.infoWindow.setFeatures([parcelsQuery]); //map.infoWindow.setContent(evt.result.name);
map.infoWindow.show(evt.result.feature.geometry);
// Center and zoom the map on the result
if (point !== undefined) {
map.centerAndZoom(point, 13); //7 for sph
}
// lyrFranZones.on("selection-complete", returnNull); // call getDomainVals to get the domain values from the attribute fields for data grid or an infoTemplate
}
function returnNull() {
var retVal = null;
}
/* legend */
map.on("layers-add-result", function(results) { // sets up an array to store layer index positions and returns the layer legend values and layer title name
var toc = TOC({
map: map,
layerInfos: [{layer: lyrParcels, title: "Parcels"},{layer:lyrBuildClass, title: "Building Class", slider: "true", collapsed: "true"}]
}, "tocDiv");
toc.startup();
});
/* legend*/
/* CleanUp*/
function removeInfoGraphics() {
map.infoWindow.hide();
map.graphics.clear();
//var clearStore = new ItemFileReadStore({data: {identifier: "", items: []}});
//gridEvac.setStore(clearStore); //clears the grid, kudos Michael!
};
/* CleanUp*/
}); //brace for on ready function
}); // brace for require and Aliasees function