const access_key = 'pk.eyJ1Ijoic2FyYWFzZGF1Z2JqZXJnIiwiYSI6ImNqbWhua2owMjJleTkzdnE0bDlzZHl6YmcifQ.QD5xpdK9hOwzH427mF5_4Q';

​

//Mapbox style

const style = "mapbox://styles/saraasdaugbjerg/cknpy20qj0t1t17rv7yohmayb";

​

// Options for map

const options = {

  lat: 55.615,

  lng: 12.421,

  zoom: 13,

  style: style,

};

​

// Create an instance of MapboxGL

const mappa = new Mappa('MapboxGL', access_key);

var myMap;

var data;

var icon;

var font;

var iconWidth = 10;

var iconHeight = 10;

var poiPoints = [];

​

//

function preload() {

  data = loadJSON("assets/data.json");

  icon = loadImage("assets/icon.png");

  font = loadFont("assets/Khmer Sangam MN.ttf");

}

​

function setup() {

  canvas = createCanvas(windowWidth, windowHeight);

  // Create a tile map and overlay the canvas.

  myMap = mappa.tileMap(options);

  myMap.overlay(canvas);

}

​

var loaded = false;

​

function draw() {

 clear();

  if (myMap.ready && !loaded) {

    loadPoiCoord();

  }

​

  if (loaded) {

​

    for(let i=0; i<poiPoints.length; i++){

      var pos = myMap.latLngToPixel(poiPoints[i].lat, poiPoints[i].lng);

      poiPoints[i].updatePos(pos.x,pos.y, myMap.zoom());

      poiPoints[i].over(mouseX,mouseY);

      poiPoints[i].show();      

    }

  }

}

​

​

function loadPoiCoord() {

​

  var pois = data['features']; // Create an object that contains the features. 

​

  //iterate trough the pois object. If it contains a PoI transform the latitude and longitude to pixels, and create a new instance of the class PoI

  for (let i = 0; i < pois.length; i++) {

​

    if (pois[i].properties.PoI) {

​

      var pos = myMap.latLngToPixel(pois[i].geometry.coordinates[1], pois[i].geometry.coordinates[0]);

​

      // Creates an instance of PoI with the position data of every point fro the data 

      var poi = new PoI(

        //lat, lng, x, y, w, h, title

        pois[i].geometry.coordinates[1],

        pois[i].geometry.coordinates[0],

        pos.x,

        pos.y,

        iconWidth,

        iconHeight,

        pois[i].properties.PoI

      );

​

      poiPoints.push(poi);

    }

    loaded = true;

  }

}