minor css bug fixes, moved to OSM(TODO elevation)

css/style.css

@@ -1,6 +1,9 @@
 html, body {
-    height: 100%;
-    width: 100%;
+	position: absolute;
+	top: 0;
+	bottom: 0;
+	left: 0;
+	right: 0;
 }
 
 #container {
@@ -24,9 +27,14 @@ html, body {
 }
 
 #rightNav {
+	display: flex;
+	flex-direction: column;
     width: calc(100% - 450px);
     width: -moz-calc(100% - 450px);
     width: calc(100% - 450px);
+	overflow: hidden;
+	box-sizing: border-box;
+	height:100%;
 }
 
 #footer {
@@ -50,7 +58,7 @@ html, body {
 }
 
 input[type=number] {
-    width: 40px;
+    width: 70px;
 }
 
 table tr td {
@@ -75,3 +83,9 @@ table tr td {
 .glyphicon-left {
     margin-right: 7px;
 }
+
+#lmap {
+	overflow: hidden;
+	width: 100%;
+	height: 100%;
+}

index.html

@@ -6,9 +6,18 @@
     <link rel="stylesheet" type="text/css" href="css/jquery-ui.min.css">
     <script type="text/javascript" src="js/jquery-3.1.1.min.js"></script>
     <script type="text/javascript" src="js/jquery-ui.min.js"></script>
-    <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB3FKjZo6Fe6Lg--EU1Ci7V4rHIiU9Igb4"></script>
+
+	<!-- Leaflet -->
+	<link rel="stylesheet" href="https://unpkg.com/leaflet@1.4.0/dist/leaflet.css"
+		  integrity="sha512-puBpdR0798OZvTTbP4A8Ix/l+A4dHDD0DGqYW6RQ+9jxkRFclaxxQb/SJAWZfWAkuyeQUytO7+7N4QKrDh+drA=="
+		  crossorigin=""/>
+	<script src="https://unpkg.com/leaflet@1.4.0/dist/leaflet.js"
+			integrity="sha512-QVftwZFqvtRNi0ZyCtsznlKSWOStnDORoefr1enyq5mVL4tmKB3S/EnC3rRJcxCPavG10IcrVGSmPh6Qw5lwrg=="
+			crossorigin=""></script> 
+	
+    <!--<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB3FKjZo6Fe6Lg--EU1Ci7V4rHIiU9Igb4"></script>-->
     <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.min.js"></script>
-    <script src="js/ng-map.min.js"></script>
+    <!-- <script src="js/ng-map.min.js"></script> -->
     <script src="js/moment.min.js"></script>
     <script src="js/satellite.min.js"></script>
     <script type="text/javascript" src="js/main.js"></script>
@@ -23,12 +32,12 @@
                         <td><b>Latitude</b></td>
                         <td><b>Longitude</b></td>
                         <td><b>Minimum AoA</b></td>
-                        <td></td>
+						<td></td>
                     </tr>
                     <tr ng-repeat="point in places">
                         <td>{{$index + 1}}</td>
-                        <td>{{point.marker.position.lat().toFixed(6)}}</td>
-                        <td>{{point.marker.position.lng().toFixed(6)}}</td>
+                        <td>{{point.marker.getLatLng().lat.toFixed(6)}}</td>
+                        <td>{{point.marker.getLatLng().lng.toFixed(6)}}</td>
                         <td><input type="number" min="0" max="90" ng-model="point.angle"> deg</td>
                         <td><button type="button" class="btn btn-danger" ng-click="removePoint($index)">Remove</button></td>
                     </tr>
@@ -64,8 +73,8 @@
                     </table><br>
                     <div id="footer">
                         <center>
-                            Developed by Stephen Downward, callsign VA1QLE.<br>
-                            <a href="https://git.scd31.com/laptopdude90/multipoint-satellite-tracker">Git repository</a><br><br>
+                            Developed by Stephen VE9QLE<br>
+                            <a href="https://git.scd31.com/stephen/multipoint-satellite-tracker">Git repository</a><br><br>
                         </center>
                     </div>
                 </div>
@@ -77,7 +86,9 @@
                         </ul>
                     </div>
                     <div id="map" ng-show="selectedTab == 'map'">
-                        <ng-map center="39.82, -77.01" zoom="4" style="height:100%"></ng-map>
+						<div id="lmap"></div>
+                        <!--<ng-map center="39.82, -77.01" zoom="4" style="height:100%"></ng-map>-->
+						
                     </div>
                     <div id="config" ng-show="selectedTab == 'config'">
                         <center>

js/main.js

@@ -1,139 +1,171 @@
 $(function () {
-    var now = new Date();
-    var then = new Date();
-    then.setDate(now.getDate() + 7);
-    $("#fromDate").datepicker().datepicker("setDate", now);
-    $("#toDate").datepicker().datepicker("setDate", then);
+	var now = new Date();
+	var then = new Date();
+	then.setDate(now.getDate() + 7);
+	$("#fromDate").datepicker().datepicker("setDate", now);
+	$("#toDate").datepicker().datepicker("setDate", then);
 });
 
-var app = angular.module('satTrackApp', ['ngMap']);
-
-app.controller('satTrack-ctrl', function($scope, NgMap) {
-    $scope.places = [];
-    $scope.passes = [];
-    $scope.isGettingPasses = false;
-    $scope.selectedTab = 'map';
-    $scope.satellites = [];
-    $scope.selectAllSats = true;
-
-    loadSatelliteData(function(satList) {
-        $scope.satellites = satList;
-    });
-
-    var elevator;
-
-    $scope.removePoint = function(id) {
-        $scope.places[id].marker.setMap(null);
-        $scope.places[id].marker = null;
-        $scope.places.splice(id, 1);
-        for(var i = 0; i < $scope.places.length; i++) {
-            $scope.places[i].marker.setLabel((i + 1).toString());
-        }
-    }
-
-    NgMap.getMap().then(function(map) {
-
-        google.maps.event.addListener(map, 'click', function(event) {
-            var marker = new google.maps.Marker({
-                position: event.latLng,
-                map: map,
-                label: ($scope.places.length + 1).toString(),
-                draggable: true
-            });
-
-            elevator = new google.maps.ElevationService;
-
-            google.maps.event.addListener(marker, 'dragend', function () {
-                $scope.$apply();
-            });
-
-            $scope.places.push({marker: marker, angle: 10});
-            $scope.$apply();
-        });
-    });
-
-    $scope.getPasses = function() {
-        $scope.isGettingPasses = true;
-        callsRemaining = $scope.places.length;
-        for(var i = 0; i < $scope.places.length; i++) {
-            let place = $scope.places[i];
-            elevator.getElevationForLocations({locations: [$scope.places[i].marker.position]}, function(results, status) {
-                if(status === 'OK' && results[0]) {
-                    place.height = Math.max(results[0].elevation / 1000, 0);
-                    callsRemaining--;
-                    if(callsRemaining <= 0) sendCoords();
-                } else {
-                    alert('Something went very wrong');
-                }
-            });
-        }
-        var sendCoords = function() {
-            var coords = $scope.places.map(function(a) {
-                return {
-                    lat: a.marker.position.lat(),
-                    lng: a.marker.position.lng(),
-                    height: a.height,
-                    angle: a.angle
-                };
-            });
-
-            var worker = new Worker('js/calc.js');
-            worker.addEventListener('message', function(e) {
-
-                $scope.passes = e.data;
-                $scope.isGettingPasses = false;
-                $scope.$apply();
-            }, false);
-            var fromDate = $("#fromDate").datepicker('getDate');
-            var toDate = $("#toDate").datepicker('getDate');
-            var duration = Math.abs(moment(toDate).diff(fromDate) / 1000) + 86400;
-            worker.postMessage({coords: coords, satellites: $scope.satellites, fromDate: minDate(fromDate, toDate), toDuration: duration});
-        }
-    }
-
-    $scope.getDate = function(date) {
-        //console.log(date);
-        return moment(date).format("MMM D");
-    }
-
-    $scope.getTime = function(date) {
-        return moment(date).format("HH:mm:ss");
-    }
-
-    $scope.getDifferenceInMinutes = function(a, b) {
-        var d = moment.duration(moment(a).diff(moment(b)));
-        return (d / 60000) + " minutes";
-    }
-
-    $scope.getTimezone = function() {
-        offset = new Date().getTimezoneOffset();
-        halfHour = offset % 60;
-        halfHourStr = halfHour > 9 ? "" + halfHour : "0" + halfHour;
-        return "GMT" + (offset > 0 ? "-" : "+") + Math.floor(offset / 60) + halfHourStr;
-    }
-
-    $scope.toggleEnabled = function(val) {
-        for(var i = 0; i < $scope.satellites.length; i++) {
-            $scope.satellites[i].enabled = val;
-        }
-    }
+var app = angular.module('satTrackApp',[] /*, ['ngMap']*/);
+
+app.controller('satTrack-ctrl', function($scope) {
+	$scope.places = [];
+	$scope.passes = [];
+	$scope.isGettingPasses = false;
+	$scope.selectedTab = 'map';
+	$scope.satellites = [];
+	$scope.selectAllSats = true;
+
+	loadSatelliteData(function(satList) {
+		$scope.satellites = satList;
+	});
+
+	//Init leaflet map
+	var lmap = L.map('lmap').setView([39.82, -77.01], 4);
+
+	L.tileLayer('https://a.tile.openstreetmap.org/{z}/{x}/{y}.png', {
+		attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, <a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>',
+		maxZoom: 20,
+		//id: 'mapbox.streets',
+		//accessToken: 'your.mapbox.access.token'
+	}).addTo(lmap);
+
+	//var elevator;
+
+	$scope.removePoint = function(id) {
+		lmap.removeLayer($scope.places[id].marker);
+		$scope.places[id].marker = null;
+		$scope.places.splice(id, 1);
+		for(var i = 0; i < $scope.places.length; i++) {
+			$scope.places[i].marker.setLabel((i + 1).toString());
+		}
+	}
+
+	function onMapClick(map)
+	{
+		var marker = new L.marker(map.latlng, {draggable: 'true'}).addTo(lmap);
+
+		marker.on('dragend', function(e) {
+			$scope.$apply();
+		});
+		marker.bindTooltip(($scope.places.length + 1).toString()).openTooltip();
+		$scope.places.push({marker: marker, angle:10});
+		$scope.$apply();
+	}
+
+	lmap.on('click', onMapClick);
+	/*NgMap.getMap().then(function(map) {
+
+		google.maps.event.addListener(map, 'click', function(event) {
+			var marker = new google.maps.Marker({
+				position: event.latLng,
+				map: map,
+				label: ($scope.places.length + 1).toString(),
+				draggable: true
+			});
+
+			elevator = new google.maps.ElevationService;
+
+			google.maps.event.addListener(marker, 'dragend', function () {
+				$scope.$apply();
+			});
+
+			$scope.places.push({marker: marker, angle: 10});
+			$scope.$apply();
+		});
+	});*/
+
+	$scope.getPasses = function() {
+		$scope.isGettingPasses = true;
+		//callsRemaining = $scope.places.length;
+
+		//Get elevations
+		for(var i = 0; i < $scope.places.length; i++) {
+			let place = $scope.places[i];
+			place.height = 10; /* ------------TODO-------------- */
+			/*elevator.getElevationForLocations({locations: [$scope.places[i].marker.position]}, function(results, status) {
+				if(status === 'OK' && results[0]) {
+					place.height = Math.max(results[0].elevation / 1000, 0);
+					callsRemaining--;
+					if(callsRemaining <= 0) sendCoords();
+				} else {
+					alert('Something went very wrong');
+				}
+			});*/
+		}
+
+
+		var coords = $scope.places.map(function(a) {
+			return {
+				lat: a.marker.getLatLng().lat,
+				lng: a.marker.getLatLng().lng,
+				height: a.height,
+				angle: a.angle
+			};
+		});
+
+		var worker = new Worker('js/calc.js');
+		worker.addEventListener('message', function(e) {
+
+			$scope.passes = e.data;
+			$scope.isGettingPasses = false;
+			$scope.$apply();
+		}, false);
+		var fromDate = $("#fromDate").datepicker('getDate');
+		var toDate = $("#toDate").datepicker('getDate');
+		var duration = Math.abs(moment(toDate).diff(fromDate) / 1000) + 86400;
+		worker.postMessage({coords: coords, satellites: $scope.satellites, fromDate: minDate(fromDate, toDate), toDuration: duration});
+	}
+
+	$scope.getDate = function(date) {
+		//console.log(date);
+		return moment(date).format("MMM D");
+	}
+
+	$scope.getTime = function(date) {
+		return moment(date).format("HH:mm:ss");
+	}
+
+	$scope.getDifferenceInMinutes = function(a, b) {
+		var d = moment.duration(moment(a).diff(moment(b)));
+		return (d / 60000) + " minutes";
+	}
+
+	$scope.getTimezone = function() {
+		offset = new Date().getTimezoneOffset();
+		halfHour = offset % 60;
+		halfHourStr = halfHour > 9 ? "" + halfHour : "0" + halfHour;
+		return "GMT" + (offset > 0 ? "-" : "+") + Math.floor(offset / 60) + halfHourStr;
+	}
+
+	$scope.toggleEnabled = function(val) {
+		for(var i = 0; i < $scope.satellites.length; i++) {
+			$scope.satellites[i].enabled = val;
+		}
+	}
 });
 
 function loadSatelliteData(callback) {
-    $.get("nasabare.txt", function(data) {
-        var splitLines = data.split(/\r?\n/);
-        var satellites = []
-        for(var i = 0; i < splitLines.length; i += 3) { //3 lines per satellite, so advance by 1 satellite each time
-            if(splitLines[i] != '') {
-                var sat = satellite.twoline2satrec(splitLines[i + 1], splitLines[i + 2]);
-                var name = splitLines[i];
-                satellites.push({name: name, satrec: sat, enabled: true});
-            }
-        }
-        callback(satellites);
-    });
+	$.get("nasabare.txt", function(data) {
+		var splitLines = data.split(/\r?\n/);
+		var satellites = []
+		for(var i = 0; i < splitLines.length; i += 3) { //3 lines per satellite, so advance by 1 satellite each time
+			if(splitLines[i] != '') {
+				var sat = satellite.twoline2satrec(splitLines[i + 1], splitLines[i + 2]);
+				var name = splitLines[i];
+				satellites.push({name: name, satrec: sat, enabled: true});
+			}
+		}
+		//sort satellites by name
+		satellites.sort(function(a, b) {
+			return a.name.localeCompare(b.name);
+		});
+
+		
+		callback(satellites);
+	});
 }
 
 function minDate(date1, date2) {
-    return date1 < date2 ? date1 : date2;
+	return date1 < date2 ? date1 : date2;
 }