Map Overlay

Dear Traccar community,

I try to add Custom Overlay, when i try the OpenSeaMap and OpenRailwayMap it's working as it's integreated by default.

Now, when i try to add a Custom Overlay it's not working with Traccar version 5.12 and 6.2.
I try to add the OpenSeaMap Url finded with F12 and Network Logs from my browser.
I try to add this URL as an example to validate the feature and to understand the good configuration URL.

The URL that is working with OpenSeaMap integreated.

https://tiles.openseamap.org/seamark/18/252271/147724.png

But when i want to use this same url as custom overlay it's not working with this url

https://tiles.openseamap.org/seamark/{z}/{y}/{x} 
https://tiles.openseamap.org/seamark/{z}/{y}/{x}.png

So Openseamap is working with the default option, but when we use it as a custom overlay it's not working.

The errors in Console are :

index-KtPqO9zj.js:292 Error: sources.:r1:.tiles: array expected, string found
    at Object.ds [as x] (index-KtPqO9zj.js:293:9632)
    at mr (index-KtPqO9zj.js:293:356696)
    at ha._validate (index-KtPqO9zj.js:293:375929)
    at ha.addSource (index-KtPqO9zj.js:293:365756)
    at Kn.Map.addSource (index-KtPqO9zj.js:868:180676)
    at index-KtPqO9zj.js:871:55459
    at WD (index-KtPqO9zj.js:40:24283)
    at pg (index-KtPqO9zj.js:40:42409)
    at index-KtPqO9zj.js:40:40726
    at R (index-KtPqO9zj.js:25:1659)
fire @ index-KtPqO9zj.js:292
ds @ index-KtPqO9zj.js:293
mr @ index-KtPqO9zj.js:293
_validate @ index-KtPqO9zj.js:293
addSource @ index-KtPqO9zj.js:293
addSource @ index-KtPqO9zj.js:868
(anonymous) @ index-KtPqO9zj.js:871
WD @ index-KtPqO9zj.js:40
pg @ index-KtPqO9zj.js:40
(anonymous) @ index-KtPqO9zj.js:40
R @ index-KtPqO9zj.js:25
re @ index-KtPqO9zj.js:25Understand this error
index-KtPqO9zj.js:292 Error: layers.:r1:: source ":r1:" not found
    at Object.ds [as x] (index-KtPqO9zj.js:293:9632)
    at mr (index-KtPqO9zj.js:293:356696)
    at ha._validate (index-KtPqO9zj.js:293:375929)
    at ha.addLayer (index-KtPqO9zj.js:293:367304)
    at Kn.Map.addLayer (index-KtPqO9zj.js:868:185129)
    at index-KtPqO9zj.js:871:55484
    at WD (index-KtPqO9zj.js:40:24283)
    at pg (index-KtPqO9zj.js:40:42409)
    at index-KtPqO9zj.js:40:40726
    at R (index-KtPqO9zj.js:25:1659)

Thank you in advance for your help.

Good catch. This should fix the issue:

https://github.com/traccar/traccar-web/commit/47e2ca4db81183616a5aacb2c41fc0ad3da5e44b

Thanks Aton i confirm it's working with your fix

What i have to do to apply the modification :

sudo apt install npm
git clone https://github.com/traccar/traccar-web.git
cd traccar-web/
npm install
npm run build

in my docker compose file :

services:
  postgres:
    image: postgres:latest
    restart: always
    container_name: postgres
    environment:
      POSTGRES_USER: traccar
      POSTGRES_PASSWORD: traccar
      POSTGRES_DB: traccar
    volumes:
      - ./traccar-postgres:/var/lib/postgresql/data

  traccar:
    image: traccar/traccar:latest
    restart: always
    container_name: traccar
    ports:
      - "8082:8082"
      - "5027:5027"
    volumes:
      - ./traccar.xml:/opt/traccar/conf/traccar.xml:ro
      - ./traccar-logs:/opt/traccar/logs:rw
      - /home/alex/traccar-web/build:/opt/traccar/web #To mount the new build with the latest commit
    depends_on:
      - postgres

volumes:
  traccar-postgres:
  traccar-logs:
  web:

Default URLs that is working :

https://tiles.openrailwaymap.org/standard/{z}/{x}/{y}.png
https://tiles.openseamap.org/seamark/{z}/{x}/{y}.png

The fix will be integrated in the Traccar version 6.3 ?

Thank you.

Yes.

https://tiles.openseamap.org/seamark/* provides only rasterized POIs and no basemap

the official website https://map.openseamap.org/ presents two XYZ layers overlayed:

• https://tiles.openseamap.org/seamark/{z}/{x}/{y}.png
• https://t2.openseamap.org/tile/{z}/{x}/{y}.png

how did you mange to get traccar draw more than one layer/basemap?

I solved my previous post my just using modern UI, where separate basemap and overlay options are present.

But in my case map overlay reloads and flickers on each new position (I'm running 5.12)

When I select "OpenSeaMap" Map Overlay it becomes visible, but I see it flickering whenever a new position arrives for a device on screen.
The whole overlay literally disappears and returns immediately: it "pulses" multiple times a second, depending on the frequency of incoming data.

Firefox's Web Developer Tools, Network tab, shows continuous of requests to "https://tiles.openseamap.org/seamark/..." even if visualized map region doesn't change. Half of those requests ends in "NS_BINDING_ABORTED" error, the other half successfully returns cached.

Is this the intended behaviour?

You should upgrade to the latest version.

ok thanks

Hi, I confirm that it's working in 6.3 version. Thanks