diff --git a/lib/OpenLayers/Control/LayerSwitcher.js b/lib/OpenLayers/Control/LayerSwitcher.js index 26211c0c80..0b8af84232 100644 --- a/lib/OpenLayers/Control/LayerSwitcher.js +++ b/lib/OpenLayers/Control/LayerSwitcher.js @@ -36,6 +36,19 @@ OpenLayers.Control.LayerSwitcher.prototype = draw: function() { // initialize our internal div OpenLayers.Control.prototype.draw.apply(this); + + this.div.style.position = "absolute"; + this.div.style.top = 50; + this.div.style.right = 100; + this.div.style.fontFamily = "sans-serif"; + this.div.style.color = "white"; + this.div.style.fontWeight = "bold"; + this.div.style.marginTop = "3px"; + this.div.style.marginLeft = "3px"; + this.div.style.marginBottom = "3px"; + this.div.style.fontSize="smaller"; + this.div.style.width = "10em"; + this.map.events.register("addlayer", this, this.redraw); return this.redraw(); }, @@ -49,11 +62,8 @@ OpenLayers.Control.LayerSwitcher.prototype = //clear out previous incarnation of LayerSwitcher tabs this.div.innerHTML = ""; - var ulCoord = new OpenLayers.Pixel(this.map.div.clientWidth - 200, 4); for( var i = 0; i < this.map.layers.length; i++) { - var tab = this.createTab(i, ulCoord); - this.div.appendChild(tab); - ulCoord = ulCoord.add(0, 35); + this.addTab(this.map.layers[i]); } return this.div; }, @@ -62,9 +72,9 @@ OpenLayers.Control.LayerSwitcher.prototype = * @param {event} evt */ singleClick: function(evt) { - var visible = this.map.layers[this.layerindex].getVisibility(); + var visible = this.layer.getVisibility(); OpenLayers.Control.LayerSwitcher.setTabActivation(this, !visible); - this.map.layers[this.layerindex].setVisibility(!visible); + this.layer.setVisibility(!visible); Event.stop(evt); }, @@ -78,35 +88,49 @@ OpenLayers.Control.LayerSwitcher.prototype = /** * @private * - * @param {int} index - * @param {OpenLayers.Pixel} ulCoord - * - * @returns New tab (div) with layer information inside - * @type DOMElement + * @param {OpenLayers.Layer} layer */ - createTab: function(index, ulCoord) { - - var layer = this.map.layers[index]; - - var divID = "LayerSwitcher_" + layer.name + "_Tab"; - var div = OpenLayers.Util.createDiv(divID, - ulCoord, - new OpenLayers.Size(200, 20)); - - div.innerHTML = layer.name; - div.style.padding = "5px"; - - //add references onto the div for use in event handlers - div.layerindex = index; - div.map = this.map; + addTab: function(layer) { - div.ondblclick = this.doubleClick.bindAsEventListener(div); - div.onmousedown = this.singleClick.bindAsEventListener(div); + // Outer DIV - for Rico Corners + // + var backdropLabelOuter = document.createElement('div'); + backdropLabelOuter.id = "LayerSwitcher_" + layer.name + "_Tab"; + backdropLabelOuter.style.marginTop = "4px"; + backdropLabelOuter.style.marginBottom = "4px"; - OpenLayers.Control.LayerSwitcher.setTabActivation(div, + // Inner Label - for Rico Corners + // + var backdropLabel = document.createElement('p'); + backdropLabel.innerHTML = layer.name; + backdropLabel.style.marginTop = "0px"; + backdropLabel.style.marginBottom = "0px"; + backdropLabel.style.paddingLeft = "10px"; + backdropLabel.style.paddingRight = "10px"; + + // add reference to layer onto the div for use in event handlers + backdropLabel.layer = layer; + + // set event handlers + backdropLabel.ondblclick = + this.doubleClick.bindAsEventListener(backdropLabel); + backdropLabel.onmousedown = + this.singleClick.bindAsEventListener(backdropLabel); + + + // add label to div + backdropLabelOuter.appendChild(backdropLabel); + + // add div to main LayerSwitcher Div + this.div.appendChild(backdropLabelOuter); + + Rico.Corner.round(backdropLabelOuter, {corners: "tl bl", + bgColor: "transparent", + color: "white", + blend: false}); + + OpenLayers.Control.LayerSwitcher.setTabActivation(backdropLabel, layer.getVisibility()); - - return div; }, @@ -122,12 +146,9 @@ OpenLayers.Control.LayerSwitcher.prototype = */ OpenLayers.Control.LayerSwitcher.setTabActivation = function(div, activate) { - div.style.backgroundColor = (activate) ? - OpenLayers.Control.LayerSwitcher.ACTIVE_COLOR - : OpenLayers.Control.LayerSwitcher.NONACTIVE_COLOR; + var color = (activate) ? OpenLayers.Control.LayerSwitcher.ACTIVE_COLOR + : OpenLayers.Control.LayerSwitcher.NONACTIVE_COLOR; - div.style.color = (activate) ? - OpenLayers.Control.LayerSwitcher.NONACTIVE_COLOR - : OpenLayers.Control.LayerSwitcher.ACTIVE_COLOR; + Rico.Corner.changeColor(div, color); };