jVectorMap - 한국 지도 (지역 및 지점 데이터 표시)

한반도 각 시/군/구 또는 광역시도의 데이터는 지역(Region)에 표시하고 특별한 지점(위/경도)도 표시하는 샘플..

티스토리 본문 창이 작은걸 감안하지 않고 페이지를 만들어서 범례가 짤리므로 새창으로 보는걸 추천...

시간이 없어서 복합 데이터 표출을 못한건 안자랑...
그러나 기존 유료 컴퍼넌트를 대체한건 자랑 

Result

크게 보기 : http://jyeory.fun25.co.kr/demo/tistory/jvectormap/koreaMap03Page.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

	function numberFormatComma(n) {
		var reg = /(^[+-]?\d+)(\d{3})/;   // 정규식
		n += '';                          // 숫자를 문자열로 변환
		while (reg.test(n)){
			n = n.replace(reg, '$1' + ',' + '$2');
		}
		return n;
	}

	var jMap = null;
	function convert(latitude, longitude) {
		// lat : 위도, long : 경도
		
		// QGIS > SVG 플러그인 속성에 적은 가로-세로
		var width = 823;
		var height = 823;

		// QGIS > SVG 플러그인 속성에서 SET 된 각 한계선
		var eastLong = 132.054062;		// 우측 한계선
		var westLong = 124.410858;		// 좌측 한계선
		var northLat = 39.686848;		// 상측 한계선
		var southLat = 32.043644;		// 하측 한계선
		
		// 경도 -> x
		var longDiff = eastLong - westLong;
		var lon = (longitude - westLong) * (width / longDiff);
		
		// 위도 -> y
		var latDiff = northLat - southLat;
		var lat = (northLat - latitude) * (height / latDiff);
		
		return [ lon, lat];
	}
	
	var sourceData = [
	                  {stnId : '105',	stnNm : '강릉',		lati : '37.75147',	lngt : '128.89098', heatWave : 10},
	                  {stnId : '295',	stnNm : '남해',		lati : '34.81663',	lngt : '127.92641', heatWave : 11},
	                  {stnId : '104',	stnNm : '북강릉',		lati : '37.80456',	lngt : '128.85535', heatWave : 11},
	                  {stnId : '255',	stnNm : '북창원',		lati : '35.2264',	lngt : '128.6725',  heatWave : 16},
	                  {stnId : '121',	stnNm : '영월',		lati : '37.18126',	lngt : '128.45743', heatWave : 18},
	                  {stnId : '211',	stnNm : '인제',		lati : '38.05987',	lngt : '128.16713', heatWave : 7},
	                  {stnId : '192',	stnNm : '진주',		lati : '35.16379',	lngt : '128.04002', heatWave : 14},
	                  {stnId : '155',	stnNm : '창원',		lati : '35.1702',	lngt : '128.57285', heatWave : 16},
	                  {stnId : '95',	stnNm : '철원',		lati : '38.14788',	lngt : '127.3042',   heatWave : 8},
	                  {stnId : '216',	stnNm : '태백',		lati : '37.17031',	lngt : '128.98928', heatWave : 1},
	                  {stnId : '162',	stnNm : '통영',		lati : '34.84546',	lngt : '128.4356',   heatWave : 3}
                  ];
	var markers = [];
	jQuery.each(sourceData, function(){
		var obj = {};
		var color = '';
		obj.coords = convert(this.lati, this.lngt);
		obj.stnNm = this.stnNm;
		obj.stnId = this.stnId;
		obj.heatWave = this.heatWave;
		obj.style = {};
		var val = Number(obj.heatWave);
		if(val >= 15){
			color = 'red';
		}
		else if(val >= 10){
			color = 'orange';
		}
		else if(val >= 5){
			color = 'yellow';
		}
		else {
			color = 'white';
		}
		
		obj.style.fill = color;
		obj.style.r = 5;
		markers.push(obj);
	});
	
	var countryData = []; 
	// 진주시
	countryData['38030'] = 339445;
	countryData['38050'] = 144017;
	countryData['38060'] = 116688;
	countryData['38070'] = 523177;
	countryData['38080'] = 110516;
	countryData['38090'] = 241711;
	countryData['38100'] = 270933;
	countryData['38310'] = 30728;
	countryData['38320'] = 70100;
	countryData['38330'] = 63766;
	countryData['38340'] = 58902;
	
	countryData['11010'] = 143089;
	countryData['11020'] = 143089;
	countryData['11030'] = 256614;
	countryData['11040'] = 307801;
	countryData['11050'] = 385874;
	countryData['11060'] = 377467;
	countryData['11070'] = 425101;
	countryData['11080'] = 492429;
	countryData['11090'] = 347817;
	countryData['11100'] = 365404;
	countryData['11110'] = 605521;
	countryData['11120'] = 506691;
	countryData['11130'] = 321183;
	countryData['11140'] = 395754;
	countryData['11150'] = 501855;
	countryData['11160'] = 574777;
	countryData['11170'] = 456694;
	countryData['11180'] = 262228;
	countryData['11190'] = 430516;
	countryData['11200'] = 414415;
	countryData['11210'] = 543477;
	countryData['11220'] = 441645;
	countryData['11230'] = 568685;
	countryData['11240'] = 686472;
	countryData['11250'] = 494186;

	$(document).ready(function() {
		width = $('#jvm_worldMap').width();

		jMap = $('#jvm_worldMap').vectorMap({
			map : 'korea_mill_en',
			markerStyle : {
				initial : {
					fill : '#F8E23B',
					stroke : '#383f47'
				}
			},
			series : {
				regions : [ {
					values : countryData,
					scale : [ '#C8EEFF', '#0071A4' ],	// two colors: for minimum and maximum values 
					normalizeFunction : 'polynomial'
				} ]
			},
			markers : markers,
			markerStyle : {
				hover: {
					stroke: 'black',
					r : 10
				},
			},
            onMarkerLabelShow: function(e, el, idx) {
           		var msg = el.html();
            	var source = markers[idx];
            	var mapObject = jMap.vectorMap('get', 'mapObject');
            	msg += ""+source.stnNm+"";
            	msg += "

 지점ID : "+source.stnId+"";
            	msg += "

 폭염일수 : "+source.heatWave+"";
            	// 맵 다시 그리기..
            	mapObject.onResize();
            	
				el.html(msg);
            },
		//-----------------------------------------------
	        // changed to onRegionLabelShow from onLabelShow
	        //-----------------------------------------------
	        onRegionLabelShow: function(e, el, code) {
				jQuery.each(countryData, function(name, value){
					if(name == code && value != undefined){
		                el.html(el.html() + 
		                        "

인구 : "+ numberFormatComma(Number(value)));
		                return;
					}
				});
	        }
		});
		var map = $('#jvm_worldMap').vectorMap('get', 'mapObject');
		
		var range = [50000, 100000, 300000, 500000];
		jQuery(range).each(function(idx, value){
			color = map.series.regions[0].scale.getValue(value);
			var span = jQuery('').addClass('jvm-legend-item').css('background', color);
			var valSpan = jQuery('').append(' '+numberFormatComma(value));
			jQuery('#regionDiv').append(span).append(valSpan).append('

');
		});
	});

HTML

	

	

		


		

			지점 범례

			

		        
		         > 15
		        

		        
		         > 10
		        

		        
		         > 5
		        

		        
		    	 > 0
			
      
	
	

		

			

			지역 범례