//eg:   {"lat" : 44.964782 , "lon" : -93.276922 }

let latlonArray = [

    {"lat" : 44.964782, "lon" : -93.276922 },

    {"lat" : 44.964125, "lon" : -93.266912 },

    {"lat" : 44.918733, "lon" : -93.241098 },

    {"lat" : 44.924925, "lon" : -93.331771 },

]

​

let scalar = 0.1 //starting size (1/4 of the screen size

​

function setup() {

  createCanvas(400, 400);

  background(220);

  frameRate(1)

}

​

​

function draw() {

  // background(220);

    noFill();

  // every time you ping for the coords increase the scalar and do the ll2poly to draw a new one.

    scalar = scalar + 0.1 

    ll2poly(latlonArray, scalar); //the magic!

}

​

function ll2poly(latlonArray, scalar) {

  // local variables

  let latMin = 0; // bigger

  let latMax = 0; // smaller

  let lonMin = 0; // bigger (remember negatives)

  let lonMax = 0; // smaller (remember negatives)

  // might seem counterintuitive but start the max and min with opposite values. 

  //just set these to the first slot so we have something to comapre to in order to calculate the min/max

  latMin = latlonArray[0].lat

  latMax = latlonArray[0].lat

  lonMin = latlonArray[0].lon

  lonMax = latlonArray[0].lon

  // console.log(latMin, latMax, lonMin, lonMax);

​

  // loop through each lat/lon and check to see it it's actually the min/max

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

    if(latlonArray[i].lat >= latMin){

      latMin = latlonArray[i].lat

    }

    if(latlonArray[i].lat <= latMax){

      latMax = latlonArray[i].lat

    }

    if(latlonArray[i].lon >= lonMin){

      lonMin = latlonArray[i].lon

    }

    if(latlonArray[i].lon <= lonMax){

      lonMax = latlonArray[i].lon

    }

  }

  //push and pop so that the styles dont change anything else in the sketch and so we can cleanly translate and rotate

  push()

  //we can translate and rotate here to correct the orientation of the shape to face "north"/up

  translate(width/2, height/2 ) //move the whole thing to center of the screen

  translate( -scalar*width/2.5, -scalar*height/2.5  ) // move the origin pouint of the shape to the center instead of the top left corner (based on the scaleand the sceen size)

  scale(scalar)

  beginShape()

  //loop through each point, scale to the min/max and adda vertex for drwaing.

    for(let j = 0 ; j < latlonArray.length; j ++){

      let latOut = map(latlonArray[j].lat, latMin, latMax, 0, width);

      let lonOut = map(latlonArray[j].lon, lonMin, lonMax, 0, height);

      // return createVector(latOut, lonOut);

      vertex(latOut, lonOut)

    }

  endShape(CLOSE)

  pop()

​

}