Initial story timeline.

assets/timelines.js

@@ -0,0 +1,122 @@
+var timelines = [{
+    "id": "1",
+    "title": "White Walkers Emerge",
+    "description": "已经数千年未见踪迹的异鬼在北境出现， 他们攻击了守夜人军团的一队游骑兵以及野人",
+    "location": 'Castle Black',
+    "camera": {
+        center: [18.853961295738596, 34.89038102283956],
+        zoom: 5.21,
+        pitch: 41,
+        bearing: 0
+    }
+}, {
+    "id": "2",
+    "title": "Secret Event",
+    "description": "御前首相琼恩·艾林发现铁王座的继承人不是劳勃的子嗣，政治阴谋罗网张开，琼恩被毒杀",
+    "camera": {
+        center: [19.078229700576749, 3.95360583357],
+        bearing: 0,
+        zoom: 5.05,
+        pitch: 0
+    }
+}, {
+    "id": "3",
+    "title": "King's Hand",
+    "description": "劳勃·拜拉席恩国王邀请艾德·史塔克公爵南下担任首相。二人先后因政治阴谋死去后，五王之战爆发",
+    "camera": {
+        center: [14.560155794776101, 26.61113907],
+        bearing: 15.3,
+        zoom: 6.5
+    }
+}, {
+    "id": "4",
+    "title": "Queen's Dragon",
+    "description": "在东方，丹妮莉丝·坦格利安成功的孵化出三条龙，将龙再度带回世界.",
+    "camera": {
+        center: [32.227754283038934, 4.783316],
+        bearing: 5,
+        zoom: 5.37
+    }
+}, {
+    "id": "5",
+    "title": "Wars of Five Kings",
+    "description": "经过风息堡、黑水河和红色婚礼的战斗和屠杀后，五王之中的蓝礼·拜拉席恩、史坦尼斯·拜拉席恩和罗柏·史塔克相继失败，巴隆·葛雷乔伊怀疑因意外去世，乔佛里·拜拉席恩的王位得以巩固。随后他在自己的婚礼上遭毒杀。提利昂·兰尼斯特被指控为凶手，越狱后他刺杀了父亲泰温·兰尼斯特公爵，流亡海外",
+    'location': 'Blackwater Bay',
+    "camera": {
+        center: [19.974683987649488, 4.116626703866494],
+        bearing: -40.4,
+        zoom: 6.64,
+        pitch: 60,
+    }
+}, {
+    "id": "6",
+    "title": "Rangers over the North",
+    "description": "为了调查野人动向和获取更多情报，守夜人组织了近数十年来最大规模的一次行动，游骑兵远征，结果在先民拳峰被异鬼击败，撤退路上发生兵变，几近全军覆没",
+    "camera": {
+        center: [16.24216883106174, 37.21249346460],
+        zoom: 6.68,
+        bearing: 15,
+        pitch: 15
+    }
+}, {
+    "id": "7",
+    "title": "Battle of Castle Black",
+    "description": "塞外之王曼斯·雷德率领野人向长城发动进攻，黑城堡之战，史坦尼斯的残军转战长城，击溃野人并俘虏塞外之王，琼恩·雪诺成为第998任守夜人总司令，长城局势暂时稳定",
+    "location": 'Castle Black',
+    "camera": {
+        center: [18.853961295738596, 34.890381022],
+        zoom: 6.68,
+        bearing: 0,
+        pitch: 0
+    }
+}, {
+    "id": "8",
+    "title": "Bay of Slavery",
+    "description": "丹妮莉丝·坦格利安在东方征服了奴隶湾的伟大都市，她释放了奴隶，结果导致当地陷入混乱",
+    "camera": {
+        center: [67.130071566353365, -9.610544433000],
+        zoom: 6.68,
+        bearing: 0,
+        pitch: 25
+    }
+}, {
+    "id": "9",
+    "title": "Iron Islands",
+    "description": "数千年以来的首次选王会于铁群岛召开，“鸦眼”攸伦·葛雷乔伊当选，并展开对河湾地的袭击",
+    "camera": {
+        center: [6.440872912730907, 14.214867740],
+        zoom: 6.68,
+        bearing: 25,
+        pitch: 45
+    }
+}, {
+    "id": "10",
+    "title": "The Vale of Arryn",
+    "description": "谷地大贵族组成“公义者同盟”对抗培提尔·贝里席公爵，但面对他熟练的政治阴谋手段，部份成员转向支持他继续成为谷地守护者摄政",
+    "camera": {
+        center: [23.374814280809066, 14.550500],
+        zoom: 6.68,
+        bearing: 0,
+        pitch: 25
+    }
+}, {
+    "id": "11",
+    "title": "Riverruns",
+    "description": "奔流城和鸦树城向兰尼斯特家族投降，河间地战事结束",
+    "camera": {
+        center: [13.312662792864254, 9.49198417],
+        zoom: 6.68,
+        bearing: 0,
+        pitch: 25
+    }
+}, {
+    "id": "12",
+    "title": "Chaos of Kings Landing",
+    "description": "瑟曦·兰尼斯特太后在泰温公爵死后接管朝政，但迅速造成政局混乱。最后教会在她批准下，重建解散二百多年的武装力量——战士之子和穷人集会。势力膨胀的教会最终以叛国及通奸等罪名逮捕太后和玛格丽·提利尔王后，并对她们进行审判",
+    "camera": {
+        center: [19.078229700576749, 3.95360],
+        zoom: 6.68,
+        bearing: 45,
+        pitch: 0
+    }
+}];

index.html

@@ -6,12 +6,29 @@
     <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
     <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.53.1/mapbox-gl.css' rel='stylesheet' />
     <style>
