본문 바로가기

웹 개발/jVectorMap

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


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



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

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

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

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

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

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

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

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

Result


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
	
국가코드 :