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

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



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

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

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

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

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

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

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

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

Result

크게 보기 : http://jyeory.fun25.co.kr/demo/tistory/jvectormap/worldMap03Page.do 

Style 

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 

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() + 
                        "

Code: " +country.code + 
                        "

Name: " + country.name + 
                        "

GDP/Person: $ " + numberFormatComma(country.pGdp)+ 
                        "

Population: "+ 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

	

	국가코드  :