OpenLayers Style Layerswitcher only Baselayers
HTML
<script src="http://dev.openlayers.org/releases/OpenLayers-2.13.1/OpenLayers.js"></script>
Example for a userdefined Layerswitcher in OpenLayers (only Baselayer shown)
<div id="map"></div>
CSS
#map
{
width: 700px;
height: 350px;
border: 1px solid black;
}
div.olControlLayerSwitcher, div.layersDiv {
width: 300px !important;
}
.olControlLayerSwitcher
{
margin-top: 10px !important;
width: 200px !important;
}
.olControlLayerSwitcher .layersDiv {
background-color: rgba(34, 34, 34, 0.5) !important;
padding: 5px 10px;
border-radius: 15px 0 0 15px !important;
}
JavaScript
// optional: set ImagePath to hosted example or own folder with user defined images
OpenLayers.ImgPath = "http://js.mapbox.com/theme/dark/";
var map = new OpenLayers.Map("map");
map.addLayer(new OpenLayers.Layer.OSM());
map.addLayer(
new OpenLayers.Layer.OSM("OpenCycleMap",
["http://a.tile.opencyclemap.org/cycle/${z}/${x}/${y}.png",
"http://b.tile.opencyclemap.org/cycle/${z}/${x}/${y}.png",
"http://c.tile.opencyclemap.org/cycle/${z}/${x}/${y}.png"])
);
map.zoomToMaxExtent();
var custom_layerswitcher= new OpenLayers.Control.LayerSwitcher();
map.addControl(custom_layerswitcher);
// Vectorlayer to get the Overlay-Label in the Layerswitcher
var points = [
new OpenLayers.Geometry.Point(0, 0)
];
var points2 = [
new OpenLayers.Geometry.Point(0, 0)
];
// create some attributes for the feature
var attributes = {name: "my name", bar: "foo"};
var feature = new OpenLayers.Feature.Vector(points[0], attributes);
var layer = new OpenLayers.Layer.Vector("Test");
layer.addFeatures([feature]);
map.addLayer(layer);