OpenLayers.Control.Button Example1

by _DR_

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/openlayers/2.12/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: []
});

panel_type1 = new OpenLayers.Control.Panel({
    displayClass: 'Panel1'
});
map.addControl(panel_type1);

var _aBtn1 = new OpenLayers.Control.Button({
    displayClass: 'first',
    trigger: function() {
        alert('Button of OpenLayers.Control.TYPE_BUTTON type is pressed');
    }
});
panel_type1.addControls([_aBtn1]);

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();