Как я могу повернуть пользовательские маркеры в Leaflet for PDF (в работе веб-сайта)

Это ответ на мой вопрос. Надеюсь кому-нибудь помочь. Плагин leaflat-rotate-marker использует css для поворота маркеров, и когда я использую плагин leaflat-image для создания изображения из карты, маркеры в PDF не имеют вращения, потому что изображение leaflat не работает с html и css. Мой полный код таков:

processArray(js_tracks); //call processArray with my array

async function processArray(array) {
    shelterMarkers.eachLayer(function(layer){ //remove previous markers because i call this function onload and on map zoomed.  
        mymap.removeLayer(layer);
    });

    for (let item of array) {
        if (icontmp[item['Reakt']][item['Angle']] != -1){ //array icontmp is my cash for previous created markers.
            var iUrl = icontmp[item['Reakt']][item['Angle']];
        }
        else{ // if i don't have cashed markers with same angel await for delayedLog where i rotate the markers by angle and specific condition (item['Reakt'])
            icontmp[item['Reakt']][item['Angle']] = await delayedLog(item['Angle'], item['Reakt']);
            var iUrl = icontmp[item['Reakt']][item['Angle']];           
        }

        var ico = L.icon({ //create a object with marker
            iconUrl: iUrl,
            iconSize: [(4.5*(mymap.getZoom()))/2, (4.5*(mymap.getZoom()))/2], // resize by map zoom
            iconAnchor: [15, 15],
            popupAnchor: [-10, -10]
        });

        L.marker([item['Y'], item['X']], // add X and Y cordinats
        {icon: ico})
        .bindPopup("<p>Време: "+item['dateTime']+" </p><p> скорост: "+item['Speed']+" км/ч.</p><p> Реакция: "+item['Reaktion']+" </p><p> "+item['Engine']+" </p>" ).addTo(shelterMarkers); // add to shelterMarkers
    }
    shelterMarkers.addTo(mymap); // add to map when ready
}


function delayedLog(angles, reak){
     if (reak == 0){
         var imgs = '<?php echo base_url();?>/images/stop_blue.png';
     }
     else if (reak == 1){
         var imgs = '<?php echo base_url();?>/images/stop_green.png';
     }
     else if (reak == 2){
         var imgs = '<?php echo base_url();?>/images/direction_green.png';
     }
     else if (reak == 3){
         var imgs = '<?php echo base_url();?>/images/stop_red.png';
     } 
     else if (reak == 4){
         var imgs = '<?php echo base_url();?>/images/direction_red.png';
     }
     else{
         var imgs = '<?php echo base_url();?>/images/stop_black.png';
     }

    var image = loadImage(imgs).then(function (img) { //there i wait for load a image resource. Without it sometimes loading an empty blank instead of a finished image. loadImage is a function from plugin image-promise.min.js

        let canvass = document.createElement('canvas');
        let context = canvass.getContext('2d');
        canvass.width = 50;
        canvass.height = 50;
        context.translate(15, 15);
        context.rotate(angles*Math.PI/180); //rotate by angle
        context.translate(-15, -15);
        context.drawImage(img, 0, 0, img.width, img.height);
        return canvass.toDataURL(); // when ready return dataurl
    })
    return image; // return dataurl to processArray
}