Allow the user to track a specific players movement.

For example, if they "track" Jordan, the map should zoom in to their marker and keep the player marker in the center of the map

At the moment the documentation is one page.

The readme.. That's it. Instead the documentation should be split up into digestible files.

For example:

• config.md - Contains information about configuring the interface (since it's pretty extensive).
• faq.md - Frequently asked questions about the interface. On the resource, maybe this should also contain information about running npm/yarn manually if it fails to start on it's own?

Etc.

@KjayCopper came up with a feature that I think would be pretty cool to add to the interface. Parameters!

The idea is that the end-user will be able to configure the behaviour of the interface (or at least a little bit of configuration) by utilising parameters passed to it. Some examples include:

Tracking a player (GET)
Enable/Disable Blips (GET)

You get the idea.

Hey!

I want to integrate a system so that I can set a waypoint in the livemap that will be set for a user selected with a dropdown and will set a GPS route in-game for ONLY that user who is selected, so kinda the same system as tracking a player but then with setting a waypoint for a player (Probably with a SET_WAYPOINT native?). Is this something that can be made in the existing interface or can someone give me some information on how I can do it myself?

Thanks in advence :)

This is a suggestion no error.

When accessing the interface via chrome, use must click security warning icon on URL bar and then click "Load unsafe scripts" without doing this the interface cannot connect with the FiveM resource and will not function.

When a player logs on, the count accurately goes up by one. However, when the player disconnects/logs off, the player count does not update. Refreshing the map does properly update the count.

At the minute, it's kind of an arse to changing the configs to accommodate for reverse proxy configurations.

This should be amended by allowing the user to define an extra bit in their server array to allow the interface to use the proxy. This will also allow the user to easily set up the map on SSL (well, if they set up the reverse proxy correctly).

If this extra bit of the config isn't found, fallback onto the previous URLs generated.

Something like the following:

    public static $servers = array(
        "Test server" => array( // The name of the server (make unique)
            "ip" => "127.0.0.1", // The IP (if on something different to the one in the config)
            "fivemPort" => "30120", // The fivem port
            "socketPort" => "30121", // Set to the port that you set in the "socket_port" convar (if different to the one in the config)
            "liveMapName" => "live_map", // Set to the resource's name (if different to the one in the config)

            "reverseProxy" => array(
                "socketUrl" => "wss://some.server", // If we have a revers proxy server over at some.server that connects to the insecure fivemserver
                "blipUrl" => "https://some.server/some_blips.json"
            )

        )
    );

Then, the blipUrl and socketUrl would be generated using the new "reverseProxy" or, fallback to the current URL scheme.

When toggling the "Show Blips" on and off, the interface crashes..

Maybe add a feature to allow selection of people when they're bunched up on the map and it's difficult to click their icon directly.

So, it's known that markers aren't very accurate. Well. They are accurate (they used to be miles away from their actual location when I originally ported over to Leaflet) but, not 100% accurate.

So, I'm putting this issue up so people can see that I know about the "issue" (I don't even want to call it that but, whatever) and as a place for people to discuss ideas on how to fix etc.

As of writing this, 828eefc is the current code used to calculate the marker's positions. I'm pretty positive that the issue's with the accuracy are to do with the differences between the map used in the interface

and the reference map I've been using for the coordinates

There's also this resource which, I'm too stupid to understand.

Hi,
My blips dont appear in the live_map

Site:http://ptbk.topkiller.pt/livemap/

Tanks,
TopKiller

Allow users to filter out players, kind of like how they do currently with blips.

Maybe something like, only show certain icons and/or a custom key value pair.

For example, the server sets a "job" key pair and the user could filter the players based on their "job" values.

Would get a little complicated for stuff like this but, something like a dropdown with the keys to filter and a textbox that they can enter the value into, should suffice.

Something like the following would only show Unarmed players on the map.

Failed to fetch,

I set up my config this is my config, and i renamed it to config.json, also put it in var/www/html cause I am using apache to host it.

