1

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
2
  • it would be a lot easier to comment/debug if you were able to provide a link to a self-contained reproducible test case using something like jsfiddle or jsbin. Commented Aug 28, 2014 at 20:32
  • I really appreciate your comment since this problem was thrust upon me and I pointed out to the creator of this script that it needed to broken up into modules so it can be tested. I have since shown them a better way to do things. Commented Sep 11, 2014 at 3:38

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.