Rotate Leaflet Markers Tooltip Text

I have some JSON with data that should be shown on the map. var shapesCoordinates = '[{'shapeId': 1,'coordinates': [-1500,500],'text': 'bla bla', 'rotation': 20},{'shapeId': 2,'coo

Solution 1:

I needed to play a game with current tooltip content.

var shapess = JSON.parse(shapesCoordinates);

var markers = [];
for (var i = 0; i < shapess.length; i++) {
    var marker = L.marker(shapess[i]['coordinates'], {
        opacity: 0.01
    }).bindTooltip(shapess[i]['text'],
        {
            permanent: true,
            className: "shapesText" + i,
            offset: [0, 0],
            direction: "center"
        }
    ).openTooltip().addTo(mymap);

I needed to access marker tooltip and change its HTML code in order to replace older transform property with current translate3d value and add dummy rotate value. Dummy in reason that added rotation does not work.

if (shapess[i]["rotation"]) {
        var content = marker['_tooltip']['_container'];
        var style = $(content).attr('style');
        var transformProperty = style.substring(style.indexOf('transform'));
        var transformRotationProperty = transformProperty.replace(';', ' rotation(' + shapess[i]["rotation"] + 'deg);');
        var changedContent = content.outerHTML.replace(transformProperty, transformRotationProperty);

        marker['_tooltip'].setContent(changedContent);
        $('.shapesText' + i).css({'transform': 'rotate(' + shapess[i]["rotation"] + 'deg)'});
    }
    markers[shapess[i]['shapeId']] = marker;

}

After new content is added to tooltip I can access tooltip class and change transform property by adding only rotate value. It will keep old translate value without overriding.

I am not sure if it is a bug or what can be a problem, but if I add only rotate without translate3d old value will be overridden.

But, if old transform has both translate3d and rotate using CSS transform with only rotate will not override old translate3d