Browse Source

Switching from google maps to osm

master
Stephen Downward 1 year ago
parent
commit
c8f9e764c6
2 changed files with 93 additions and 93 deletions
  1. +92
    -92
      index.html
  2. +1
    -1
      js/main.js

+ 92
- 92
index.html View File

@@ -1,104 +1,104 @@
<html ng-app="satTrackApp">
<head>
<title>Multipoint Satellite Tracker</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="css/style.css">
<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>
<head>
<title>Multipoint Satellite Tracker</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="css/style.css">
<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>

<!-- 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/moment.min.js"></script>
<script src="js/satellite.min.js"></script>
<script type="text/javascript" src="js/main.js"></script>
</head>
<body>
<div id="container" ng-controller="satTrack-ctrl">
<div id="controls">
<center>
<table border="1" ng-show="places.length > 0">
<tr>
<td><b>ID</b></td>
<td><b>Latitude</b></td>
<td><b>Longitude</b></td>
<td><b>Minimum AoA</b></td>
<td></td>
</tr>
<tr ng-repeat="point in places">
<td>{{$index + 1}}</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>
</table>
<div style="margin: 6px">
Click on the map to add a point<br>
Time zone: {{getTimezone()}}
</div><BR><BR>
<!-- 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/moment.min.js"></script>
<script src="js/satellite.min.js"></script>
<script type="text/javascript" src="js/main.js"></script>
</head>
<body>
<div id="container" ng-controller="satTrack-ctrl">
<div id="controls">
<center>
<table border="1" ng-show="places.length > 0">
<tr>
<td><b>ID</b></td>
<td><b>Latitude</b></td>
<td><b>Longitude</b></td>
<td><b>Minimum AoA</b></td>
<td></td>
</tr>
<tr ng-repeat="point in places">
<td>{{$index + 1}}</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>
</table>
<div style="margin: 6px">
Click on the map to add a point<br>
Time zone: {{getTimezone()}}
</div><BR><BR>
From <input type="text" id="fromDate" style="width: 90px;">
to <input type="text" id="toDate" style="width: 90px;"><br><br>
<button type="button" class="btn btn-success" ng-disabled="places.length == 0" ng-click="getPasses()">Calculate Passes</button>
<span class='glyphicon-left glyphicon glyphicon-refresh spinning' ng-show='isGettingPasses'></span>
</center><BR>
<table border="1">
<tr>
<td><b>Date</b></td>
<td><b>Sat name</b></td>
<td><b>Start time</b></td>
<td><b>Max AoAs</b></td>
<td><b>End time</b></td>
<td><b>Total time of contact</b></td>
</tr>
<tr ng-repeat="pass in passes">
<td>{{getDate(pass.time_start)}}</td>
<td>{{pass.name}}</td>
<td>{{getTime(pass.time_start)}}</td>
<td style="white-space: nowrap;"><div ng-repeat="stat in pass.pointStats">
<table border="1">
<tr>
<td><b>Date</b></td>
<td><b>Sat name</b></td>
<td><b>Start time</b></td>
<td><b>Max AoAs</b></td>
<td><b>End time</b></td>
<td><b>Total time of contact</b></td>
</tr>
<tr ng-repeat="pass in passes">
<td>{{getDate(pass.time_start)}}</td>
<td>{{pass.name}}</td>
<td>{{getTime(pass.time_start)}}</td>
<td style="white-space: nowrap;"><div ng-repeat="stat in pass.pointStats">
Point {{$index + 1}}: {{stat.maxElv.toFixed(0)}} deg @ {{getTime(stat.timeMaxElv)}}
</div></td>
<td>{{getTime(pass.time_end)}}</td>
<td>{{getDifferenceInMinutes(pass.time_end, pass.time_start)}}</td>
</tr>
</table><br>
<div id="footer">
<center>
Developed by Stephen VE9QLE<br>
<a href="https://git.scd31.com/stephen/multipoint-satellite-tracker">Git repository</a><br><br>
</center>
</div>
</div></td>
<td>{{getTime(pass.time_end)}}</td>
<td>{{getDifferenceInMinutes(pass.time_end, pass.time_start)}}</td>
</tr>
</table><br>
<div id="footer">
<center>
Developed by Stephen VE9QLE<br>
<a href="https://git.scd31.com/stephen/multipoint-satellite-tracker">Git repository</a><br><br>
</center>
</div>
<div id="rightNav">
<div id="tabs">
<ul class="nav nav-tabs">
<li class="{{(selectedTab == 'map') ? 'active':''}}"><a href ng-click="selectedTab = 'map'">Map</a></li>
<li class="{{(selectedTab == 'config') ? 'active':''}}"><a href ng-click="selectedTab = 'config'">Configure satellites</a></li>
</ul>
</div>
<div id="map" ng-show="selectedTab == '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>
Select all/none <input type="checkbox" ng-model="selectAllSats" ng-change="toggleEnabled(selectAllSats)"><br><br>
</center>
<div id="satlist">
<div ng-repeat="sat in satellites" style="white-space: nowrap;"><input type="checkbox" ng-model="sat.enabled">&emsp;{{sat.name}}</div>
</div>
</div>
<div id="rightNav">
<div id="tabs">
<ul class="nav nav-tabs">
<li class="{{(selectedTab == 'map') ? 'active':''}}"><a href ng-click="selectedTab = 'map'">Map</a></li>
<li class="{{(selectedTab == 'config') ? 'active':''}}"><a href ng-click="selectedTab = 'config'">Configure satellites</a></li>
</ul>
</div>
<div id="map" ng-show="selectedTab == '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>
Select all/none <input type="checkbox" ng-model="selectAllSats" ng-change="toggleEnabled(selectAllSats)"><br><br>
</center>
<div id="satlist">
<div ng-repeat="sat in satellites" style="white-space: nowrap;"><input type="checkbox" ng-model="sat.enabled">&emsp;{{sat.name}}</div>
</div>
</div>
</div>
</body>
</html>
</div>
</body>
</html>

+ 1
- 1
js/main.js View File

@@ -23,7 +23,7 @@ app.controller('satTrack-ctrl', function($scope) {
//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', {
L.tileLayer('https://map.stormwindmc.com/styles/osm-bright/{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',


Loading…
Cancel
Save