Loss of css transform property caused by leaflet marker code. #1370

Closed
Krb686 opened this Issue Feb 12, 2013 · 7 comments

Comments

Projects
None yet
3 participants
@Krb686

Krb686 commented Feb 12, 2013

So I'm creating a map program that combines your API along with jQueryRotate to select and rotate an image of something on the map. Originally, I was having problems with jQueryRotate because every time it applied a css transform, it was doing simple assignment instead of increment, so:

<img style="transform:translate, rotate, ...>

became

<img style="transform:rotate"

So it lost the original transform, and since leaflet applies a translate, it would immediately rotate the image and move it to the top left corner of the div element.

Now this was an easy fix, I told the author of jQueryRotate he needed to change his code from:

img.style.transform = ...

to

img.style.transform += ...

Now it appears your code is doing the exact same thing. I am applying the rotate transform in addition to the already applied translate from leaflet, and that works great, until I zoom in, and leaflet reloads the marker icon image, ASSIGNS the translate property, and the rotate is gone. So because of that, the image flips back to the original for a split second until the timer call comes thru again and re-rotates it.

It seems so many people have the tendency to code with the mindset that there might not be anything preexisting.

It would be very nice if this could be changed, thanks.

error2

@danzel

This comment has been minimized.

Show comment
Hide comment
@danzel

danzel Feb 12, 2013

Member

You could use a DivIcon and put your element inside of it, so that your transforms and the leaflet transforms don't collide.

Member

danzel commented Feb 12, 2013

You could use a DivIcon and put your element inside of it, so that your transforms and the leaflet transforms don't collide.

@Krb686

This comment has been minimized.

Show comment
Hide comment
@Krb686

Krb686 Feb 12, 2013

I'm not sure how that would work. The leaflet marker takes an image path, and then creates its own html, so I can't choose to put it in a div. Also, not even sure if jQueryRotate works on elements other than img.

Krb686 commented Feb 12, 2013

I'm not sure how that would work. The leaflet marker takes an image path, and then creates its own html, so I can't choose to put it in a div. Also, not even sure if jQueryRotate works on elements other than img.

@danzel

This comment has been minimized.

Show comment
Hide comment
@danzel

danzel Feb 12, 2013

Member

http://leafletjs.com/reference.html#divicon
So put an img with your image inside the DivIcon

Member

danzel commented Feb 12, 2013

http://leafletjs.com/reference.html#divicon
So put an img with your image inside the DivIcon

@Krb686

This comment has been minimized.

Show comment
Hide comment
@Krb686

Krb686 Feb 12, 2013

Oh I didn't even realize you were referring to part of the leaflet API. I thought you meant general html. I will try that out.

Krb686 commented Feb 12, 2013

Oh I didn't even realize you were referring to part of the leaflet API. I thought you meant general html. I will try that out.

@Krb686

This comment has been minimized.

Show comment
Hide comment
@Krb686

Krb686 Feb 12, 2013

Right, now how do I make the div background transparent?

Krb686 commented Feb 12, 2013

Right, now how do I make the div background transparent?

@Krb686

This comment has been minimized.

Show comment
Hide comment
@Krb686

Krb686 Feb 12, 2013

Okay now I have the div moving and jQueryRotate moving the image inside the div. I can make the div transparent through jQuery, but I feel like there should be an option for that somehow without needing jQuery. Besides that, I think the colliding transforms issue should be fixed anyways in case someone wants to use an image directly.

Krb686 commented Feb 12, 2013

Okay now I have the div moving and jQueryRotate moving the image inside the div. I can make the div transparent through jQuery, but I feel like there should be an option for that somehow without needing jQuery. Besides that, I think the colliding transforms issue should be fixed anyways in case someone wants to use an image directly.

@ghost ghost assigned mourner Apr 18, 2013

@mourner

This comment has been minimized.

Show comment
Hide comment
@mourner

mourner Apr 18, 2013

Member

I think we can't prevent all issues like this. Standard marker code that uses single images depends on having certain transform values, if someone needs more complicated things he should just use divIcon, @danzel is right.

Member

mourner commented Apr 18, 2013

I think we can't prevent all issues like this. Standard marker code that uses single images depends on having certain transform values, if someone needs more complicated things he should just use divIcon, @danzel is right.

@mourner mourner closed this Apr 18, 2013

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment