Marker shows svg icon with background circle at the top right

Hi,
I am able to show marker on map with following code:

let marker = this.createMarker('sample.svg', lattitude, longitude,'#5327c3', 'SVG icon');

But the background white circle is not concentric with the icon’s circle. It is at top right. I tried different svg files to check if this is issue with icons, but all show same issue.

The map screenshot is attached.
Can anybody help fix this issue please?

Regards,
Nilesh

Can you share the code and the SVG you are using?

Hi Przemek,
The create marker method is as follows:

createMarker(icon : string, lat : number, long : number, color : string, popupText : string) {
    
      if(this.mapObject == undefined) return;
      var markerElement = document.createElement('div');
      markerElement.className = 'marker';
      var markerContentElement = document.createElement('div');
      markerContentElement.className = 'marker-content';
      markerContentElement.style.backgroundColor = color;
      markerElement.appendChild(markerContentElement);
      var iconElement = document.createElement('div');
      iconElement.className = 'marker-icon';
      iconElement.style.backgroundImage = "url(./assets/img/" + icon + ")";

      markerContentElement.appendChild(iconElement);
      var popup = new tt.Popup({offset: 30}).setText(popupText);
      // add marker to map
      var ll = new tt.LngLat(long, lat); 
      let markerObj =  new tt.Marker({element: markerElement, anchor: 'bottom'})
          .setLngLat(ll)
          .setPopup(popup);
          
          return markerObj;

        
  }

I am sending sample.svg icon file to you by mail as I am blocked to upload svg or zip file.

Regards,
Nilesh

Just tried with rest of the code from our examples and it looks like this:
Screenshot from 2023-02-14 17-14-00

So I would assume that it is css related.

You are right, the issue is with css. The (marker-content::before) part is doing it. I tried to change the parameters to fix it but with little luck.


        .marker-icon {
            background-position: center;
            background-size: 22px 22px;
            border-radius: 50%;
            height: 22px;
            left: 4px;
            position: absolute;
            text-align: center;
            top: 3px;
            transform: rotate(45deg);
            width: 22px;
        }
        .marker {
            height: 30px;
            width: 30px;
        }
        .marker-content {
            background: #c30b82;
            border-radius: 50% 50% 50% 0;
            height: 30px;
            left: 50%;
            margin: -15px 0 0 -15px;
            position: absolute;
            top: 50%;
            transform: rotate(-45deg);
            width: 30px;
        }
        .marker-content::before {
            background: #ffffff;
            border-radius: 50%;
            content: "";
            height: 24px;
            margin: 3px 0 0 3px;
            position: absolute;
            width: 24px;
        }
    

Please send me yours. I could not guess how the parameters of (marker-content::before) are processed. With trial of one hour, I got the background circle inside the marker but it is not perfectly concentric.

Regards,
Nilesh