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

Then I got markers (many thousands)

Map coordinates are set with a x, y notation from 0 to 100. 0, 0 is the top left corner and 100, 100 is the bottom right corner of the map. x=50, y=50 is lat = 0°, lng = 0° (the center of the picture).

To convert from my notation to longitude I use this JS function, it works well :

        function longitude(x)
        {
            var lng = 0
            if (x < 50) // Negative Longitude (West)
            {
                lng = (x - 50) / 50 * 180;
            }
            else // Positive Longitude (East)
            {
                lng = (50 - x) / 50 * 180;
            }
            return lng
        }

But for latitude it don't work because those engines use a Mercator projection and me not.

If someone have the correct formula, it would be greatly appreciated :(

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.
}