JSFiddle - React, Tailwind, and code Playground

by velo_ninja

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/raphael/2.1.2/raphael-min.js"></script>
<script src="http://chrishewett.com/js/openseadragon/1.1.1/openseadragon.min.js"></script>
<div id="openseadragon" style="height: 400px;"></div>

CSS

.overlay {
    border:thin solid red;
}
.overlay>* {
    height:100%;
    width:100%;
}

JavaScript

var set;

var viewer = OpenSeadragon({
    id: "openseadragon",
    tileSources: "http://chrishewett.com/img/deepzoom/world-map.dzi",
    prefixUrl: 'http://chrishewett.com/js/openseadragon/1.1.1/images/'
});

viewer.addHandler('open', function (event) {
    var elt = document.createElement("div");
    elt.className = "overlay";
    var dimensions = viewer.source.dimensions;
    viewer.addOverlay({
        element: elt,
        location: viewer.viewport.imageToViewportRectangle(new OpenSeadragon.Rect(0, 0, dimensions.x, dimensions.y))
    });
});

viewer.addHandler('add-overlay', function (event) {
    var paper = Raphael(event.element);
    set = paper.set();
    set.push(paper.circle(4096, 2102.5, 1000).animate({
        fill: "#223fa3",
        "fill-opacity": 0.5
    }, 2000));
    transform(set)
});

viewer.addHandler('animation', function (event) {
    transform(set)
});

function transform(el) {
    var zoom = viewer.viewport.viewportToImageZoom(viewer.viewport.getZoom(true));
    el.transform('S' + zoom + ',' + zoom + ',0,0');
}