Develop Reference

Can't display data captured through Json in for loop

$.getJSON("https://example.com//json/", function (data) {
var count = Object.keys(data).length;
for (var i = 0; i < count; i++) {
var lat = data[i].LAT;
var lng = data[i].LNG;
var locs = { lat: lat, lng: lng };
var check = arePointsNear(pos, locs, 2487);
if (check) listStations.push(data[i].ID);
}
console.log(listStations);
console.log(listStations[0]);
});
function arePointsNear(checkPoint, centerPoint, m) {
var km = m/1000;
var ky = 40000 / 360;
var kx = Math.cos(Math.PI * centerPoint.lat / 180) * ky;
var dx = Math.abs(centerPoint.lng - checkPoint.lng) * kx;
var dy = Math.abs(centerPoint.lat - checkPoint.lat) * ky;
return Math.sqrt(dx * dx + dy * dy) <= km;
}
Example json in data;
{
"ID": 359,
"NAME": "Atatürk Bulvarı 1",
"LOCATION": "0001 Atatürk Bulvarı 1",
"PARK_INFO": "2",
"PARK_CAPACITY": 18,
"START_TIME": {
"Ticks": 270000000000,
"Days": 0,
"Hours": 7,
"Milliseconds": 0,
"Minutes": 30,
"Seconds": 0,
"TotalDays": 0.3125,
"TotalHours": 7.5,
"TotalMilliseconds": 27000000,
"TotalMinutes": 450,
"TotalSeconds": 27000
},
"FINISH_TIME": {
"Ticks": 666000000000,
"Days": 0,
"Hours": 18,
"Milliseconds": 0,
"Minutes": 30,
"Seconds": 0,
"TotalDays": 0.77083333333333326,
"TotalHours": 18.5,
"TotalMilliseconds": 66600000,
"TotalMinutes": 1110,
"TotalSeconds": 66600
},
"DISTRICT_CODE": "20",
"ADRESS": "KEMALPAŞA MAHALLESİ ATATÜRK BULVARI 1 / EMİNÖNÜ",
"LNG": 28.9535382991555,
"LAT": 41.0112914996693,
"SUBS_PRICE": 0,
"FREE_TIME": 15
}
It is ok to pull json data from the relevant link. Sending the data to the arePointsNear function and verifying true-false is ok. When I write the console.log data written in the code in the bottom line (in for), 0.index is undefined.
By the way, variables are defined independently and globally at the top.
What should I do?

