topic Widgets are Confusing. Please Enlighten. in ArcGIS JavaScript Maps SDK Questions

Widgets are Confusing. Please Enlighten.

RyanStrain — Thu, 16 Jun 2011 21:23:47 GMT

I'm having an issue with the legend widget updating. I have an application that is a floorplan for the courthouse I work in. The user clicks a select box and chooses the Basement floor and the legend is populated correctly. Then if the user clicks the first floor, the legend widget doesn't update with this code and still contains the information from the Basement floor. What is wrong with this code? How do I disconnect the listener from one "If" statement, and listen instead to the other "If" statement? I've tried dojo.disconnect. I've tried to destroy the widget and re-create it. Plus other things to no avail. Thanks

function floorSearch() {
  
    if (searchEngine == 1 && mechBox.checked == false) {
        map.removeAllLayers();
        if (map.graphics != null) {map.graphics.clear();}
        if (floorclickCounter == 1) { dojo.disconnect(floorClick); }
        map.infoWindow.resize(300, 160);
        
        basementService = new esri.layers.ArcGISDynamicMapServiceLayer("http://gisv/ArcGIS/rest/services/CourtHouseFloorPlan/Basement/MapServer", {
            id: "basementService"
        });
        map.addLayer(basementService);

        //define a popup template 
        var popupTemplate = new esri.dijit.PopupTemplate({
            title: "{Room_Name}",
            fieldInfos: [
          { fieldName: "Room_Name", visible: true, label: "Room Name" },
          { fieldName: "Room_Num", visible: true, label: "Room Number" }
          ],
            showAttachments: true
        }); 
        
        floorLayer = new esri.layers.FeatureLayer("http://gisv/ArcGIS/rest/services/CourtHouseFloorPlan/Basement/MapServer/0", {
            id: "basement",
            infoTemplate: popupTemplate,
            opacity: .2,
            mode: esri.layers.FeatureLayer.MODE_SELECTION,
            outFields: ["Room_Name", "Room_Num", "Plan_Num"]
        });

        floorClick = dojo.connect(floorLayer, "onClick", function (evt) {
            map.infoWindow.setFeatures([evt.graphic]);
            map.infoWindow.show(evt.mapPoint);
            floorclickCounter = 1; 
         }); 
                       
 legendLayers.push({ layer: floorLayer, title: 'BASEMENT' });
        legendConnect = dojo.connect(map, 'onLayersAddResult', function (results) {
            legend = new esri.dijit.Legend({
                map: map,
                layerInfos: legendLayers
            }, "legendDiv");
            legend.startup();
        });

        var selectionSymbol = new esri.symbol.SimpleFillSymbol(esri.symbol.SimpleFillSymbol.STYLE_SOLID, new esri.symbol.SimpleLineSymbol("solid", new dojo.Color("red"), 5), new dojo.Color([255, 0, 0, 1.0]));
        floorLayer.setSelectionSymbol(selectionSymbol);

        map.extent = new esri.geometry.Extent({ xmin: -12935175, ymin: 5405420, xmax: -12935006, ymax: 5405390, spatialReference: { wkid: 102113} }); 
        map.addLayers([floorLayer]);

        var resizeTimer;
        dojo.connect(map, 'onLoad', function (theMap) {
            dojo.connect(dijit.byId('map'), 'resize', function () {  //resize the map if the div is resized
                clearTimeout(resizeTimer);
                resizeTimer = setTimeout(function () {
                    map.resize();
                    map.reposition();
                }, 500);
            });
        });
                      
    }

 if (searchEngine == 2 && mechBox.checked == false) {
        map.removeAllLayers();
        if (map.graphics != null) {map.graphics.clear();}
        if (floorclickCounter == 1) { dojo.disconnect(floorClick); }
        map.infoWindow.resize(300, 160);
        
        firstService = new esri.layers.ArcGISDynamicMapServiceLayer("http://gisv/ArcGIS/rest/services/CourtHouseFloorPlan/First/MapServer", {
            id: "firstService"
        });
        map.addLayer(firstService);

        //define a popup template 
        var popupTemplate = new esri.dijit.PopupTemplate({
            title: "{Room_Name}",
            fieldInfos: [
          { fieldName: "Room_Name", visible: true, label: "Room Name" },
          { fieldName: "Room_Num", visible: true, label: "Room Number" }
          ],
            showAttachments: true
        }); 
        
        floorLayer = new esri.layers.FeatureLayer("http://gisv/ArcGIS/rest/services/CourtHouseFloorPlan/First/MapServer/0", {
            id: "first",
            infoTemplate: popupTemplate,
            opacity: .2,
            mode: esri.layers.FeatureLayer.MODE_SELECTION,
            outFields: ["Room_Name", "Room_Num", "Plan_Num"]
        });

        floorClick = dojo.connect(floorLayer, "onClick", function (evt) {
            map.infoWindow.setFeatures([evt.graphic]);
            map.infoWindow.show(evt.mapPoint);
            floorclickCounter = 1;
         }); 
                       
 legendLayers.push({ layer: floorLayer, title: 'FIRST FLOOR' });
        legendConnect = dojo.connect(map, 'onLayersAddResult', function (results) {
            legend = new esri.dijit.Legend({
                map: map,
                layerInfos: legendLayers
            }, "legendDiv");
            legend.startup();
        });
        
 var selectionSymbol = new esri.symbol.SimpleFillSymbol(esri.symbol.SimpleFillSymbol.STYLE_SOLID, new esri.symbol.SimpleLineSymbol("solid", new dojo.Color("red"), 5), new dojo.Color([255, 0, 0, 1.0]));
        floorLayer.setSelectionSymbol(selectionSymbol);

        map.extent = new esri.geometry.Extent({ xmin: -12935175, ymin: 5405300, xmax: -12935006, ymax: 5405440, spatialReference: { wkid: 102113} }); 
        map.addLayers([floorLayer]);

        var resizeTimer;
        dojo.connect(map, 'onLoad', function (theMap) {
            dojo.connect(dijit.byId('map'), 'resize', function () {  //resize the map if the div is resized
                clearTimeout(resizeTimer);
                resizeTimer = setTimeout(function () {
                    map.resize();
                    map.reposition();
                }, 500);
            });
        });
                      
    }

}

