geo data simple

Super simple sketch that maps a lattitude longitude location onto a map. Works only with an equirectangular map.

sketch.js

// Latitude, Longitude: 52.41369, 13.04992
// is somewhere here in Berlin

var lat = 52.41369;
var lon = 13.04992;
var x = 0;
var y = 0;
var mymap = null;

// getting started with p5js
function setup() {
  // executed once
  mymap = loadImage("world.png");
  var canvas = createCanvas(1280, 640);
  canvas.parent('sketch');
  x = map(lon, -180, 180, 0, width);
  y = map(lat, 90, -90, 0, height);

}

function draw() {
  image(mymap, 0, 0);
  ellipse(x, y, 10, 10);

}

index.html

<!doctype html>
<html lang="en">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>{page.title}</title>
    <meta name="description" content="something">
    <meta name="author" content="me">
  </head>
  <body>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.4.17/p5.min.js"></script>
    <script type="text/javascript" src="sketch.js"></script>
    <div id="sketch"></div>
    </body>
  </html>