{
"debug": false,
"tileDirectory": "images/tiles",
"iconDirectory": "images/icons",
"showIdentifiers": false,
"groupPlayers": true, // Wether the map should group players together into "clusters" or not.
"defaults": { // If a server doesn't have the key-value set, it will fallback to these values
"ip": "194.34.229.114", // Make sure this is the PUBLIC IP of the FIVEM server
"socketPort": "30121" // Set to the port that you set in the "socket_port" convar (if different to the one in the config)
},
"servers": {
"Default server 1": {}, // The config values are above, no need to write them again
"Only IP changed": { // Only the IP is different for this server. So, change it
"ip": "194.34.229.114"
},
"Everything is different": {
"ip": "10.10.0.1",
"socketPort": "60121"
},
"Reverse Proxy Example": {
"reverseProxy": { // If you have knowledge on how to set up a "reverse proxy" for your webserver and want to keep the map on a secure connection, set the values below.
"socket": "wss://example.com", // The secure, proxied url for the socket connection
"blips": "https://example.com/server1/blips.json" // The secure, proxied url for the blip file
}
}
},
"maps": [
{
"name": "Normal",
"url": "{tileDirectory}/normal/minimap_sea_{y}{x}.png",
"minZoom": -2 // Set lower to zoom out more
},
{
"name": "Postal",
"url": "{tileDirectory}/postal/minimap_sea{y}_{x}.png",
"minZoom": -5 // Since this is 3 times bigger, just remove 3 from the default minZoom
}
]
}

Everything works for me. I have port-forwarded my server, and the 30121 port. It work's completely fine, just not for other people. Is there any solution to this? Also I can't really code well, could you maybe send the client.lua just that no-one else will show up else than people in policecars? I know you haven't really made this for RP servers, but I would really like to could do it. I can't really code:P

The interface will automatically select the system language for no reason. This bugs the interface and will not connect to the resource in the server. Can I manually set the standard language and lock it?

Kind regards,

Mailootje

https://github.com/TGRHavoc/live_map-interface

Currently, the localcache is assuming the player's name is unique.. This isn't the case and the map should use player identifiers instead.

http://map.313eow.com/ - new version

http://map.313eow.com/2 - old version

same server.

The new version is showing 2 users online when only myself is online. In the older version it doesnt show this.

Hello, how can i change the language of the map?

Thanks <3

Currently, I use this on a server that can have 20-30 players running latest Linux stable build.
Web server and Gameserver are on different servers as I don't have a web server option on the FiveM server. I'm running the latest stable build of the live map resource and web pages.

I can't 100% confirm, but when it is busy sometimes a person loading the live_map can cause 30-70% of the players to timeout. I've not been able to replicate it every time, but on 2 occasions where I've got someone to load the live_map having it not being loaded for 10 minutes or so caused timeouts on most of the server within 5 seconds of it being clicked. Unsure why.

Secondly, there are times where all the markers stop moving although page still shows connected, even after refreshing the page. A restart of the live_map resource and then restart of the web page fixes it. I'm unsure if the more people looking at the live map can expedite how quickly this bug is? Again it's random and difficult to replicate. Sometimes I can go through 2 hours of it not doing this, sometimes it can happen within minutes of restarting.

I appreciate this is a bit of a shit, vague report - is there anything I can do that may indicate to me what is causing the problem? FiveM logs show no errors at all. Server performance never exceeds 30% RAM/CPU and no other lag exists on the server. If there's anything I can do to obtain more information for you do let me know.

PS - I've not a feckin clue how to add icons/badges to this post - Github newbie.

Have the resource use the IS_PED_IN_ANY_POLICE_VEHICLE native to allow the map interface to display players in police vehicles as a different color car icon (such as blue). With this also including settings so that you can have the map display only certain things. Example: All Players, Only Players in Cars, Only Players on Foot, Only Police Vehicles, etc.

https://i.gyazo.com/dcb5bf8cb3bd3f69ca64538188cb6620.png
https://i.gyazo.com/609c241321dffc4a9792f2f150f4b386.png

The list of players is occasionally populating numerous times with the same player. Refreshing the page fixes this. Unable to do anything to reproduce at the moment. Just load the page and after some time (anything from a minute to 15 minutes) I will notice this. The player count also appears incorrect at times to what it actually is (eg in image 2 it shows 3 players, when in fact there is only two - confirmed by looking at players.json on the FiveM server).

