Set distance from a place in a NestedList by current position

[andrea88v]

Hi, I’ve a Nested List retrieved from a json file. I use getItemTextTpl to show specific field of the elements.

Each leaf element has longitude and latitude fields: i want to display the distance by the places from the current position.

I’ve tried to retrieve current position inside getItemTextTpl method by creating a Geolocation object, but it doesn’t work. I couldn’t obtain longitude and latitude from that object outside locationupdate method.

If i try to declare long and lat vars before creating Geolocation object and try to set them inside locationupdate method of Geolocation object, them aren’t set to the values that i retrieve from geo.getLatitude() and geo.getLongitude().

What i want to do is to display in the last level (the level before detailCard) the distance by a place from current position retrieved by an Geolocation object.


How could I do it?

[mitchellsimoens]

So you need to lat/long coords from within the locationupdate event but you can't? The reason is because the locationupdate event probably is firing before your nestedlist is created maybe?

[andrea88v]

My code is:

​var geo = Ext.create('Ext.util.Geolocation', {                                 
    autoUpdate: false,
    listeners: {
        locationupdate: function(geo) {
            calculateDistances(geo.getLatitude(), geo.getLongitude(), lat, lon, record);
        },
        locationerror: function(geo, bTimeout, bPermissionDenied, bLocationUnavailable, message) {
            if(bTimeout){
                alert('Timeout occurred.');
            } else {
                alert('Error occurred.');
            }
        }
    }
});
geo.updateLocation();

My problem was to register Lat and Lon variables outside of the locationupdate method.


Now I've changed something: I use Google "Distance Matrix Service" to calculate distances.

A portion of the JS code is as follows:

function calculateDistances(lat1, lon1, lat2, lon2, record) {
  var service = new google.maps.DistanceMatrixService();
	
	var origin1 = new google.maps.LatLng(lat1, lon1);
	var destinationB = new google.maps.LatLng(lat2, lon2);
  
	service.getDistanceMatrix(
    {
      origins: [origin1],
      destinations: [destinationB],
      travelMode: google.maps.TravelMode.WALKING,
      unitSystem: google.maps.UnitSystem.METRIC,
      avoidHighways: false,
      avoidTolls: false
    }, callback);
}


function callback(response, status) {
  if (status != google.maps.DistanceMatrixStatus.OK) {
    alert('Error was: ' + status);
  } else {
    var origins = response.originAddresses;
    var destinations = response.destinationAddresses;
    deleteOverlays();


    for (var i = 0; i < origins.length; i++) {
      var results = response.rows[0].elements;
      for (var j = 0; j < results.length; j++) {
		
		var tempDist = results[0].distance.text;
		
		console.log(tempDist);
		
      }
    }
  }
}

In callback function with console.log(tempDist), I can view in console the calculated distance.


My problem now is that I can't return this value to calculateDistances method where I can access to a record and modify it with the calculated value

[akpotosufredrick]

My code is:

​var geo = Ext.create('Ext.util.Geolocation', {                                 
    autoUpdate: false,
    listeners: {
        locationupdate: function(geo) {
            calculateDistances(geo.getLatitude(), geo.getLongitude(), lat, lon, record);
        },
        locationerror: function(geo, bTimeout, bPermissionDenied, bLocationUnavailable, message) {
            if(bTimeout){
                alert('Timeout occurred.');
            } else {
                alert('Error occurred.');
            }
        }
    }
});
geo.updateLocation();

My problem was to register Lat and Lon variables outside of the locationupdate method.


Now I've changed something: I use Google "Distance Matrix Service" to calculate distances.

A portion of the JS code is as follows:

function calculateDistances(lat1, lon1, lat2, lon2, record) {
  var service = new google.maps.DistanceMatrixService();
    
    var origin1 = new google.maps.LatLng(lat1, lon1);
    var destinationB = new google.maps.LatLng(lat2, lon2);
  
    service.getDistanceMatrix(
    {
      origins: [origin1],
      destinations: [destinationB],
      travelMode: google.maps.TravelMode.WALKING,
      unitSystem: google.maps.UnitSystem.METRIC,
      avoidHighways: false,
      avoidTolls: false
    }, callback);
}


function callback(response, status) {
  if (status != google.maps.DistanceMatrixStatus.OK) {
    alert('Error was: ' + status);
  } else {
    var origins = response.originAddresses;
    var destinations = response.destinationAddresses;
    deleteOverlays();


    for (var i = 0; i < origins.length; i++) {
      var results = response.rows[0].elements;
      for (var j = 0; j < results.length; j++) {
        
        var tempDist = results[0].distance.text;
        
        console.log(tempDist);
        
      }
    }
  }
}

In callback function with console.log(tempDist), I can view in console the calculated distance.


My problem now is that I can't return this value to calculateDistances method where I can access to a record and modify it with the calculated value

Have u solved it yet?