​

let temp;

​

// Options for map

const options = {

  lat: -5.9175,

  lng: 24.5484,

  zoom: 6,

  studio: true, // false to use non studio styles

  //style: 'mapbox.dark' //streets, outdoors, light, dark, satellite (for nonstudio)

  style: 'mapbox://styles/mapbox/traffic-night-v2',

};

​

// Create an instance of Mapbox

const mappa = new Mappa('Mapbox', key);

​

​

let myMap;

let canvas;

let mines;

​

let temp_icon;

let weatherData;

let showYears;

​

let shinkolobwe_ = [];

let img_pos_ = [];

​

let dy = [];

let dy_ = [];

​

​

let image_position_2006 = 600;

let image_position_2007 = 600;

let image_position_2008 = 600;

let image_position_2009 = 600;

let image_position_2010 = 600;

let image_position_2011 = 600;

let image_position_2012 = 600;

let image_position_2013 = 600;

let image_position_2014 = 600;

let image_position_2015 = 600;

let image_position_2016 = 600;

​

​

​

function preload() {

  temp = loadJSON("https://api.openweathermap.org/data/2.5/weather?lat=-11.0507&lon=26.5483&appid=bc0dffe988a5874f093f027fbf71411f");

  ibmPlex = loadFont('assets/font/IBMPlexSans-Text.otf');

  // Load the data

  //mines = loadTable('data/cod_mines_curated_all_opendata_eastern_drc.csv', 'csv', 'header');

  mines = loadTable('data/cod_mines_curated_all_opendata_p_ipis.csv', 'csv', 'header');

​

​

  for (var a = 2006; a <= 2016; a++) {

    shinkolobwe_[a] = loadImage('assets/img/shinkolobwe_' + [a] + '.jpg');

  }

}

​

​

​

function setup() {

  textFont(ibmPlex);

  temp_icon = temp.weather[0].icon;

  temp_img = loadImage('http://openweathermap.org/img/wn/' + temp_icon + '@2x.png');

​

  canvas = createCanvas(600, 600);

  // Create a tile map and overlay the canvas on top.

  myMap = mappa.tileMap(options);

  myMap.overlay(canvas);

​

  stroke(100);

​

​

  weatherData = new WeatherData(temp.main.temp, temp.weather[0].description);

  showYears = new ShowYears();

}

​

// The draw loop is fully functional but we are not using it for now.

function draw() {

  clear();

​

  myMap.onChange(drawMines);

  //create info panel

  showPanel();

  placeDesc();

  //show weather api data

  weatherData.draw();

  //show years on panel

  showYears.draw();

  moveImg();

​

​

​

}

​

function drawMines() {

  // Clear the canvas

  //clear();

  for (let i = 4000; i < 4500; i += 1) {

    // Get the lat/lng of each meteorite

    const latitude = Number(mines.getString(i, 'latitude'));

    const longitude = Number(mines.getString(i, 'longitude'));

​

    // Only draw them if the position is inside the current map bounds. We use a

    // Mapbox method to check if the lat and lng are contain inside the current

    // map. This way we draw just what we are going to see and not everything. See

    // getBounds() in https://www.mapbox.com/mapbox.js/api/v3.1.1/l-latlngbounds/

    if (myMap.map.getBounds().contains([latitude, longitude])) {

      // Transform lat/lng to pixel position

      const pos = myMap.latLngToPixel(latitude, longitude);

      const shik_pos = myMap.latLngToPixel(-11.0507, 26.5483);

      // Get the size of the meteorite and map it. 60000000 is the mass of the largest

      // meteorite (https://en.wikipedia.org/wiki/Hoba_meteorite)

      //let size = mines.getString(i, 'mass (g)');

      //size = map(size, 558, 60000000, 1, 25) + myMap.zoom();

      push();

      fill(color(233, 212, 96));

      noStroke();

      ellipse(pos.x, pos.y, 5, 5);

      pop();

      push();

      fill('red');

      rect(shik_pos.x, shik_pos.y, 10, 10);

      pop();

    }

  }

  //console.log(temp);

}

