Show live location on the map

FiveM Resource Development Discussion
1

Hello, I am developing a warhouse system with React and I have a problem. I am showing a GTA 5 map in the component I created with React, visually as a jpg, but although the location coming from my Lua backend is correct, the locations on the map do not match each other. What should I use to show this kind of live map location? Thank you.

2

This is pretty ambiguous, which locations and in what exact way are mismatched? Provide screenshots or something for best representation.

3 
import React from "react";
import { MapContainer, ImageOverlay, Marker, Popup } from "react-leaflet";
import L from "leaflet";
import "leaflet/dist/leaflet.css";


const customIcon = L.icon({
  iconUrl: `./assets/marker.png`, 
  iconSize: [20, 20],
  iconAnchor: [10, 10],
  popupAnchor: [0, -10],
});

const bounds = [
  [-16000, 16000], 
  [16000, -16000],
];

const transformCoords = (x, y) => {
  const mapWidth = 12340; 
  const mapHeight = 12200; 

  const worldXMin = -16000; 
  const worldXMax = 16000;
  const worldYMin = -16000; 
  const worldYMax = 16000; 

  const mapX = ((x - worldXMin) / (worldXMax - worldXMin)) * mapWidth;
  const mapY = ((worldYMax - y) / (worldYMax - worldYMin)) * mapHeight;

  return [mapY, mapX];
};


const MapComponent = ({ coordinates }) => {
  const parsedCoords = coordinates.split(",").map(Number);
  const transformedCoords = transformCoords(parsedCoords[0], parsedCoords[1]);

  return (
    <MapContainer
      center={transformedCoords}
      zoom={1}
      minZoom={-100}
      maxZoom={100} 
      style={{ height: "100%", width: "100%" }}
      crs={L.CRS.Simple}
    >
      <ImageOverlay
        url="assets/map.jpg" 
        bounds={bounds}
      />
      <Marker position={transformedCoords} icon={customIcon}>
        <Popup>
          I am here.
          <h1> Pozisyon: {transformedCoords.join(", ")} </h1>
        </Popup>
      </Marker>
    </MapContainer>
  );
};

export default MapComponent;

I have such a react component, the data warehouse coordinates from here point to a point on the map. But the problem is, when I send the incoming coordinates to this component (I use leaflet), the coordinate coming from the .jpg API does not mark the correct location on the image. I hope I could explain

4

Ah right, you’ll need to do some math here to figure out the size relation of the in-game map and your JPG, they’re likely not the same and that’s the cause. I wouldn’t know how to do that, though, not a gimmick for any front-end stuff lol

5

I have completely updated the code, my friend. What kind of mathematics is there an example? Would tiles map files work? What do you think?

6

Basically you need to figure out the size relation between the in-game map, used as reference for the coordinates, and your JPG-based map, and design some function to correct the mismatch. Make sure that you’re correctly grabbing the in-game map coordinates and try to find out exactly by how much you’re offset, then figure out a correction mechanism - that’s about all I can say.

2 Likes
7

i think your world map min and max are too big?
x= -4000 puts you on the edge of the water, try reducing those.
make your reference map half the size so you can then make it easier to work out the difference between the two sizes.

1 Like