Lat long to screen coordinates from database

Processing Coding Questions
2

Yes, you can use map(value, start1, stop1, start2, stop2) map() / Reference / Processing.org

Keep in mind that transforming lat/long to coordinates is a 3D-to-2D projection and will involves distortion – specifically, it creates an equirectangular projection.

So, if these are world coordinates and you want to make them legible, you may want to back them with an equirectangular map. In the simplest case you are showing the whole world map (lat -90 to 90, lon -180 to 180) and using it to fill the whole screen.

So, if you define a function like this:

void mapPoint(float lat, float lon, float width, float height) {
  float x = map(lon, -180, 180, 0, width);
  float y = map(lat, 90, -90, 0, height);
  ellipse(x, y, 20, 20);
}

…then it will render correctly if you call it like this:

mapPoint(42.3541, -72.1675, width, height);

Here is a simple example drawn from a NASA image. It loads the map image then renders the coordinates (42.3541, -72.1675) as a marker. Bam – Boston.

/**
 * SampleMapEquiRect
 * 2020-02-20 Jeremy Douglass - Processing 3.4
 * https://discourse.processing.org/t/lat-long-to-screen-coordinates-from-database/17434/2
 **/
PImage map;
void setup() {
  size(800,400);
  map = loadImage("163773711_d17bb1055f_c.jpg");  // NASA image, from https://www.flickr.com/photos/hangglide/163773711/
  stroke(255, 128);
  fill(255,0,0,64);
  noLoop();
}

void draw() {
  background(map);
  mapPoint(42.3541, -72.1675, width, height);
}

void mapPoint(float lat, float lon, float width, float height) {
  float x = map(lon, -180, 180, 0, width);
  float y = map(lat, 90, -90, 0, height);
  ellipse(x, y, 20, 20);
}

You can also draw a regular grid on the map.

void grid(int latCount, int lonCount, float width, float height) {
  pushStyle();
  stroke(255, 128);
  for(int i=0; i<latCount; i++) {
    float y = (height-1)*(i/6.0);
    line(0, y, width, y);
  }
  for(int j=0; j<lonCount; j++) {
    float x = (width-1)*(j/12.0);
    line(x, 0, x, height);
  }
  popStyle();
}

Because the projection is an equirectangle any regular grid can be used. Here is one with 30° intervals.

grid(7, 13, width, height);

SampleMapEquiRect--screenshot
SampleMapEquiRect--screenshot800×400 135 KB

Another option is to use the UnfoldingMaps library for Processing (the beta version for Processing 3). This gives you access to a rich toolkit for dealing with tiling, zoom, orientation, different projections (e.g. Mercator) et cetera.

1 Like