Re: Widgets are Confusing. Please Enlighten.

BrettLord-Castillo — Sat, 11 Dec 2021 06:32:08 GMT

You need some major refactoring in here, but your problem seems to be that you keep pushing layers into legendLayers and never emptying it out from what I can see.
So...

//Try changing this line
 legendLayers.push({ layer: floorLayer, title: 'BASEMENT' });
//To this
 legendLayers = {layer: floorLayer, title: 'BASEMENT' };
//And this line
 legendLayers.push({ layer: floorLayer, title: 'FIRST FLOOR' });
//To this 
 legendLayers = {layer: floorLayer, title: 'FIRST FLOOR' };

Re: Widgets are Confusing. Please Enlighten.

RyanStrain — Sat, 11 Dec 2021 06:32:11 GMT

Thanks for responding Brett,

That didn't do the trick though.

legendLayers = { layer: floorLayer, title: 'BASEMENT' };
        legendConnect = dojo.connect(map, 'onLayersAddResult', function (results) {
            legend = new esri.dijit.Legend({
                map: map,
                layerInfos: legendLayers
            }, "legendDiv");
            legend.startup();
        });

results in no legend. I also tried pushing the legendlayers in the first if statement which populates the legend correctly

legendLayers.push({ layer: floorLayer, title: 'BASEMENT' });
        legendConnect = dojo.connect(map, 'onLayersAddResult', function (results) {
            legend = new esri.dijit.Legend({
                map: map,
                layerInfos: legendLayers
            }, "legendDiv");
            legend.startup();
        });

And then using

legendLayers = {layer: floorLayer, title: 'FIRST FLOOR' };.

to hopefully update the legend. But no dice. I'm using the legend sample from the ESRI samples at
http://help.arcgis.com/en/webapi/javascript/arcgis/demos/widget/widget_legendvisible.html

Any other ideas would be most appreciated! Thanks.

Re: Widgets are Confusing. Please Enlighten.

BrettLord-Castillo — Sat, 11 Dec 2021 06:32:13 GMT

Whoops, I left out the array.
Try this:

//Try changing this line
 legendLayers.push({ layer: floorLayer, title: 'BASEMENT' });
//To this
 legendLayers = [{layer: floorLayer, title: 'BASEMENT' }];
//And this line
 legendLayers.push({ layer: floorLayer, title: 'FIRST FLOOR' });
//To this 
 legendLayers = [{layer: floorLayer, title: 'FIRST FLOOR' }];

Re: Widgets are Confusing. Please Enlighten.

RyanStrain — Fri, 17 Jun 2011 17:12:00 GMT

No dice. It has no effect on the already constructed legend. The values don't update. I tried using legend.refresh([{ layer: floorLayer, title: 'FIRST FLOOR'}]); after the legend was created and populated in the previous "if" statement, and that throws errors.
Maybe I'm going about it all wrong. I've got a courthouse floorplan with 7 floors. I use a select box for the user to select which floor they want to look at. When selected, each floor loads a ArcGISDynamicServiceLayer and a FeatureLayer. Upon the first selection the legend is created without errors. Then if the user selects a new floor, map.removeAllLayers(); is called, then the new ArcGISDynamicServiceLayer and FeatureLayer is loaded but the legend widget won't update even with new legendLayers value passed into the array. Maybe I need to think of using a new concept? Or other ideas with this concept?

Thanks

Re: Widgets are Confusing. Please Enlighten.

BrettLord-Castillo — Fri, 17 Jun 2011 17:17:57 GMT

I think I might see the problem.
Create the legend only once.
When you change layers, call only legend.refresh([{ layer: floorLayer, title: 'FIRST FLOOR'}]);
But, you must call legend.refresh() -after- the layer is added to the map. It looks like you are trying to construct the legend before the layer is added to the map.

Re: Widgets are Confusing. Please Enlighten.

RyanStrain — Sat, 11 Dec 2021 06:32:16 GMT

Thanks for your efforts Brett,

The only solution I found was to use my ArcGISDynamicMapServiceLayer instead of the feature layer for each floor. Using the feature layers threw errors.

So I constructed the legend -

dojo.connect(map, 'onLayersAddResult', function (results) {
        legend = new esri.dijit.Legend({
            map: map,
            layerInfos: legendLayers
        }, "legendDiv");
        legend.startup();
    });

Then within the "if" statement for each floor I shift out the previous 1st element of the array, and push the new element in. This'll do.

legendLayers.shift({ layer: Service });
        legendLayers.push({ layer: Service, title: 'BASEMENT' });