JSFiddle - React, Tailwind, and code Playground

HTML

<div id="map">
    <img src="http://mindminimal.com.ua/passmark/thumb.png" alt="" usemap="#map" data-city="lviv" id="sd"/>
                        
<map name="map" id="maps_map">
    <area shape="poly" class="maps_s" data-city="crim" coords="469, 369, 468, 376, 469, 390, 457, 394, 453, 397, 443, 403, 435, 406, 424, 413, 418, 416, 420, 424, 422, 426, 435, 431, 439, 427, 445, 430, 447, 433, 452, 435, 466, 433, 467, 438, 468, 446, 468, 451, 462, 464, 460, 467, 462, 474, 474, 482, 493, 479, 498, 474, 506, 464, 511, 457, 519, 453, 526, 455, 532, 451, 536, 447, 540, 442, 545, 439, 547, 436, 558, 437, 564, 437, 569, 437, 574, 434, 579, 436, 581, 437, 584, 434, 586, 422, 587, 421, 591, 417, 584, 410, 569, 411, 559, 413, 555, 416, 542, 422, 538, 421, 534, 410, 527, 403, 524, 399, 524, 391, 513, 385, 510, 380, 501, 377, 494, 376, 487, 377, 474, 374" title="crim" />
    <area shape="poly" class="maps_s" data-city="odessa" coords="310, 356, 314, 346, 314, 343, 312, 338, 301, 333, 295, 320, 294, 319, 299, 311, 300, 306, 291, 304, 291, 304, 284, 296, 282, 284, 286, 277, 287, 270, 273, 265, 269, 262, 278, 255, 287, 258, 294, 261, 310, 258, 316, 255, 324, 259, 327, 269, 330, 278, 343, 289, 351, 293, 351, 302, 351, 309, 361, 313, 365, 317, 362, 327, 357, 331, 357, 343, 364, 349, 354, 352, 346, 356, 343, 366, 340, 374, 335, 381, 327, 388, 324, 393, 316, 400, 300, 419, 304, 423, 302, 431, 300, 431, 293, 424, 279, 421, 268, 427, 254, 432, 247, 429, 242, 418, 238, 415, 250, 411, 254, 412, 254, 403, 260, 402, 268, 393, 267, 387, 275, 383, 275, 372, 273, 365, 272, 357, 278, 353, 284, 355, 289, 362, 296, 361, 300, 365, 309, 366" title="odessa" />
    <area shape="poly" class="maps_s" data-city="mikolaiv" coords="347, 289, 341, 289, 332, 290, 331, 284, 332, 280, 328, 276, 327, 270, 326, 264, 329, 260, 333, 258, 339, 258, 345, 259, 352, 258, 361, 253, 367, 261, 381, 262, 388, 274, 390, 278, 398, 280, 401, 280, 407, 276, 414, 277, 419, 278, 422, 273, 422, 270, 430, 266, 435, 266, 439, 271,...

CSS

#map {
	position: relative;
	width: 718px;
	height: 490px;
}

.maps_s {
	position: relative;
	z-index: 50;
}

#maps_map area {
	z-index: 100;
}

#lviv {
/*	background: url(../img/map/lviv.svg);*/
/*	width: 109px;
	height: 116px;*/
	position: absolute;
	top: 93px;
	left: 34px;
    display:none;
	z-index: 1;
	visibility: visible;
	fill: none;
	pointer-events: painted;
}

JavaScript

$('.maps_s').hover(function(){
        $.city = $(this).data('city');
        $('#'+$.city).css('display','block');
        $('#'+$.city).css('z-index','1000');
    },
    function(){
        $('#'+$.city).css('display','none');
         $('#'+$.city).css('z-index','1');
    });