Convert coordinates to corresponding place in table

Question

I have a table with data of an area from west europe. I want to convert coordinates to a value in this table. The problem is similar to this question, but I'm not sure how to work this out as I've never done something similar like this.

Let's say I want to get the value in the table for Amsterdam (lat: 52.35, long: 4.83). How would I convert that into the proper x and y values in the table? I first tried linear interpolation but found out that doesn't work because of the projection. I know of proj4js but I'm unsure how to define these values for the projection.

Per the docs I'm guessing I need to do something like this:

const firstProjection = "something something";
const secondProjection = "WGS84"; // ?
proj4(firstProjection, secondProjection, [52.35, 4.83]);
// [x?, y?]

Some calibration values I have are:

Row (x) Column (y)  Latitude    Longitude
173     157         54.429      2.352    
273     530         53.276      7.694    
245     412         53.640      6.038    
464     545         51.624      7.546    
262     130         53.663      1.903    
226     223         53.939      3.293    
236     563         53.555      8.244    
244     208         53.790      3.058    
248     289         53.710      4.240    
206     361         54.022      5.348    
233     372         53.779      5.472   

Answer 1

There is no exact way to convert the surface of a sphere to a plane, particularly a rectangular one. There are a number of approximate solutions which are explored in answers to this question.

If the area you are looking at is small you can use the approximation given there by MvG:

x = r * longitude * cos(φ0)
y = r  * latitude

Where cos(φ0) = the aspect ratio and φ0 is a latitude close to the center of your map.

I also found a solution using UTM which you can find here. Lower on the page they give their underlying code.

Answer 2

Your "projection" will be done in two steps:

1. From WGS84 to some projected Coordinate Reference System (most common is Web Mercator GMaps are using https://en.wikipedia.org/wiki/Web_Mercator_projection). So it will be from Epsg:4326 to Epsg:3857.

const projection = proj4("EPSG:4326", "EPSG:3857");

const geographicCoordinates = [52.35, 4.83]; // lat, lon
const cartographicCoordinates = projection.forward(geographicCoordinates);

2. Project x and y values from cartographic coordinates to screen coordinates using transformation:

xScreen = (cartographicX - cartographicXMin) / (cartographicXMax - cartographicXMin) * (screenXMax - screenXMin);
yScreen = (cartographicY - cartographicYMin) / (cartographicYMax - cartographicYMin) * (screenYMax - screenYMin);

To get cartographic X and Y min maxes use the same transformation.

You need to note, however, that Mercator projection expands areas endlessly closer the latitude is to the poles which means one must not use this projection if the coordinates are in the north (Greenland, for example). For these areas you need to use conic projections.