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.
