Marker coordinates not correct leaflet

Viewed 2227

I am creating a Admin/User Control Panel of a game called ArmA 3 using a mod called Exile. Exile places X,Y (Z aswell) coordinates in a database. I am using PHP to grab those coordinates and place a marker where the player is located using leaflet.js. I am using a custom image (15360x15360).

Problem: Lets say that I'm at position (6340, 7801) (x,y). The marker will be off from where I'm actually located (see imgurs below)

(ingame location) https://imgur.com/a/Nky9Oqf

(leaflet marker) https://imgur.com/a/jFco4V5

PHP code + leaflet.js:

<?php
require_once "application.php";
?>
<html lang="en">
    <head>
        <title>Search</title>
        <link rel="stylesheet" href="leaflet.css">
        <meta charset="UTF-8">
    </head>
    <body>

<?php

if(isset($_GET["q"])) {
    $uid = $_GET["q"];

    $UCP = new UCP("localhost", "root", "root", "testdb", "3306");
    $r = $UCP->getPlayer($uid);
    if($r) {
        $coords = $UCP->getPlayerCoords($uid);
    }
}

?>

<div id="map" style="height: 100%"></div>

<script src="js/leaflet.js"></script>
<script>

var mapMinZoom = 0;
var mapMaxZoom = 4;
var map = L.map('map', {
    minZoom: mapMinZoom,
    maxZoom: mapMaxZoom,
    center: [15360, 15360],
    crs: L.CRS.Simple
});

var w = 15360,
    h = 15360,
    url = 'http://localhost/images/Chernarus_Isles_nogrid.png';

var southWest = map.unproject([0, h], mapMaxZoom);
var northEast = map.unproject([w, 0], mapMaxZoom);
var bounds = new L.LatLngBounds(southWest, northEast);

map.fitBounds(bounds);

L.imageOverlay(url, bounds).addTo(map);

<?php

    if(isset($_GET["q"])) {
        if($r) { ?>
            var pos_x_player = Math.round(<?php echo $coords["pos_x"]; ?>);
            var pos_y_player = Math.round(<?php echo $coords["pos_y"]; ?>);
            var p_loc = map.unproject([pos_y_player, pos_x_player], mapMaxZoom);
            L.marker(p_loc).addTo(map).bindPopup('Player Location');
            <?php

        }
    }

?>
</script>

It successfully connects to the database and grabs the coordinates but leaflet is always off from where I am actually located.

Any help would be appreciated. If I missed anything please let me know :)

2 Answers

Welcome to SO!

Leaflet map's unproject first parameter is a Point object, which takes coordinates in order [horizontal, vertical]:

https://leafletjs.com/reference-1.3.4.html#point-factory

Expects an array of the form [x, y]

Therefore the incorrect position of your Marker is very probably just because you passed your coordinates in the incorrect order:

map.unproject([pos_y_player, pos_x_player], mapMaxZoom)

...should have been:

map.unproject([pos_x_player, pos_y_player], mapMaxZoom)

Point objects are measured in pixels, so yes, the source image and your image must be identical to get precise coordinates in this case without modification. Once you determine the difference in size, you can make a function to convert the original coordinates to coordinates for your map.

Related