0

We work with a combination of Dojo version 1.10 and ArcGIS JavaScript API 3.11.

We were asked if it is possible to copy the TOC Layerlist into a separate Dojo FloatingPane by right-clicking into the map. No Problem so far. Now I should insert two buttons which should

a. disable all active Layers

and

b. open and close all Parentlayers with active sub-layers.

This works as expected.

The problem occurs, when I right-click on the map and copy the content of the TitlePaneLayerlist into the FloatingPane. The buttons were copied, look like buttons but it seems that they weren't buttons any more.

Here's the code that copied the content:

 registry.byId("LayerListTP").set("content",registry.byId("LayerTitlePane").get("content"));
 registry.byId("LayerTitlePane").destroyDescendants();

LayerListTP is the new FloatingPane, LayerTitlePane the Original location of the Layerlist. Because there can't be double Id's i destroy the content of the LayerTitlePane afterwards.

Copying the content back to the original Titlepane works identical, the Buttons are messed up.

I can't figure out where the Problem with the Buttons come from ane why they weren't copied right.

Here are all necessary Codesnippets.

Function to copy LayerList

function createContextMenuLayer(){

 require([
    "dijit/Menu",
    "dijit/MenuItem",
    "dijit/registry",
    "dojox/layout/FloatingPane",
    "dojo/_base/window",
    "dojo/_base/array",
    "dojo/dom", 
    "dojo/dom-attr",
    "dojo/dom-construct",
    "dojo/dom-style",
    "dojo/on",
    "dojo/query",
    "dojo/sniff",
    "esri/map",
    "esri/geometry/Point"
  ], function(
    Menu,
    MenuItem,
    registry,
    FloatingPane,
    win,
    array,
    dom,
    domAttr,
    domConstruct,
    domStyle,
    on,
    query,
    sniff,
    Map,
    Point
  ) {

    var ctxMenuForGraphics, ctxMenuForMap;
    var currentLocation;
    var ShowLayerList;
    var LayerNotActive=[];
    var RememberLayerNotActiv=[];


    on(map,"MouseUp",function(evt){

        if(evt.which === 3){
             var LayerListContent = '<div data-dojo-type="dijit/layout/ContentPane" class="LayerListFP" id="LayerListTP"></div>';

            if(!registry.byId("LayerListFloatingPaneId")){
                LayerListFloatingPane = new FloatingPane({
                    id:"LayerListFloatingPaneId",
                    closeable:true,
                    dockable:false,
                    title:"Karteninhalt",
                    content:LayerListContent,
                    style:"width:250px;height:250px;position:absolute;top:0px;left:0px;"
                },domConstruct.create('div', null, map.container));

                SaveLayerTP = [];
                LayerNotActive=[];

                var inputs = query(".dijitCheckBoxGrouplayer"), input;
                var inputs2 = query(".dijitCheckBoxNonGrouplayer"), input2;
                var GroupedAndNonGroupedLayers = inputs.concat(inputs2);

            for (var i=0, il=GroupedAndNonGroupedLayers.length; i<il; i++) {
               if (GroupedAndNonGroupedLayers[i].checked) {         
                    SaveLayerTP.push(GroupedAndNonGroupedLayers[i].id);
               }
               else{
                LayerNotActive.push(GroupedAndNonGroupedLayers[i].id);
               }
            }

            //Layerliste im Seitenmenu ausblenden und im Floatingpane anzeigen 
                registry.byId("LayerListTP").set("content",registry.byId("LayerTitlePane").get("content"));
                registry.byId("LayerTitlePane").destroyDescendants();

                    var nav = dom.byId("TOCPane");

                        on(registry.byId("LayerListFloatingPaneId"),"click",function(){
                                    setTimeout(function(){
                                            if(sniff("ie")){
                                                      if(nav.scrollHeight > nav.clientHeight ||  nav.scrollHeight > nav.clientHeight && registry.byId("LegendTitlePane").open == true){
                                                      domStyle.set(dom.byId("sliderTocIn"),setIconToRight);
                                                      }
                                                      else{
                                                        domStyle.set(dom.byId("sliderTocIn"),setIconBack);
                                                      }
                                            }
                                    },180);
                            });

                    LayerListFloatingPane.startup();        
                    LayerListFloatingPane.show();
                    //Laden der aktivierten Layer
                if(SaveLayerTP.length != 0){
                    array.forEach(SaveLayerTP,function(LayerNr){
                        domAttr.set(dom.byId(LayerNr),"checked",true);  
                    });

                    Layersvisible = SaveLayerTP;
                }                   


                if(LayerNotActive != 0){
                    array.forEach(LayerNotActive,function(LayerNr){
                        domAttr.set(dom.byId(LayerNr),"checked",false); 
                    });                     
                }

                dynamicMapServiceLayer.setVisibleLayers(Layersvisible);


                //Was passieren soll wenn der FloatingPane geschlossen wird
                LayerListFloatingPane.close = function (){  
                //eingeblendete Layer speichern
                RememberLayerklicked = [];
                RememberLayerNotActiv = [];

                var inputs3 = query(".dijitCheckBoxGrouplayer"), input;
                var inputs4 = query(".dijitCheckBoxNonGrouplayer"), input2;
                var GroupedAndNonGroupedLayers2 = inputs3.concat(inputs4);

                for (var i=0, il=GroupedAndNonGroupedLayers2.length; i<il; i++) {
                  if (GroupedAndNonGroupedLayers2[i].checked) {         
                    RememberLayerklicked.push(GroupedAndNonGroupedLayers2[i].id);
                  }
                   else{
                    RememberLayerNotActiv.push(GroupedAndNonGroupedLayers[i].id);
                    }
                }

            //Layerliste wieder im Seitenmenu einblenden
            registry.byId("LayerTitlePane").set("content",registry.byId("LayerListTP").get("content"));

        var nav = dom.byId("TOCPane");  
                        if(sniff("ie")){
                                if(nav.scrollHeight > nav.clientHeight || nav.scrollHeight > nav.clientHeight && registry.byId("LegendTitlePane").open == true){
                                      domStyle.set(dom.byId("sliderTocIn"),setIconToRight);
                                }
                                else{
                                    domStyle.set(dom.byId("sliderTocIn"),setIconBack);
                               }
                        }

            //Inhalt des FloatingPanes zerstören
            registry.byId("LayerListFloatingPaneId").destroyRecursive();

            //Die aktuell aktivierten Layer anschalten
            if(RememberLayerklicked.length != 0){
                array.forEach(RememberLayerklicked,function(LayerNr){
                    domAttr.set(dom.byId(LayerNr),"checked",true);  
                });

            Layersvisible = RememberLayerklicked;
            }

            if(RememberLayerNotActiv.length != 0){
                array.forEach(RememberLayerNotActiv,function(LayerNr){
                    domAttr.set(dom.byId(LayerNr),"checked",false); 
                });
            }


        dynamicMapServiceLayer.setVisibleLayers(Layersvisible);
            _isFloatingPaneVisible = false;                     
            };  
                }
            else {
                    LayerListFloatingPane.startup();        
                    LayerListFloatingPane.show();
                    domStyle.set("LayerListFloatingPaneId",{
                                    position:"absolute",
                                    top:evt.screenPoint.y+"px",
                                    left:evt.screenPoint.x+"px"
                                    });
            }
        }
    });

});
}

