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

OpenLayers.Renderer.SVG.prototype.drawFeature = function(feature, style)
{
    if(style == null) {
        style = feature.style;
    }
    if (feature.geometry) {
        var bounds = feature.geometry.getBounds();
        if(bounds) {
            if(!bounds.intersectsBounds(this.extent) && (feature.attributes.render == "undefined" || feature.attributes.render != "drawAlways"))
            {style={display:"none"};
            }
            var rendered = this.drawGeometry(feature.geometry, style, feature.id);
            if(style.display != "none" && style.label && rendered !== false) {
                this.drawText(feature.id, style, feature.geometry.getCentroid());
            } else {
                this.removeText(feature.id);
            }
            return rendered;
        }
    }
};

function set_styleMapPuzzle()
{
    var styleMapPuzzle;

    var context = {
        getSizeW : function(ft){
            return 360/map.getResolution()+1;
            //return 8/map.getResolution()+1;
        },
        getSizeH : function(ft){
            return 180/map.getResolution()+1;
            //return 5/map.getResolution()+1;
        },
        getRotation : function(ft){
            return theRotation;
        }
    };
    var template = {
        strokeColor: "#0000FF",
        strokeOpacity: 1,
        strokeWidth: 3,
        fillColor: "#00AAFF",
        fillOpacity: 1,
        pointRadius: 10,
        pointerEvents: "visiblePainted",

        externalGraphic: "http://www.hdwallpapersinn.com/wp-content/uploads/2013/03/landscape_7.jpg",
        graphicWidth   :"${getSizeW}",
        graphicHeight  :"${getSizeH}",
        rotation       :"${getRotation}"
    };

//    styleMapPuzzle = new OpenLayers.StyleMap(new OpenLayers.Style(template, {context:context}) );
    styleMapPuzzle = new OpenLayers.StyleMap(new OpenLayers.Style(template, {context:context}) );

    return styleMapPuzzle;
}

var map, layer;
var theRotation=0;

function rotate_image() {
   ...