Move flightMarkers smoothly to new position

[piuozorio]

Hello all, (sorry my english)

i’m trying to make the flightMarkers keep moving (with or without click marker) but no success.

When i try, from multiple markers only one moves or all blink and jump to new position.

Whem the marker moves and arrives to next destination/point and the map refresh, the marker go back and start again. Need to continue to next new position.

This is the code i’m trying to adapt with speed: http://jsfiddle.net/HYuRR/2/  

Can someone help to implement the code? Thank you

 

This is the original acarsmap.js

  
	 var flightMarkers = [];
    var routeMarkers = [];
    var flightPath = null;
    var depMarker = null, arrMarker = null;
    var info_window= null;
    var run_once = false;
      
    var defaultOptions = {
        autozoom: true,
        zoom: 4,
        center: new google.maps.LatLng(-25.363882,131.044922),
        mapTypeId: google.maps.MapTypeId.TERRAIN,
        refreshTime: 12000,
        autorefresh: true
    };
    
    var options = $.extend({}, defaultOptions, acars_map_defaults);
    var map = new google.maps.Map(document.getElementById("acarsmap"), options);
    
    // They clicked the map
    google.maps.event.addListener(map, 'click', function()
    {
        //clearPreviousMarkers();
    });
    
    liveRefresh();
    if(options.autorefresh == true)
    {
        setInterval(function () { liveRefresh(); }, options.refreshTime);
    }
    
    function liveRefresh()
    {
        $.ajax({
            type: "GET",
            url: url + "/action.php/acars/data",
            dataType: "json",
            cache: false,
            success: function(data) 
            {
                populateMap(data);
            }
        });
    };
    
    function populateMap(data)
    {
        clearMap();
        $("#pilotlist").html("");
        
        if (data.length == 0) {
            return false;
        }
    
        var lat, lng;
        var details, row, pilotlink;
        var bounds = new google.maps.LatLngBounds();
        
        for (var i = 0; i < data.length; i++) 
        {
            if(data[i] == null || data[i].lat == null || data[i].lng == null
                || data[i].lat == "" || data[i].lng == "")
            {
                continue;
            }
                
            lat = data[i].lat;
            lng = data[i].lng;
                    
            if(i%2 == 0)
                data[i].trclass = "even";
            else
                data[i].trclass = "odd";
            
            // Pull ze templates!
            var map_row = tmpl("acars_map_row", {flight: data[i]});
            var detailed_bubble = tmpl("acars_map_bubble", {flight: data[i]});
            
            $('#pilotlist').append(map_row);
            
            var pos = new google.maps.LatLng(lat, lng);
            flightMarkers[flightMarkers.length] = new google.maps.Marker({
                position: pos,
                map: map,
                icon: url+"/lib/images/inair/"+data[i].heading+".png",
                flightdetails: data[i],
                infowindow_content: detailed_bubble
            });
            
            bounds.extend(pos);
                    
            google.maps.event.addListener(flightMarkers[flightMarkers.length - 1], 'click', function() 
            {
                clearPreviousMarkers();
                
                var focus_bounds = new google.maps.LatLngBounds();
                // Flight details info window
                info_window = new google.maps.InfoWindow({ 
                    content: this.infowindow_content,
                    position: this.position
                });
                
                info_window.open(map, this);
                
                // Add polyline, and start/end points
                var dep_location = new google.maps.LatLng(this.flightdetails.deplat, this.flightdetails.deplng);
                var arr_location = new google.maps.LatLng(this.flightdetails.arrlat, this.flightdetails.arrlng);
                
                depMarker = new google.maps.Marker({
                    position: dep_location,
                    map: map,
                    icon: depicon,
                    title: this.flightdetails.depname,
                    zIndex: 100
                });
    
                arrMarker = new google.maps.Marker({
                    position: arr_location,
                    map: map,
                    icon: arricon,
                    title: this.flightdetails.arrname,
                    zIndex: 100
                });
                
                // Now the flight path, if it exists
                var path = new Array();
                path[path.length] = dep_location;
                focus_bounds.extend(dep_location);
                if(this.flightdetails.route_details.length > 0)
                {
                    $.each(this.flightdetails.route_details, function(i, nav)
                    {
                        var loc = new google.maps.LatLng(nav.lat, nav.lng);
                        
                        if(nav.type == 3)
                            icon = "icon_vor.png";
                        else
                            icon = "icon_fix.png";
                        
                        var navpoint_info = tmpl("navpoint_bubble", {nav: nav});
                        routeMarkers[routeMarkers.length] = new google.maps.Marker({
                            position: loc,
                            map: map,
                            icon: url + "/lib/images/"+icon,
                            title: nav.title,
                            zIndex: 100,
                            infowindow_content: navpoint_info
                        });
                        
                        google.maps.event.addListener(routeMarkers[routeMarkers.length - 1], 'click', function() 
                        {
                            info_window = new google.maps.InfoWindow({ 
                                content: this.infowindow_content,
                                position: this.position
                            });
                            
                            info_window.open(map, this);
                        });
                        
                        path[path.length] = loc;
                        focus_bounds.extend(loc);
                    });
                }
                
                path[path.length] = arr_location;
                focus_bounds.extend(this.position);
                focus_bounds.extend(arr_location);
    
                flightPath = new google.maps.Polyline({
                    path: path,
                    strokeColor: "#FF0000", strokeOpacity: 1.0, strokeWeight: 2
                });
                
                map.fitBounds(focus_bounds); 
                flightPath.setMap(map);
            });
        }
        
        // If they selected autozoom, only do the zoom first time
        if(options.autozoom == true && run_once == false)
        {
            map.fitBounds(bounds); 
            run_once = true;
        }
    }
    
    function clearPreviousMarkers()
    {
        if(info_window)
        {
            info_window.close();
            info_window = null;
        }
        
        if(depMarker != null)
        {
            depMarker.setMap(null);
            depMarker = null;
        }
        
        if(arrMarker != null)
        {
            arrMarker.setMap(null);
            arrMarker = null;
        }
        
        if(routeMarkers.length > 0)
        {
            for(var i = 0; i < routeMarkers.length; i++) {
                routeMarkers[i].setMap(null);
            }
        }
        
        routeMarkers.length = 0;
        
        if(flightPath != null)
        {
            flightPath.setMap(null);
            flightPath = null;
        }
    }
    
    function clearMap()
    {
        if(flightMarkers.length > 0)
        {
            for(var i = 0; i < flightMarkers.length; i++) {
                flightMarkers[i].setMap(null);
            }
        }
        
        flightMarkers.length = 0;
        
        if(routeMarkers.length > 0)
        {
            for(var i = 0; i < routeMarkers.length; i++) {
                routeMarkers[i].setMap(null);
            }
        }
        
        routeMarkers.length = 0;
    }  
  

 

