cmanon/Mapbox - Leaflet Sourcing

## Mapbox - Leaflet Sourcing
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <title>Sourcing Mapa</title>

    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <link href="css/style.css" rel="stylesheet">
    <link href='https://api.tiles.mapbox.com/mapbox.js/v2.2.1/mapbox.css' rel='stylesheet' />
    <!-- <link href="js/leaflet-0.7.3/leaflet.css" rel="stylesheet"> -->

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
    <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
</head>
<body>
<nav class="navbar navbar-inverse navbar-fixed-top">
    <div class="container">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="#">Mapas</a>
        </div>
        <div id="navbar" class="collapse navbar-collapse">
            <ul class="nav navbar-nav">
                <li class="active"><a href="/">Home</a></li>
                <li><a href="/datos.html">Datos</a></li>
                <li><a href="/rodadas.html">Rodadas</a></li>
                <li><a href="/sourcing.html">Sourcing</a></li>
                <li><a href="/prosoft.html">Prosoft</a></li>
            </ul>
        </div><!--/.nav-collapse -->
    </div>
</nav>

<div class="container">
    <div id="mapa" class="starter-template">
        <!-- the map will be displayed here -->
    </div>
</div>

<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="js/jquery-2.1.4.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src='https://api.tiles.mapbox.com/mapbox.js/v2.2.1/mapbox.js'></script>
<!-- <script src="js/leaflet-0.7.3/leaflet.js"></script> -->
<!-- <script src="js/leaflet-omnivore.min.js"></script> -->
<script src="js/arc.js"></script>
<script>
    L.mapbox.accessToken = '';
    var mapa = L.mapbox.map('mapa', 'mapbox.dark').setView([5, 5], 2);

    var cities = new Array(
            "Guadalajara, Mexico, 0",
            "Chicago, USA, 20",
            "Shenzhen, China, 40",
            "Brasilia, Brazil, 10",
            "Paris, France, 90",
            "Madrid, Spain, 30"
    );

    //http://nominatim.openstreetmap.org/search?city=guadalajara&country=mexico&format=json
    var nominatim = new Array();
    var start;

    cities.forEach(function(city, i) {
        window.setTimeout(getCityLatLon(city, i), 3000);
    });

    function getCityLatLon(city, i) {
        var cityArray = city.split(',');
        $.ajax({
            url: "http://nominatim.openstreetmap.org/search",
            data: {
                city: cityArray[0].trim(),
                country: cityArray[1].trim(),
                format: "json"
            },
            dataType: "json",
            success: function(data) {
                //console.log(data);
                if (i == 0) {
                    // Start and end points, in x = longitude, y = latitude values
                    start = { x: data[0].lon, y: data[0].lat };
                } else {
                    var progressStyle = {
                        "stroke": true,
                        "color": "#ffffff",
                        "dashArray": "5,7",
                        "weight": 4,
                        "opacity": 0.7
                    };
                    var pendingStyle = {
                        "stroke": true,
                        "color": "#ff0000",
                        "dashArray": "5,7",
                        "weight": 4,
                        "opacity": 0.7
                    };

                    // Start and end points, in x = longitude, y = latitude values
                    var end = { x: data[0].lon, y: data[0].lat };
                    var generator = new arc.GreatCircle(start, end, { name: data[0].display_name });
                    var line = generator.Arc(100, { offset: 10 });
                    var polylineProgress = L.polyline([], progressStyle).addTo(mapa);
                    var polylinePending = L.polyline([], pendingStyle).addTo(mapa);

                    // `addLatLng` takes a new latLng coordinate and puts it at the end of the
                    // line. You optionally pull points from your data or generate them.
                    line.geometries[0].coords.forEach(function(coord, i) {
                        if (i < cityArray[2]) {
                            polylineProgress.addLatLng(L.latLng(coord[1], coord[0]));
                        } else {
                            // This is to include one point before the split and not getting a void in the line
                            if (i == cityArray[2]) {
                                L.circle(L.latLng(line.geometries[0].coords[i - 1][1], line.geometries[0].coords[i - 1][0]), 20);
                                polylinePending.addLatLng(L.latLng(line.geometries[0].coords[i - 1][1], line.geometries[0].coords[i - 1][0]));
                            }
                            polylinePending.addLatLng(L.latLng(coord[1], coord[0]));
                        }
                    });

                    //console.log(line);
                    //L.geoJson(line.json(), { style: myStyle }).addTo(mapa);
                }
                //nominatim.append(data);
            },

        });
    }

