Dependency madness reloaded

aufgabe5/public/assets/js/webgl.js

@@ -1,4 +1,5 @@
-let tableData_global; // fetched date
+let tableData_global = []; // fetched date
+let flags;
 
 const doFetchCountries = () => {
     $.ajax({ url: "/items" }).done((data) => {
@@ -7,6 +8,8 @@ const doFetchCountries = () => {
             tableData_global = [];
             tableData_global.push(data);
         }
+
+        setup_bars();
     });
 };
 
@@ -34,6 +37,23 @@ let scene;
 let camera;
 let renderer;
 
+let zoom = 1.0;
+
+function setup_enables() {
+    flags = [
+        { id: "birth_rate_per_1000", enabled: true },
+        { id: "cell_phones_per_100", enabled: false },
+        { id: "children_per_woman", enabled: false },
+        { id: "electricity_consumption_per_capita", enabled: false },
+        { id: "gdp_per_capita", enabled: false },
+        { id: "gdp_per_capita_growth", enabled: false },
+        { id: "inflation_annual", enabled: false },
+        { id: "internet_user_per_100", enabled: false },
+        { id: "life_expectancy", enabled: false },
+        { id: "military_expenditure_percent_of_gdp", enabled: false },
+    ];
+}
+
 function setup() {
     mappa = new Mappa('MapboxGL', key);
     myMap = mappa.tileMap(options);
@@ -41,8 +61,11 @@ function setup() {
     canvas.width = window.innerWidth;
     canvas.height = window.innerHeight;
 
-    scene = new THREE.Scene();
+
     camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
+    camera.up = new THREE.Vector3(0, 0, 1);
+
+    scene = new THREE.Scene();
     renderer = new THREE.WebGLRenderer({ alpha: true, canvas: canvas });
 
     renderer.setSize(window.innerWidth, window.innerHeight);
@@ -52,15 +75,41 @@ function setup() {
     myMap.onChange(animate);
     scene.add(camera);
 
-    var geometry = new THREE.BoxGeometry(1, 1, 1);
-    var material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
-    var cube = new THREE.Mesh(geometry, material);
+    setup_enables();
+}
+
+function setup_bars() {
+    let k = 1000;
+
+    for (let i = 0; i < tableData_global.length; i++) {
+        let long = tableData_global[i]["gps_long"];
+        let lat = tableData_global[i]["gps_lat"];
+
+        for (let j = 0; j < flags.length; j++) {
+            let flag = flags[j];
+
+            if (flag.enabled) {
+                let value = tableData_global[i][flag.id];
+
+                let geometry = new THREE.BoxGeometry(1, 1, value);
+                let material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
+                let cube = new THREE.Mesh(geometry, material);
+                cube.position.set(long, lat, 0.0);
                 scene.add(cube);
-    camera.position.z = 5;
+            }
+
+        }
+    }
 }
 
 function draw() { }
 
 function animate() {
+    let position = myMap.pixelToLatlng(window.innerWidth / 2, window.innerHeight / 2);
+
+    let look_at = new THREE.Vector3(position.x, position.y, 0);
+    camera.position.set(look_at.x, look_at.y - 10 * zoom, look_at.z + 30 * zoom);
+    camera.lookAt(look_at);
+
     renderer.render(scene, camera);
 }

aufgabe5/public/index.html

@@ -14,7 +14,7 @@
 	<link href="assets/css/font-awesome/css/font-awesome.min.css" rel="stylesheet">
 	<link href="assets/css/style.css" type="text/css" rel="stylesheet">
 	<script src="assets/js/three.js" type="text/javascript"></script>
-	<script src="assets/js/mappa.min.js" type="text/javascript"></script>
+	<script src="assets/js/mappa.js" type="text/javascript"></script>
 	<script src="assets/js/p5.min.js" type="text/javascript"></script>
 	<script type="text/javascript" src="assets/js/jquery-3.3.1.min.js"></script>
 </head>