WME/aufgabe5/public/assets/js/webgl.js

let tableData_global = []; // fetched date
let flags;

const doFetchCountries = () => {
    $.ajax({ url: "/items" }).done((data) => {
        if (data instanceof Array) tableData_global = data;
        else {
            tableData_global = [];
            tableData_global.push(data);
        }

        setup_bars();
    });
};

window.onload = () => {
    doFetchCountries();
    setup();
};

// mappa
const options = {
    lat: 0,
    lng: 0,
    zoom: 4,
    style: 'mapbox://styles/mapbox/traffic-night-v2',
    pitch: 50,
}

const key = 'pk.eyJ1IjoicmljYXJkb2xhbmduZXIiLCJhIjoiY2pxano2enh2MG1qazN4bm5lajIzeDl3eiJ9.wK0MtuxLgJxDcGUksKMeKg';
let mappa;
let myMap;
let canvas;

// three
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);
    canvas = document.getElementById("mapa");
    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;


    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);
    document.body.appendChild(renderer.domElement);

    myMap.overlay(canvas);
    myMap.onChange(animate);
    scene.add(camera);

    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);
            }

        }
    }
}

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);
}