Converting ingame coordinates to pixels

[cerus]

Hello! Is there a formula for converting ingame coordinates into pixels (on max zoom level 8)? Any help would be appreciated.

[Koenvh1]

Yes there is. The TileMapInfo.json file should give you the total width and height in in-game coordinates (or at least you can derive them from x1, x2, y1, y2). The tiles themselves give you the MAX_WIDTH and MAX_HEIGHT in pixels (columns * width of a column in pixels). Calculate the relative position, multiply that by the absolute value in pixels, and you have your coordinates in pixels. Works the other way around as well.

Rough example:

        function convertXY(xy) {
            // Values from TileMapInfo.json
            const xtot = x2 - x1; // Total X length
            const ytot = y2 - y1; // Total Y length

            const xrel = (xy[0] - x1) / xtot; // The fraction where the X is (between 0 and 1, 0 being fully left, 1 being fully right)
            const yrel = (xy[1] - y1) / ytot; // The fraction where the Y is

            return [
                xrel * MAX_X, // Where X actually is, so multiplied the actual width
                MAX_Y - (yrel * MAX_Y) // Where Y actually is, only Y is inverted
            ];
        }

[meatlayer]

Hello! You @Koenvh1 can't imagine how much help it has been for the next possible guys who will make maps using this solution. Thank you very much.

[Koenvh1]

You're welcome. The reason I inverted the Y-axis is because both OpenLayers and Leaflet start the Y at the bottom instead of at the top. Your map projection software may differ in this regard, but you'll find that out quickly enough.

[cerus]

Yes there is. The TileMapInfo.json file should give you the total width and height in in-game coordinates (or at least you can derive them from x1, x2, y1, y2). The tiles themselves give you the MAX_WIDTH and MAX_HEIGHT in pixels (columns * width of a column in pixels). Calculate the relative position, multiply that by the absolute value in pixels, and you have your coordinates in pixels. Works the other way around as well.

Rough example:

        function convertXY(xy) {
            // Values from TileMapInfo.json
            const xtot = x2 - x1; // Total X length
            const ytot = y2 - y1; // Total Y length

            const xrel = (xy[0] - x1) / xtot; // The fraction where the X is (between 0 and 1, 0 being fully left, 1 being fully right)
            const yrel = (xy[1] - y1) / ytot; // The fraction where the Y is

            return [
                xrel * MAX_X, // Where X actually is, so multiplied the actual width
                MAX_Y - (yrel * MAX_Y) // Where Y actually is, only Y is inverted
            ];
        }

It's already been well over a year and I'm sorry for not responding sooner, but I would like to thank you as well. This has been very helpful.