[LATLONG Js on Flat]

latlong-flat.js

var mapimg;

var clat = 0;
var clon = 0;

var lat = 31.2674;
var lon = 121.5221;
var zoomLevel = 1;


function preload() {

  mapimg = loadImage("https://api.mapbox.com/styles/v1/mapbox/streets-v10/static/0.337798,0.810550,1,0.00,0.00/1024x512?access_token=pk.eyJ1IjoiYW50b2luZWZvcnRpbiIsImEiOiJjamYydXlsZzIwNnNlMndwNDUwa3pidXc4In0.a71O-Gs4UX9d2xLh9QaKMg");
}


function mercX(long) {
  long = radians(long);
  var a = (256 / PI) * pow(2, zoomLevel);
  var b = long + PI;
  return a * b;
}

function mercY(lat) {
  lat = radians(lat);
  var a = (256 / PI) * pow(2, zoomLevel);
  var b = tan(PI / 4 + lat / 2);
  var c = PI - log(b);

  return a * c;
}

function setup() {
  createCanvas(1024,512);
  translate(width / 2, height / 2);
  imageMode(CENTER);
  image(mapimg,0,0)


  var cx = mercX(clon);
  var cy = mercY(clat);

  var x = mercX(lon) - cx;
  var y = mercY(lat) - cy;


  fill(255,0,255,200, 200);
  ellipse(x,y,20,20);
}

function draw() {

}