Problem with flyTo and circleLocation

Question

I made a leaflet map with a search control. The problem occurs when enabling circleLocation and flyTo: The circle gets drawn much too early and in the center of the current mapbound. When the map reaches the position (via "flyTo") of the point i was searching for, only then the circle switches to his correct position (around the location found). To work corretly the circle should only be drawn after flyTo is finished.

I already tried it with panTo or setView and everything worked fine. But flyTo looks so much better and i would like to use it.

Thats my code:

    showLocation: function(latlng, title) { 
    if(this.options.zoom)
        this._map.setView(latlng, this.options.zoom);

        this._map.flyTo([mycoordinate, mycoodinate2], 11.5);                                         

    if(this._markerLoc)
    {
        //clearTimeout(this._markerLoc);
        var that = this;
        this._markerLoc.setLatLng(latlng);  
        this._markerLoc.setTitle(title);
        this._markerLoc.show(), setTimeout(function() {             
        that._markerLoc.hide();
        }, 1250);

        if(this.options.animateLocation)
            this._markerLoc.animate();

    }

    if(this.options.autoCollapse)
        this.collapse();
    return this;
}});

score 1 · Accepted Answer · edited Apr 13 '17 at 12:34

1

Seems like i found some kind of a solution in this thread:

How to determine when Mapbox GL JS FlyTo has "arrived"

There you go:

map.on('moveend', function(){
// your code
});

edited Apr 13 '17 at 12:34

Community

1

answered Jan 23 '17 at 19:13

howard.D

473
1
8
22

Problem with flyTo and circleLocation

1 Answers1