9a- Animate or Interact with your path

You can animate your path by connecting your points with a line. You can use the same principle as in this example:

http://www.learningprocessing.com/examples/chapter-3/example-3-4/

In the above example, it appears you are drawing a line. The line is produced by connecting the previous mouse position (from the previous loop of draw) indicated by pMouseX and pMouseY with a line that connects to the current mouse position mouseX and mouseY. In this way we are connecting all of our mouse positions with tiny little lines.

We want to do the same in with our map locations. We want to store the previous map latitude and longitude in variables ppLocationsX, ppLocationsY; And then draw a line from this previous location to the current location as pulled from our table using the variable currentRow. In this way we can animate our path.

Here is some example code:

//import libraries
import de.fhpotsdam.unfolding.*;
import de.fhpotsdam.unfolding.geo.*;
import de.fhpotsdam.unfolding.utils.*;
 
//for map styles
import de.fhpotsdam.unfolding.providers.*;
 
//declare unfolding object
UnfoldingMap map;
 
//import your data
Table table;
 
//data variables
float latm, latp;
float lonm, lonp;
 
//arrays to store the list of our lats and lons
float[] locationsX;
float[] locationsY;
 
//counter to run through rows
int currentRow = 0;
 
void setup() {
  size(800, 600);
  smooth();
  //deal with your data
  table = loadTable("openpaths_tega.csv", "header");
 
  println(table.getRowCount() + " total rows in table");
  locationsX = new float[table.getRowCount()];
  locationsY = new float[table.getRowCount()];
 
  //load map tiles
  map = new UnfoldingMap(this, new StamenMapProvider.WaterColor());
  //get a location at NYC coordinates
  Location nyLocation = new Location(40.8f, -73.97f);
  //zoom and pan to this location
  map.zoomAndPanTo(nyLocation, 10);
  frameRate(20);
}
 
void draw() {
 
 
  //variables for previous location (start this at line 1)
 
  float ppLocationsX=table.getFloat(0, 0);
  float ppLocationsY=table.getFloat(0, 1);
 
 
    map.draw();
    //use a for loop to generate y which we use to call each row number
    //run through this loop up to the row we are up to
    //after the loop, add one onto currentRow to get the next datapoint and draw all of them 
    //up to this point to the screen
    for (int y=0; y<currentRow; y++) {
      //get latitude using getFloat(row, column) - from the first column
      float lat = table.getFloat(y, 0);
 
      //get longtitude using getFloat(row, column) - from the second column
      float lon = table.getFloat(y, 1);
 
      //make a location object and give it our lat and lon values
      Location location= new Location(lat, lon);
      //pass the location to the posLocations object.
      ScreenPosition posLocations = map.getScreenPosition(location);
      //    float m=map(n,0,384,0,255);
      fill(0, 0, 255, 100);
      noStroke();
      ellipse(posLocations.x, posLocations.y, 10, 10);
      stroke(0);
 
      //connect line from current point to previous point
      line(posLocations.x, posLocations.y, ppLocationsX, ppLocationsY);
      println(y);
 
      //put current point into previous point variables
      ppLocationsX=posLocations.x;
      ppLocationsY=posLocations.y;
    }
    currentRow++;
 
  if (currentRow>(table.getRowCount()-1)) {
    currentRow=0;
  }
}

Exercise:
How would you display the date label for the current location?
How could you display all the data on the map but highlight and animate the current location with color and/or an avatar?

Adding roll over labels.
Here is another example of animating a date label.

path

//import libraries
import de.fhpotsdam.unfolding.*;
import de.fhpotsdam.unfolding.geo.*;
import de.fhpotsdam.unfolding.utils.*;
 
//for map styles
import de.fhpotsdam.unfolding.providers.*;
 
//declare unfolding object
UnfoldingMap map;
 
//import your data
Table table;
 
//data variables
float latm, latp;
float lonm, lonp;
 
//arrays to store the list of our lats and lons
float[] locationsX;
float[] locationsY;
 
//counter to run through rows
int currentRow = 0;
 
void setup() {
  size(800, 600);
  smooth();
  //deal with your data
  table = loadTable("openpaths_tega.csv", "header");
 
  println(table.getRowCount() + " total rows in table");
  locationsX = new float[table.getRowCount()];
  locationsY = new float[table.getRowCount()];
 
  //load map tiles
  map = new UnfoldingMap(this, new StamenMapProvider.WaterColor());
  //get a location at NYC coordinates
  Location nyLocation = new Location(40.8f, -73.97f);
  //zoom and pan to this location
  map.zoomAndPanTo(nyLocation, 10);
  frameRate(20);
}
 
void draw() {
  background(255, 0, 0);
 
 
  //variables for previous location (start this at line 1)
 
  float ppLocationsX=table.getFloat(0, 0);
  float ppLocationsY=table.getFloat(0, 1);
 
 
 
  //use a for loop to generate y which we use to call each row number
  //run through this loop up to the row we are up to
  for (int y=0; y<table.getRowCount (); y++) {
    //get latitude using getFloat(row, column) - from the first column
    float lat = table.getFloat(y, 0);
 
    //get longtitude using getFloat(row, column) - from the second column
    float lon = table.getFloat(y, 1);
 
    //make a location object and give it our lat and lon values
    Location location= new Location(lat, lon);
    //pass the location to the posLocations object.
    ScreenPosition posLocations = map.getScreenPosition(location);
 
    //if the mouse is within a distance to a point
    if (dist(mouseX, mouseY, posLocations.x, posLocations.y)<3) {
      String date = table.getString(y, 3);
      println("date="+date);
      noStroke();
      fill(255);
      rect(posLocations.x+30, posLocations.y-10, textWidth(date), 12);
      fill(0);
      text(date, posLocations.x+30, posLocations.y);
    }
    stroke(0);
 
    //connect line from current point to previous point
    line(posLocations.x, posLocations.y, ppLocationsX, ppLocationsY);
    println(y);
 
    //put current point into previous point variables
    ppLocationsX=posLocations.x;
    ppLocationsY=posLocations.y;
  }
}
'+
1
'+
2 - 3
4 - 5
6 - 7
8 - 9
10 - 11
12 - 13
13 - 14
[x]