Syncing GTA V coordinates in Leaflet map

FiveM Resource Development Discussion
,
1

Hi everyone,

I’m currently working on building my own GTA V map viewer that I eventually want to turn into a reusable React component. I know there are several existing map interfaces and resources out there (like TGRHavoc’s project), but most are either outdated, hard to extend, or not React-friendly — so I decided to roll my own.

I exported each tile of the map to PNG using OpenIV, the files look like this:

[minimap_sea_0_0.png, minimap_sea_0_1.png]
[minimap_sea_1_0.png, minimap_sea_1_1.png]
[minimap_sea_2_0.png, minimap_sea_2_1.png]

Each tile is exactly 3072x3072 pixels. I’ve already successfully rendered the stitched map in Leaflet using L.imageOverlay() and CRS.Simple, and the zooming and panning work great.

What I’m stuck on is how to correctly map GTA V’s world coordinates (e.g., X: -4000 to 6000, Y: -4000 to 8000) to the Leaflet coordinate system, so that in-game locations (like 0,0 near Laguna Place) match up accurately on the map.

I’ve read some posts and checked out the code in projects like TGRHavoc’s, but I’m struggling to get a precise result.

If anyone has tips, working math, or example logic for syncing GTA V coords with static Leaflet overlays, I’d really appreciate the help :pray:

Thanks in advance!

1 Like
2

Hey, did you find anything?

3

Hi, to accurately map GTA V’s world coordinates to the Leaflet coordinate system (eg. CRS.Simple), you need a set of reference points where you know both the in-game coordinates and their corresponding positions on the map image. Once you have those, you can use linear regression to convert any GTA coordinate to its Leaflet equivalent.

For a react based livemap you could also take a look at GitHub - charming-byte/simple-livemap: Live map for FiveM servers showing real-time player locations in the browser.

1 Like