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