I am encountering an issue with my app that functions perfectly as a typical web app, but fails to work properly when converted into a Multi-Device-Hybrid-App format. The problematic sections are indicated in a screenshot of the app. Below is my complete code:
JS:
var app = angular.module('app', []);
app.controller('firstCtrl', function($scope, $timeout) {
var myLat, myLon, locLat, locLon;
navigator.geolocation.watchPosition(GetLocation);
$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"
}
}];
$scope.SSiteLocs = [{
"name": "502 Nelson St, Greenville, MS 38701",
"visibility": "0",
"description": "502 Nelson St, Greenville, MS 38701",
"styleUrl": "#waypoint",
"Point": {
"coordinates": "-91.05636,33.415485,0"
}
}, {
"name": "242 Blackhawk Trace, Galena, IL 61036",
"visibility": "0",
"description": "242 Blackhawk Trace, Galena, IL 61036",
"styleUrl": "#waypoint",
"Point": {
"coordinates": "-90.319778,42.390862,0"
}
}, {
"name": "3747 Ocean Dr, Vero Beach, FL 32963",
"visibility": "0",
"description": "3747 Ocean Dr, Vero Beach, FL 32963",
"styleUrl": "#waypoint",
"Point": {
"coordinates": "-80.358248,27.659094,0"
}
}];
$scope.SiteLocs = $scope.SSiteLocs.concat($scope.ASiteLocs);
$scope.repoSortOrder = "+name";
function GetLocation(location, myLat, myLon) {
myLat = location.coords.latitude;
myLon = location.coords.longitude;
document.getElementById("lat").innerHTML = myLat;
document.getElementById("lon").innerHTML = myLon;
$timeout(function() {
calculate();
});
}
$scope.getCoordDistance = function(myLat, myLon, locLat, locLon) {
console.log(myLat.toString(), myLon);
var lat1 = locLat; //41.887055
var lon1 = locLon; //-88.469233
var lat2 = myLat; //41.888668
var lon2 = myLon; //-87.640371
var R = 3959;
var x1 = lat2 - lat1;
var dLat = x1 * Math.PI / 180;
var x2 = lon2 - lon1;
var dLon = x2 * Math.PI / 180;
a = Math.sin(dLat / 2) * Math.sin(dLat / 2) +
Math.cos(lat1 * Math.PI / 180) * Math.cos(lat2 * Math.PI / 180) *
Math.sin(dLon / 2) * Math.sin(dLon / 2);
c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a));
var d = R * c;
return d;
};
angular.forEach($scope.SSiteLocs, function(object) {
object.carrier = 'Sprint';
});
angular.forEach($scope.ASiteLocs, function(object) {
object.carrier = 'AT&T';
});
var calculate = function() {
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);
myLat = Number(document.getElementById("lat").innerHTML);
myLon = Number(document.getElementById("lon").innerHTML);
locLat = Lon;
locLon = Lat;
d = $scope.getCoordDistance(myLat, myLon, locLat, locLon);
d = d.toFixed(1);
d = Number(d);
location.distance = d;
}
});
};
});
HTML:
<!DOCTYPE html>
<html ng-app="app">
<head>
<link href="http://fonts.googleapis.com/css?family=Droid+Serif" rel="stylesheet" type="text/css" />
<script data-require="angular.js@*" data-semver="1.2.17" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.17/angular.min.js"></script>
<script data-require="jquery@*" data-semver="2.1.1" src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script data-require="<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="82e5edede5eee7afefe3f2f1c2b3acb2acb2">[email protected]</a>" data-semver="1.0.0" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script data-require="angular-route@*" data-semver="1.2.17" src="http://code.angularjs.org/1.2.17/angular-route.js"></script>
<script data-require="geo-location-javascript@*" data-semver="0.4.8" src="//cdnjs.cloudflare.com/ajax/libs/geo-location-javascript/0.4.8/geo.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
<script src="cordova.js"></script>
<script src="scripts/platformOverrides.js"></script>
<link href="css/index.css" rel="stylesheet" />
<script src="scripts/script.js"></script>
<title>ECC</title>
</head>
<body link="white" vlink="white">
<center>
<h1>Site Lookup</h1>
<div>{{site.carrier}}</div>
<div ng-controller="firstCtrl">
<input type="text" ng-model="search" border="1" placeholder="Search Name or Distance" />
<br><div id="astDiv">Select sort option...</div>
<select ng-model="repoSortOrder">
Sort by
<option value="+name">Name--Alphabetical</option>
<option value="-name">Name--Backwards Alphabetical</option>
<option value="-distance">Distance--Descending</option>
<option value="+distance">Distance--Ascending</option>
</select>
<div id="astDiv">*Distances are not exact*</div>
<table border="1">
<thead>
<tr>
<td>Name</td>
<td>Distance*</td>
<td>Carrier</td>
</tr>
</thead>
<tbody>
<tr ng-repeat="site in SiteLocs | orderBy:repoSortOrder | filter : search">
<td>
<a ng-href="http://maps.google.com/?q={{site.Point.coordinates}}">
{{site.name}}
</a>
</td>
<td>{{site.distance}} Miles</td>
<td>
{{site.carrier}}
</td>
</tr>
</tbody>
</table>
<div id="lat"></div>
<div id="lon"></div>
</div>
</center>
</body>
</html>
CSS:
@font-face {
font-family: myFirstFont;
src: url(roboto-light.ttf);
}
html{
background: url(http://www.pixeden.com/media/k2/galleries/220/006-wood-melamine-subttle-pattern-background-pat.jpg)
}
a {
text-decoration: none;
}
table{
color: white;
font-size:1.25em;
font-family: 'Droid Serif', serif;
text-align: left;
vertical-align: middle;
width: 100%;
}
input {
border: 0px solid white;
-webkit-box-shadow:
inset 0 0 40px rgba(20,20,20,500),
0 0 40px rgba(20,20,20,500);
-moz-box-shadow:
inset 0 0 40px rgba(20,20,20,500),
0 0 40px rgba(20,20,20,500);
box-shadow:
inset 0 0 5px rgba(0,0,0,10),
0 0 75px rgba(0,0,0,10);
padding: 15px;
background: rgba(255,255,220,5);
margin: 0 0 10px 0;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 25px;
font-family: 'Droid Serif', serif;
}
#astDiv{ color: white;}
h1 {
color:#ffffff;
font-family: 'Droid Serif', serif;
}
#latDiv {
color:#000000;
font-family: 'Droid Serif', serif;
}
#lonDiv {
color:#000000;
font-family: 'Droid Serif', serif;
}
The appearance of the app should be as depicted above:
However, when viewed within a Multi-Device-Hybrid-App environment, it looks different:
Additionally, clicking on a location name triggers a Google Maps search for the coordinates and opens a map based on them. Manipulation of the map's coordinates is performed in the code to ensure correct formatting. This functionality seems to fail in Multi-Device-Hybrid-Apps. I suspect the issue lies within the calculate() function, but I'm uncertain. Could there be platform-specific requirements or errors in my implementation? Any assistance would be greatly valued!!