Rotating Marker Icon Image with jQueryRotate

[Keith Turkowski]

I'm using jQueryRotate.2.2.js and trying to rotate the marker icon image, using the following:

    this.markerAngle = new L.Marker(location, style);
    this.leafletMap.addLayer(this.markerAngle);
    $(this.markerAngle._icon).rotate(190);

This works to rotate the image, but it moves the image far away from the marker position (to a point outside the viewable area, several times the image size in distance).

Any suggestions on how to resolve this?

[Paulo Vieira]

Maybe working directly with the image element? Here's one example:
http://jsfiddle.net/RvRPh/2/

See the function "setHighlightIcon". But it doesn't look pretty :-)

--
 
 
 

[Keith Turkowski]

Looking into it a little more, it looks like jQueryRotate is removing the translate() portion of the transform.

Before Rotate: "<img style="margin-left: -140px; margin-top: -140px; width: 280px; height: 280px; transform: translate(573px, 769px); z-index: 669;" class="leaflet-marker-icon  leaflet-zoom-animated" src="/img/dw/direction_groundIndicator_minimal.png">"

After Rotate: "<img style="margin-left: -140px; margin-top: -140px; width: 280px; height: 280px; transform: rotate(190deg); z-index: 669;" class="leaflet-marker-icon  leaflet-zoom-animated" src="/img/dw/direction_groundIndicator_minimal.png">"

[Juan Francisco Flores Yaz]

my friend tube the same problem the solution is as follows, is in a loop because recoria an array and then do an update for each index. any questions you can post the happy medium be able'll help: D greetings

$('.controls-icon').on('click','.btn-primary',function(){

        $(this).attr('disable',true);

        $(this).parent().parent().addClass('hide');

        //console.log(dataIcon);

        for ( var i = 0; i < markers.length; i++ ){           

            if (markers[i]['options']['pid'] === pidRotateScale ) { //recoremos markers en busca del pid a actualizar 

                markers[i].options.rotateIcon  = rotateIcon; //actualizamos el punto

                markers[i].options.scaleIcon   = scaleIcon;

                    console.log(markers[i]);

            }// END IF

        }// END FOR 

        dataIcon._icon.style.WebkitTransform = dataIcon._icon.style.WebkitTransform  +'rotate('+rotateIcon+'deg)';

        dataIcon._icon.style.MozTransform    = dataIcon._icon.style.MozTransform     +'rotate('+rotateIcon+'deg)';  

        dataIcon._icon.style.MsTransform     = dataIcon._icon.style.MsTransform      +'rotate('+rotateIcon+'deg)';   

        dataIcon._icon.style.OTransform      = dataIcon._icon.style.OTransform       +'rotate('+rotateIcon+'deg)';  

        dataIcon._icon.height = scaleIcon;

        dataIcon._icon.width  = scaleIcon;

        console.log(dataIcon);

    });