Custom OpenLayers Panel and Buttons

by Danilo Vukomanović

HTML

<script src="http://openlayers.org/dev/OpenLayers.js"></script>
<link rel="stylesheet" href="http://openlayers.org/dev/theme/default/style.css">
<div id="map"></div>
<script src="http://openlayers.org/dev/OpenLayers.js"></script>

CSS

#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 {

   ...

JavaScript

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...