Map_try_live

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 = { //50.19049, 11.7872

  lat: 50.190, 

  lng: 11.9,

  zoom: 13,

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

  //style: "style.json"

}

​

function preload() {

​

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

}

​

​

function setup() {

  createCanvas(windowWidth, windowHeight);

  background(255, 0);

​

  myMap = mappa.tileMap(options);

  myMap.overlay(canvas);

​

  intervalCurrentPosition(positionChanged, 500) //1000ms = 1sek

​

  img = createCapture(VIDEO); // selfie camera

  //img = createCapture({ audio: false, video: { facingMode: { exact: "environment" } }}); // backside camera

  img.size(50, 50);

  img.hide();

​

}

​

function positionChanged(position) {

​

  lat = map(position.latitude, 50.14, 50.23, 0, windowWidth); //width better for smartphone // 

  lon = map(position.longitude, 11.76, 11.85, 0, windowWidth);

​

  img.loadPixels();

  pixel = img.get(img.width / 2, img.height / 2);

  ele = map(position.altitude, 550, 650, 0, 255);

  ///control text

​

  fill(0); 

  text("lat: " + position.latitude, 20, windowHeight -40);

  text("long: " + position.longitude, 20, windowHeight -20);

  // actual sketch

  noStroke();

  fill(pixel);

  //fill(ele);

  coords = myMap.latLngToPixel(position.latitude, position.longitude);

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

​

}

​

​

​

function keyPressed() {

  if (key == "s") {

    save('visualization.png');

  }

}