JSFiddle - React, Tailwind, and code Playground

by gilan

HTML

<script src="http://openlayers.org/api/OpenLayers.js"></script>
<link rel="stylesheet" href="http://openlayers.org/dev/theme/default/style.css">
<link rel="stylesheet" href="http://openlayers.org/dev/examples/style.css">
<title>OpenLayers Editing Toolbar Example</title>
    <h1 id="title">Editing Toolbar Example</h1>
    
    <div id="tags">
        digitizing, point, line, linestring, polygon, editing
    </div>
    
    <p id="shortdesc">
        Demonstrate polygon, polyline and point creation and editing tools.
    </p>
    
    <div id="panel"></div>
    <div id="map" class="smallmap"></div>

CSS

.olControlPanel {
    top: 50%;
    left: 3.5%;
    height: 18px;
    width: 18px;
/*    border: 1px solid black;*/
    cursor: pointer;
    }

.olControlBtnHiLiteItemActive {  
    position: absolute;
    height: 18px;
    width : 18px;
    background: url('http://s11.postimg.org/s3u0s4pjj/marker.png') no-repeat center;
}

JavaScript

var map, layer;

function rotate_image() {
    alert("Button clicked!");
}
            
    var btnHiLite = new OpenLayers.Control.Button({
        displayClass: 'olControlBtnHiLite',
        title: "click it to rotate image 90Âş",
        id: 'btnHiLite',
        trigger: rotate_image,
		});   

//-----you must create a panel to add buttons in it
    var panel = new OpenLayers.Control.Panel({defaultControl: btnHiLite});
//-------you must add the button to the panel
    panel.addControls([btnHiLite]);

    var graphic = new OpenLayers.Layer.Image(
		    'Document Page',
		    "http://www.hdwallpapersinn.com/wp-content/uploads/2013/03/landscape_7.jpg",
		    new OpenLayers.Bounds(-250, -100, 250, 100),
		    new OpenLayers.Size(250, 100)
		);
		
    map = new OpenLayers.Map( 'map', {
        controls: [
            new OpenLayers.Control.PanZoom(), 
            panel]
    });
               
    map.addLayers([graphic]);
    map.zoomToMaxExtent();