1
0
Fork 0
satnogsmap/templates/map.html

131 lines
4.4 KiB
HTML

<head>
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.3.4/dist/leaflet.css"
integrity="sha512-puBpdR0798OZvTTbP4A8Ix/l+A4dHDD0DGqYW6RQ+9jxkRFclaxxQb/SJAWZfWAkuyeQUytO7+7N4QKrDh+drA=="
crossorigin=""/>
<script src="https://unpkg.com/leaflet@1.3.4/dist/leaflet.js"
integrity="sha512-nMMmRyTVoLYqjP9hrbed9S+FzjZHW5gY1TWCHA5ckwXZBadntCNs8kEqAWdrb9O7rxbCaA4lKTIWjDXZxflOcA=="
crossorigin=""></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src=" https://unpkg.com/@joergdietrich/leaflet.terminator@1.0.0/L.Terminator.js"></script>
</head>
<style>
#mapid { height: 700px; }
</style>
<div class="container">
<div class="row"> .
<div class="col-md-12">
<center>
<img src="/static/satnogs-net-logo.png">
<br>
<br>
<div id="mapid" ></div>
</center>
</div>
</div>
</div>
<script>
var light_sat = L.icon({
iconUrl: 'static/satellite-marker-light.png',
iconSize: [40, 40],
iconAnchor: [20, 20],
popupAnchor: [0, 0],
});
var dark_sat = L.icon({
iconUrl: 'static/satellite-marker-dark.png',
iconSize: [40, 40],
iconAnchor: [20, 20],
popupAnchor: [0, 0],
});
var station = L.icon({
iconUrl: 'static/station-marker.png',
iconSize: [10, 10],
iconAnchor: [5, 5],
popupAnchor: [0, 0],
});
var active_station = L.icon({
iconUrl: 'static/active-station-marker.png',
iconSize: [20, 20],
iconAnchor: [10, 10],
popupAnchor: [0, 0],
});
var mymap = L.map('mapid',{worldCopyJump:true}).setView([0,0], 2);
L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token={accessToken}', {
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>, Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
maxZoom: 18,
id: 'mapbox.streets',
accessToken: 'pk.eyJ1IjoiY2hpYmlsbCIsImEiOiJjamxsNHBuZG4wdG1uM3FwYTN5c2ZubmxrIn0.ghkx6AngBzUiZQWBAWKziQ'
}).addTo(mymap);
function UpdateMap(e) {
var satPos = e[0]
var links = e[1]
}
$.get("/activestations", function(data, status){
data = JSON.parse(data)
Object.keys(data).forEach(function(key){
sat = light_sat
if(data[key]["eclipsed"]){
sat = dark_sat
}
if(data[key]["image"] != null){
image = data[key]["image"]
if(data[key]["eclipsed"]){
image = image + "-dark.png"
}else{
image = image + "-light.png"
}
sat = L.icon({
iconUrl: image,
iconSize: [40, 40],
iconAnchor: [20, 20],
popupAnchor: [0, 0],
});
}
marker = L.marker(data[key]["lat_lng"],{icon: sat,zIndexOffset:1000}).addTo(mymap);
marker.bindPopup("<b>Name: "+data[key]["name"]+"</b><br><b>Norad: "+key+"</b><br><b>Eclipsed?: "+data[key]["eclipsed"]);
sats[key] = marker;
});
});
//Ground Stations
// marker = L.marker({{x["lat_lng"]}},{icon: station,zIndexOffset:-1000}).addTo(mymap);
//marker.bindPopup("<b>Name: {{x['name']}}</b>")
//Sats
//marker = L.marker(data[key]["lat_lng"],{icon: sat,zIndexOffset:1000}).addTo(mymap);
//marker.bindPopup("<b>Name: "+data[key]["name"]+"</b><br><b>Norad: "+key+"</b><br><b>Eclipsed?: "+data[key]["eclipsed"]);
//sats[key] = marker;
//lines
// firstpolyline = new L.Polyline([[stationList[entry[0]]._latlng.lat,stationList[entry[0]]._latlng.lng],[sats[entry[1]]._latlng.lat,sats[entry[1]]._latlng.lng]], {color: '#'+entry[1].toString(16).repeat(2).substr(0,6),weight: 3,opacity: 1,smoothFactor: 1});
// firstpolyline.addTo(mymap)
</script>
<a rel="license" href="http://creativecommons.org/licenses/by-sa/4.0/"><img alt="Creative Commons License" style="border-width:0" src="https://i.creativecommons.org/l/by-sa/4.0/88x31.png" /></a><br />This work is licensed under a <a rel="license" href="http://creativecommons.org/licenses/by-sa/4.0/">Creative Commons Attribution-ShareAlike 4.0 International License</a>