search

hosuaby / Leaflet.SmoothMarkerBouncing

Smooth animation of marker bouncing for Leaflet.
BSD 2-Clause "Simplified" License
146 stars 28 forks source link

Cuts almost half of marker while using with awesome markers. #6

Closed FZX closed 7 years ago

FZX commented 7 years ago

I tried to use this plugin with Leaflet.awesome-markers. Everything works fine except I get my markers cutten. Image. The problem is with css style. For marker: Should be: style="margin-left: -17px; margin-top: -42px; width: 35px; height: 45px; transform: translate3d(1036px, -198px, 0px); z-index: -198;" But getting: style="margin-left: -12px; margin-top: -41px; width: 25px; height: 41px; opacity: 1; z-index: -184; transform: translate3d(741px, -184px, 0px);"

For shadow: Should be: style="margin-left: -10px; margin-top: -12px; width: 36px; height: 16px; transform: translate3d(1036px, -198px, 0px);" But getting: style="margin-left: -12px; margin-top: -41px; width: 41px; height: 41px; transform: translate3d(741px, -184px, 0px);"

Versions: Leaflet.js - 0.7.3 Leaflet.SmoothMarkerBouncing - Current Leaflet.awesome-markers plugin - v2.0 Jquery - v3.2.0 Bootstrap - v3.3.7

hosuaby commented 7 years ago

Hello. Thanks for detailed issue. I will check whats happens.

hosuaby commented 7 years ago

Hm. I tested plugin with awesome-markers and it looks like it works just fine. I tested it on Chrome, Firefox, Android & Safari. Please, check bower.json from this repository. Do you use the same dependency versions ? After take a look into debug/awesome.html & debug/scripts/app-awesome.js. Open page debug/awesome.html in the brower (no need server, just double-click on the file) and check if it is working well.

Tell me if there are any problems

FZX commented 7 years ago

Thank you for your time. The issue was how I were adding icons to markers. Depending on app-awesome.js I modified my code and all problems got fixed.

hosuaby commented 7 years ago

Great!