JSFiddle - React, Tailwind, and code Playground

by Kzou

HTML

<script src="https://raw.github.com/DmitryBaranovskiy/raphael/master/raphael-min.js"></script>
	<div id="canvas_carte"></div>
	
	<div class="info" id="z1">
		<h2>Saint Denis</h2>
		<p>aaa</p>
	</div>
	
	<div class="info" id="z2">
		<h2>zone verte</h2>
	</div>

CSS

#canvas_france {
		width: 436px;
		border: 1px solid #aaa;
		float:left;
	}
	.info {
		display: none;
		height: 300px;
		overflow: auto;
		width: 400px;
	}

JavaScript

var paper = new Raphael(document.getElementById('canvas_carte'), 436, 416);
  
  var attr_map = {fill: "#fff"};
  var attr = {
    fill: "#f5f5f5",
    stroke: "green",//"#d5d5d5",
    "stroke-width": 1,
    "stroke-linejoin": "round",
  };
    
  var zone = {};
  
  test = paper.path("m58.6567,120.902c0.0239,0.641 -0.5931,0.64 -0.7102,1.14c-0.5154,0.098 -0.4245,0.803 -0.8871,0.955c-0.1523,0.46 -0.6198,0.605 -0.8878,0.949c-0.5091,0.108 -0.4837,0.751 -0.7122,1.14c-0.3321,0.282 -0.4379,0.79 -0.8871,0.955c-0.2405,0.416 -0.8427,0.469 -1.0662,0.901c-0.3448,0.281 -0.7913,0.461 -1.0655,0.813c-0.3667,0.288 -0.7764,0.533 -1.2052,0.758c-0.4781,0.179 -0.593,0.72101 -1.2079,0.763c-0.6925,-0.07001 -0.6474,0.59799 -1.1015,0.765c-0.3286,0.392 -1.1494,0.29401 -1.4548,0.71001c-0.2587,0.36699 -0.7961,0.45599 -1.0657,0.812c-0.7036,0.019 -1.0287,0.416 -1.5997,0.56799c-0.1407,0.576 -1.0254,0.40701 -1.3832,0.76401c-0.5151,0.14299 -0.9263,0.41299 -1.2436,0.75699c-0.6475,0.089 -0.9554,0.51701 -1.6332,0.57401c-0.5157,0.597 -1.2812,-0.231 -2.06,0c-0.3354,-0.44299 -1.5728,0.017 -1.9524,-0.382c-0.753,-0.064 -1.3165,0.47501 -1.6692,-0.192c-0.4148,-0.254 -1.0003,-0.355 -0.89,-1.13399c-0.4583,0.157 -0.9691,0.312 -1.3473,0.56799c-0.7773,-0.09299 -0.5403,0.838 -1.4918,0.56599c-1.02,-0.09099 0.0629,0.811 -0.5334,1.14801c-0.1937,0.422 -0.6158,0.617 -0.7095,1.13899c-0.5692,0.10001 -0.7427,0.597 -1.2437,0.76401c-0.6305,0.093 -0.4122,1.035 -0.8875,1.282c-0.322,0.347 -0.1204,1.21899 -0.8182,1.19c-0.3262,-0.311 -1.8254,-0.34601 -1.1351,0.382c0.615,0.11099 0.3309,1.09399 0,1.282c-0.0749,0.556 -0.8138,0.448 -0.8876,1.004c-0.4328,0.23999 -0.9736,0.37 -1.0656,0.95c-0.7647,-0.313 -0.9653,0.071 -0.7096,0.66499c0.0309,0.71201 -0.4925,0.871 -0.9961,1.048c-0.1463,0.52501 -0.5122,0.83101 -1.0657,0.948c-0.9802,-0.621 -0.7904,0.513 -0.7815,1.379c0.0094,0.74301 -0.3774,1.33501 0,1.957c0.3356,0.414 0.3541,1.14401 0.534,1.714c0.2822,0.418 0.3181,1.082 0.6737,1.429c-0.0816,0.76201 0.3992,0.96201...