jVectorMap - World Map with custom marker tooltip

Sample Data

data.js

 

Result

Source

	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 = [ 
		{
			latLng : [ 41.90, 12.45 ],
			name : 'Vatican City',
			type : 'eu',
			style: {r: 15},
			population : 800,
			url : 'http://www.vatican.va/phome_en.htm'
		}, {
			latLng : [ 48.856614, 2.352222 ],
			name : 'Paris',
			type : 'eu',
			population : 2229385,
			url : 'http://www.paris.fr/english'
		}, {
			latLng : [ 37.60, 127.00 ],
			name : 'Seoul',
			type : 'asia',
			population : 10442426,
			url : 'http://www.seoul.go.kr'
		} 
	];
	
	var colors = [];
	for (var i = 0; i < markers.length; i++) {
	    if (markers[i].type == 'eu') {
	        colors[i] = 0;
	    }
	    else {
	        colors[i] = 1;
	    };
	};
	
	$(document).ready(function(){
		// map
		$('#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'],
		            values: colors,
		            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,
			onMarkerClick: function(events, index) {
				if(confirm('확인을 누르시면 홈페이지로 이동 합니다.')){
					window.open(markers[index].url, markers[index].name);
				}
			},
			onMarkerLabelShow: function(e, el, code) {
		            	var msg = ""+el.html()+"";
		            	var source = markers[code];
		            	msg += "

population : "+numberFormatComma(source.population)+" 명";
		            	el.html(msg);
			}
		});
	});

HTML