Convert Longitude/Latitude to GTA V coordinates

Question

This problem is very similar to this post from awhile back, but it was never solved. I am trying to create an interactive GTA V Map with the Leaflet JS API. I want to convert the longitude and latitude values on the map to GTA V coordinates. Someone replied to other post saying I would need to make the map use a cartesian coordinate system and linked this page from the Leaflet documentation. I still do not understand how to apply this to my question. Here is a coordinate map of the GTA V map.

Can anyone walk me through this or point me in the right direction?

Answer 1

Leaflet example you are referring to has all the necessary ingredients for your map.

GTA V coordinate system is simple cartesian square grid system, with origin in lower left corner, x coordinates going left and y coordinates going up. Leaflet has L.CRS.Simple coordinate system for that, but here is one thing you have to be careful. Usually coordinates are written in [x, y] order, but Leaflet uses [y, x] notation.

Your map has bottom left corner coordinate [-4000, -4000] and upper left corner coordinate [8000, 6000] in GTA V coordinates, using Leaflet notation. These are going to be bounds of your layer coordinate system when creating image layer.

So your map could the look something like this (where click on map shows current coordinate in popup):

var bottomLeft = [-4000, -4000];
var topRight = [8000, 6000];
var bounds = [bottomLeft, topRight];

var map = L.map('map', {
  crs: L.CRS.Simple,
});

var image = L.imageOverlay('img/gtav_gridded_map.jpg', bounds).addTo(map);

map.fitBounds(bounds);

map.on('click', function (event) {
  var coords = event.latlng;
  L.popup()
  .setLatLng(coords)
  .setContent('[' + Math.floor(coords.lat) + ',' + Math.floor(coords.lng) + ']')
  .openOn(map);
}); 

This way map will be initially shown at zoom level 0 and will show the whole map image, where one pixel in image is one pixel in map view. There will be no zoom out, just zoom in with enlargement of the image.

One way to remedy this is to specify negative minZoom option when defining map, for example:

var map = L.map('map', {
  crs: L.CRS.Simple,
  minZoom: -4
});

If you want to use standard zoom levels, then you can define your custom coordinate system by extending L.CRS.Simple, using L.Transformation to multiply coordinates by shrink factor. This would look something like this (having the same effect as setting minZoom to -4):

var factor = 1 / 16;

myCRS = L.extend({}, L.CRS.Simple, {
  transformation: new L.Transformation(factor, 0, -factor, 0)
});

var map = L.map('map', {
  crs: myCRS
});

P.S: I cannot help myself but add that 'anyone' has left this site, 'somebody else' is gone at the moment, so I took upon myself to point in you in the right direction.