[piuozorio]

Hello,

i found an alternative using this https://github.com/combatwombat/marker-animate

Now all markers moves correctly but only if i change the coord in var pos =... to an old position

My question is how can i get the current position of all markers that are in the map? Because var newPosition is now the real target position using the same coord as var pos.

Something like 

	if start first time, marker not created
	var pos =new google.maps.LatLng(data[i].lat, data[i].lng); //position from database 
	else 
	var pos = current position in map, maybe the moving marker 
	 

This is the code now 

I´m using the old version of phpvms, include the script markerAnimate.js after Google Maps js call in core_htmlhead.tpl

in acarsmap.js find the marker

 

	var pos = new google.maps.LatLng(data[i].lat, data[i].lng);
	flightMarkers[flightMarkers.length] = new google.maps.Marker({                 
	position: pos,                 
	map: map,                 
	icon: planeSymbol,               
	 flightdetails: data[i],               
	 infowindow_content: detailed_bubble             
	});
	

 

after add

 

	// or with callback and options for easing and duration in milliseconds. Needs jQuery Easing Plugin.
	var newPosition = new google.maps.LatLng(data[i].lat, data[i].lng);
	flightMarkers[flightMarkers.length-1].animateTo(newPosition , { easing: "linear", duration: 10000, complete: function() { alert("animation complete"); } });
	

 

Hope you undestand.

Thank you for any help

Edited April 26, 2019 by piuozorio