window.onload = init();
function init() {
map = new OpenLayers.Map("map");
var ol_wms = new OpenLayers.Layer.WMS("OpenLayers WMS", "http://vmap0.tiles.osgeo.org/wms/vmap0", {
layers: "basic"
});
map.addLayers([ol_wms]);
//this is a simple button
var simpleBtn = new OpenLayers.Control.Button({
displayClass: "simpleBtn",
id: "simpleBtn",
type: OpenLayers.Control.TYPE_BUTTON,
title: "Click me for awsome msg!",
trigger: function () {
var msg = "Hello, I'm pressed!";
console.log(msg);
map.zoomToMaxExtent();
}
});
//this is a toggle button
var simpleToggleBtn = new OpenLayers.Control.Button({
displayClass: "simpleToggleBtn",
id: "simpleToggleBtn",
type: OpenLayers.Control.TYPE_TOGGLE,
title: "Toggle awesomeness on/off",
eventListeners: {
'activate': function () {
console.log("Awesomeness is on! :D");
},
'deactivate': function () {
console.log("Awesomeness is off. :(");
},
}
});
//this is a first tool
var simpleTool1Btn = new OpenLayers.Control.Button({
displayClass: "simpleTool1Btn",
id: "simpleTool1Btn",
type: OpenLayers.Control.TYPE_TOOL,
title: "Tool for owning.",
eventListeners: {
'activate': function () {
console.log("We are now owning. :D");
},
'deactivate': function () {
console.log("We are owning no longer. :'(");
},
}
});
//this is a second tool
var simpleTool2Btn = new OpenLayers.Control.Button({
displayClass: "simpleTool2Btn",
id: "simpleTool2Btn",
type: OpenLayers.Control.TYPE_TOOL,
title: "Tool for ruling.",
eventListeners: {
'activate': function () {
console.log("Our ruling is on! :D");
},
'deactivate': function () {
console.log("We rule no more. :'(");
},
}
});
var panelButtons = [simpleBtn, simpleToggleBtn, simpleTool1Btn, simpleTool2Btn];
panel = new OpenLayers.Control.Panel({
displayClass: "controlPanel",
defaultControl: panelButtons[3],
//div : OpenLayers.Util.getElement('panelDiv'),
});
panel.addControls(panelButtons);
//adding toolbar control to the map
map.addControl(panel);
//map.zoomToMaxExtent();
map.setCenter([0, 0], 2, true);
}
<div id="map"></div>
<script src="http://openlayers.org/dev/OpenLayers.js"></script>
#map {
width: 800px;
height: 480px;
}
.controlPanel {
opacity: 0.6;
position: absolute;
z-index: 9999;
margin-left: 0px;
margin-top: 67px;
margin-right: 0px;
margin-bottom: 0px;
font-family: inherit;
background-color: rgba(95, 101, 103, 0.3);
border: 1px solid darkgray;
border-radius: 0px 10px 10px 0px;
box-shadow: 5px 5px 5px rgba(32, 64, 128, 0.5);
float: left;
width: 74px;
height: 300px;
transition: background-color 1s;
transition: opacity 1s;
}
.controlPanel:hover {
background-color: rgba(95, 101, 103, , 0.8);
opacity: 1;
}
.simpleBtnItemInactive {
background: url('http://s1.postimg.org/pm67s7ngv/toolbar_Atlas.png') no-repeat;
background-position: -1px -1px;
border: 1px solid black;
border-radius: 5px;
margin-left: 4px;
margin-top: 4px;
width: 64px;
height: 64px;
cursor: pointer;
transition: border 1s;
}
.simpleBtnItemInactive:active {
background-position: -1px -66px;
border: 1px solid white;
}
.simpleBtnItemInactive:hover {
background-position: -1px -66px;
border: 1px solid white;
}
.simpleBtnItemActive {
background: url('http://s1.postimg.org/pm67s7ngv/toolbar_Atlas.png') no-repeat;
background-position: -1px -66px;
border: 1px solid white;
border-radius: 5px;
margin-left: 4px;
margin-top: 4px;
width: 64px;
height: 64px;
cursor: pointer;
}
.simpleToggleBtnItemInactive {
background: url('http://s1.postimg.org/pm67s7ngv/toolbar_Atlas.png') no-repeat;
background-position: -66px -1px;
border: 1px solid black;
border-radius: 5px;
margin-left: 4px;
margin-top: 4px;
width: 64px;
height: 64px;
cursor: pointer;
transition: border 1s;
}
.simpleToggleBtnItemInactive:active {
background-position: -66px -66px;
border: 1px solid white;
}
.simpleToggleBtnItemInactive:hover {
background-position: -66px -66px;
border: 1px solid white;
}
.simpleToggleBtnItemActive {
background: url('http://s1.postimg.org/pm67s7ngv/toolbar_Atlas.png') no-repeat;
background-position: -66px -66px;
border: 1px solid white;
border-radius: 5px;
margin-left: 4px;
margin-top: 4px;
width: 64px;
height: 64px;
cursor: pointer;
}
.simpleTool1BtnItemInactive {
background: url('http://s1.postimg.org/pm67s7ngv/toolbar_Atlas.png') no-repeat;
background-position: -131px -1px;
border: 1px solid black;
border-radius: 5px;
margin-left: 4px;
margin-top: 4px;
width: 64px;
height: 64px;
cursor: pointer;
transition: border 1s;
}
.simpleTool1BtnItemInactive:active {
background-position: -131px -66px;
border: 1px solid white;
}
.simpleTool1BtnItemInactive:hover {
background-position: -131px -66px;
border: 1px solid white;
}
.simpleTool1BtnItemActive {
background: url('http://s1.postimg.org/pm67s7ngv/toolbar_Atlas.png') no-repeat;
background-position: -131px -66px;
border: 1px solid white;
border-radius: 5px;
margin-left: 4px;
margin-top: 4px;
width: 64px;
height: 64px;
cursor: pointer;
}
.simpleTool2BtnItemInactive {
background: url('http://s1.postimg.org/pm67s7ngv/toolbar_Atlas.png') no-repeat;
background-position: -196px -1px;
border: 1px solid black;
border-radius: 5px;
margin-left: 4px;
margin-top: 4px;
width: 64px;
height: 64px;
cursor: pointer;
transition: border 1s;
}
.simpleTool2BtnItemInactive:active {
background-position: -196px -66px;
border: 1px solid white;
}
.simpleTool2BtnItemInactive:hover {
background-position: -196px -66px;
border: 1px solid white;
}
.simpleTool2BtnItemActive {
background: url('http://s1.postimg.org/pm67s7ngv/toolbar_Atlas.png') no-repeat;
background-position: -196px -66px;
border: 1px solid white;
border-radius: 5px;
margin-left: 4px;
margin-top: 4px;
width: 64px;
height: 64px;
cursor: pointer;
}
External resources loaded into this fiddle: