1

I have two set of layers like 'Public' and 'Private'.Each set has 3 layers. My requirement is, Layer switcher has to show the first set of layers with check-box under the label name 'Public' and second set of layers with check-box under the label name 'Private'. [Not with Option button]. I have tried as shown below:

In Design:

<style>
.olControlLayerSwitcher
    {
        position: absolute;
        right: 10px !important;
        width: 20em !important;            
        font-family: sans-serif;
        font-weight: bold;
        margin-top: 3px;
        margin-left: 3px;
        margin-bottom: 3px;
        font-size: smaller;
        color: #FFFFFF !important;
        background-color: transparent;
        z-index: 10000;
    }
    .olControlLayerSwitcher .layersDiv
    {
        padding-top: 5px;
        padding-left: 10px;
        padding-bottom: 5px;
        padding-right: 10px;
        background-color: #1243CE !important;
        -webkit-border-radius: 5px !important;
        -moz-border-radius: 5px !important;
        -o-border-radius: 5px !important;
        -ms-border-radius: 5px !important;
        -khtml-border-radius: 5px !important;
        border-radius: 5px !important;
        -khtml-opacity: .8;
        -moz-opacity: .8;
        -ms-filter: ”alpha(opacity=8)”;
        filter: alpha(opacity=8);
        filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0.8);
        opacity: .8;
    }
   .olControlLayerSwitcher .layersDiv .baseLbl
    {
        display: none;
    }
    .olControlLayerSwitcher .layersDiv .baseLayersDiv
    {
        display: none;
    }
   </style>

   <body id="mapBody" onload="init();"> 
      <div id="layerswitcher" class="olControlLayerSwitcher">
          <img id="imgSwitcherClose" alt="" src="Images/Minimize_On.png" />
      </div>
   </body>

In Javascript:

 //Layer Switcher
var layerSwitch = new OpenLayers.Control.LayerSwitcher({
    div: OpenLayers.Util.getElement('layerswitcher')
});
osMap.addControl(layerSwitch)

layerSwitch = osMap.getControlsByClass("OpenLayers.Control.LayerSwitcher")[0];
layerSwitch.dataLbl.innerText = "Public"

enter image description here

In that above list I need to add 'Private' label and layers. Please suggest me to implement this.Thanks in advance.

3
  • Now I have added more information regarding this..kindly check it
    – venkat
    Oct 23, 2013 at 4:04
  • Are you sure that is all of the openlayers code?
    – BradHards
    Oct 23, 2013 at 4:13
  • yes all are openlayers code. There is no additional js..etc
    – venkat
    Oct 23, 2013 at 4:48

1 Answer 1

2

OpenLayers' LayerSwitcher Control doesn't allow to do what you want out of the box. It provides basic layerswitcher functionality and style, but for any custom or advanced use, you have to build your own layer switcher. It's not really hard. Here's a quick example:

Note: Remove OpenLayers LayerSwitcher from your app and add the following function to control the layer visibility:

function changeLayerStatus(layerName, visibility) {
    var layers = map.getLayersByName(layerName);
    var layer = layers[0];

    if(!layer) {
        return;
    }

    layer.setVisibility(visibility);
}

In the HTML, manually add your checkbox and labels. Note that this could be automated, but that's another question. The key here is the call to changeLayerStatus(layerName, visibility) on the onclick of the checkbox.

 <div id="layerswitcher" class="olControlLayerSwitcher">
   <div id="allLayers" class="layersDiv">
     <div class="dataLbl" style="">Public</div>
     <div class="dataLayersDiv">
       <input name="layer1" type="checkbox" value="layer1" class="olButton" onclick="changeLayerStatus('OSIM_Point', this.checked)">OSIM_Point<br>
       <input name="layer2" type="checkbox" value="layer2" class="olButton" onclick="changeLayerStatus('OSIM_BoundaryLines', this.checked)">OSIM_BoundaryLines<br>
       <input name="layer3" type="checkbox" value="layer3" class="olButton" onclick="changeLayerStatus('OSIM_Boundary', this.checked)">OSIM_Boundary<br>
     </div>
     <div class="dataLbl" style="">Private</div>
     <div class="dataLayersDiv">
       <input name="layer1" type="checkbox" value="layer1" class="olButton" onclick="changeLayerStatus('OSIM_Point_private_name', this.checked)">OSIM_Point<br>
       <input name="layer2" type="checkbox" value="layer2" class="olButton" onclick="changeLayerStatus('OSIM_BoundaryLines_private_name', this.checked)">OSIM_BoundaryLines<br>
       <input name="layer3" type="checkbox" value="layer3" class="olButton" onclick="changeLayerStatus('OSIM_Boundary_private_name', this.checked)">OSIM_Boundary<br>
     </div>
   </div>
 </div>
0

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.