</script>
</body>
</html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<!-- The above 3 meta tags must come first in the head; any other head content must come after these tags -->
	<title>Sourcing Mapa</title>

	<!-- Bootstrap -->
	<link href="css/bootstrap.min.css" rel="stylesheet">
	<link href="css/style.css" rel="stylesheet">
	<link href='https://api.tiles.mapbox.com/mapbox.js/v2.2.1/mapbox.css' rel='stylesheet' />
	<!-- <link href="js/leaflet-0.7.3/leaflet.css" rel="stylesheet"> -->

	<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
	<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
	<!--[if lt IE 9]>
	<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
	<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
	<![endif]-->
	</head>
	<body>
	<nav class="navbar navbar-inverse navbar-fixed-top">
	<div class="container">
	<div class="navbar-header">
	<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
	<span class="sr-only">Toggle navigation</span>
	<span class="icon-bar"></span>
	<span class="icon-bar"></span>
	<span class="icon-bar"></span>
	</button>
	<a class="navbar-brand" href="#">Mapas</a>
	</div>
	<div id="navbar" class="collapse navbar-collapse">
	<ul class="nav navbar-nav">
	<li class="active"><a href="/">Home</a></li>
	<li><a href="/datos.html">Datos</a></li>
	<li><a href="/rodadas.html">Rodadas</a></li>
	<li><a href="/sourcing.html">Sourcing</a></li>
	<li><a href="/prosoft.html">Prosoft</a></li>
	</ul>
	</div><!--/.nav-collapse -->
	</div>
	</nav>

	<div class="container">
	<div id="mapa" class="starter-template">
	<!-- the map will be displayed here -->
	</div>
	</div>

	<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
	<script src="js/jquery-2.1.4.min.js"></script>
	<script src="js/bootstrap.min.js"></script>
	<script src='https://api.tiles.mapbox.com/mapbox.js/v2.2.1/mapbox.js'></script>
	<!-- <script src="js/leaflet-0.7.3/leaflet.js"></script> -->
	<!-- <script src="js/leaflet-omnivore.min.js"></script> -->
	<script src="js/arc.js"></script>
	<script>
	L.mapbox.accessToken = '';
	var mapa = L.mapbox.map('mapa', 'mapbox.dark').setView([5, 5], 2);

	var cities = new Array(
	"Guadalajara, Mexico, 0",
	"Chicago, USA, 20",
	"Shenzhen, China, 40",
	"Brasilia, Brazil, 10",
	"Paris, France, 90",
	"Madrid, Spain, 30"
	);

	//http://nominatim.openstreetmap.org/search?city=guadalajara&country=mexico&format=json
	var nominatim = new Array();
	var start;

	cities.forEach(function(city, i) {
	window.setTimeout(getCityLatLon(city, i), 3000);
	});

	function getCityLatLon(city, i) {
	var cityArray = city.split(',');
	$.ajax({
	url: "http://nominatim.openstreetmap.org/search",
	data: {
	city: cityArray[0].trim(),
	country: cityArray[1].trim(),
	format: "json"
	},
	dataType: "json",
	success: function(data) {
	//console.log(data);
	if (i == 0) {
	// Start and end points, in x = longitude, y = latitude values
	start = { x: data[0].lon, y: data[0].lat };
	} else {
	var progressStyle = {
	"stroke": true,
	"color": "#ffffff",
	"dashArray": "5,7",
	"weight": 4,
	"opacity": 0.7
	};
	var pendingStyle = {
	"stroke": true,
	"color": "#ff0000",
	"dashArray": "5,7",
	"weight": 4,
	"opacity": 0.7
	};

	// Start and end points, in x = longitude, y = latitude values
	var end = { x: data[0].lon, y: data[0].lat };
	var generator = new arc.GreatCircle(start, end, { name: data[0].display_name });
	var line = generator.Arc(100, { offset: 10 });
	var polylineProgress = L.polyline([], progressStyle).addTo(mapa);
	var polylinePending = L.polyline([], pendingStyle).addTo(mapa);

	// `addLatLng` takes a new latLng coordinate and puts it at the end of the
	// line. You optionally pull points from your data or generate them.
	line.geometries[0].coords.forEach(function(coord, i) {
	if (i < cityArray[2]) {
	polylineProgress.addLatLng(L.latLng(coord[1], coord[0]));
	} else {
	// This is to include one point before the split and not getting a void in the line
	if (i == cityArray[2]) {
	L.circle(L.latLng(line.geometries[0].coords[i - 1][1], line.geometries[0].coords[i - 1][0]), 20);
	polylinePending.addLatLng(L.latLng(line.geometries[0].coords[i - 1][1], line.geometries[0].coords[i - 1][0]));
	}
	polylinePending.addLatLng(L.latLng(coord[1], coord[0]));
	}
	});

	//console.log(line);
	//L.geoJson(line.json(), { style: myStyle }).addTo(mapa);
	}
	//nominatim.append(data);
	},

	});
	}

	</script>
	</body>
	</html>