Skip to content

Commit e101224

Browse files
ChatDisabledChatDisabled
committed
feat(grafana): geomap
1 parent 9eb9c56 commit e101224

1 file changed

Lines changed: 83 additions & 0 deletions

File tree

‎docs/tebex/loki-logging/geomap.mdx‎

Lines changed: 83 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,83 @@
1+
---
2+
title: GTA V Map
3+
sidebar_position: 4
4+
---
5+
6+
Another great feature of Grafana is the ability to visualize your data on a map. This is especially useful for FiveM in case you want to visually see where something happened.
7+
:::info
8+
Out of the box, this resource will log all player disconnections. This includes normal ones and crashes etc. It will also log all explosions on your server.
9+
:::
10+
:::warning
11+
There is also a piece of commented out code to log **all** player's locations every 15 seconds. Depending on your server size, this can lead to a **ton** of logs and thus more than likely degraded performance. Use at your own risk!
12+
:::
13+
14+
![Preview Example](https://media.qbox.re/image/qJeZjKiL8aGnUiXNvzngid9uwqicgpdJ6KR0.png)
15+
16+
## Setup
17+
18+
We have a premade resource for the example above to get you started. You can find it on our [GitHub](https://github.com/Qbox-project/qbx_grafana_map).
19+
You can install it anywhere you want. But in this case just drop it in the `[qbx]` folder with the rest!
20+
21+
Now to actually visualize the logs this resource produces, we will need to make a new dashboard in Grafana.
22+
If you haven't noticed already, the resource also includes a `geomap.json` file. Copy the contents of this file and go to your Grafana Dashboards tab.
23+
In the top right corner you'll see a big blue button `New`. Click it and select `Import` from the dropdown menu. Now paste the contents of the `geomap.json` file into the text area and click `Load` and `Import`.
24+
And there it is! Your brand new geomap dashboard.
25+
26+
<ReactPlayer url="https://media.qbox.re/video/c6wX8jrRqNp3uNgGN_93OCvgrutgIwzy.mp4" controls={true} width='100%' height='100%' loop={true} playing={true} />
27+
28+
## Alternative Usage
29+
30+
Like anything, these are just some examples on how you can use the geomap. Since everything is open source and customizable, you can change the resource to your liking, change the Grafana dashboard, everything! Yippie!
31+
As you may have noticed, there is an event filter at the top of the page. So if you are going to use this dashboard for different use cases, you'll need to add your events in this filter.
32+
33+
1. Enter edit mode in the top right
34+
2. Click on the `settings` button
35+
3. Go to the `Variables` tab
36+
4. Under `Custom Options` add your custom events, separated by a comma
37+
![Preview Example](https://media.qbox.re/image/Jrmbwa8Q-yQKWRJHMJHZ8U7Te9W2HU68MZM7WOAk.png)
38+
39+
Now for actually logging your event, we'll have to add a little something to the `ox_lib` logger function. The world coordinates don't overlap with the geomap coordinates. You have to convert them first,
40+
for this we have exposed a small function in the `qbx_grafana_map` resource to convert them for you.
41+
```lua
42+
local coords = GetEntityCoords(PlayerPedId())
43+
local lon, lat = exports.qbx_grafana_map:gameToMap(coords.x, coords.y)
44+
lib.logger(playerSource, 'custom_event', 'custom_message', ('lon:%s'):format(lon), ('lat:%s'):format(lat))
45+
```
46+
The important part is the `lon` and `lat` values. These are the converted coordinates that you can use in your logger function. Always include these as extra arguments! Otherwise the geomap will not know where the log took place.
47+
48+
## I want a different map!
49+
50+
Luckily for you this is possible and we have 3 maps to choose from! Hover over the map and click on the 3 dots and then `Edit`. Now on the right side under `Basemap layer` you can change the URL template to the following 3 options.
51+
52+
<Columns>
53+
<Column>
54+
![Preview Example](https://media.qbox.re/image/GMl5STcVpsl_vQZA0o0QyidyYkrVWJ5pvrI.png)
55+
</Column>
56+
<Column>
57+
![Preview Example](https://media.qbox.re/image/FcYKuE6-zWQhcZYimn0EhITy3EvdaY3F9GPigbbHKh4Yhbe.png)
58+
</Column>
59+
</Columns>
60+
61+
import Tabs from '@theme/Tabs';
62+
import TabItem from '@theme/TabItem';
63+
64+
<Columns>
65+
<Column style={{ maxWidth: '300px'}}>
66+
<CardHeader>
67+
`https://s.rsg.sc/sc/images/games/GTAV/map/render/{z}/{x}/{y}.jpg`
68+
</CardHeader>
69+
<CardImage cardImageUrl="https://media.qbox.re/image/tUcW4OwJbbSuRa0bvbjUAE4o6b0lEOkulAlTVU1OwShY.png" />
70+
</Column>
71+
<Column style={{ maxWidth: '300px'}}>
72+
<CardHeader>
73+
`https://s.rsg.sc/sc/images/games/GTAV/map/game/{z}/{x}/{y}.jpg`
74+
</CardHeader>
75+
<CardImage cardImageUrl="https://media.qbox.re/image/aIrx9DVQj-Kk9lRRCeP-BubhmKLb_WYI.png" />
76+
</Column>
77+
<Column style={{ maxWidth: '300px'}}>
78+
<CardHeader>
79+
`https://s.rsg.sc/sc/images/games/GTAV/map/print/{z}/{x}/{y}.jpg`
80+
</CardHeader>
81+
<CardImage cardImageUrl="https://media.qbox.re/image/6la89HhcEFqsRMTcAbREQlWrahcyvs6YXffRPBeZwFhn3.png" />
82+
</Column>
83+
</Columns>

0 commit comments

Comments
 (0)