JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html><html><head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Figure Series</title>
<style>
html {
	margin: 0px;
}
body {
	margin: 20px 30px;
}
#realmap {
	width: 850px;
	height: 750px;
    border: 1px solid lightgray;
    margin-bottom: 20px;
}
</style>
<link href="https://unpkg.com/realmap/realmap-style.css" rel="stylesheet" crossorigin="anonymous">
<link href="https://unpkg.com/realmap/realmap-export-style.css" rel="stylesheet" crossorigin="anonymous">

<style>
.green-layout {
    background-color: #00880020;
}
.red-button {
    color: red;
}
</style>



<script type="text/javascript" src="https://unpkg.com/realmap/export.js"></script>
<script type="text/javascript" src="https://unpkg.com/realmap/index.js"></script>



<script type="text/javascript">
	window.addEventListener('DOMContentLoaded', function () {
		try {
			init();
		} catch (err) {
			alert(err);
			console.error(err);
		}
	});	
</script>

  <script>
    var realMapLic = "upVcPE+wPOl3H1t2EmYDS2ZHHsIGhYOFvAiOqCN7jMScsYfjJ8xYHvcnjNP/alBGvwgv6MHcLk1itlg31ZMil9o5hU+SYjm4Y36LXWAlUU4zFfHLyfJrYkJ/CQ8eAe9knEDoO6g6qItm79yHT0KSfOj61RRag6zMyWEhOl7O9n/Hwl6Ih/mjqr3cLQlHWabvEhVyY82R38U=";
  </script>
</head>
<body>
	<div id="realmap"></div>
	<div id="actions"></div>

		</body></html>

JavaScript

const data = [{
  "name": "서울특별시",
  "s_name": "서울",
  "pm2_5": 25,
  "pm10": 43,
  "coord": [126.9780, 37.5665],
  "offset": [0, 0.1]
}, {
  "name": "부산광역시",
  "s_name": "부산",
  "pm2_5": 19,
  "pm10": 40,
  "coord": [129.0756, 35.1796],
  "offset": [0.3, -0.2]
}, {
  "name": "대구광역시",
  "s_name": "대구",
  "pm2_5": 23,
  "pm10": 44,
  "coord": [128.6025, 35.8722]
}, {
  "name": "인천광역시",
  "s_name": "인천",
  "pm2_5": 26,
  "pm10": 48,
  "coord": [126.7052, 37.4563],
  "offset": [-1, 0]
}, {
  "name": "광주광역시",
  "s_name": "광주",
  "pm2_5": 25,
  "pm10": 57,
  "coord": [126.8526, 35.1595]
}, {
  "name": "대전광역시",
  "s_name": "대전",
  "pm2_5": 29,
  "pm10": 59,
  "coord": [127.3845, 36.3504],
  "offset": [0.1, -0.2]
}, {
  "name": "울산광역시",
  "s_name": "울산",
  "pm2_5": 25,
  "pm10": 49,
  "coord": [129.3114, 35.5384],
  "offset": [0.3, 0]
}, {
  "name": "경기도",
  "s_name": "경기",
  "pm2_5": 22,
  "pm10": 49,
  "coord": [127.5183, 37.4138],
  "offset": [0.1, 0]
}, {
  "name": "강원특별자치도",
  "s_name": "강원",
  "pm2_5": 14,
  "pm10": 27,
  "coord": [128.1555, 37.8228],
  "offset": [0.1, 0]
}, {
  "name": "충청북도",
  "s_name": "충북",
  "pm2_5": 20,
  "pm10": 40,
  "coord": [127.4917, 36.6357],
  "offset": [0.8, 0.4]
}, {
  "name": "충청남도",
  "s_name": "충남",
  "pm2_5": 26,
  "pm10": 56,
  "coord": [126.8000, 36.5184],
  "offset": [-0.75, 0]
}, {
  "name": "전북특별자치도",
  "s_name": "전북",
  "pm2_5": 24,
  "pm10": 58,
  "coord": [127.1442, 35.7167],
  "offset": [-0.2, 0]
}, {
  "name": "전라남도",
  "s_name": "전남",
  "pm2_5": 20,
  "pm10": 47,
  "coord": [126.4630, 34.8161],
  "offset": [0.8, -0.2]
}, {
  "name": "세종특별자치시",
  "s_name": "세종",
  "pm2_5": 24,
  "pm10": 44,
  "coord": [127.2890, 36.4800],
  "offset": [-0.1, 0.2]
}, {
  "name": "경상북도",
  "s_name": "경북",
  "pm2_5": 16,
  "pm10": 32,
  "coord": [128.8889, 36.4919]
}, {
  "name": "경상남도",
  "s_name": "경남",
  "pm2_5": 21,
  "pm10": 43,
  "coord": [128.2132, 35.4606],
  "offset": [0, -0.2]
}, {
  "name": "제주특별자치도",
  "s_name": "제주",
 ...