GeoSpatial-Visualization/Animation_Mapbox.html at master · fereshteh-asg/GeoSpatial-Visualization · 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
100
101
102
103
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>Animating trajectories with mapbox</title>
<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
<script src='https://api.mapbox.com/mapbox.js/v2.2.1/mapbox.js'></script>
<link href='https://api.mapbox.com/mapbox.js/v2.2.1/mapbox.css' rel='stylesheet' />
<style>
  body { margin:0; padding:0; }
  #map { position:absolute; top:0; bottom:0; width:100%; }
</style>
</head>
<body>
<!-- We use arc.js to make our paths curved. -->
<script src='https://api.mapbox.com/mapbox.js/plugins/arc.js/v0.1.0/arc.js'></script>
<style>
/*
 * The path-start class is added to each line
 * to manage its animation - this interpolates
 * between the starting and ending values for the
 * stroke-dashoffset css property
 */
.path-start {
  -webkit-transition:stroke-dashoffset 5s ease-in;
     -moz-transition:stroke-dashoffset 5s ease-in;
       -o-transition:stroke-dashoffset 5s ease-in;
          transition:stroke-dashoffset 5s ease-in;
  }
</style>

<div id='map' class='dark'></div>

<script>

    var json_data = JSON.parse('{"0":{"delay":200,"markers":  [[2.414788,48.834593],[2.409279,48.847754],[2.409279,48.847754],[2.387802,48.846175],[2.312556,48.867744],[2.295475,48.865618],[2.288834,48.858201]]	,"coordinates":  [[2.4190317, 48.8463309], [2.4072293, 48.8474233], [2.3960523, 48.8480576], [2.3960523, 48.8480576], [2.39589344313, 48.8482919987], [2.39589344313, 48.8482919987], [2.37392601967, 48.8458651759], [2.34741546883, 48.8575990354], [2.34741546883, 48.8575990354], [2.34741546883, 48.8575990354], [2.3424101, 48.8585901], [2.3424101, 48.8585901], [2.3424101, 48.8585901], [2.3361468, 48.8623829], [2.3298436, 48.8643585], [2.322138, 48.8664075], [2.3137075, 48.8678333], [2.3090043, 48.8693137], [2.3006256, 48.8649686], [2.2937783, 48.8646725]]},"1":{"delay":200,"markers":  [[2.278635,48.843592],[2.270120,48.846957],[2.293964,48.831240],[2.317836,48.702043],[2.453451,48.621088]]	,"coordinates": [[2.27724811787, 48.8450747838], [2.27609109442, 48.8449868451], [2.27187551422, 48.8401676174], [2.26942747665, 48.8388171222], [2.26670778942, 48.8358954987],[2.28023259429, 48.8319214613], [2.28471253874, 48.8302709971],  [2.29239949175, 48.8277894683], [2.2928813298, 48.8275359949], [2.29902807531, 48.8259622904], [2.30354647331, 48.8249184266], [2.30407927553, 48.8248001119], [2.31446054579, 48.8223777822], [2.32126643111, 48.8209416192], [2.32126643111, 48.8209416192], [2.32888487693, 48.8193162652], [2.32962286167, 48.8187807748], [2.33639223615, 48.8158730525], [2.3366146096, 48.8152537104], [2.34251664604, 48.7991782063], [2.34410146744, 48.7923694566], [2.34407892711, 48.7982873916], [2.34407892711, 48.7982873916], [2.34410146744, 48.7923694566], [2.34426296389, 48.7708564116], [2.34398816113, 48.769780095], [2.34180944519, 48.7632427892], [2.32121342201, 48.7419097979], [2.3157913262, 48.7351734596], [2.31958909162, 48.7376731508], [2.31614766968, 48.7339207669], [2.30646087613, 48.7059770088], [2.3122052928, 48.6995835072], [2.3122052928, 48.6995835072], [2.33836290516, 48.6771858801], [2.36740814612, 48.6629560822], [2.38231393082, 48.6521322674], [2.38453469542, 48.6490854264], [2.3907330573, 48.6432164809], [2.39024335721, 48.6444013338], [2.39443947095, 48.6404378846], [2.4053692824, 48.6329549767], [2.40944832712, 48.6303801494], [2.41940014944, 48.6240649416], [2.42121306053, 48.6229358645], [2.42170917971, 48.62262344], [2.42895825228, 48.6160738673], [2.43597561, 48.6045],[2.455, 48.616],[2.451,48.62 ],[2.44280993508, 48.6273745576]]},"2":{"delay":100,"markers": [[2.2179481112, 48.8949150356],[2.2179481112, 48.8949150356],[2.2179481112, 48.8949150356],[2.215655, 48.844667],[2.252756, 48.848070]] ,"coordinates": [[2.2179481112, 48.8949150356], [2.2191378257, 48.895948927], [2.2192932281, 48.89593246], [2.2273494826, 48.8942999601], [2.2276993577, 48.8938103179], [2.2460010147, 48.8879625519], [2.2488811478, 48.8871045272], [2.2490995009, 48.8870729338], [2.25545189, 48.8849539589], [2.2556232067, 48.8849675767], [2.2551948281, 48.8847042428], [2.2524866914, 48.881533836], [2.2438072553, 48.8736457109], [2.2323484221, 48.8662823544], [2.2273081487, 48.8479608995], [2.2243263676, 48.8415887729], [2.21947558, 48.8412358195], [2.2193956611, 48.8412538994], [2.2193537707, 48.8450556581], [2.2193698931, 48.8450550854], [2.2193712757, 48.8450550532], [2.2193756125, 48.8450549414], [2.2193885471, 48.8450548708], [2.2194045492, 48.8450550835], [2.2194778183, 48.8450729393], [2.2210077907, 48.8427184739], [2.2233760337, 48.8407429884], [2.2256052527, 48.8411089032], [2.229187551, 48.8406247212], [2.2304722884, 48.8405485306], [2.2318779671, 48.8404453379], [2.2349080033, 48.8401111145], [2.2353329355, 48.8400790897], [2.2394452727, 48.8396992074], [2.239564994, 48.8396846913], [2.242084018, 48.8394599631], [2.2436509014, 48.8393215598], [2.2463795336, 48.8390692542], [2.2498016921, 48.8387617881], [2.2509556666, 48.8386604437], [2.2547200167, 48.8384396134], [2.254652172, 48.8469108556], [2.2553902322, 48.8548599435], [2.2679511525, 48.8653653982], [2.2727916848, 48.8708124402], [2.2805165919, 48.8778849883], [2.2838673389, 48.882943416], [2.2928490654, 48.8884142254], [2.3003916424, 48.8913403244], [2.3057078225, 48.8946099529], [2.3122248378, 48.8973479417], [2.3212113332, 48.9002018116], [2.3311451441, 48.9006746813], [2.340683018, 48.9007520066], [2.3436027715, 48.9008035114], [2.3440393277, 48.9006529932], [2.3440898652, 48.8989451636], [2.3440923012, 48.8985189611], [2.3449050826, 48.8979173487], [2.3535080944, 48.8983554444], [2.3582771922, 48.8985975177], [2.3588956103, 48.8985605077], [2.3593226743, 48.8990027235], [2.3594405426, 48.8998959394], [2.359502753, 48.9015083482], [2.358762987, 48.9063978991], [2.3585974988, 48.9081447038], [2.3610581978, 48.9085615478]]}}');

