korea svg

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
	<link rel="stylesheet" href="http://code.jquery.com/ui/1.12.1/themes/start/jquery-ui.css">
	<style>
		#info,#arealist { display: none; }
	</style>
</head>
<body>
	<button class="showareas btn btn-default">면적비교표보기</button>
	<div id="map"></div>
	<div id="info">
		<h1 id="name_ko"></h1>
		<h3 id="name_en"></h3>
		<p id="name_full"></p>
		<p id="city_info"></p>
		<p id="area"></p>
		<p id="pop"></p>
	</div>

	<div id="arealist">
		<table id="areatable" class="table table-bordered">
			<tr>
				<td>시도명(한글)</td>
				<td>시도명(영문)</td>
				<td>인구</td>
				<td>면적</td>
			</tr>
		</table>
	</div>

	<script src="http://code.jquery.com/jquery-1.12.4.min.js"></script>
	<script src="http://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
	<script>
		var data = [];
		$.getJSON("korea.json",function(json){
			data = json.korea.city;
		});
		$("#map").load("korea.svg");
		$("#map").on("click",".land",function(){
			var id=$(this).attr("id");
			var info = data.filter(function(v,i,a){
				return v.id === id;
			});
			var city = info[0];
			$("#name_ko").html(city.name_ko);
			$("#name_en").html(city.name_en);
			$("#name_full").html(city.name_full);
			$("#city_info").html(city.info);
			$("#area").html(city.area);
			$("#pop").html(city.population);
			$("#info").dialog({
				title: city.name_ko,
				width: 500,
				height: 500,
				modal: true
			});
		});

		$(".showareas").on("click",function(){
			if( ! data ) return;
			for(var i=0; i<data.length; i++) {
				var tr = "<tr>";
				tr += "<td>" + data[i].name_ko + "</td>";
				tr += "<td>" + data[i].name_en + "</td>";
				tr += "<td>" + data[i].population + "</td>";
				tr += "<td class='area'>" + data[i].area + "</td>";
				tr += "</tr>";
				$("#areatable tr:last").after(tr);
				$("#arealist").dialog({
					width: 700,
					height: 500,
					title: "도기기본정보"
				});
			}
		});

		$("#areatable").on("click",".area",function(){
				//전체 면적 자료를 배열로 저장
				var tds = $("#areatable .area");
				var areas = [];
				for( var i=0; i<tds.length; i++ ){
					areas[i] = $(tds[i]).text();
					areas[i] = areas[i].replace("km²","");
					areas[i] = areas[i].replace(",","");
					areas[i] = Number(areas[i]);
				}
				console.log(areas);
		});
	</script>
</body>
</html>