JQuery - Find coordinates closest to my current location from array, retrieve element

Question

New to JQuery.

Had a look at iPhone: Sorting based on location

But it does not answer my question.

I have the following array "MyStoreArray" and want to determine which site is closest to my current location and retrieve the "storenum" element for that site. And use that element to contact the site.

Sample Array:

myStoreArray: (
    {
        StoreName = StoreName1;
        Latitude = "-26.01672";
        Longitude = "28.127379";
        StoreNum = "0113675700";
    },
    {
        StoreName = StoreName2;
        Latitude = "-26.018744";
        Longitude = "28.007777";
        StoreNum = "0115535800";
    },
)

Is it important to be a JQuery? Use the native libraries if possible. Would be much easier. You need to create a bridge between your location manager and webview to pass the data between. It complicates your life a lot. — Pancho, Apr 29 '14 at 10:43

Reinstate Monica Cellio · Answer 1 · 2014-04-29T11:24:32.567

I did a store locator for a site recently, and I'm feeling generous. Try this.

Working jsfiddle example

First of all, put your stores into an array of objects...

var _stores = [{
    storeName: "StoreName1",
    latitude: -26.01672,
    longitude: 28.127379,
    storeNum: "0113675700"
}, {
    storeName: "StoreName2",
    latitude: -26.018744,
    longitude: 28.007777,
    storeNum: "0115535800"
}];

Then we need to include the google script to get the user's current location...

var _position = {};

function success(position) {
    console.log(position);
    _position = position.coords;
    sortStoresByDistance();  // this is explained further down
    alert("Your nearest store is " + _stores[0].storeName +
        " (" + _stores[0].storeNum + ")");
}
function error(err) {
    alert("Geolocation error : " + err);
}
var options = {
    enableHighAccuracy: true,
    timeout: 5000,
    maximumAge: 10
};

function googleCallback() {
    navigator.geolocation.getCurrentPosition(success, error, options);
}

$.getScript("https://www.google.com/jsapi", function () {
    google.load("maps", "3", {
        other_params: "sensor=false",
        streetViewControl: false,
        callback: function () {
            googleCallback();
        }
    });
});

Now we have all the required information, sort the list of stores by distance...

if (typeof (Number.prototype.toRad) !== "function") {
    Number.prototype.toRad = function () {
        return this * Math.PI / 180;
    }
}

function sortStoresByDistance() {
    for (var i = 0; i < _stores.length; i++) {
        _stores[i].distance = getDistance(_position, _stores[i]);
    }
    _stores.sort(function (a, b) {
        return a.distance - b.distance;
    });
}

function getDistance(position1, position2) {
    var lat1 = position1.latitude;
    var lon1 = position1.longitude;
    var lat2 = position2.latitude;
    var lon2 = position2.longitude;

    console.log(lat1, lon1, lat2, lon2);

    var R = 6371; // km
    var dLat = (lat2 - lat1).toRad();
    var dLon = (lon2 - lon1).toRad();
    var lat1 = lat1.toRad();
    var lat2 = lat2.toRad();
    var a = Math.sin(dLat / 2) * Math.sin(dLat / 2) +
            Math.sin(dLon / 2) * Math.sin(dLon / 2) * Math.cos(lat1) * Math.cos(lat2);
    var c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a));
    var d = R * c;
    return d;
}

Once that has run the stores will be sorted by distance, so _stores[0] is your nearest one and you're looking for _stores[0].storeNum

JQuery - Find coordinates closest to my current location from array, retrieve element

1 Answers1