Custom maps from Geoserver

Hello,

I just wanted to lend some help to those that want to get a custom map in traccar-web based on a GIS server. A lot of pieces are missing in the documentation from traccar about custom maps so I want to fill in some blanks with this thread.

We've used geoserver, so install this on a host that is accessible for your users (traccar uses javascript so the geoserver is called from the client).

The custom maps feature in traccar uses openlayers with XYZ. So you'll have to point to a tile server: a TMS or WMTS. This means that the GIS server supplies the map as a set of tiles that are indexed using XYZ. Z is the zoom level. X and Y are indexes (columns and rows). When you request a tile from the server, you only need to specify these three variables. When a client asks for a tile using indexes, the client also needs to know what the coordinates are that correspond to the index. Else you get something from a completely different region then you thought you'd get. The common basis, the translation between index and coordinates, is called the gridset in geoserver. To built the map, traccar requests many of those tiles depending on the zoom level and the size of your window and stitches them together.

(A WMS service is different, to get a map you need to give it the coordinates of the bounding box that you want to visualise. This is more intuitive and doesn't require the client to know about any indexing).

Our problem was that we were not sure what traccar uses as gridset. We didn't even know what projection is used in traccar. Both are not mentioned in the documentation (and probably should be). So we did some research and experiments and we think that the EPSG:3857 default gridset is the right one.

So we defined this gridset, added up to 24 zoom levels (by default, traccar only needs 19) and started adding layers and styles and so on. When you're done with that, you'll want to seed and cache your tiles for fast loading in traccar (so the geoserver doesn't have to create the tiles on the fly).

Then, when you have your server up and running. You'll want to add this to traccar-web. You probably know where you need to enter that URL but since you continue reading, you probably don't know what you need to write in the textbox (in settings/server/custom map URL). Well this is the one we use:

http://[host]:[port]/geoserver/gwc/service/wmts?layer=[workspace]:[layer or layergroup]&tilematrixset=EPSG:3857&Service=WMTS&Request=GetTile&Version=1.0.0&Format=image/png&TileMatrix=EPSG:3857:{z}&TileCol={x}&TileRow={y}

There you go. Hope this helps you some.

Have fun!

Hi Everyone,

I would like to make use of our local map that has been published in our geoserver :

http://202.137.17.152:8080/geoserver/WK_04/wms?service=WMS&version=1.1.0&request=GetMap&layers=WK_04%3ASURFACE_BC_JANUARI_20220126_DH&bbox=117.48981248592432%2C0.755112991574555%2C117.57983654051057%2C0.8579301827848679&width=672&height=768&srs=EPSG%3A4326&styles=&format=application/openlayers

I've tried your syntax, but the map does not appear in Traccar.
This is my syntax:

http://202.137.17.152:8080/geoserver/gwc/service/wmts?layer=WK_04:SURFACE_BC_JANUARI_20220126_DH&tilematrixset=EPSG:4326&Service=WMTS&Request=GetTile&Version=1.0.0&Format=image/png&TileMatrix=EPSG:3857:{z}&TileCol={x}&TileRow={y}

Could someone help me by providing me with a Custom map URL that would work in Traccar. Thank you.

Regards,
Iqbal

This is example:

https://openlayers.org/en/latest/examples/wms-tiled.html

This is where to make changes:

https://github.com/traccar/traccar-web/blob/master/web/app/view/map/BaseMap.js

When you use the posted link in Traccar, what is the http error that you get? In most browsers you can press F12 and go to the network tab to find out

Thank you Anton and Mathias for your kind response.

Mathias,
Here is the error in F12 :
https://postimg.cc/f3hSKs4j

DevTools failed to load source map: Could not load content for http://202.137.17.149:8082/lib/ol/ol.js.map: HTTP error: status code 404, net::ERR_HTTP_RESPONSE_CODE_FAILURE
DevTools failed to load source map: Could not load content for http://202.137.17.149:8082/lib/ol/ol.css.map: HTTP error: status code 404, net::ERR_HTTP_RESPONSE_CODE_FAILURE

I checked in /opt/traccar/web/lib/ol folder and there are no two files in that folder.

Anton,
I've replace BaseMap.js but still got same error.
Could you explain more detail about openlayers? Do you mean there is a snippet in openlayers to testing custom map url before applying in Traccar?

Again, thank you for your kind response.

Regards,
Iqbal

That's an example how to implement it in the code.

Is that the modern UI? I think I also have an issue with our custom map and the modern UI that I haven't worked out yet (I'm still on the old). But I will check tomorrow

Do you see any errors in the Network tab of the F12 menu? Your copy/paste is the console error

It's the classic app.

Hi Mathias,
I see no error in Network tab.
Network tab

Thanks.

I just took a look at our traccar deployment. I see the same console warnings about ol.js and ol.css (and some other stuff that I might need to check out).

You should see http requests to the geoserver in the Network tab of F12. Depending on your zoom level, you should see several calls to different x,y,z tiles. I don't see any in your screencapture. It's as if Traccar is not calling the geoserver at all.

Could you check that you've set the custom map URL in the server settings? Here's a screenshot of our Traccar deployment:
https://www.dropbox.com/s/i6hh588mbdmm29f/2022-01-31%2008-42-00.212.png?dl=0

Here is our custom map url : https://postimg.cc/tZBYCNSc

http://202.137.17.152:8080/geoserver/gwc/service/wmts?layer=bdpit_global:bdpit_global_fix&tilematrixset=EPSG:4326&Service=WMTS&Request=GetTile&Version=1.0.0&Width=780&Height=330&Format=image/png&TileMatrix=EPSG:900913:{z}&TileCol={x}&TileRow={y}

I checked there is no http request to geoserver like you said. Is it because wrong format of the custom map url?

Could I borrow your custom map url, Mathias?
Just for testing purposes.

You can but it won't do you any good as it's behind a company firewall :D

We've also got a geoserver in the cloud. I've created this custom tile server for testing for you:

http://amdm-web.infrabel.be/geoserver/gwc/service/wmts?layer=AMD:Traccar&tilematrixset=EPSG:3857&Service=WMTS&Request=GetTile&Version=1.0.0&Format=image/png&TileMatrix=EPSG:3857:{z}&TileCol={x}&TileRow={y}

Example that gives a tile:

https://amdm-web.infrabel.be/geoserver/gwc/service/wmts?layer=AMD:Traccar&tilematrixset=EPSG:3857&Service=WMTS&Request=GetTile&Version=1.0.0&Format=image/png&TileMatrix=EPSG:3857:6&TileCol=32&TileRow=21

You could also test your geoserver tile service to see if it returns tiles with a similar x,y,z coorinates. geoserver will complain if the x,y,z are out of bounds.

I've added the above custom url to our acceptation traccar service and that seems to work fine. So if you add it to yours, it should work as well. But only tiles in Belgium are return so you won't see a complete map.

Did you do a complete refresh with a cache refresh as well? (Control F5)

I just notice that your geoserver is public and I can test it in our geoserver. When I try it out, it gives me this error in the network panel:

http://202.137.17.152:8080/geoserver/gwc/service/wmts?layer=bdpit_global:bdpit_global_fix&tilematrixset=EPSG:4326&Service=WMTS&Request=GetTile&Version=1.0.0&Width=780&Height=330&Format=image/png&TileMatrix=EPSG:900913:4&TileCol=8&TileRow=5

ExceptionText= Unknown TILEMATRIX EPSG:900913:4

So your custom url is wrong. This is better:

http://202.137.17.152:8080/geoserver/gwc/service/wmts?layer=bdpit_global:bdpit_global_fix&tilematrixset=EPSG:4326&Service=WMTS&Request=GetTile&Version=1.0.0&Width=780&Height=330&Format=image/png&TileMatrix=EPSG:4326:{z}&TileCol={x}&TileRow={y}

However, I think the EPSG should be 3857 in order to properly use it in traccar. So you should add support to that gridset in you geoserver configuration.

But your geoserver seems to work 'fine' because it returns a tile:

http://202.137.17.152:8080/geoserver/gwc/service/wmts?layer=bdpit_global:bdpit_global_fix&tilematrixset=EPSG:4326&Service=WMTS&Request=GetTile&Version=1.0.0&Width=780&Height=330&Format=image/png&TileMatrix=EPSG:4326:12&TileCol=6770&TileRow=2029

However, it might be that your browser doesn't support getting external tiles/images from a HTTP source. Best would be if you could do a reverse proxy on your traccar server or another https supported domain.