Looking to organize an array based on the user's location in an AngularJS/ionic app. Specifically, the goal is to rank restaurants that are closest to the current user location
1/ Within my controller.js, I have the following code to retrieve the user's geocoordinates:
var onSuccess = function(position) {
alert('Latitude: ' + position.coords.latitude + '\n' +
'Longitude: ' + position.coords.longitude + '\n' +
'Altitude: ' + position.coords.altitude + '\n' +
'Accuracy: ' + position.coords.accuracy + '\n' +
'Altitude Accuracy: ' + position.coords.altitudeAccuracy + '\n' +
'Heading: ' + position.coords.heading + '\n' +
'Speed: ' + position.coords.speed + '\n' +
'Timestamp: ' + position.timestamp + '\n');
console.log(position.coords.latitude )
console.log(position.coords.longitude)
};
function onError(error) { // onError Callback receives a PositionError object
alert('code: ' + error.code + '\n' +
'message: ' + error.message + '\n');
}
navigator.geolocation.getCurrentPosition(onSuccess, onError);
2/ Using the following controller to list restaurants:
// RESTAURANTLIST CONTROLLER
.controller('restaurantlistController', function ($scope, $rootScope, restaurantsFactory) {
"use strict";
$scope.restaurantList = restaurantsFactory.getRestaurants();
})
3/ Restaurants are stored in a local factory:
angular.module('wmapp.factory_restaurants', [])
.factory('restaurantsFactory', function () {
"use strict";
var factory = {
Restaurants : [
{Name: 'RestA', address: '45 Avenue Ledru-Rollin', cp: '75012', city: 'Paris', country: 'France', lat: 48.8482040, lng: 2.3706140, icon: 'local_icons.restaurantIcon'},
{Name: 'RestB', address: '3 Rue Mansart', cp: '75009 ', city: 'Paris', country: 'France', lat: 48.8820390, lng: 2.3333150, icon: 'local_icons.restaurantIcon'},
{Name: 'RestC', address: '41, rue Saint-André des Arts', cp: '75006', city: 'Paris', country: 'France', lat: 48.8532490, lng: 2.3409810, icon: 'local_icons.restaurantIcon'}
// more restaurant
],
getRestaurants : function () {
return factory.Restaurants;
},
getRestaurant : function (itemid) {
var Restaurant = {};
angular.forEach(factory.Restaurants, function (value, key) {
if (value.itemid === itemid) {
Restaurant = value;
}
});
return Restaurant;
}
};
return factory;
});
4/ How can I arrange and display restaurants in my HTML based on proximity to the user (potentially showing distance in meters to the user's location)?
<ion-list>
<ion-item ng-controller="loadingCtrl" bindonce ng-repeat="restaurant in restaurantList" href="#">
<article class="item_frame">
<img class="item_icon_circled" src="img/restauranticonv1redcircled.png">
<h1 class="item_name_english2">{{restaurant.Name}}</h1>
<span class="item_description">{{restaurant.subCuisine}}</span>
<span class="item_description">{{restaurant.venueType}}</span>
<span class="item_description">{{restaurant.subsubCuisine}}</span>
<span class="item_description">{{restaurant.address}}</span>
<span class="item_description">{{restaurant.cp}}</span>
<span class="item_description">{{restaurant.city}}</span>
</article><!--main article frame 1 -->
</ion-item>
</ion-list>