Convert geolocation to pixels on a mercator projection image

Question

I am creating an application that allow the user to specify geolocation data, which will then be rendered as a node onto a vector Mercator projection vector image.

So i've bought the following Mercator projection vector image: https://www.vectorstock.com/royalty-free-vector/world-map-gray-mercator-projection-lasercut-vector-23277786

I've found a formula to convert geolocation data to pixels from the following article: Convert latitude/longitude point to a pixels (x,y) on mercator projection

However, the conversion is not correct, and i assume it has to do with the image i use is not a "Normal" Mercator map (85deg) like the one used in the example.

My question is therefore: Is there a way i could achieve what i want with the provided image? if yes, i would like some help with the code provided below. If not, i would really appriciate if you could provide a url for a image (vector, free or for sale) that would work, which has the same style as the one provided.

Thanks alot!

public mapWidth: number = 2476;
public mapHeight: number = 1607;
public node: NodeLocation = { latitude: 8.161366, longitute: 77.454603, x: null, y: null };

public render() {
    let latitudeToRadians = ((this.node.latitude * Math.PI) / 180);
    let mercN = Math.log(Math.tan((Math.PI / 4) + (latitudeToRadians / 2)));
    this.node.x = ((this.node.longitute + 180) * (this.mapWidth / 360));
    this.node.y = ((this.mapHeight / 2) - ((this.mapWidth * mercN) / (2 * Math.PI)));
}

score 0 · Accepted Answer · answered Aug 05 '19 at 08:27

So after doing some testing, i discovered that the image i had was misaligned out of the box. I then opened the reference image in https://github.com/mfeldheim/hermap ("Normal" Mercator map 85 deg) and aligned them together, since both were Mercator projection.

These aligned perfectly.

My image does not contain antarctica, and is therefore rectangular, not square as the reference image. To accomodate this, i set the image-height property to the image width, making the formula work as intended.

The final code looks somthing like this:

public mapWidth: number = 2400;
public mapHeight: number = this.mapWidth
public lat = -12.090940;
public long = 49.2645833;
public x: number;
public y: number;

public calculatePixels() {
    let latitudeToRadians = ((this.lat * Math.PI) / 180);
    let mercN = Math.log(Math.tan((Math.PI / 4) + (latitudeToRadians / 2)));

    this.x = ((this.long + 180) * (this.mapWidth / 360));
    this.y = ((this.mapHeight / 2) - ((this.mapWidth * mercN) / (2 * Math.PI)))
    console.log("node position x / y", this.x, this.y);
}

Convert geolocation to pixels on a mercator projection image

1 Answers1