Hybrid View

  1. #1
    Sencha User
    Join Date
    Apr 2012
    Posts
    7
    Vote Rating
    0
    Chanckjh is on a distinguished road

      0  

    Default Polyline geolocation

    Polyline geolocation


    Hi,
    I am trying to make an app in Sencha touch 2. I'm very new at this. This is my code.
    HTML Code:
    
    
    
    Ext.application({
        name: 'Applicatie 3.',
        launch: function() {
            var view = Ext.create('Ext.NavigationView', {
                fullscreen: true,
                items: [{
                    title: 'Home',
                    xtype: 'map',
                    mapOptions: { zoom: 15, },
                    useCurrentLocation: true,
                    listeners: {
                        maprender: function(comp, map){
                            var geo = Ext.create('Ext.util.Geolocation', {
                                frequency: 3000,
                                autoUpdate: true,
                                allowHighAccuracy: true,
                                
                                listeners: {
                                    locationupdate: function(geo) {
                                        var route =  [ ];
                                        route.push(  new google.maps.LatLng( geo.getLatitude() , geo.getLongitude() ) );
    
    
                                        //alert(  geo.getLatitude()+ ' ' + geo.getLongitude());
    
    
                                        var polyOptions = new google.maps.Polyline({
                                            path: route,
                                            strokeColor: "red",
                                            strokeOpacity: 1.0,
                                            strokeWeight: 5
                                        });
                                        polyOptions.setMap(map);
    
    
                                       var marker = new google.maps.Marker({
                                           position: new google.maps.LatLng(geo.getLatitude(), geo.getLongitude()),
                                           map: map 
                                        });
    
    
                                        var infowindow = new google.maps.InfoWindow({
                                            content: '........'
                                        });
    
    
                                        google.maps.event.addListener(marker, 'click', function() {
                                             infowindow.open(map, marker);
                                        });
                                    },
                                    locationerror: function(geo, bTimeout, bPermissionDenied, bLocationUnavailable, message) {
                                        if(bTimeout){
                                            alert('Timeout occurred.');
                                        } else {
                                            alert('Error occurred.');
                                        }
                                    }                                                     
                                }
                            });
                            geo.updateLocation();
    
    
                        }                    
                    } 
                }],
            });
        }
    });


    I'm trying to create a polyline from tracking my current location. I tried to do this with push. The array in var route is adding up, but it doesnt show up in the map.And i'm also trying to make the marker follow me. It is working a little bit. The marker is placing new markers of my locations on the map, but I need to make it to follow me. Something like, place marker, 3 sec later place new marker and delete old one.Please help me. This is for a school project

  2. #2
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    36,633
    Vote Rating
    817
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    You are recreating everything when the locationupdate event fires. The marker has a setPosition method on it that you can reuse the marker just update it's position. The polyline you need to keep the routes array (create it outside of the locationupdate event) and push new routes so that you can keep the routes but create the new polyline with it.
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  3. #3
    Sencha User
    Join Date
    Apr 2012
    Posts
    7
    Vote Rating
    0
    Chanckjh is on a distinguished road

      0  

    Default


    Quote Originally Posted by mitchellsimoens View Post
    You are recreating everything when the locationupdate event fires. The marker has a setPosition method on it that you can reuse the marker just update it's position. The polyline you need to keep the routes array (create it outside of the locationupdate event) and push new routes so that you can keep the routes but create the new polyline with it.
    Thank you for your reply!
    I think I get what you are saying. The marker and polyline array needs to be outside of locationupdate and array push needs to stay inside. But how can I put marker and polyline outside? After locationupdate I need to make a new event and put the marker and polyline inside(?), but what event do I need?

  4. #4
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    36,633
    Vote Rating
    817
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    You create the marker outside locationupdate and use setPosition within the locationupdate. You will need to create a new polyline within locationupdate.
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  5. #5
    Sencha User
    Join Date
    Apr 2012
    Posts
    7
    Vote Rating
    0
    Chanckjh is on a distinguished road

      0  

    Default


    I'm sorry but I seriously don't know how to do it...
    I think I understand that this needs to be inside locationupdate.

    Code:
    listeners: {
    	locationupdate: function(geo) {
    
    
    		route.push(  new google.maps.LatLng( geo.getLatitude() , geo.getLongitude() ) );
    
    
    		var markposition =  geo.getLatitude()+','+geo.getLongitude() ;
    		marker.setPosition(markposition);
    
    
    	},
    	locationerror: function(geo, bTimeout, bPermissionDenied, bLocationUnavailable, message) {
    		if(bTimeout){
    			alert('Timeout occurred.');
    		} else {
    			alert('Error occurred.');
    		}
    	},													
    }
    This will keep adding the latlng into the array of path. Markposition will keep changing the setposition.

    But how and where can I put Polyline and Marker outside locationupdate? Does it have to be after locationupdate: function(){}? If so I need another event in the listener right?

    I'm sorry if I don't understand, this is really new to me.

  6. #6
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    36,633
    Vote Rating
    817
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    Haven't tested this but something like this:

    Code:
    Ext.create('Ext.NavigationView', {
        fullscreen : true,
        items      : [
            {
                xtype              : 'map',
                title              : 'Home',
                useCurrentLocation : true,
                mapOptions         : {
                    zoom : 15
                },
                listeners          : {
                    maprender : function(comp, map) {
                        var marker = new google.maps.Marker({
                                position : new google.maps.LatLng(geo.getLatitude(), geo.getLongitude()),
                                map      : map
                            }),
                            route  = [],
                            polyline,
                            geo    = Ext.create('Ext.util.Geolocation', {
                                frequency         : 3000,
                                autoUpdate        : true,
                                allowHighAccuracy : true,
                                listeners         : {
                                    locationupdate : function(geo) {
                                        var lat = geo.getLatitude(),
                                            lng = geo.getLongitude();
    
                                        route.push( new google.maps.LatLng( lat , lng ) );
    
                                        marker.setPosition(lat + ',' + lng);
    
                                        //need to remove the polyline
                                        if (polyline) {
                                            polyline.setMap(null);
                                        }
    
                                        polyline = new google.maps.Polyline({
                                            path: route,
                                            strokeColor: "red",
                                            strokeOpacity: 1.0,
                                            strokeWeight: 5
                                        });
                                        polyline.setMap(map);
    
                                        var infowindow = new google.maps.InfoWindow({
                                            content: '........'
                                        });
    
    
                                        google.maps.event.addListener(marker, 'click', function() {
                                            infowindow.open(map, marker);
                                        });
                                    },
                                    locationerror: function(geo, bTimeout, bPermissionDenied, bLocationUnavailable, message) {
                                        if(bTimeout){
                                            alert('Timeout occurred.');
                                        } else {
                                            alert('Error occurred.');
                                        }
                                    }
                                }
                            });
    
                        geo.updateLocation();
                    }
                }
            }
        ]
    });
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.