function to build the LayerList

 function buildLayerList(dynamicMapServiceLayer,ParentLayerVisArray) {
  require(["dojo/on","dojo/dom","dojo/dom-attr","dojo/_base/array","dojo/request/script","dijit/registry","dijit/form/Button"],function(on,dom,domAttr,array,script,registry,Button){
    var infos = dynamicMapServiceLayer.layerInfos; 
    var info;
    var items = [];
    var subLayerLength = 0;
    var preDivName = "DivGroupLayer";
    var LayerName = "";
    var GroupLayerInfoId = "";
    var SetGroupLayerChecked = [];
    var CheckedGroupLayers = [];
    //Dieses Array nimmt die LayerId des Parentlayers auf, dessen Name im Array ParentLayerVisArray steht
    var ParentLayerVisIDs = [];
    //Dieses Array nimmt die SubLayerIDs auf
    var SubLayerVisIDs = [];

    //Alle Layer auf nicht sichtbar setzen
    if (ParentLayerVisArray[0] != "ALL" || visLayersNumbersFromURL.length > 0) {
        array.forEach(infos, function(layerVis){
            layerVis.defaultVisibility = false;
        });
    }

    //Beginn | Serviceinformationen auswerten 
    for (var i = 0, il = infos.length; i < il; i++) {
        info = infos[i];
        LayerName = info.name;      
        script.get(dynamicMapServiceLayer.url + "/" + info.id + "?f=json",{
            jsonp:"callback"
        }).then(function(LayerProperties){
            analyseLayerDescription(LayerProperties);}
        );

        //GruppenLayer erzeugen
        if (info.subLayerIds != null && info.parentLayerId == -1) {
        //  alert(info.subLayerIds);
            //+ oder Minus anzeigen je nachdem ob der Gruppenlayer ein- oder ausgeklappt ist
            items[i] = "<img id='OpenImg" + preDivName + info.id + "' class='OpenCloseImage' src='../images/open_sublayer_trans.gif' onclick='javascript:GroupLayerOpen(\"" + preDivName + info.id + "\");' title='" + titleOpenImg1 + LayerName + titleOpenImg2 + "'/>";
            items[i] +=  "<img id='CloseImg" + preDivName + info.id + "' class='CloseImage' src='../images/close_sublayer_trans.gif' onclick='javascript:GroupLayerClose(\"" + preDivName + info.id + "\");' title='" + titleCloseImg1 + LayerName + titleCloseImg2 + "'/>";
            items[i] +=  "<span id='MasterGroupLayerLabelSpan" + info.id + "' class='dijitCheckBoxMasterGrouplayerLabel'>" + LayerName + " </span>";

            items[i] +=  "<div id='" + preDivName + info.id + "' class='GroupLayerDiv'>";
            //Checkbox um alle Layer innerhalb eines Gruppenlayers an- und ausschalten
            items[i] +=  "<input type='checkbox' class='dijitCheckBoxMasterGrouplayer'  ";
            items[i] +=  "id='" + info.id + "' onclick='javascript:updateGroupLayerVisibility(\""+ info.subLayerIds +"\",\""+ info.id +"\");' />";
            items[i] +=  "<label id='LayerLabelSpan"+info.id+"' for='" + info.id + "' class='dijitCheckBoxGrouplayerLabelAllOnOff' >alle Themen an/aus</label><br />";

            subLayerLength = info.subLayerIds.length;
            var z = 0;
            GroupLayerInfoId = info.id;
            var countVisLayer = 0;

            //Sammeln der GruppenlayerID und deren subLayerIds
            GruppenlayerIdContainer.push(preDivName + info.id);
            GruppenSubLayerIds.push(info.subLayerIds);

            //Alle Parentlayer merken
            rememberAllParentLayer.push(info.id);

            //Aufnehmen in die 'sichtbaren' ParentLayer, wenn der Eintrag nicht 'ALL' ist 
            if (ParentLayerVisArray[0] != "ALL" && visLayersNumbersFromURL.length == 0) {
                if (checkIfParentLayerVis(ParentLayerVisArray, LayerName)) {
                    ParentLayerVisIDs.push(info.id);
                    SubLayerVisIDs.push(info.subLayerIds);
                }
            }

            //Layer aus der URL verarbeiten z.B. von "Karte teilen"
            if(visLayersNumbersFromURL.length > 0 ){
                    array.forEach(visLayersNumbersFromURL,function(visLayNum){
                            array.forEach(info.subLayerIds,function(subLayerId){
                                if (subLayerId == visLayNum){
                                    //alert("visLayNum: " + visLayNum);
                                    ParentLayerVisIDs.push(info.id);
                                    SubLayerVisIDs.push(visLayNum);
                                }
                            });
                    });                     
                }

        }
        else {

            //Gruppenlayer mit SubLayer fuellen
            if (info.parentLayerId != -1) {

                //zaehlen der Durchlaeufe
                z = z + 1;

                //alle Unterlayer merken
                rememberAllSubLayer.push(info.id);

                if (info.defaultVisibility) {
                    Layersvisible.push(info.id);
                }
                items[i] = "<input type='checkbox' class='dijitCheckBoxGrouplayer' ";


                if (info.defaultVisibility) {
                    items[i] = items[i] + "checked='checked'";
                    ListLayerItems.push(info.id);

                    //zaehlen der sichtbaren Layer
                    countVisLayer = countVisLayer + 1;

                };

                items[i] = items[i] + "id='" + info.id + "' onclick='updateLayerVisibility();' />" +
                "<label id='LayerLabelSpan"+info.id+"' for='" + info.id + "' class='dijitCheckBoxGrouplayerLabel' >" + LayerName + " </label><br />";

                /*Ob ein GruppenLayer geschlossen werden muss wird erkannt, indem die 
                Anzahl der SubLayers mit der Anzahl der Funktionsdurchlaeufe verglichen wird
                */          
                if(subLayerLength == z){
                    items[i] = items[i]+"</div><br />";
                    //set subLayerLength zero
                    subLayerLength = 0;
                }

                //GruppenLayer auf unchecked setzen, wenn kein SubLayer checked ist (hier nur: sammeln der Info)
                if (countVisLayer > 0){
                    if (!SetGroupLayerChecked[GroupLayerInfoId]) {
                        SetGroupLayerChecked[GroupLayerInfoId] = true;
                        CheckedGroupLayers.push(GroupLayerInfoId);
                    }
                }

            }
            //Layer Ohne Gruppe
            if (info.parentLayerId == -1) {

                items[i]="";    
                items[i] = items[i] + "<input type='checkbox' class='dijitCheckBoxNonGrouplayer' ";     

                if (info.defaultVisibility) {
                    Layersvisible.push(info.id);
                }


                if (info.defaultVisibility) {
                    items[i] = items[i] + "checked='checked'";
                    ListLayerItems.push(info.id);
                };

                //Layer aus der URL verarbeiten z.B. von "Karte teilen"
                if(visLayersNumbersFromURL.length > 0 ){
                    array.forEach(visLayersNumbersFromURL,function(visLayNum){

                                if (info.id == visLayNum){
                                    Layersvisible.push(info.id);
                                    items[i] = items[i] + "checked='checked'";
                                    ListLayerItems.push(info.id);
                                }
                    });                     
                }

                items[i] = items[i] + "id='" + info.id + "' onclick='updateLayerVisibility();' />" +
                "<span id='NonGroupLayer" + info.id + "' class='dijitCheckBoxNonGrouplayer' > " + LayerName + " </span><br />";

            }

        }
     }

     //Zwei Checkboxen anlegen um a.) alle Layer zu aktivieren und b.) alle Menüs, in
    //denen Layer selektiert sind, aufzuklappen
    var ButtonLayerManipulation = "<button id='LayerOff' data-dojo-type='dijit/form/Button' class='ThemenAnAusGrupeAufZu' type='button'>Aktive Themen aus</button>";
    ButtonLayerManipulation += "<button id='MenuAuf' data-dojo-type='dijit/form/Button' class='ThemenAnAusGrupeAufZu' type='button'>Themengruppe mit akt. Themen öffnen</button><br />";

    //Fertige Checkboxen vor der Layerliste einblenden
    registry.byId("LayerTitlePane").set("content",ButtonLayerManipulation + items.join(""));

    //onClick-Funktion um alle aktiven Layer zu deaktivieren
    on(registry.byId("LayerOff"),"click",function(){
        AllLayersOff(ListLayerItems);
    });

    //onClick-Funktion definieren, um alle Menus zu öffnen
    on(registry.byId("MenuAuf"),"click",function(){
        if(ParentLayerAufZu == false){
        OpenAktivMenus(rememberAllParentLayer,rememberAllSubLayer);
        domAttr.set(this,"label","Themengruppe mit akt. Themen schließen");
        ParentLayerAufZu = true;
        }
        else{
        CloseAllGroupLayer(rememberAllParentLayer);
        domAttr.set(this,"label","Themengruppe mit akt. Themen öffnen");
        ParentLayerAufZu = false;
        }
    });

    if(rememberAllParentLayer.length == 0){
        registry.byId("MenuAuf").set("style","display:none");
    }

    //GruppenLayer in denen ein Layer visible ist auf checked setzen        
    dynamicMapServiceLayer.setVisibleLayers(Layersvisible);

    //Legende erzeugen
        makeLegend();
    //dynamicMapServiceLayer.on("update-end",makeLegend());

    //Alle sichtbaren ParentLayer ausklappen
    //alert("SubLayerVis-"+LayerName+": "+SubLayerVisIDs);
    expandParentLayerS(ParentLayerVisIDs,SubLayerVisIDs);
    //initialisieren des Contextmenues --> der Karteninhalt wird beim Rechtsklick angezeigt
    createContextMenuLayer();
}); 
}

I've tried all ways to set up the buttons. Declarative and programmatically but the result stays the same. The buttons won't work. I have done many researches in StackOverflow and other forums but I find nothing that matches my problem.

0

After some further research i find out that it's the best way and maybe the only way to get the Buttons to work is to stuck them into a which was cleared every time the Menu was copied into the Floatingpane & destroys the Buttons and setup them again when the List is build in the FloatingPane with all the code. Same backwards.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.