JSFiddle - React, Tailwind, and code Playground

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_type3 = new OpenLayers.Control.Panel({
    displayClass: 'Panel3',
    allowDepress: true
});
map.addControl(panel_type3);

var _aBtn3 = new OpenLayers.Control.Button({
    displayClass: 'first',
    type: 3,
    eventListeners: {
        'activate': function() {
            alert('First control of TYPE_TOOL type is activated')
        },
        'deactivate': function() {
            alert('First control of TYPE_TOOL type is deactivated')
        }
    }
});
var _bBtn3 = new OpenLayers.Control.Button({
    displayClass: 'second',
    type: 3,
    eventListeners: {
        'activate': function() {
            alert('Second control of TYPE_TOOL type is activated')
        },
        'deactivate': function() {
            alert('Second control of TYPE_TOOL type is deactivated')
        }
    }
});
panel_type3.addControls([_aBtn3, _bBtn3]);

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