-        body { margin:0; padding:0;}
+        body, html {
+            margin:0;
+            padding:0;
+            background-color: #333;
+            height: 100%;
+        }
+        .app-title {
+            text-align: center;
+        }
         .map-cont {
+            flex: 1;
             position: relative;
+            height: 100%;
         }
         #map {
-            height:600px;
+            height: 100%;
+        }
+        #map span {
+            text-align: center;
+            font-family: "Quintessential";
+            font-weight: 900;
+            font-style: italic;
+            color: #ccc;
         }
         #height {
             display: none;
@@ -25,10 +42,50 @@
             display: flex;
             align-items: center;
         }
+        .map-overlay-container {
+            position: absolute;
+            width: 200px;
+            top: 30px;
+            left: 0;
+            padding: 10px;
+            z-index: 1;
+        }
+
+        .map-overlay {
+            font: 12px/20px 'Helvetica Neue', Arial, Helvetica, sans-serif;
+            background-color: #fff;
+            border-radius: 3px;
+            padding: 10px;
+            box-shadow:0 1px 2px rgba(0,0,0,0.20);
+        }
+
+        .map-overlay h2,
+        .map-overlay p {
+            margin: 0 0 10px;
+            color: #333;
+        }
+        .map-overlay h2 {
+            color: #999;
+            font-family: "Spectral";
+            /* font-style: italic; */
+        }
+        .btn-container {
+            display: flex;
+        }
+        .m-flex {
+            flex: 2;
+        }
+        .btn {
+            color: #999
+        }
+        .btn:hover {
+            cursor: pointer;
+            color: #666;
+        }
     </style>
 </head>
 <body>
-<h4>Game of Throne 3d Map</h4>
+<!-- <h4 class="app-title">Game of Throne Interactive Map</h4> -->
 <div class="map-cont">
     <canvas id="height"></canvas>
     <div id='map'></div>
@@ -37,12 +94,26 @@ <h4>Game of Throne 3d Map</h4>
             onchange="toggleTerrain()" checked disabled>
         <label for="toggleTerrain">toggle terrain</label>
     </div>
+    <div class='map-overlay-container'>
+        <div class='map-overlay'>
+            <h2 id='location-title'>Game of Throne Interactive Map</h2>
+            <p id='location-description'>loading data...</p>
+            <div class="btn-container">
+                <span class="btn" id="preChapBtn"> < Pre </span>
+                <div class="m-flex"></div>
+                <span class="btn" id="nextChapBtn"> Next > </span>
+            </div>
+            <small>Text credit: <a target='_blank' href='https://asoiaf.fandom.com/zh/wiki/Portal:%E5%8E%86%E5%8F%B2'>https://asoiaf.fandom.com/zh/wiki</a></small>
+        </div>
+    </div>
 </div>
 <script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.53.1/mapbox-gl.js'></script>
 <script src="./src/bundle.js"></script>
 <script src='https://unpkg.com/[email protected]/build/three.min.js'></script>
 <script src="https://unpkg.com/[email protected]/examples/js/loaders/GLTFLoader.js"></script>
 <script src="./src/textureloader.js"></script>
+<script src="./assets/timelines.js"></script>
+<script src="./src/player.js"></script>
 <script src="./src/index.js"></script>
 </body>
 </html>

src/index.js

@@ -8,7 +8,6 @@ var map = window.map = new mapboxgl.Map({
     hash: true
 });
 map.addControl(new mapboxgl.NavigationControl);
-map.addControl(new mapboxgl.FullscreenControl);
 
 // parameters to ensure the THREE plane is georeferenced correctly on the map
 var modelOrigin = [19.638807, 0.762392];
@@ -80,3 +79,20 @@ map.on('style.load', function () {
     console.warn('style loaded, adding THREE layer..');
     map.addLayer(customLayer, 'roads labels');
 });
+
+var title = document.getElementById('location-title');
+var description = document.getElementById('location-description');
+var preBtn = document.querySelector('#preChapBtn');
+var nextBtn = document.querySelector('#nextChapBtn');
+var controller = {
+    index: 0,
+    timer: 0
+}
+
+// Events Time Line. refer to https://asoiaf.fandom.com/zh/wiki/Portal:%E5%8E%86%E5%8F%B2
+setTimeout(function(){
+    playback(controller);
+}, 10000);
+
+preBtn.addEventListener('click', function() { if (controller.index - 1 >= 0) playback(controller, -1) });
+nextBtn.addEventListener('click', function() { playback(controller, 1) });

src/player.js

@@ -0,0 +1,34 @@
+function playback(controller, next) {
+    if (next == 1) {
+        controller.index = (controller.index + 1 === timelines.length) ? 0 : controller.index + 1;
+    } else if (next == -1) {
+        controller.index = (controller.index - 1 < 0) ? 0 : controller.index - 1;
+        // console.warn(`playback.. preIndex: ${controller.index}`)
+    }
+    console.warn('controller.index: ' + controller.index);
+
+    title.textContent = timelines[controller.index].title;
+    description.textContent = `Chap${controller.index}: ` + timelines[controller.index].description;
+    if (controller.timer) {
+        clearTimeout(controller.timer);
+    }
+
+    // highlightBorough(timelines[index].id ? timelines[index].id : '');
+
+    // Animate the map position based on camera properties
+    var animationOpt = {
+        speed: 0.5, // make the flying slow
+        curve: 1
+    }
+    map.flyTo(Object.assign(animationOpt, timelines[controller.index].camera));
+
+    map.once('moveend', function () {
+        var control = controller;
+        // Duration the slide is on screen after interaction
+        controller.timer = setTimeout(function () {
+            // Increment index, closure?
+            control.index = (control.index + 1 === timelines.length) ? 0 : control.index + 1;
+            playback(control);
+        }, 7000); // After callback, show the location for 3 seconds.
+    });
+}