본문 바로가기
웹 개발/jVectorMap

jVectorMap - World Map with custom marker tooltip

팩트폭력배 2013. 7. 15. 19:32

Sample Data

data.js



 

Result


Source

?
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
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
    function numberFormatComma(n) {
        var reg = /(^[+-]?\d+)(\d{3})/;   // 정규식
        n += '';                          // 숫자를 문자열로 변환
        while (reg.test(n)){
            n = n.replace(reg, '$1' + ',' + '$2');
        }
        return n;
    }
     
    var countryData = [];
    //for each country, set the code and value
    $.each(data.countries, function() {
        countryData[this.code] = this.pGdp;
    });
     
    var markers = [
        {
            latLng : [ 41.90, 12.45 ],
            name : 'Vatican City',
            type : 'eu',
            style: {r: 15},
            population : 800,
            url : 'http://www.vatican.va/phome_en.htm'
        }, {
            latLng : [ 48.856614, 2.352222 ],
            name : 'Paris',
            type : 'eu',
            population : 2229385,
            url : 'http://www.paris.fr/english'
        }, {
            latLng : [ 37.60, 127.00 ],
            name : 'Seoul',
            type : 'asia',
            population : 10442426,
            url : 'http://www.seoul.go.kr'
        }
    ];
     
    var colors = [];
    for (var i = 0; i < markers.length; i++) {
        if (markers[i].type == 'eu') {
            colors[i] = 0;
        }
        else {
            colors[i] = 1;
        };
    };
     
    $(document).ready(function(){
        // map
        $('#jvm_worldMap').vectorMap({
            map : 'world_mill_en',
            series : {
                regions : [ {
                    values : countryData,
                    scale : [ '#C8EEFF', '#0071A4' ],   // two colors: for minimum and maximum values
                    normalizeFunction : 'polynomial'
                } ]
                ,
                markers: [{
                    attribute: 'fill',
                    scale: ['#1B77E0', '#E01B1B'],
                    values: colors,
                    min: 0,
                    max: 1
                }]
            },
            //-----------------------------------------------
            // changed to onRegionLabelShow from onLabelShow
            //-----------------------------------------------
                onRegionLabelShow: function(e, el, code) {
                    //search through data to find the selected country by it's code
                    var country = $.grep(data.countries, function(obj, index) {
                        return obj.code == code;
                    })[0]; //snag the first one
                    //only if selected country was found in dataC
                    if (country != undefined) {
                el.html(el.html() +
                            "<br>
<b>Code: </b>" +country.code +
                            "<br>
<b>Name: </b>" + country.name +
                            "<br>
<b>GDP/Person: </b>$ " + numberFormatComma(country.pGdp)+
                            "<br>
<b>Population: </b>"+ numberFormatComma(Math.round(Number(country.pop)/10000))+" 만명");
                }
            }
            ,markerStyle : {
                initial : {
                    fill : '#F8E23B',
                    stroke : '#383f47'
                }
            },
            markers : markers,
            onMarkerClick: function(events, index) {
                if(confirm('확인을 누르시면 홈페이지로 이동 합니다.')){
                    window.open(markers[index].url, markers[index].name);
                }
            },
            onMarkerLabelShow: function(e, el, code) {
                        var msg = "<b>"+el.html()+"</b>";
                        var source = markers[code];
                        msg += "<br>
<b>population : "+numberFormatComma(source.population)+" 명</b>";
                        el.html(msg);
            }
        });
    });


HTML
?
1
2
<div id="jvm_worldMap" style="width: 800px; height: 450px; z-index:99">
</div>


저작자표시 비영리 동일조건 (새창열림)

'웹 개발 > jVectorMap' 카테고리의 다른 글

Shape -> jVectorMap 변환 방법!  (0) 2013.07.25
SVG를 jVectorMap으로...  (0) 2013.07.24
jVectorMap - Shape 다운로드 하기..  (0) 2013.07.17
jVectorMap - Map Converting for Window  (0) 2013.07.17
jVectorMap - Map Converting for Ubuntu  (0) 2013.07.17

'웹 개발/jVectorMap' Related Articles

티스토리툴바