I had a large set of latitude and longitudes I wanted to represent. This is what I learned.

My first attempt was just to project the points onto a blank canvas. First, I needed a concept of a reference point:

```
class referencePoint{
float scrX, scrY, lat, lon;
PVector pos;
referencePoint(float x, float y, float la, float ln) {
scrX = x;
scrY = y;
lat = la;
lon = ln;
}
void setPos() {
pos = latLngToGlobalXY(lat, lon);
}
}
```

This object marries a screen x,y to a lat,long and provides a method for finding a global X,Y. We declare two reference points, one for the upper-left of a bounding rectangle on the screen and globe, the other for the lower-right of the same rectangle. I have a couple of helper functions, one to turn the coordinate into a flat projection for the whole globe, then one to translate that to the dimensions of my canvas.

```
PVector latLngToGlobalXY(float lat, float lon) {
float x = R * lon * cos((p0.lat + p1.lat)/2); //<>//
float y = R*lat;
return new PVector(x, y);
}
PVector latLngToScreenXY(float lat, float lon) {
PVector pos = latLngToGlobalXY(lat, lon);
float perX = ((pos.x - p0.pos.x)/(p1.pos.x-p0.pos.x));
float perY = ((pos.y-p0.pos.y)/(p1.pos.y - p0.pos.y));
return new PVector(p0.scrX + (p1.scrX - p0.scrX)*perX, p0.scrY + (p1.scrY - p0.scrY)*perY);
}
```

At load time I can simply iterate through all my coordinates and create an ArrayList of actual screen coordinates.

```
for (int i = 0; i < table.getRowCount(); i++) {
float[] row = table.getFloatRow(i);
float latitude = row[0];
float longitude = row[1];
if (latitude != Float.NaN && longitude != Float.NaN) {
PVector pos = latLngToScreenXY(latitude, longitude);
if(pos.x > 0 && pos.x < width && pos.y > 0 && pos.y < height) {
points.add( new DataPoint(pos, 5));
}
}
}
```

This simply provides locations I can plot, however. That may be interesting, but I am also interested in having visually interesting or appealing output. To that end I have a favorite function I found in the book Generative Design that will take any list of PVectors and draw lines between vectors within a radius at varying thickness and transparency, depending on the proximity of the connecting point.

```
void connectPoints(ArrayList<PVector> points, float sw, float alpha, float radius) {
for (int l1 = 0; l1 < points.size(); l1++) {
for (int l2 = 0; l2 < l1; l2++) {
PVector p1 = points.get(l1);
PVector p2 = points.get(l2);
float d = PVector.dist(p1, p2);
float a = pow(1/(d/radius+1), 6);
float h;
if (d <= radius) {
h = map(1-a, 0, 1, 0, 360) % 360;
stroke(h, 100, 100, a*alpha);
strokeWeight(sw);
line(p1.x, p1.y, p2.x, p2.y);
}
}
}
}
```

This function is fun to play around with. Here is a set of mostly random points connected.

Combining a dataset from LIHTC with these techniques, I arrived at a recognizable shape, that I thought was somewhat interesting to look at:

At this point I was satisfied from an aesthetic perspective, but I did want to see what it looks like with a little more map information. This proved a challenge. There were many options for working with maps, and even multiple options in processing, but I went with unfoldingmaps. This did have the requirement of running my sketch in a very old version of processing (version 2.2.1), but I found it easy to work with.

One challenge I had was that unfolding maps seemed to have interactive use in mind, which did not play with my extremely slow connectPoints function. I was able to solve most problems by handling advanced screen position calculations and line rendering before the main application loads in setup:

```
void setup() {
size(2048, 1536);
screenpoints = new ArrayList<PVector>();
colorMode(HSB, 360, 100, 100, 1);
points = new ArrayList<PVector>();
table = loadTable("data/mis.csv");
// this provider was just my most recent run, outputs were made with varying providers.
map = new UnfoldingMap(this, "Satellite Map", new Google.GoogleMapProvider());
MapUtils.createDefaultEventDispatcher(this, map);
table.setMissingFloat(0);
for (int i = 0; i < table.getRowCount(); i++) {
float[] row = table.getFloatRow(i);
float latitude = row[0];
float longitude = row[1];
if (latitude != Float.NaN && longitude != Float.NaN) {
PVector pos = new PVector(latitude, longitude);
points.add(pos);
}
}
map.zoomAndPanTo(9, center);
for (PVector dp : points) {
Location location = new Location(dp.x, dp.y); // Coordinates for São Paulo, Brazil
ScreenPosition pos = map.getScreenPosition(location);
screenpoints.add(new PVector(pos.x, pos.y));
}
pg = createGraphics(width, height);
pg.beginDraw();
pg.colorMode(HSB, 360, 100, 100, 1);
pg.clear();
connectPoints(screenpoints, 1, 1, 200, pg);
pg.endDraw();
}
```

This done, I’m able to responsively handle whatever happens in the event loop. Here are some results of combining maps with the connectPoints function:

Continental US on an aerial map:

Indiana on an aerial map:

Missouri on a google map:

Thanks for reading!