Change the color of the circle under the marker icon on the map

Alessandro Cema12 days ago

Buongiorno,
sto utilizzando Traccar (versione 6.9) e ho impostato l'icona truck per i miei dispositivi.

Vorrei ricevere supporto per modificare il colore del cerchio bianco che appare sotto all’icona del marker sulla mappa.
Utilizzando la mappa Google con la modalità traffico attiva, il cerchio completamente bianco e l’icona verde del furgone si confondono con il fondo, rendendo difficile localizzare visivamente i veicoli.

Rimuoverlo non è un’opzione, perché peggiorerebbe la leggibilità: ho invece la necessità di cambiarne il colore (ad esempio blu o grigio scuro) per migliorarne il contrasto con la mappa.

Vorrei sapere:

Qual è il tag o la classe CSS che controlla il colore di quel cerchio?

In quale file CSS posso intervenire per modificarlo?

Allego un’immagine per chiarire meglio la situazione.

Grazie in anticipo per l'assistenza.

[ENGLISH]

Hello,
I'm using Traccar (version 6.9) and I’ve set the truck icon for my devices.

I’m looking for support to change the color of the white circle that appears under the marker icon on the map.
When using the Google Map with traffic layer enabled, the pure white circle and the green truck icon blend into the background, making it difficult to visually identify the vehicle's position.

Removing the circle is not an option, as it would worsen visibility — I need to change its color (e.g., to blue or dark gray) to improve contrast.

I would like to know:

Which CSS tag or class controls that circle’s color?

In which CSS file should I make the change?

I’ll attach an image to better show the issue.

Thank you in advance for your support.

marker.png

Anton Tananaev12 days ago

There's no CSS. It's an image file.

Alessandro Cema12 days ago

This circle is not part of the image, but seems to be rendered dynamically — possibly via SVG or Leaflet — and appears behind all device markers regardless of the icon chosen.

I’m trying to understand:

Where is this white circle defined in the code?

Is it part of the Leaflet marker style, or an SVG element added by Traccar?

How can I change its fill color (not remove it)?

I’m including a screenshot to clarify exactly which element I’m referring to.

Thanks again for your help.

Alessandro Cema12 days ago

I don't know how to change the circle color via css.

marker 2.png

Anton Tananaev12 days ago

The circle is defined in an image, as I already said.

Alessandro Cema12 days ago

Thanks for the quick reply, but could you tell me where it's defined? I can't find it anywhere in the traccar 6.9 installation.

Anton Tananaev12 days ago
Alessandro Cema12 days ago

Thanks Anton, but I don't have the same structure as you. I'm missing many folders. In fact, the white circle isn't even identified in the code when I inspect the page with Google Chrome. I'm attaching the structure of my Traccar installation.
traccar.png

Anton Tananaev12 days ago

I pointed you to the source. You have to change it there and recompile. It sounds like you need to do a bit more reading and research before doing any changes.

Alessandro Cema12 days ago

You're right. Reinstalling and then recompiling would be very risky. Isn't it possible to change the color with a CSS override? I can't find the CSS tag in Google Chrome's inspector. Do you have any ideas to help me? I don't want to bother you any further.

Anton Tananaev12 days ago

I said it's an image twice and you're talking about CSS again?