Also, sometimes when this happens the marker duplicates (with one being frozen, while the other is moving with the player). It doesn't happen all the time. Also, some players no longer on the server remain on the map.
https://i.gyazo.com/d171ec53a45f9f16137eeb2a3f53fba1.png

I'm running the latest version of Chrome and on Windows 10. Let me know if there's anything else I can offer/look at to help you figure out the issue?

A nice HTML file that allows users to easily generate the right JSON for their config file.

At the moment the JS is a fu**ing mess.

I wrote it and even I have trouble finding where stuff is.

The refactor should make this code more approachable.
Each file should only contain code related to what the file is, instead of the current "put everything everywhere".

If i install the interface and the resource i get this error. i can't fix it :|

Error loading config, failed to fetch

I am using this livemap on a http webserver and I've configured it correctly into the config on the webserver.

{
    "debug": true,
    "tileDirectory": "images/tiles",
    "iconDirectory": "images/icons",
    "showIdentifiers": true,
    "groupPlayers": true, // Wether the map should group players together into "clusters" or not.
    "defaults": { // If a server doesn't have the key-value set, it will fallback to these values
        "ip": "IP", // Make sure this is the PUBLIC IP of the FIVEM server
        "socketPort": "30121" // Set to the port that you set in the "socket_port" convar (if different to the one in the config)
    },
    "servers": {
        "Server 1": {} // The config values are above, no need to write them again
    },
    "maps": [
        {
            "name": "Normal",
            "url": "{tileDirectory}/normal/minimap_sea_{y}_{x}.png",
            "minZoom": -2 // Set lower to zoom out more
        },
        {
            "name": "Postal",
            "url": "{tileDirectory}/postal/minimap_sea_{y}_{x}.png",
            "minZoom": -5 // Since this is 3 times bigger, just remove 3 from the default minZoom
        }
    ]
}

This is my config setup on the webserver and my server.cfg convar for the resource looks like this:

set socket_port 30121
set livemap_debug "all" # "[all]" 'trace', 'debug', 'info', 'warn', 'error', 'fatal', 'off'
set blip_file "server/blips.json"
set livemap_access_control "*"

ensure livemap

and it's setup at the top of the resource section of the .cfg

I have 0 clue why it's not showing players but it connects. It worked about a week ago, then I updated the resource from the new github then there was an update here for the interface. Can someone help?

I am not able to see my server in the Select a Server list. In addition, when I try to press Connect in the control panel, it gets stuck on "Reconnecting". I am hosting the web interface on XAMPP with Apache. Here is my config.json: https://pastebin.com/PqVrc2kh. My IP and FiveM port are filled in correctly.

it says Error getting config, cannot load map! Multiple Choices

I only speak one language fluently so, I need help with the translations for LiveMap.

At the moment, there's 4 languages (Russian, French, Spanish and English) that can be used.
They have been translated using Google Translate so, probably not accurate.

If you're up to it, look at the language file you're comfortable with (i.e ru.json for Russian) and make sure it's accurate.
If there's any mistakes or you think you can improve it then, please do so!

The language files are located at https://github.com/TGRHavoc/live_map-interface/tree/develop/translations

Please make sure your commits follow the commit message format.

Examples:
translation(fr): update connection.title
translation(ru): add credit

Overhaul the interface. Making sure it's atleast 90% mobile compatible.

At the moment, the interface works on mobile but, it's not very pleasant.
I want people to be able to use the interface on mobile if they want (i know the majority of users are on desktop and this is probably a moot point).

I am currently able to access the livemap if i do a direct ip on non https. However the whole site is on https and livemap will not load.

At the moment there's no tests. I'm just opening up the webpage on a local server and clicking around.

It would be nice to have tests to test the various modules and the interaction they have with the DOM.

Jest has a VDOM that we can use for the DOM interaction testing.

Allow the user to select which blips to show/hide.

Hi!

Is there a way to insert blips into blips.json using a web request?

I want to insert blips which are defined in a control panel.

Hello. I am able to get the locations Icons but I am not able to get the player blips to work I am getting the error

