Equirectangular map on Web

Question

I plan to build an online map for markers (pins) of a game and I don\'t manage to set the correct latitude of my markers.

Original map is a square of 2048*2048px

Answer 1

Welcome to SO!

If you are using Leaflet, you should specify the map option crs and use L.CRS.Simple:

A simple CRS that maps longitude and latitude into x and y directly. May be used for maps of flat surfaces (e.g. game maps). Note that the y axis should still be inverted (going from bottom to top).

This will avoid the Web Mercator projection, especially the latitude which is a special computation as you figured out (see the linked Wikipedia article for the equation).

Then you are left with correctly mapping your x and y coordinates to your need, especially in respect with your map image.

For instance, assuming you set your map image as:

L.imageOverlay("imageUrl", [[0, 0], [256, 256]]).addTo(map);

(so that it fits the equivalent of 1 tile at zoom level 0)

Then you could have a conversion like:

function longitude(x) {
  return x / 100 * 256;
}

function latitude(y) {
  return 256 - y / 100 * 256; // Still need to revert y.
}