1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
<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 '<div class="hoverinfo">' + geography.properties.name + ' - Hit:' + data.hit + ' </div>'
            },
            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