JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://raw.githubusercontent.com/DmitryBaranovskiy/raphael/master/raphael-min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/qtip2/2.1.1/jquery.qtip.min.js"></script>
<div class="map" id="mapPaper">
   
    <div status-path='"stroke": "#74675C", "stroke-width": 1, "fill": "#FC0", "fill-opacity": 0.2' class="mapArea" data-path="M371,460,371,256,232,255,232,332,154,333,154,398,110,399,110,460z"></div>
    
	<div title="подсказка" class="mapArea" status-path='"stroke": "#74675C", "stroke-width": 1, "fill": "#FC0", "fill-opacity": 0.2' data-path="M3,398,153,398,153,332,231,332,231,213,153,213,153,78,3,78z"></div>
    
    
</div>

CSS

#mapPaper {
	width: 780px;
	height: 463px;
}

JavaScript

jQuery(document).ready(function(){

	var R = Raphael("mapPaper", 780, 463);
	


var i = 1,
    area = {};	
	

	var oAreas = $(".mapArea");
   	
	$.each(oAreas, function(){
    area[i] = R.path($(this).attr("data-path")).attr(JSON.parse("{"+$(this).attr("status-path")+"}"));
    i++;
});
	

	for (var j=1; j<i; j++) {
		(function (o, j) {
			o[0].style.cursor = "pointer";
			o[0].onmouseover = function () {
				var color = "#FCE588";
				o.animate({fill:color}, 250);
			};
			o[0].onmouseout = function () {
				var color = "#FC0";
				o.animate({fill: color}, 250);
			};
			o[0].onclick = function () {
				var color = "#F00";
				o.animate({fill: color}, 250);
			};
		})(area[j], j);
	}

});