Web-Based Live Map (Interactive)

FiveM Resource Development Discussion
, , ,
1

Hey everyone. I’m working on a CAD/MDT using https://bubble.io. My goal is to have in-game integration, and I know how to create everything I want except for a live map. My plan is to have the unit’s postal and location displayed as text (which I know how to do), but also the ability to open an interactive live map and show the unit’s location on there, too. I am completely stuck and would appreciate any help offered.

Thanks!

2

There’s a handful of free and open-source resources that do this, I would review those and take inspiration.

4

I’m not very familiar with the Bubble platform, but I believe you could approach it like this:

  1. Create an HTTP handler. There are several HTTP wrappers for FiveM available on GitHub that could simplify this process for you.
  2. Write some Lua code to send the locations of the elements you want to track—whether they’re players, vehicles, or something else. This data would be encoded as JSON.
  3. Have the Bubble app make a request to the specific resource URL in this format:
    http://<server-ip>/<resource-name>/<function>.This should return the required data. In your Bubble app, you’ll need to handle decoding the JSON response and use it for display. For instance, you could integrate the data into a map using Leaflet. There are even GTA V map packs available for Leaflet that you can leverage.
5

Thanks so much!