Jump to content
piuozorio

Move flightMarkers smoothly to new position

Recommended Posts

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;
    }  
  


 

Share this post


Link to post
Share on other sites

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 by piuozorio

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

×