​

​

function showPanel() {

  //show panel

  push();

  noStroke();

  fill(255, 156.4);

  rect(0, 0, 600, 270);

  pop();

}

​

function placeDesc() {

  push();

  textSize(20);

  text('Shinkolobwe, or Kasolo,', 275, 45);

  text(' or Chinkolobew, or Shainkolobwe', 275, 70);

  text('is a radium and uranium ', 275, 95);

  text('mine in the Haut-Katanga Province', 275, 120);

  text(' of the Democratic Republic of the', 275, 145);

  text('Congo', 275, 170);

  pop();

  more_info_btn1 = createButton("More Info 1"); //whatever text you want the button to say

  more_info_btn1.position(300, 180); //where you want the button to be

  more_info_btn1.mousePressed(openLink1); //pass a function that you want to run when we click button

  more_info_btn2 = createButton("More Info 2"); //whatever text you want the button to say

  more_info_btn2.position(460,180); //where you want the button to be

  more_info_btn2.mousePressed(openLink2); //pass a function that you want to run when we click button

​

}

​

​

class WeatherData {

  constructor(temp, temp_desc) {

    this.temp_fahrenheit = floor(((temp) - 273.15) * 9 / 5 + 32);

    this.temp_desc = temp_desc;

    this.color = color;

  }

  draw() {

    //show weather from api on panel

    push();

    textSize(32);

    text('Shinkolobwe', 50, 50);

    textSize(48);

    text(this.temp_fahrenheit+"°", 60, 120);

    textSize(24);

    text(this.temp_desc, 50, 180);

    pop();

    //show temp image

    image(temp_img, 130, 60);

  }

}

​

class ShowYears {

​

  draw() {

    push();

    stroke(0);

    let liner = 52;

    for (let i = 0; i <= 10; i++) {

      line(liner, 270, liner, 240);

      liner += 55;

    }

    pop();

    //show years

    textSize(12);

    let o = 2006;

    let u = 11;

    for (let i = 0; i <= 10; i++) {

      text(o, u, 260);

      o++;

      u += 55;

    }

  }

}

​

​