You might consider using $.each(). Assuming you're data is an Array of Objects, consider this example.
$(function() {
function arePointsNear(checkPoint, centerPoint, m) {
var km = m / 1000;
var ky = 40000 / 360;
var kx = Math.cos(Math.PI * centerPoint.lat / 180) * ky;
var dx = Math.abs(centerPoint.lng - checkPoint.lng) * kx;
var dy = Math.abs(centerPoint.lat - checkPoint.lat) * ky;
return Math.sqrt(dx * dx + dy * dy) <= km;
}
var pos;
var listStations = [];
$.getJSON("https://example.com/json/", function(data) {
$.each(data, function(index, location) {
if (arePointsNear(pos, {
lat: location.LAT,
lng: location.LNG
}, 2487)) {
listStations.push(location.ID);
}
});
console.log(listStations);
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Find the nearest friends from my current location

I want to find my friends by taking their location from their mobile phone who are near to me from my current location.
For example in my code below I have var cities, If I put 3,4 numbers of my friends so I can do this? Or can I do this making some other changes? Is it possible?
// Get User's Coordinate from their Browser
window.onload = function () {
// HTML5/W3C Geolocation
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(UserLocation);
}
// Default to Washington, DC
else
NearestCity(38.8951, -77.0367);
}
// Callback function for asynchronous call to HTML5 geolocation
function UserLocation(position) {
NearestCity(position.coords.latitude, position.coords.longitude);
}
// Convert Degress to Radians
function Deg2Rad(deg) {
return deg * Math.PI / 180;
}
function PythagorasEquirectangular(lat1, lon1, lat2, lon2) {
lat1 = Deg2Rad(lat1);
lat2 = Deg2Rad(lat2);
lon1 = Deg2Rad(lon1);
lon2 = Deg2Rad(lon2);
var R = 6371; // km
var x = (lon2 - lon1) * Math.cos((lat1 + lat2) / 2);
var y = (lat2 - lat1);
var d = Math.sqrt(x * x + y * y) * R;
return d;
}
var lat = 20; // user's latitude
var lon = 40; // user's longitude
var cities = [
["city1", 10, 50, "blah"],
["city2", 40, 60, "blah"],
["city3", 25, 10, "blah"],
["city4", 5, 80, "blah"]
];
function NearestCity(latitude, longitude) {
var mindif = 99999;
var closest;
for (index = 0; index < cities.length; ++index) {
var dif = PythagorasEquirectangular(latitude, longitude, cities[index]
[1], cities[index][2]);
if (dif < mindif) {
closest = index;
mindif = dif;
}
}
// echo the nearest city
alert(cities[closest]);
}

I suggest using GeoFire for that purpose it is from firebase and has Geographical based queries and can do what you want in an easy way

Haversine Formula and Geolocation in AngularJS

I'm, writing an app that'll sort location by either name or distance from the user. Everything works as it should except getting the distance. Theoretically, I should be able to get the coordinates of the user through geolocation and I already have the coordinates to every location. Shouldn't I be able to run the haversine formula with these coordinates and attach the distance to each location via object.distance = d? Here is my code and a plunk to my project.
Plunker: http://plnkr.co/edit/nRQc7Ym0lsaK6jQwd626?p=preview
Code:
var app = angular.module('app', []);
app.controller('firstCtrl', function($scope) {
$scope.ASiteLocs = [{
"name": "IL5077 BRUSSELS",
"styleUrl": "#waypoint",
"Point": {
"coordinates": "-90.58543899999999,38.955472,0"
}
}, {
"name": "IL5076 KAMPSVILLE",
"styleUrl": "#waypoint",
"Point": {
"coordinates": "-90.661923,39.29403,0"
}
}, {
"name": "IL5146 CARROLLTON",
"styleUrl": "#waypoint",
"Point": {
"coordinates": "-90.39965700000001,39.309142,0"
}
}, {
"name": "IL5153 GREENFIELD",
"styleUrl": "#waypoint",
"Point": {
"coordinates": "-90.208747,39.364077,0"
}
}];
$scope.SSiteLocs = [More Locations...];
$scope.SiteLocs = $scope.SSiteLocs.concat($scope.ASiteLocs);
repoSortOrder = "site.name";
navigator.geolocation.getCurrentPosition(GetLocation);
function GetLocation(location) {
Lat = location.coords.latitude;
Lon = location.coords.longitude;
}
angular.forEach($scope.SSiteLocs, function(object) {
object.carrier = 'Sprint';
getCoordDistance();
object.distance = $scope.d
});
angular.forEach($scope.ASiteLocs, function(object) {
object.carrier = 'AT&T';
getCoordDistance();
object.distance = $scope.d
});
angular.forEach($scope.SiteLocs, function(location) {
var clength = location.Point.coordinates.length;
if (location.Point.coordinates.substring(clength - 2, clength) === ",0") {
location.Point.coordinates = location.Point.coordinates.substring(0, clength - 2).split(",");
Lat = location.Point.coordinates[0];
Lon = location.Point.coordinates[1];
Com = ",";
location.Point.coordinates = Lon.concat(Com, Lat);
}
});
function getCoordDistance() {
Number.prototype.toRad = function() {
return this * Math.PI / 180;
}
var lat2 = Lat;
var lon2 = Lon;
var lat1 = 45;//Test Lat
var lon1 = -50;//Test Lon
var R = 3959; // Radius in miles
//has a problem with the .toRad() method below.
var x1 = lat2 - lat1;
var dLat = x1.toRad();
var x2 = lon2 - lon1;
var dLon = x2.toRad();
var a = Math.sin(dLat / 2) * Math.sin(dLat / 2) +
Math.cos(lat1.toRad()) * Math.cos(lat2.toRad()) *
Math.sin(dLon / 2) * Math.sin(dLon / 2);
var c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a));
$scope.d = R * c;
}
});
In the code above when I use integers for the Lat/Lons in getCoordDistance() for instance, lat1 = 5,lat2 = 10,lon1 = 0,lon2 = 0 it works and adds the distance to each location. But when I try to use my location it fails. Any Ideas? Thanks in advance for any help.

I figured it out, My getCoordDistance() was undefined.

Geolocation closest location(lat, long) from my position

I want to show specific information depending on where i am.
I have five cities with different information, and i want to show that city(information) that i'm closest to.
How to i do that the simplest way, using javascript.
Ex.
If i store the cities lat, long in an array
var cities = [
['new york', '111111', '222222', 'blablabla']
['boston', '111111', '222222', 'blablabla']
['seattle', '111111', '222222', 'blablabla']
['london', '111111', '222222', 'blablabla']
]
And with my current location(lat, long) i want the city that i'm closet to.

Here is a basic code example using HTML5 geolocation to get the user's position. It then calls NearestCity() and calculates the distance (km) from the location to each city. I passed on using the Haversine formulae and instead used the simpler Pythagoras formulae and an equirectangular projection to adjust for the curvature in longitude lines.
// Get User's Coordinate from their Browser
window.onload = function() {
// HTML5/W3C Geolocation
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(UserLocation);
}
// Default to Washington, DC
else
NearestCity(38.8951, -77.0367);
}
// Callback function for asynchronous call to HTML5 geolocation
function UserLocation(position) {
NearestCity(position.coords.latitude, position.coords.longitude);
}
// Convert Degress to Radians
function Deg2Rad(deg) {
return deg * Math.PI / 180;
}
function PythagorasEquirectangular(lat1, lon1, lat2, lon2) {
lat1 = Deg2Rad(lat1);
lat2 = Deg2Rad(lat2);
lon1 = Deg2Rad(lon1);
lon2 = Deg2Rad(lon2);
var R = 6371; // km
var x = (lon2 - lon1) * Math.cos((lat1 + lat2) / 2);
var y = (lat2 - lat1);
var d = Math.sqrt(x * x + y * y) * R;
return d;
}
var lat = 20; // user's latitude
var lon = 40; // user's longitude
var cities = [
["city1", 10, 50, "blah"],
["city2", 40, 60, "blah"],
["city3", 25, 10, "blah"],
["city4", 5, 80, "blah"]
];
function NearestCity(latitude, longitude) {
var minDif = 99999;
var closest;
for (index = 0; index < cities.length; ++index) {
var dif = PythagorasEquirectangular(latitude, longitude, cities[index][1], cities[index][2]);
if (dif < minDif) {
closest = index;
minDif = dif;
}
}
// echo the nearest city
alert(cities[closest]);
}

