Location and path of the ISS

index.html

<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>

Location-and-path-of-the-ISS.markdown

Location and path of the ISS

International Space Station: http://www.nasa.gov/mission_pages/station/main/

A Pen by Mark Lee on CodePen.

License.

script.js

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();

style.css

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;
  }
}