Map

HTML

<script src="http://dimsemenov-static.s3.amazonaws.com/dist/jquery.magnific-popup.min.js"></script>
<link rel="stylesheet" href="http://dimsemenov-static.s3.amazonaws.com/dist/magnific-popup.css">
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400italic,800,800italic,700italic,700,600italic,600,400|Norican|Merienda:400,700|Amaranth:400,700' rel='stylesheet' type='text/css'>
    <script src="http://d3js.org/d3.v3.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/topojson/1.6.9/topojson.min.js"></script>
<script src="http://datamaps.github.io/scripts/datamaps.world.min.js"></script> 
<div id="container" style="position: relative; width: 700px; height: 500px;">
    <div id="map" style="position: relative; width: 100%; height: 100%;">
    <p id="title">CaDao and Viet's map of the world</p>    
    </div>
    <div id="spiral" style="width: 100%; height: 100%;">
    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" 
    xmlns:xlink="http://www.w3.org/1999/xlink" id="spiralSVG" width = 100% height="280px" preserveAspectRatio="none" viewBox="0 0 1600 800" >        
        
        <path id="planeSVG" d="M 45.102065,97.705811 C 43.951007,97.612411 38.945827,96.864561 38.853217,96.772201 38.809017,96.728101 38.809017,96.658341 38.853217,96.617081 38.897417,96.575881 47.128741,91.537912 57.14511,85.421702 72.972389,75.757222 75.641253,74.061202 77.53027,72.467322 L 79.703865,70.633322 79.318206,70.143042 C 79.106096,69.873382 78.932557,69.454252 78.932557,69.211622 78.932557,68.251422 80.524374,67.023742 82.55786,66.415632 83.055469,66.266822 83.540368,65.953452 83.768287,65.633372 84.183716,65.049952 86.480822,63.813072 87.50616,63.620722 87.950789,63.537322 89.021597,62.761832 90.975043,61.108552 L 93.800757,58.717042 71.245872,58.717042 C 58.840687,58.717042 48.645238,58.643042 48.589308,58.552522 48.533408,58.462022 47.855999,58.329772 47.083991,58.258602 43.037809,57.885592 35.552564,56.554232 28.919017,55.027712 14.832555,51.786102...

CSS