var pairs = [[[2.414788,48.834593],[2.409279,48.847754]],[[2.409279,48.847754],[2.387802,48.846175]],[[2.312556,48.867744],[2.295475,48.865618]]];


L.mapbox.accessToken = 'pk.eyJ1IjoiZmFzZ2FyaSIsImEiOiJORm1zTnowIn0.2vQVq6T4PkemTwg6TXWhKA';
var map = L.mapbox.map('map', 'fasgari.l5bkc6do', {
    keyboard: false
}).setView([48.82,2.3],11);


var credits = L.control.attribution({
  prefix: '<a href="http://openflights.org/data.html">Flight data from Open Flights, under the ODbL license</a>'
}).addTo(map);


// Transform the short [lat,lng] format in our
// data into the {x, y} expected by arc.js.
function obj(ll) { return { y: ll[0], x: ll[1] }; }

for (i in json_data) {
    var line = json_data[i];
    var markers = [];
    for(var i = 0; i < line.markers.length; i++) {
        markers.push({
        type: 'Feature',
        "geometry": { "type": "Point", "coordinates": [line.markers[i][0], line.markers[i][1]]},
        "properties": {
            "marker-symbol": "star",
            "marker-color": "#ff8888",
            "name": "Start_point" }
        });
        L.mapbox.featureLayer(markers).addTo(map);
    }

    for (d in line.coordinates){
        line.coordinates[d].reverse();
    }

    var newLine = L.polyline(line.coordinates, {
        color: '#FF0000',
        weight: 3,
        opacity: 1
    })
    .addTo(map);
    var totalLength = newLine._path.getTotalLength();
    newLine._path.classList.add('path-start');
    // This pair of CSS properties hides the line initially
    // See http://css-tricks.com/svg-line-animation-works/
    // for details on this trick.
    newLine._path.style.strokeDashoffset = totalLength;
    newLine._path.style.strokeDasharray = totalLength;
    // Offset the timeout here: setTimeout makes a function
    // run after a certain number of milliseconds - in this
    // case we want each flight path to be staggered a bit.
    setTimeout((function(path) {
        return function() {
            // setting the strokeDashoffset to 0 triggers
            // the animation.
            path.style.strokeDashoffset = 0;
        };
    })(newLine._path), i * 100);
}
</script>
</body>
</html>