[GIS] Add something into L.CircleMarker

Question

I have two different colored CircleMarkers for two geojson layer. Is it possible to add a letter into those circles, without using divIcon?

This is where I give them the color.

function getColor(iconcategory) {
        return iconcategory == 'tram' ? 'black' :
            iconcategory == 'ubahn' ? 'purple' :
                'red';
    }   

This is the popup.

        function forEachFeature(feature, layer) {

        var popupContent = "<b>" +
            feature.properties.name + "</b>" ;

        if (feature.properties && feature.properties.popupContent) {
            popupContent += feature.properties.popupContent;
        }
        layer.bindPopup(popupContent);
    };

This is the rest.

onEachFeature: forEachFeature,
                    pointToLayer: function (feature, latlng) {
                        return L.circleMarker(latlng, {
                            radius: 10,
                            opacity: .9,                            
                            color: getColor(feature.properties.iconcategory),
                            fillColor: getColor(feature.properties.iconcategory),
                            fillOpacity: 0.3,
                        //  html: feature.properties.iconcategory[0].toUpperCase(),
                        })
                            .bindTooltip(feature.properties.name);

The html tag from the divIcon isn't working. Is there any chance that I don't have to use the divIcon
And… is there any possibility to add a second circle to the circle or do I have to do this with a divIcon as well? I use the circlemarker, because it's easy and doesn't require a lot of code.

Answer 1

This answer is based on @IvanSanchez idea of using L.divIcon for text and draw circle around it via CSS style.

The main factor to make it successful is to set icon width and height to twice the circle radius plus twice the circle border width, otherwise circle will become ellipse instead.

To make solution flexible, there is base CSS class circle for creating circle and then subclasses circle1 and circle2 for individual styling (could be more of course). Desired marker is then created via function, where circle radius, circle border width and circle CSS subclass are input parameters.

So, it this are the CSS classes for circle and text styling:

  .circle {
    display: table-cell;
    text-align: center;
    vertical-align: middle;
    border-radius: 50%;
    border-style: solid;
    font-size: 16px;
    font-weight: bold;
  }
  .circle.circle1 {
    background: rgba(0, 57, 128, 0.2);
    border-color: #3388FF;
    color: white;
  }
  .circle.circle2 {
    background: rgba(0, 57, 128, 0.2);
    border-color: green;
    color: yellow;
  }

and this is marker creating function:

function circleWithText2(latLng, txt, radius, borderWidth, circleClass) {
  var size = radius * 2;
  var style = 'style="width: ' + size + 'px; height: ' + size + 'px; border-width: ' + borderWidth + 'px;"';
  var iconSize = size + (borderWidth * 2);
  var icon = L.divIcon({
    html: '<span class="' + 'circle ' + circleClass + '" ' + style + '>' + txt + '</span>',
    className: '',
    iconSize: [iconSize, iconSize]
  });
  var marker = L.marker(latLng, {
    icon: icon
  });
  return(marker);
}

then with the following calls:

circleWithText2([44.6, 22.6], '67', 30, 3, 'circle1').addTo(map);
circleWithText2([44.6, 22.5], '89', 20, 2, 'circle2').addTo(map);

this is the result: