JSFiddle - React, Tailwind, and code Playground

by Abid Shaik

HTML

<script src="https://maps.googleapis.com/maps/api/js?libraries=visualization,drawing,places,geometry&amp;sensor=false&amp;language=en&amp;v=3.17"></script>
<script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<script src="https://raw.githubusercontent.com/godswearhats/jquery-ui-rotatable/master/jquery.ui.rotatable.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
<script src="http://code.jquery.com/jquery-1.11.3.js"></script>
<script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<div id="map"></div>
<div id="RotatableDiv">This is rotatable Div</div>

CSS

html, body, #map {
    height: 90%;
    margin: 0px;
    padding: 0px;
}
.ui-rotatable-handle {
    height: 16px;
    width: 16px;
    cursor: pointer;
    background-image: url(https://raw.githubusercontent.com/godswearhats/jquery-ui-rotatable/master/rotate.png);
    background-size: 100%;
    left: 2px;
    bottom: 2px;
    position:absolute; 
}
#RotatableDiv {
    width: 100px;
    height:100px;
    background-color:#99ccee;
}
#MyImageOverlay {
    cursor: pointer;
}

JavaScript

/*jQuery Rotatable Plugin Demo*/
(function ($, undefined) {

    $.widget("ui.rotatable", $.ui.mouse, {

        options: {
            handle: false,
            angle: false,
            wheelRotate: false,
            snap: false,
            step: 22.5,


            rotationCenterX: false,
            rotationCenterY: false,

            // callbacks
            start: null,
            rotate: null,
            stop: null
        },

        rotationCenterX: function (x) {
            if (x === undefined) {
                return this.options.rotationCenterX;
            }
            this.options.rotationCenterX = x;
        },

        rotationCenterY: function (y) {
            if (y === undefined) {
                return this.options.rotationCenterY;
            }
            this.options.rotationCenterY = y;
        },

        handle: function (handle) {
            if (handle === undefined) {
                return this.options.handle;
            }
            this.options.handle = handle;
        },

        angle: function (angle) {
            if (angle === undefined) {
                return this.options.angle;
            }
            this.options.angle = angle;
            this.elementCurrentAngle = angle;
            this.performRotation(this.options.angle);
        },

        _create: function () {
            var handle;
            if (!this.options.handle) {
                handle = $(document.createElement('div'));
                handle.addClass('ui-rotatable-handle');
            } else {
                handle = this.options.handle;
            }

            this.listeners = {
                rotateElement: $.proxy(this.rotateElement, this),
                startRotate: $.proxy(this.startRotate, this),
                stopRotate: $.proxy(this.stopRotate, this),
                wheelRotate: $.proxy(this.wheelRotate, this)
            };

            if (this.options.wheelRotate) {
                this.element.bind('wheel',...