masajid390 / BeautifyMarker

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Marker angel - still

taleteller opened this issue · comments

Just started to play with this and noticed the issue with #4

The problem is not gone, during zoom the marker change angle, even on the demo for me (Firefox) and if your map application interferes with events like zoomend, the marker randomly tend to point west or east afterwards.

In my opinion, the approach of having a load heavy re-rotation class, just because leaflet affects transform, is entirely wrong. Might be way smarter to add another div and add transforms to the css.

It also happens when you call marker.setLatLng([lat,lng]).update() (even when using L.BeautifyMarker.marker)

I'm trying to understand why the _updateMarkerShapeIcon method is useful, but I'm a little bit lost.

Well I ended up heavily modifying my fork of this. Basically the whole L.BeautifyMarker class is a weird way of inducing a 45deg rotation on events, its even its only use. The core of my change was to modify L.BeautifyIcon this way:

createIcon: function () {
    var iconDiv = document.createElement('div')
        , options = this.options;
    iconDiv.innerHTML = !options.html ? this.createIconInnerHtml() : options.html;
    this._setIconStyles(iconDiv);
    if (this.options.iconShape === 'marker') { 
        var wrapperDiv = document.createElement('div');
        wrapperDiv.appendChild(iconDiv);
        return wrapperDiv;
    }                
    return iconDiv;
},

This gives you a wrapper div for marker styled icons, the only ones in demand of a 45deg rotation. Also I changed icon css this way, to get rotation working.

    .beautify-marker.marker {
        transform: rotate(45deg);
    }
    .beautify-marker.marker > * {
        transform: rotate(-45deg); 
    }

Finally I got rid of leaflet-beautify-marker.js entirely, from there on the icon is plainly created by an instance of L.BeautifyIcon.icon(options) as common with leaflet. This way its faster, lighter of code and without jumping markers.

Looks good. Maybe you should send a pull request?
I can't find your fork on your profile.

Its not on my profile, its became part of a bigger non public project. The maintainer has not been around since October, maybe its smarter to do a public fork for real.

#taleteller Really sorry i was out of city. branch is merged now. Please look into it. Thanks