# Lat long to screen coordinates from database

**URL:** <https://discourse.processing.org/t/lat-long-to-screen-coordinates-from-database/17434>\
**Category:** Coding Questions\
**Created:** [January 29, 2020, 10:26pm UTC](https://discourse.processing.org/t/lat-long-to-screen-coordinates-from-database/17434 "2020-01-29T22:26:10Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![katniss0809](https://avatars.discourse-cdn.com/v4/letter/k/5f8ce5/32.png) [@katniss0809](https://discourse.processing.org/u/katniss0809)\
**Post date:** [January 29, 2020, 10:26pm UTC](https://discourse.processing.org/t/lat-long-to-screen-coordinates-from-database/17434/1 "2020-01-29T22:26:11Z")

</div>

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?

---

<div class="post-metadata">

**Author:** ![jeremydouglass](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/jeremydouglass/32/20_2.png) [@jeremydouglass](https://discourse.processing.org/u/jeremydouglass)\
**Post date:** [February 20, 2020, 6:56pm UTC](https://discourse.processing.org/t/lat-long-to-screen-coordinates-from-database/17434/2 "2020-02-20T18:56:41Z")

</div>

> [@katniss0809](#):
>
> the coordinates are in latitude and longitude, e.g (42.3541, -72.1675), how can I transfer those coordinates into screen coordinates?

Yes, you can use `map(value, start1, stop1, start2, stop2)` [map() / Reference / Processing.org](https://processing.org/reference/map_.html)

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.

> **[Equirectangular projection](https://en.wikipedia.org/wiki/Equirectangular_projection)**
>
> The equirectangular projection (also called the equidistant cylindrical projection or la carte parallélogrammatique projection), and which includes the special case of the plate carrée projection (also called the geographic projection, lat/lon projection, or plane chart), is a simple map projection attributed to Marinus of Tyre, who Ptolemy claims invented the projection about AD 100. 
> The projection maps meridians to vertical straight lines of constant spacing (for meridional intervals of const...

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:

```auto
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:

```auto
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.

```auto
/**
 * 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.

```auto
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.

```auto
grid(7, 13, width, height);

```

 ![SampleMapEquiRect--screenshot](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/f/fad6545e313eeea9464cf508a3ec9f86a13885f0.jpeg)

Another option is to use the UnfoldingMaps library for Processing (the [beta version for Processing 3](https://discourse.processing.org/t/how-to-get-and-install-unfolding-map-v0-9-9beta-library/7363/5)). This gives you access to a rich toolkit for dealing with tiling, zoom, orientation, different projections (e.g. Mercator) et cetera.