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!