With HTML5, you can pull the location of the user and then compares this example using a Haversine function (function below taken from here):
function getDistanceFromLatLonInKm(lat1,lon1,lat2,lon2) {
var R = 6371; // Radius of the earth in km
var dLat = deg2rad(lat2-lat1); // deg2rad below
var dLon = deg2rad(lon2-lon1);
var a =
Math.sin(dLat/2) * Math.sin(dLat/2) +
Math.cos(deg2rad(lat1)) * Math.cos(deg2rad(lat2)) *
Math.sin(dLon/2) * Math.sin(dLon/2)
;
var c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1-a));
var d = R * c; // Distance in km
return d;
}
function deg2rad(deg) {
return deg * (Math.PI/180)
}

You can calculate the distance by latitude with your location and the cities locations. And find the shortest and draw. To calculate you can read more in http://www.movable-type.co.uk/scripts/latlong.html

Geolocation WatchPosition Distance Calculator

I am using geolocation to get the users current location and monitor it using the watchPosition method. However, is there a way of calculating the distance between the users starting position and current position? Below is my code:
var x = document.getElementById("info");
function getLocation() {
if(navigator.geolocation) {
navigator.geolocation.watchPosition(showPosition, showError, {
enableHighAccuracy: true,
maximumAge: 60000,
timeout: 27000
})
} else {
x.innerHTML = "Geolocation is not supported by this browser.";
}
}
var flightPathCoordinates = [];
function showPosition(position) {
x.innerHTML = "Latitude: " + position.coords.latitude + "<br>Longitude: " + position.coords.longitude + "<br>Accuracy: " + position.coords.accuracy + "<br>Altitude: " + position.coords.altitude + "<br>Altitude Accuracy: " + position.coords.altitudeAccuracy + "<br>Heading: " + position.coords.heading + "<br>Speed: " + position.coords.speed + "<br>Speed (mph): " + position.coords.speed * 2.2369 + "<br>Speed (km): " + position.coords.speed * 3.6 + "<br>Timestamp: " + new Date(position.timestamp).toLocaleString() + "<br>Distance Travelled (km): " + calculateDistance(position.coords.latitude, position.coords.longitude, position.coords.latitude, position.coords.longitude);
// Distance Calculator
function calculateDistance(lat1, lon1, lat2, lon2) {
if(typeof (Number.prototype.toRad) === "undefined") {
Number.prototype.toRad = function () {
return this * Math.PI / 180;
}
}
var R = 6371; // km
var dLat = (lat2 - lat1).toRad();
var dLon = (lon2 - lon1).toRad();
var a = Math.sin(dLat / 2) * Math.sin(dLat / 2) + Math.cos(lat1.toRad()) * Math.cos(lat2.toRad()) * Math.sin(dLon / 2) * Math.sin(dLon / 2);
var c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a));
var d = R * c;
return d;
}
Number.prototype.toRad = function () {
return this * Math.PI / 180;
}
lat = position.coords.latitude;
lon = position.coords.longitude;
latlon = new google.maps.LatLng(lat, lon)
mapholder = document.getElementById('mapholder')
var myOptions = {
center: latlon,
zoom: 16,
mapTypeId: google.maps.MapTypeId.ROADMAP,
mapTypeControl: true,
navigationControlOptions: {
style: google.maps.NavigationControlStyle.SMALL
}
}
var map = new google.maps.Map(document.getElementById("mapholder"), myOptions);
Any help would be very much appreciated as I am quite new to this.
Thanks!

