Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Location and path of the ISS
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.3/leaflet.css" />
<script src="//cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.3/leaflet.js"></script>
<div id="map"></div>
var map = L.map('map'),
ft = true,
path = [],
markers = new L.FeatureGroup();
map.setView([0, 0], 3);
map.setMaxBounds([[-85,-180.0],[85,180.0]]);
var MapQuestOpen_Aerial = L.tileLayer('http://oatile{s}.mqcdn.com/tiles/1.0.0/sat/{z}/{x}/{y}.jpg', {
attribution: 'Tiles Courtesy of <a href="http://www.mapquest.com/">MapQuest</a> &mdash; Portions Courtesy NASA/JPL-Caltech and U.S. Depart. of Agriculture, Farm Service Agency',
subdomains: '1234'
}).addTo(map);
map.addLayer(markers);
function showISS(){
$.getJSON('http://api.open-notify.org/iss-now.json?callback=?', function(data) {
var issIcon = L.divIcon({
className: 'iss-icon',
iconSize: [25, 25],
html: '<span></span>'
});
var currLatLng = L.latLng(data.iss_position.latitude, data.iss_position.longitude);
path.push(currLatLng);
var polyline = L.polyline(path, {color: 'red', weight: 2, opacity: 1, dashArray: [3,6]});
markers.clearLayers();
var marker = L.marker(currLatLng, {icon: issIcon});
//L.marker(currLatLng, {icon: issIcon}).addTo(map);
markers.addLayer(marker);
markers.addLayer(polyline);
if(ft){
map.panTo([data.iss_position.latitude, data.iss_position.longitude]);
ft = false;
}
});
setTimeout("showISS()", 7000);
};
showISS();
body{
margin: 0;
padding: 0;
overflow: hidden;
background: #000;
}
#map{
height: 600px;
height: 100vh;
}
.iss-icon span{
display: inline-block;
border: 1px solid yellow;
border-radius: 50%;
/*animation: blink .7s alternate infinite;*/
height: 24px;
width: 24px;
animation: pulse .7s infinite alternate;
transform-origin:center center;
}
@keyframes pulse{
0%{
transform: scale(1.5);
opacity: .2;
}
50%{
opacity: .8;
}
100%{
transform: scale(.1);
opacity: 1;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment