<script src="<c:url value="/resources/plugin/chart/datamap/d3.min.js" />"></script>
<script src="<c:url value="/resources/plugin/chart/datamap/topojson.js" />"></script>
<script src="<c:url value="/resources/plugin/chart/datamap/datamaps.kor.min.js" />"></script>
<div id="map" style="position: relative; width: 500px; height: 500px; border: 1px red solid"></div>
<script>
jQuery(document).ready(function(){
	var basic = new Datamap({
		element : document.getElementById("map"),
		scope : 'kor',
		fills : {
			defaultFill : "#ABDDA4",
			authorHasTraveledTo : "#fa0fa0",
			'colorTest1' : '#EAA9A8',
			'colorTest2' : 'red',
			'colorTest3' : 'blue'
		},
		setProjection : function(element) {
			var projection = d3.geo.equirectangular().center([ 0, 0 ])
								 .rotate([ -128, -36 ])
								 .scale(5000)
								 .translate([ element.offsetWidth / 2, element.offsetHeight / 2 ]);
			var path = d3.geo.path().projection(projection);
			return {path : path, projection : projection};
		},
		geographyConfig : {
			highlightBorderColor : '#bada55',
			popupTemplate : function(geography, data) {
				return '
' + geography.properties.name + ' - Hit:' + data.hit + '
' }, highlightBorderWidth : 2 }, data : { "KR.SO" : {"fillKey" : "colorTest1", "hit" : 5}, "KR.KG" : {"fillKey" : "colorTest2", "hit" : 50}, "KR.KN" : {"fillKey" : "colorTest3", "hit" : 100} } }); }); </script>


http://datamaps.github.io

+ Recent posts