JSFiddle - React, Tailwind, and code Playground

by cristighenea

HTML

<script src="http://flexiris.com/stuff/jsfiddle/paths.js"></script>
<script src="http://flexiris.com/stuff/jsfiddle/raphael-min.js"></script>
<div id="container">
    <div id="chaptersMap">

    </div>
</div>

CSS

body {
    background: #EFEFEF;
}
#container {
    width: 500px;
    height: 400px;
    margin: 50px auto;
}

JavaScript

jQuery(function($){
     
    var r = Raphael('chaptersMap', 400, 502);
    r.safari();

    attributes = {
            fill: '#898989',
            stroke: '#FFFFFF',
            'stroke-width': 2,
            'stroke-linejoin': 'round'
        },
    arr = new Array();
     
    for (var country in paths) {
        var obj = r.path(paths[country].path);
        arr[obj.id] = country;
        obj.attr(attributes);
        obj
        .hover(function(){
            this.animate({
                fill: '#8fbf27'
            }, 300);
        }, function(){
            this.animate({
                fill: attributes.fill
            }, 300);
        })
        .click(function(){
            
            location.href = paths[arr[this.id]].url;
             
        })
        

    }
    var _label = r.popup(50, 50, "").hide();
    var c = r.circle(340,415,10);
    c.attr({fill: "red", stroke: "none"});
    c.click(function(){
        alert("clicked on London?");
    });
    c.hover(function(){
        this.animate({fill: 'blue'}, 300);
        bbox = this.getBBox();
        _label.attr({text: "London\nClick me"}).update(bbox.x + bbox.width/3, bbox.y + bbox.height/1.8, bbox.width).toFront().show();
        }, function(){
        this.animate({fill: "red"}, 300);
        _label.hide();
    });
            
});
jQuery.expr[':'].raph=function
(objNode,intStackIndex,arrProperties,arrNodeStack){var c=objNode.getAttribute('class');return(c&&c.indexOf(arrProperties[3])!=-1);}