OpenLayers.Control.Button Example2

by _DR_

HTML

<script src="http://openlayers.org/dev/OpenLayers.js"></script>
<div id="mapdiv"></div>

CSS

#mapdiv {
    width: 400px;
    height: 400px;
    border: 1px solid #dddddd;
}

.Panel1 {
    width: 18px;
    height: 54px;
    cursor: pointer;
    right: 10px;
    top: 10px;
}

.Panel2 {
    width: 18px;
    height: 54px;
    cursor: pointer;
    right: 10px;
    top: 74px;
}

.Panel3 {
    width: 18px;
    height: 54px;
    cursor: pointer;
    right: 10px;
    top: 138px;
}

.firstItemInactive,.secondItemInactive {
    background: #30d5c8;
    border: 2px solid #075f67;
    width: 18px;
    height: 18px;
}

.firstItemActive, .secondItemActive {
    background: #ffffdd;
    border: 2px solid #dddddd;
    width: 18px;
    height: 18px;
}

.olControlLayerSwitcher .layersDiv {
    background-color: #ff0000;
    height: 100%;
    padding: 5px 75px 5px 10px;
    width: 100%;
}

JavaScript

map = new OpenLayers.Map("mapdiv", {
    controls: []
});

    var panel_type2 = new OpenLayers.Control.Panel({displayClass: 'Panel2'});
    map.addControl(panel_type2);
    
    var _aBtn2 = new OpenLayers.Control.Button({displayClass: 'first', type: OpenLayers.Control.TYPE_TOGGLE, eventListeners: {'activate': function(){alert('Control of OpenLayers.Control.TYPE_TOGGLE type is activated')}, 'deactivate': function(){alert('Control of OpenLayers.Control.TYPE_TOGGLE type is deactivated')}}});
    panel_type2.addControls([_aBtn2]);

map.addLayer(new OpenLayers.Layer('', {
    isBaseLayer: true,
    maxExtent: new OpenLayers.Bounds(-200, -200, 200, 200)
}));
var buildingLayer = new OpenLayers.Layer.Vector("Buildings", {
    maxExtent: new OpenLayers.Bounds(-200, -200, 200, 200),
    strategies: [new OpenLayers.Strategy.Cluster({
        autoActivate: true,
        distance: 100
    })]
});

map.addLayer(buildingLayer);
buildingLayer.addFeatures([new OpenLayers.Feature.Vector(new OpenLayers.Geometry.Point(-50.126, 36.755))]);
map.zoomToMaxExtent();