move camera to selected object

geojson/camera.json

+{
+  "1": {
+    "zoom" : 20,
+    "bearing" : 154.4000000000001,
+    "pitch" : 55.00000000000002,
+    "center" : [8.404678887363389, 49.01435934766977]
+  },
+  "2": {
+    "zoom" : 20,
+    "bearing" : 154.4000000000001,
+    "pitch" : 55.00000000000002,
+    "center" : [8.404678887363389, 49.01435934766977]
+  },
+  "3": {
+    "zoom" : 20,
+    "bearing" : 154.4000000000001,
+    "pitch" : 55.00000000000002,
+    "center" : [8.404678887363389, 49.01435934766977]
+  } ,
+  "4": {
+    "zoom" : 20,
+    "bearing" : 74.40000000000009,
+    "pitch" : 60,
+    "center" : [8.404729073054227, 49.014491095417355]
+  },
+  "5": {
+    "zoom" : 20,
+    "bearing" : -127.98206220157772,
+    "pitch" : 60,
+    "center" : [8.404418756656014, 49.014506477220095]
+  },
+  "6": {
+    "zoom" : 20,
+    "bearing" : -55.26063029283325,
+    "pitch" : 60,
+    "center" : [8.40433289817338, 49.01465436188076]
+  },
+  "7": {
+    "zoom" : 20,
+    "bearing" : -76.1883075247909,
+    "pitch" : 60,
+    "center" : [8.404506029513186, 49.01481263113985]
+  },
+  "8": {
+    "zoom" : 20,
+    "bearing" : 40.79999999999973,
+    "pitch" : 60,
+    "center" : [8.404631171335609, 49.014822001971964]
+  },
+  "9": {
+    "zoom" : 20,
+    "bearing" : 92.79999999999984,
+    "pitch" : 60,
+    "center" : [8.404815732034535, 49.014794195995705]
+  },
+  "10": {
+    "zoom" : 20,
+    "bearing" : 53.600000000000364,
+    "pitch" : 60,
+    "center" : [8.404626431723386, 49.014913919188274]
+  }
+}

js/main.js

@@ -28,12 +28,34 @@ $('body').on('click','.btn, .nav-item, logo, .video-item', function(e) {
 
 });
 
+function camera_fly_to_object(url) {
+  var episode_nr = url.match(/\/video\/video(\d+).html/);
+  if (episode_nr.length == 2) {
+    episode_nr = episode_nr[1];
+    $.getJSON( "/geojson/camera.json", function( data ) {
+      var camera_data = data[episode_nr];
+      console.log(camera_data["center"]);
+      map.flyTo({
+          center: camera_data["center"], //[8.404, 49.0150]
+          zoom: camera_data["zoom"],
+          pitch: camera_data["pitch"],
+          bearing: camera_data["bearing"],
+          speed: 0.5,
+          easing: function (t) {
+              return t;
+          }
+      });
+    });
+  }
+}
+
 function load_page(url, title, slug) {
   $("content").empty();
   $("content").hide().load(url).fadeIn('fast');
   $("content").scrollTop( 0 );
   document.title = title;
   window.history.pushState({url: "" + url + "", title: "" + title + "", slug: "" + slug + ""}, title, slug);
+  camera_fly_to_object(url);
 
 }
 

js/map.js

@@ -112,6 +112,9 @@ map.on('load', function() {
       popup.remove();
   });
 
+  map.on('moveend', function(e){
+    console.log('zoom: ' + map.getZoom() + ' , bearing: ' + map.getBearing() + ' , pitch: ' + map.getPitch() + ' , center: ' + map.getCenter());
+  })
   map.on('click', 'exhibits', function (e) {
     var url = e.features[0].properties.url;
     var title = e.features[0].properties.title;