#map {
    background:repeating-linear-gradient(45deg, #228eb5, #228eb5 5px, rgba(124, 124, 124, 0.8) 6px, rgba(124, 124, 124, 0.8) 6px);
    background:-webkit-repeating-linear-gradient(45deg, #228eb5, #228eb5 5px, rgba(124, 124, 124, 0.8) 6px, rgba(124, 124, 124, 0.8) 6px);
    background:-moz-repeating-linear-gradient(45deg, #228eb5, #228eb5 5px, rgba(124, 124, 124, 0.8) 6px, rgba(124, 124, 124, 0.8) 6px);
}

#title {
    z-index:100;
    position:absolute;
    bottom: 5%; 
    left: 5%;
    width: 15%;
    color: #f0f0f0;
    opacity: 0; /* Invisible before animation */
    font-family: 'Norican', cursive;
    font-size: 20px;
    font-weight: 400;
    font-style: italic;
    text-shadow: -2px 2px 3px #454545;
    -webkit-animation: intro 4s ease 1s 1 forwards; /* Chrome, Safari, Opera */
    -moz-animation: intro 4s ease 1s 1 forwards; /* Firefox */
    animation: intro 4s ease 1s 1 forwards; /* Standard syntax */
}
/* Intro text animation */
/* Chrome, Safari, Opera */
@-webkit-keyframes intro {
    0%   {left: -100%; bottom: 5%; opacity: 0;}
    40%  {left: 25%; bottom: 5%;opacity: 0.8;}
    80%  {left: 5%; bottom: 5%;opacity: 1;color: #f0f0f0;text-shadow: -2px 2px 3px #454545;}
    100% {left: 5%; bottom: 5%;opacity: 1;color: #14556c;text-shadow: 0px 1px 1px #7abbd2;}
}
/* Firefox */
@-moz-keyframes intro {
    0%   {left: -100%; bottom: 5%; opacity: 0;}
    40%  {left: 25%; bottom: 5%;opacity: 0.8;}
    80%  {left: 5%; bottom: 5%;opacity: 1;color: #f0f0f0;text-shadow: -2px 2px 3px #454545;}
    100% {left: 5%; bottom: 5%;opacity: 1;color: #14556c;text-shadow: 0px 1px 1px #7abbd2;}
}
/* Standard syntax */
@keyframes intro {
    0%   {left: -100%; bottom: 5%; opacity: 0;}
    40%  {left: 25%; bottom: 5%;opacity: 0.8;}
    80%  {left: 5%; bottom: 5%;opacity: 1;color: #f0f0f0;text-shadow: -2px 2px 3px #454545;}
    100% {left: 5%; bottom: 5%;opacity: 1;color: #14556c;text-shadow: 0px 1px 1px #7abbd2;}
}

#spiral {
  z-index: 101;
  position:absolute;
  top:...

JavaScript

var map = new Datamap({
	element: document.getElementById("map"),
	projection: 'mercator',
	responsive: false,
	fills: {
		defaultFill: "#78cce8",
		visted: "#22b549"
	},
	data: {
		USA: {
			fillKey: "visted"
		},
		GBR: {
			fillKey: "visted"
		},
		ITA: {
			fillKey: "visted"
		},
		ESP: {
			fillKey: "visted"
		},
		FRA: {
			fillKey: "visted"
		},
		CZE: {
			fillKey: "visted"
		},
		VNM: {
			fillKey: "visted"
		},
		THA: {
			fillKey: "visted"
		},
		SGP: {
			fillKey: "visted"
		},
		EGY: {
			fillKey: "visted"
		},
		AUS: {
			fillKey: "visted"
		},
		AUT: {
			fillKey: "visted"
		},
		CHE: {
			fillKey: "visted"
		},
		JPN: {
			fillKey: "visted"
		},
		KOR: {
			fillKey: "visted"
		},
		GRC: {
			fillKey: "visted"
		},
		NLD: {
			fillKey: "visted"
		},
		MDV: {
			fillKey: "visted"
		}
	},

	geographyConfig: {
		hideAntarctica: true,
		borderColor: '#f0f0f0',
		popupOnHover: false,
		highlightOnHover: false,
		highlightFillColor: '#e89478',
		highlightBorderColor: '#f0f0f0',
		highlightBorderWidth: 1
	},

	done: function(datamap) {
		datamap.svg.call(d3.behavior.zoom()
			.on("zoom", redraw));

		function redraw() {
			datamap.svg.selectAll("g").attr("transform", "translate(" + d3.event.translate + ")scale(" + d3.event.scale + ")");
		}
	}
});

d3.select(window).on('resize', function() {
	map.resize();
});

var flightRoutes = [
//Hanoi-London
{
	origin: {
		latitude: 21.219621,
		longitude: 105.801773
	},
	destination: {
		latitude: 51.5085300,
		longitude: -0.1257400
	}
},
//Danang-London
{
	origin: {
		latitude: 16.048783,
		longitude: 108.197823
	},
	destination: {
		latitude: 51.5085300,
		longitude: -0.1257400
	}
},
//London-Rome
{
	origin: {
		latitude: 51.5085300,
		longitude: -0.1257400
	},
	destination: {
		latitude: 41.9028,
		longitude: 12.4964
	}
},
//London-Singapore
{
	origin: {
		latitude: 51.5085300,
		longitude: -0.1257400
	},
	destination: {
		latitude: 1.3521,
		longitude: 103.8198
	}
},
//London-Phuket
{
	origin: {
		latitude:...