I am converting game coordinates to map coordinates, I have custom tiles set-up and the map works.
I am showing player vehicles on a leaflet map(same problem with mapbox), the coordinate conversion for x-axis is correct(visually) but the y-axis(Latitude) is incorrect.
I am trying to convert game coordinates which range from 3000 to -3000 on X and 3000 to -3000 on Y The Map coordinates I believe range from 180 to -180 on X - Longitude and 85 to -85 on Y - Latitude
Currently I am using this formula to calculate its coordinates on map, But I cant figure out what I'm doing wrong here.
I put
u
dynamic so i can easily test it..Notice that return value has x and y inverted because that is just how leaflet is...
function getLatLngFromPos(x, y, u = 85) {
height = 3000; // of the game map
width = 3000; // of the game map
return [(y / height) * u, (x / width) * 180];
}
getLatLngFromPos(1482.47 , -1731.9)
-> [-49.0705, 88.9482] Should be: ~[-71.519235, 88.813477]
getLatLngFromPos(1378.4,-1876.25)
-> [-53.16041666666666,82.70400000000001] Should be: ~[-73.758964, 81.958008]
If You need the tiles here is the code to that
http://145.239.116.170/app-assets/images/maptiles/sanandreas.{z}.{x}.{y}.png
Note: MaxZoom is '4'
The Car icon on the map should go to the arrow, and there is extra information like the center of the map. (Also it is repeating on X axis which i want to remove)
ScreenShot: (https://i.ibb.co/HNHgRLC/Shared-Screenshot.jpg)
I am thinking the Y axis on these maps has some kind of acceleration towards the edges... This is due to the Default Projection of Leaflet Also there is an implementation of this for Google Maps API at (https://github.com/ikkentim/SanMap/blob/master/js_src/js/SanMap.js) But Google Maps is being a douche by charging money...
I am assuming now that I will have to create some kind of projection like in SanMap implementation, How can I create my own Projection for Mapbox or Leaflet?
I'm working on the same problem, this is not the solution yet, but it might get you on the right track. What I tried was to use CRS instead of leaflets Earth-like projection. Just change w,h and the tileSize in tileLayer and it should be good to go. Also 0,0 will be in the top left corner.
Okay, I've found the solution with my method. Since the tilesize is 256 our mapsize is 256x256. In-game coordinates go from -3000,-3000 to 3000,3000 which makes it a 6000x6000 coordinate system. You get the scale by dividing the size of the map with the tilesize we have and after that we divide x with the scale. We correct the coordinates by adding 128 to x and subtracting -128 from y. After that we switch the coordinates when we return it.
function fixCoords(x,y) {
x=x/(6000/256);
y=y/(6000/256);
x = x+128;
y = y-128;
return [y,x];
}
var w = 32768;
var h = 32768;
var mapMinZoom = 1;
var mapMaxZoom = 4;
var _map = L.map('mapid', {
maxZoom: mapMaxZoom,
minZoom: mapMinZoom,
crs: L.CRS.Simple,
zoomControl: false,
attributionControl: false,
detectRetina: true,
});
var _mapCenter = _map.unproject([w/2, h/2], mapMaxZoom);
_map.setView(_mapCenter, 2);
var _tileLayer = L.tileLayer(
'http://145.239.116.170/app-assets/images/maptiles/sanandreas.{z}.{x}.{y}.png', {
minZoom: mapMinZoom, maxZoom: mapMaxZoom,
bounds: _mapBounds,
continuousWorld: true,
noWrap:true,
tileSize:256,
crs: L.CRS.Simple,
detectRetina:false,
}).addTo(_map);
var marker = L.marker([0, 0]).addTo(_map);