vignesh.github.io/travel.html at master · vignesh/vignesh.github.io · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
<!DOCTYPE html>
<html>
	<head>
		<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.3/d3.min.js"></script>
		<script src="https://cdnjs.cloudflare.com/ajax/libs/topojson/1.6.9/topojson.min.js"></script>
		<script type="text/javascript" src="js/datamaps.all.hires.min.js"></script>
		<link href="https://fonts.googleapis.com/css?family=Kalam|Raleway:600|Roboto" rel="stylesheet">
	  	<link href="css/bootstrap.min.css" rel="stylesheet">
    	<link href="css/custom.css" rel="stylesheet">
    	<meta name="twitter:card" content="summary_large_image">
      	<meta name="twitter:title" content="Vignesh's Travel Map">
      	<meta name="twitter:description" content="Countries and cities Vignesh has traveled to around the world.">
      	<meta name="twitter:site" content="@vigneshp_">
     	<meta name="twitter:creator" content="@vigneshp_">
     	<meta name="twitter:image" content="http://moziru.com/images/texture-clipart-earth-5.jpg">
	</head>
     <body>
		<div class="landing-page">
			<div class="row">
					<h2>Total Countries Visited - 31</h2>
					<p>Argentina, Austria, Belgium, Canada, China, Czech Republic, Denmark,</p>
					<p>England, France, Germany, Greece, Hungary, Iceland, India, Ireland,</p>
					<p>Italy, Mexico, Netherlands, Poland, Portugal, Qatar, Russia, Scotland, Singapore,</p>
					<p>Slovakia, Spain, Sweeden, Switzerland, Thailand, Turkey, United States</p>
			</div>
	    	<div class="container" id="container"></div>
    	</div>
    	<script>
    		var dataset = {
				  "USA": {"fillKey": "MONTH", "info":"Austin, Baltimore, Boston, Cleveland, Chicago, Columbus, Detroit, Jersey City, Kauai, Las Vegas, Los Angeles, Maui, Nashville, New York, Oahu, Orlando, Philadelphia, Phoenix, Pittsburgh, Providence, Salt Lake City, San Diego, San Jose, San Juan, San Francisco, Seattle, St.Louis, Washington DC"},
				  "IND": {"fillKey": "MONTH", "info":"Coimbatore, Chennai, Madurai, Pune, Tiruchirappalli"},
				  "CAN": {"fillKey": "WEEK", "info":"Toronto, Vancouver"},
				  "MEX": {"fillKey": "WEEK", "info":"Cancun, Los Cabos, Puerto Vallarta"},
				  "CHN": {"fillKey": "WEEK", "info":"Beijing, Shanghai, Xi'an"},
				  "RUS": {"fillKey": "WEEK", "info":"Moscow, Saint Petersburg"},
				  "ARG": {"fillKey": "WEEK", "info":"Buenos Airies"},
				  "ESP": {"fillKey": "WEEK", "info":"Barcelona, Madrid, Toledo"},
				  "GBR": {"fillKey": "WEEK", "info":"Bath, Edinburgh, London"},
				  "THA": {"fillKey": "WEEKEND", "info":"Bangkok"},
				  "QAT": {"fillKey": "WEEKEND", "info":"Doha"},
				  "PRT": {"fillKey": "WEEKEND", "info":"Lisbon"},
				  "AUT": {"fillKey": "WEEKEND", "info":"Salzburg, Vienna"},
				  "DEU": {"fillKey": "WEEKEND", "info":"Berlin"},
				  "BEL": {"fillKey": "WEEKEND", "info":"Bruge, Brussels"},
				  "ISL": {"fillKey": "WEEKEND", "info":"Reykjavik"},
				  "DNK": {"fillKey": "WEEKEND", "info":"Copenhagen"},
				  "FRA": {"fillKey": "WEEK", "info":"Paris"},
				  "IRL": {"fillKey": "WEEKEND", "info":"Dublin"},
				  "NLD": {"fillKey": "WEEKEND", "info":"Amsterdamn"},
				  "SWE": {"fillKey": "WEEKEND", "info":"Stockholm"},
				  "CHE": {"fillKey": "WEEKEND", "info":"Bern, Interlaken"},
				  "ITA": {"fillKey": "WEEKEND", "info":"Como, Milan"},
				  "SGP": {"fillKey": "WEEKEND", "info":"Singapore"},
				  "GRC": {"fillKey": "WEEKEND", "info":"Athens, Santorini"},
				  "TUR": {"fillKey": "WEEKEND", "info":"Istanbul"},
				  "SVK": {"fillKey": "ONEDAY", "info":"Bratislava"},
				  "POL": {"fillKey": "ONEDAY", "info":"Krakow"},
				  "CZE": {"fillKey": "ONEDAY", "info":"Prague"},
				  "HUN": {"fillKey": "ONEDAY", "info":"Budapest"}
			}

		    var map = new Datamap({
		        element: document.getElementById('container'),
		        fills: {
		        	MONTH: '#555D50',
		            WEEK: '#555D50',
		            WEEKEND: '#555D50',
		            ONEDAY: '#555D50',
		            LAYOVER: '#555D50',
		            defaultFill: '#efefef'
		        },
		        data: dataset,
		        geographyConfig: {
		            borderColor: 'white',
		            highlightBorderWidth: 2,
		            highlightFillColor: function(geo) {
		                return "black";
		            },
		            highlightBorderColor: 'white',
		            popupTemplate: function(geo, data) {

		                if (!data) { return ['<div class="hoverinfo">',
		                    '<strong>', geo.properties.name, '</strong>',
		                    '</div>'].join(''); }

		                return ['<div class="hoverinfo">',
		                    '<strong>', geo.properties.name, '</strong>',
		                    '<br>', data.info,
		                    '</div>'].join('');
		            }
		        }
		    });

		    window.addEventListener('resize', function() {
		        map.resize();
		    });
		</script>
	</body>
</html>