<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