LocationData_Map

let myMap;

let canvas;

const mappa = new Mappa('Leaflet');

​

​

let minutes = 0;

​

let json; // = {};

​

// Lets put all our map options in a single object

const options = {

  lat: 50.18735452,

  lng: 11.78041421,

  zoom: 15,

  style: "http://{s}.tile.osm.org/{z}/{x}/{y}.png"

  //style: "style.json"

}

​

function preload() {

​

  table = loadTable("Data.csv", 'csv', 'header');

}

​

function setup() {

  canvas = createCanvas(windowWidth, windowHeight);

​

  myMap = mappa.tileMap(options);

  myMap.overlay(canvas);

  i = 0; //Zähler

  vid = createVideo("220427_Zeitraffer.mp4")

  vid.size(windowWidth, windowHeight);

  //vid.play();

  vid.loop();

  vid.hide();

}

​

function draw() {

  //clear();

  vid.loadPixels();

  pixel0 = vid.get(vid.width / 2, vid.height / 2);

​

  // Time (fast forward)

​

  ele = table.get(i, 2);

  c = map(ele, 550, 650, 0, 255);

​

  //fill(pixel0); //Farbwert Video

  fill(0, c, c) //Höhenmeter

  noStroke();

​

  coords = myMap.latLngToPixel(table.get(i, 0), table.get(i, 1));

  ellipse(coords.x, coords.y, 8, 8);

​

  i++;

​

}

​

function keyPressed() {

  if (key == "s") {

    save('visualization.png');

  }

}