I have a set of coordinates (more than 100 points) from a JDBC connection and I want to display them on Processing canvas. However, the coordinates are in latitude and longitude, e.g (42.3541, -72.1675), how can I transfer those coordinates into screen coordinates?
I’m thinking to make array contains the coordinates and use the Map() function, will it work?
1 Like
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);
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