본문 바로가기
웹 개발/jVectorMap

jVectorMap - 나라별 코드로 마커 표시하기.. (일부)

팩트폭력배 2013. 11. 27. 22:08

(왜.. 자동 배포가 꺼져있는지 아리송... 매일 새벽에 자동배포 되게끔 되어 있는데.. 음... )



위/경도를 미리 설정하여 마커를 표시하는건 간단하다.

국가(또는 지역)의 정중앙에 마커를 표시하게 되면 따로 마커를 설정할 필요가 없어서 시도해보았다.

결과를 보면 절반의 성공이다....

위도 계산이 안맞다;; 경도는 어찌해서 맞추었는데 위도는 못맞추겠다..

그리고.. 이게 부질없다고 느끼게 한 나라는.. 프랑스(FR)이다

프랑스는 남아메리카에도 영토가 있다;; 
프랑스 정중앙에 마커를 표시하면 대서양에 마커가 찍힌다.. 

고로.. 그냥 마커로 표시하는게 좋을듯하다는게 결론...

국가코드에 KR, US, FR, CA, CN, RU, JP, AU 등등... 

Result


Style 
?
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
body{
    font-size: medium;
}
.jvm-legend {
    line-height: 2em;
    margin-top: 5px;
}
.jvm-legend span {
    vertical-align: middle;
}
.jvm-legend-item {
    width: 2em;
    height: 2em;
    display: inline-block;
    border-style : solid;
    border-color : black;
    border-width : 1px;
}
 
.jvm-legend-item-15 {
    background: red;
}
.jvm-legend-item-10 {
    background: orange;
}
.jvm-legend-item-5 {
    background: yellow;
}
.jvm-legend-item-0 {
    background: white;
}
 
table .td-legend{
    padding-left: 10px
}

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
var jMap = null;
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 = [ ];
 
$(document).ready(function(){
    // map
    jMap = $('#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'],
                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
    });
     
    $('#countryCode').bind({
        keyup : function(e){
            switch(e.which){
                case 13:
                    var code = e.target.value;
                    var mapObj = jMap.vectorMap('get', 'mapObject');
                    if(mapObj.regions[code] != undefined){
                        var bbox = mapObj.regions[code].element.getBBox();
                        var scale = mapObj.scale;
//                      var centroid = [ (bbox.x * scale) + (bbox.width * scale)/2 + mapObj.transX, (bbox.y * scale) + (bbox.height * scale)/2 + mapObj.transY ];
//                      var centroid = [ ((bbox.x + bbox.width) * scale)/2 + mapObj.transX, ((bbox.y + bbox.height) * scale)/2 + mapObj.transY ];
//                      var latLng = mapObj.pointToLatLng( (bbox.x * scale) + (bbox.width * scale)/2 + mapObj.transX, (bbox.y * scale) + (bbox.height * scale)/2 + mapObj.transY );
                        var zoomMax = (mapObj.params.zoomMax * mapObj.baseScale);
                        var widthPerZoom = bbox.width / zoomMax;
                        var heightPerZoom = bbox.height / zoomMax;
                        var scaleWidth = (scale * widthPerZoom);
                        var scaleHeight = (scale * heightPerZoom);
                         
                        var test = [bbox.x + bbox.width/2, bbox.y + bbox.height/2];
//                      console.log(test);
                        var latLng = mapObj.pointToLatLng(test[0] * scale, test[1] * scale)
//                      console.log(latLng);
                         
                        var mk = {
                            latLng : [latLng.lat, latLng.lng],
                            name : code,
                            style: {r: 5}
                        }
                        mapObj.addMarkers([mk], []);
                        mapObj.onResize();
                         
                    }else{
                        alert('invalid code!!');
                    }
                break;
            }
        }
    })
});


HTML
?
1
2
3
4
    <br>
    국가코드  : <input id="countryCode" name="countryCode" type="text" maxlength="3" size="3" value="KR"><br>
<br>
    
저작자표시 비영리 동일조건 (새창열림)

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

MapShaper  (0) 2013.08.29
jVectorMap - 한국 지도 (지역 및 지점 데이터 표시)  (9) 2013.08.26
코드명이 한글인 Shape 파일을 SVG로 변환할 시 인코딩이 안되는 문제.....  (0) 2013.08.02
SHP -> SVG 변환해주는 사이트  (0) 2013.08.02
jVectorMap - South Korea Map  (0) 2013.07.31

'웹 개발/jVectorMap' Related Articles

티스토리툴바