본문 바로가기

웹 개발/jVectorMap

jVectorMap - South Korea Map


Result


Source

	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];
	}

	$(document).ready(function() {

		width = $('#jvm_worldMap').width();
		mapCanvasHeight = $('#jvm_worldMap').height();

		// 부산 35.1333, 129.0500
		var markers = [ {
			coords : convert(37.60, 127.00),
			name : 'Seoul'
		}, {
			coords : convert(35.1333, 129.0500),
			name : '부산'
		}, {
			coords : convert(35.80, 128.58),
			name : '대구'
		}, {
			coords : convert(35.1755, 128.10),
			name : '진주'
		} ];

		$('#jvm_worldMap').vectorMap({
			map : 'korea_mill_en',
			markerStyle : {
				initial : {
					fill : '#F8E23B',
					stroke : '#383f47'
				}
			},
			markers : markers
		});
	});


HTML