This has been adapted from the Google Maps API, and reworked to be independent of the library.
Example - calculate the distance from the center of New York City to the center of Philadelphia.
Fiddle for miles: http://jsfiddle.net/DXNzu/
Fiddle for kilometers: http://jsfiddle.net/DXNzu/1/
JS
function distanceFrom(points) {
var lat1 = points.lat1;
var radianLat1 = lat1 * (Math.PI / 180);
var lng1 = points.lng1;
var radianLng1 = lng1 * (Math.PI / 180);
var lat2 = points.lat2;
var radianLat2 = lat2 * (Math.PI / 180);
var lng2 = points.lng2;
var radianLng2 = lng2 * (Math.PI / 180);
var earth_radius = 3959; // or 6371 for kilometers
var diffLat = (radianLat1 - radianLat2);
var diffLng = (radianLng1 - radianLng2);
var sinLat = Math.sin(diffLat / 2);
var sinLng = Math.sin(diffLng / 2);
var a = Math.pow(sinLat, 2.0) + Math.cos(radianLat1) * Math.cos(radianLat2) * Math.pow(sinLng, 2.0);
var distance = earth_radius * 2 * Math.asin(Math.min(1, Math.sqrt(a)));
return distance.toFixed(3);
}
var distance = distanceFrom({
// NYC
'lat1': 40.713955826286046,
'lng1': -74.00665283203125,
// Philly
'lat2': 39.952335,
'lng2': -75.163789
});
The result is 80.524 miles or 129.583 kilometers.

you can use Haversine formula
rad = function(x) {return x*Math.PI/180;}
distHaversine = function(p1, p2) { // Points are Geolocation.coords objects
var R = 6371; // earth's mean radius in km
var dLat = rad(p2.latitude - p1.latitude);
var dLong = rad(p2.longitude - p1.longitude);
var a = Math.sin(dLat/2) * Math.sin(dLat/2) +
Math.cos(rad(p1.lat())) * Math.cos(rad(p2.lat())) * Math.sin(dLong/2) * Math.sin(dLong/2);
var c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1-a));
var d = R * c;
return d.toFixed(3);
}
Two tips
typeof is not a function. Use it like this: typeof something
Do not put polyfills in listeners. you are repeating the polyfill action in every time listener fires.