" Socket error! There was an error with the socket connection: Unknown reason (Server is probably down)"

But now nothing is showing up when ever I changed my config. Anyway you can help me out if needed we can add each other on discord

If you zoom in between 2-4x on the map, some spots of the map disappear around where you're zoomed in at.

So, currently the amount of images needed to get the map working is ridiculous. Maybe with the new map API re-write we can use the images from GTA itself rather than relying on the current set of images.

It would also allow people to make their own map images (using the GTA ones as a template) and add it to the map much easier.

For example, if they wanted the "post code" map all they would have to do is export the texture and put them in a folder.

It would also reduce the image size from 200+ MB (megabytes) to about 5 MB.

Looks like Google is cracking down on Maps API key-less use.

https://cloud.google.com/maps-platform/user-guide/account-changes/

See TGRHavoc/live_map#54 for original inspiration for this feature request.

Users should be able to configure LiveMap using URL parameters.

Some examples:

• http://livemap/#server=Some+server - Should show the player's for "Some server" if it's in the config.
• http://livemap/#filterOn=Property&onlyShow=Value - Should automatically apply the filter for the value.

Etc. Etc.

Maybe even a "Share this map/config" that will apply the current settings and give the user a URL they can share.

Might do this after the big refactor.

Originally posted by @TGRHavoc in TGRHavoc/live_map#65 (comment)

hey i download and follow all the steps to the point and the web map cant see the server
i get this error ever time

Your github repo is showing as still 2.2.1, meanwhile, I have 2.2.3 which is giving me a "An update is available, please download it HERE" message on the map.

At the moment there's reference to a mysterious "reverse proxy" in the documentation. There's not really any more information on how to set it up (a part from If you’re using NGINX, the following should be useful. which, may be overlooked).

I think a new file should be created (revserse_proxy.md) which should tell the users how to set up their webserver to act as a reverse proxy.

This should have examples in it for the following webservers:

• NGINX
• Apache
• IIS (Internet Information Services) by Microsoft
• LightHTTPD
• Caddy

Maybe we should also add a link to the Github issues for if they want to request a webserver or, if to the repo itself for if they want to add it? I don't know what the best practice is for this so, ideas welcome.

There's only two things that need to be proxies for a secure interface.

socket:
This should be a reverse websocket connection that points to the FiveM IP and the configured socket port.

blips:
This should be a reverse proxy (normal HTTP) that points to the /blips URL (http://fivem_IP:socket_port/blips)

Marking as good first issue as you don't need to know anything about the project, just some basic research skills for the reverse proxy examples.

Some people don't have a webserver that allows PHP scripts to run. Maybe instead, we should use good ol' HTML files instead.

index.html - Production html file with minified JS and CSS.
debug,html - Debugging html with references to the JS and CSS files (for easy debugging).

Hi,

The livemap will not get connected to the server when the server is on http://prntscr.com/iy15zx

I clicked on reconnect but also didn't work

Please help

Would be nice to have the road names displayed on the map when the user zooms in

Really like the design and what you've done with 3.2.0.

Is it possible, or if not could it be possible to toggle the grouping of the markers? I can see why it was requested and implemented but individually for our server we would prefer to see the individual markers.

The interface overall certainly feels a lot quicker and response compared to the Google Maps engine.

I am having an issue with ambulances and firetrucks where they are recognized as unknown vehicles and not as either an ambulance or firetruck.

For some reason when I start up the server and when I try to join I get the message.
And there is no error in the logs that I can find.

Would be nice for new people to see what the interface should look like.

Maybe even including some GIF's of the interface being used and the real-time positions of the players.

As of right now, the map is usable but certain features are disabled due to Google's crack down on keyless use of their APIs.

So, instead of making people (potentially) pay money to Google just to use the map, I want to migrate to a (preferably) open source alternative.

I've had a look around and at the moment, OpenLayers seems like the best alternative.

At the moment people have to configure the map via the config.php file. I think this is causing confusion with some people thinking the IP's can be local addresses (e.g. 127.0.0.1).

Instead, maybe the config should be in a JSON/YAML file.

Thoughts?