Equirectangular map on Web

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 :(



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.


Recent Questions

Top Questions

Home Tags Terms of Service Privacy Policy DMCA Contact Us

©2020 All rights reserved.