function moveImg() {

  var finishX = 270;

  var startX = 600;

​

  var year_area = 0;

  var easing = 0.5;

​

​

  for (var b = 2006; b <= 2016; b++) {

​

    img_pos_[b] = 600;

​

​

​

    switch (b) {

      case 2006:

        dy[b] = finishX - image_position_2006;

        dy_[b] = startX - image_position_2006;

​

        image(shinkolobwe_[b], 0, image_position_2006);

        shinkolobwe_[b].resize(700, 0);

        break;

      case 2007:

        dy[b] = finishX - image_position_2007;

        dy_[b] = startX - image_position_2007;

        image(shinkolobwe_[b], 0, image_position_2007);

        shinkolobwe_[b].resize(700, 0);

        break;

      case 2008:

        dy[b] = finishX - image_position_2008;

        dy_[b] = startX - image_position_2008;

        image(shinkolobwe_[b], 0, image_position_2008);

        shinkolobwe_[b].resize(700, 0);

        break;

      case 2009:

        dy[b] = finishX - image_position_2009;

        dy_[b] = startX - image_position_2009;

        image(shinkolobwe_[b], 0, image_position_2009);

        shinkolobwe_[b].resize(700, 0);

        break;

      case 2010:

        dy[b] = finishX - image_position_2010;

        dy_[b] = startX - image_position_2010;

        image(shinkolobwe_[b], 0, image_position_2010);

        shinkolobwe_[b].resize(700, 0);

        break;

      case 2011:

        dy[b] = finishX - image_position_2011;

        dy_[b] = startX - image_position_2011;

        image(shinkolobwe_[b], 0, image_position_2011);

        shinkolobwe_[b].resize(700, 0);

        break;

      case 2012:

        dy[b] = finishX - image_position_2012;

        dy_[b] = startX - image_position_2012;

        image(shinkolobwe_[b], 0, image_position_2012);

        shinkolobwe_[b].resize(700, 0);

        break;

      case 2013:

        dy[b] = finishX - image_position_2013;

        dy_[b] = startX - image_position_2013;

        image(shinkolobwe_[b], 0, image_position_2013);

        shinkolobwe_[b].resize(700, 0);

        break;

      case 2014:

        dy[b] = finishX - image_position_2014;

        dy_[b] = startX - image_position_2014;

        image(shinkolobwe_[b], 0, image_position_2014);

        shinkolobwe_[b].resize(700, 0);

        break;

      case 2015:

        dy[b] = finishX - image_position_2015;

        dy_[b] = startX - image_position_2015;

        image(shinkolobwe_[b], 0, image_position_2015);

        shinkolobwe_[b].resize(700, 0);

        break;

      case 2016:

        dy[b] = finishX - image_position_2016;

        dy_[b] = startX - image_position_2016;

        image(shinkolobwe_[b], 0, image_position_2016);

        shinkolobwe_[b].resize(700, 0);

        break;

      default:

        //  

    }

​

    if (mouseX > 0 + year_area && mouseX < 54.5 + year_area && mouseY > 240 && mouseY < 270) {

​

      switch (b) {

      case 2006:

        image_position_2006 += dy[b] * easing;

        break;

      case 2007:

        image_position_2007 += dy[b] * easing;

        break;

      case 2008:

        image_position_2008 += dy[b] * easing;

        break;

      case 2009:

        image_position_2009 += dy[b] * easing;

        break;

      case 2010:

        image_position_2010 += dy[b] * easing;

        break;

      case 2011:

        image_position_2011 += dy[b] * easing;

        break;

      case 2012:

        image_position_2012 += dy[b] * easing;

        break;

      case 2013:

        image_position_2013 += dy[b] * easing;

        break;

      case 2014:

        image_position_2014 += dy[b] * easing;

        break;

      case 2015:

        image_position_2015 += dy[b] * easing;

        break;

      case 2016:

        image_position_2016 += dy[b] * easing;

        break;

      default:

        //  

    }

      //console.log(b + " : " + img_pos_[b]);

    } else {

      //console.log("hide "+year_area+" panel: ")

      switch (b) {

      case 2006:

        image_position_2006 += dy_[b] * easing;

        break;

      case 2007:

        image_position_2007 += dy_[b] * easing;

        break;

      case 2008:

        image_position_2008 += dy_[b] * easing;

        break;

      case 2009:

        image_position_2009 += dy_[b] * easing;

        break;

      case 2010:

        image_position_2010 += dy_[b] * easing;

        break;

      case 2011:

        image_position_2011 += dy_[b] * easing;

        break;

      case 2012:

        image_position_2012 += dy_[b] * easing;

        break;

      case 2013:

        image_position_2013 += dy_[b] * easing;

        break;

      case 2014:

        image_position_2014 += dy_[b] * easing;

        break;

      case 2015:

        image_position_2015 += dy_[b] * easing;

        break;

      case 2016:

        image_position_2016 += dy_[b] * easing;

        break;

      default:

        //  

    }

    }

​

    year_area += 54.5;

  }

}

​

function openLink1() {

  //Open tab with more info about camera permissions

  window.open("https://www.theguardian.com/global-development/2019/dec/16/apple-and-google-named-in-us-lawsuit-over-congolese-child-cobalt-mining-deaths"); 

}

​

function openLink2() {

  //Open tab with more info about camera permissions

  window.open("https://www.bbc.com/future/article/20200803-the-forgotten-mine-that-built-the-atomic-bomb"); 

}