Add a satellite tracker to your web page

<!DOCTYPE html> <HTML> <HEAD> <TITLE>Add a satellite tracker to your web page</TITLE> <meta name="viewport" content="width=device-width, initial-scale=1" /> <meta content="text/html; charset=UTF-8" http-equiv="content-type"> <script src="https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js"></script> <link rel="stylesheet" href="/css/style.css" type="text/css"> <script src="/js/jquery-1.11.js"></script> </HEAD> <BODY> <script type='text/javascript' src="/js/passes.js"></script> <script> var startPass = null; var endPass = null; var timer; var issid = 25544; var lat = 1.289987; var lng = 103.850281; go(); </script>   <script async src="https://www.googletagmanager.com/gtag/js?id=G-QZGWPSKPV5"></script> <script> window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'G-QZGWPSKPV5'); </script> <script type='text/javascript'> googletag.cmd.push(function() { googletag.defineSlot('/31043081/n2yo-header', [728, 90], 'div-gpt-ad-1438712706402-0').addService(googletag.pubads()); googletag.pubads().enableSingleRequest(); googletag.enableServices(); }); </script> <div id="headercontainer" style="overflow: auto; zoom: 1"> <table style="width:100%;font-size:14px"> <tr> <td> <div id="logo"> <a href="/"><img src="/img/n2yologo.png" width="200" height="39" border="0" alt="n2yo.com"/></a> <div class="fb-like" data-href="https://www.facebook.com/n2yodotcom" data-send="false" data-layout="button_count" data-width="100" data-show-faces="false" data-font="tahoma"></div> <g:plusone></g:plusone> </div> <span id = "headermessage" style="background-color:#ffffca;border:1px dashed #cacaba;width:300px;"> Tracking <b><span style="color:#d50000">30109</span></b> objects as of 11-Dec-2024 <br/><a href="/space-station/"> HD Live streaming from Space Station</a> <br/> <script src="/js/satellite-js/dist/satellite.min.js"></script> <link rel="stylesheet" href="/css/odometer-theme-car.css" /> <script src="/js/odometer.js"></script> <style> .odometer { font-size: 16px; } </style> <span id="up"><div id="odometer" class="odometer"></div> objects crossing your sky now</up> <script> var items; if (!( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) )) { $.get("/inc/all.php", function(data) { items = data.split('\n'); up(); }); setInterval('up()', 5000); } else { document.getElementById("up").style.display='none'; } function up() { var cnt = 0; for(var i=0;i<items.length;i++) { var line = items[i]; if(line[0]=="1") { var satid = parseInt(line.substr(2,5)); var line1 = items[i]; var line2 = items[i+1]; var satrec = satellite.twoline2satrec(line1, line2); var now = new Date(); var positionAndVelocity = satellite.propagate( satrec, now.getUTCFullYear(), now.getUTCMonth() + 1, now.getUTCDate(), now.getUTCHours(), now.getUTCMinutes(), now.getUTCSeconds() ); var positionEci = positionAndVelocity.position, velocityEci = positionAndVelocity.velocity; var gmst = satellite.gstimeFromDate( now.getUTCFullYear(), now.getUTCMonth() + 1, now.getUTCDate(), now.getUTCHours(), now.getUTCMinutes(), now.getUTCSeconds() ); var deg2rad = Math.PI/180; var observerGd = { longitude: 103.850281 * deg2rad, latitude: 1.289987 * deg2rad, height: 0 }; try { var positionEcf = satellite.eciToEcf(positionEci, gmst); } catch (err) { //console.log("Error: " + err); } var lookAngles = satellite.ecfToLookAngles(observerGd, positionEcf); var dopplerFactor = 0; var azimuth = lookAngles.azimuth, elevation = lookAngles.elevation, rangeSat = lookAngles.rangeSat; azimuth1 = azimuth*180/Math.PI; elevation1 = elevation*180/Math.PI; if(elevation1>10) { cnt++; } } } odometer.innerHTML = cnt; } </script> </span> </td> <td valign="top" align="center" width="200">    <b><span id="countdown" style="display:block"></span></b> </td> <td align="right" valign="top"> <form action="/database/#results" method="GET"> <div id="searchbox" align="right"> <br/> <INPUT TYPE="text" NAME="q" ID="srcsat" style="font-size: 14px; background-color: #FFFFFF;width:140px" size="12" value="Find a satellite..." onFocus='document.getElementById("srcsat").value="";'> <INPUT TYPE="submit" value="Search" style="font-size: 12px; background-color:#D8D8D8; color:#000000; margin-right: 6px;"> <div align="right"> <a href="https://www.facebook.com/n2yodotcom">N2YO.com on Facebook</a>    <A HREF="/database/">Advanced</A>   </div> </form> </div> <script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script> </tr> </td> </table> </div> <div id="admobiheader">  </div> <div id="fb-root"></div> <script>(function(d, s, id) { var js, fjs = d.getElementsByTagName(s)[0]; if (d.getElementById(id)) return; js = d.createElement(s); js.id = id; js.src = "//connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.3&appId=372896566168367"; fjs.parentNode.insertBefore(js, fjs); }(document, 'script', 'facebook-jssdk'));</script>   </div> <link href="/ddmenu/ddmenu.css" rel="stylesheet" type="text/css" /> <script src="/ddmenu/ddmenu.js" type="text/javascript"></script>  <nav id="ddmenu"> <div class="menu-icon"></div> <ul> <li class="no-sub"><a class="top-heading" href="https://www.n2yo.com/">Home</a></li> <li> <span class="top-heading"><a class="top-heading" href="/satellites/?c=most-popular">Most tracked</a></span> <i class="caret"></i> <div class="dropdown"> <div class="dd-inner"> <div class="column"> <A HREF="/satellite/?s=25544">SPACE STATION</A> <A HREF="/satellite/?s=36516">SES 1</A> <A HREF="/satellite/?s=33591">NOAA 19</A> <A HREF="/satellite/?s=29155">GOES 13</A> <A HREF="/satellite/?s=25338">NOAA 15</A> <A HREF="/satellite/?s=28654">NOAA 18</A> <A HREF="/satellite/?s=25994">TERRA</A> <A HREF="/satellite/?s=27424">AQUA</A> <A HREF="/satellite/?s=38771">METOP-B</A> <A HREF="/satellite/?s=37849">SUOMI NPP</A> <A HREF="/satellite/?s=36411">GOES 15</A> <A HREF="/satellite/?s=40967">FOX-1A (AO-85)</A> <A HREF="/satellite/?s=27607">SAUDISAT 1C</A> <A HREF="/satellite/?s=41332">KMS-4</A> <A HREF="/satellite/?s=37820">TIANGONG 1</A> <A HREF="/satellite/?s=40069">METEOR M2</A> <A HREF="/satellite/?s=25657">ASIASAT 3S</A> <A HREF="/satellite/?s=36032">NSS 12</A> <A HREF="/satellite/?s=31135">AGILE</A> <A HREF="/satellite/?s=40147">MEASAT 3B</A> <a href="/satellites/?c=most-popular">MORE...</a> </div> </div> </div> </li> <li> <span class="top-heading"><a class="top-heading" href="/satellites/?c=latest-launches">Just launched</a></span> <i class="caret"></i> <div class="dropdown"> <div class="dd-inner"> <div class="column"> <A HREF="/satellite/?s=99130">ASRTU</A> <A HREF="/satellite/?s=62262">STARLINK-32632</A> <A HREF="/satellite/?s=62261">SENTINEL 1C</A> <A HREF="/satellite/?s=62259">SIRIUS XM-9</A> <A HREF="/satellite/?s=62256">PROBA-3</A> <A HREF="/satellite/?s=62236">STARLINK-32641</A> <A HREF="/satellite/?s=62235">STARLINK-32631</A> <A HREF="/satellite/?s=62234">STARLINK-32652</A> <A HREF="/satellite/?s=62233">STARLINK-32643</A> <A HREF="/satellite/?s=62232">STARLINK-32636</A> <A HREF="/satellite/?s=62231">STARLINK-32650</A> <A HREF="/satellite/?s=62230">STARLINK-11481</A> <A HREF="/satellite/?s=62229">STARLINK-11485</A> <A HREF="/satellite/?s=62228">STARLINK-11476</A> <A HREF="/satellite/?s=62227">STARLINK-11469</A> <A HREF="/satellite/?s=62226">STARLINK-11475</A> <A HREF="/satellite/?s=62225">STARLINK-11471</A> <A HREF="/satellite/?s=62224">STARLINK-11492</A> <A HREF="/satellite/?s=62223">STARLINK-11483</A> <A HREF="/satellite/?s=62222">STARLINK-11488</A> <a href="/satellites/?c=latest-launches">MORE...</a> </div> </div> </div> </li> <li> <span class="top-heading">Satellites on orbit</span> <i class="caret"></i> <div class="dropdown"> <div class="dd-inner"> <div class="column"> <h4><a href="/satellites/">CATEGORIES</a></h4> <a href="/satellites/?c=2">Int'l Space Station</a> <a href="/satellites/?c=54">Chinese Space Station</a> <a href="/satellites/?c=1">Brightest</a> <a href="/satellites/?c=52">Starlink</a> <a href="/satellites/?c=20">GPS Operational</a> <a href="/satellites/?c=21">Glonass Operational</a> <a href="/satellites/?c=22">Galileo</a> <a href="/satellites/?c=35">Beidou</a> <a href="/satellites/?c=30">Military</a> <a href="/satellites/?c=15">Iridium</a> <a href="/satellites/?c=17">Globalstar</a> <a href="/satellites/?c=10">Geostationary</a> <a href="/satellites/?c=26">Space & Earth Science</a> <a href="/satellites/?c=3">Weather</a> <a href="/satellites/?c=18">Amateur radio</a> <a href="/satellites/">MORE CATEGORIES...</a> </div> <div class="column"> <h4><a href="/whats-up/whats-up-now.php">WHAT'S UP?</a></h4> <a href="/passes/amateur-radio.php">Amateur radio sat passes</a> <a href="/whats-up/?c=20">GPS satellites</a> <a href="/whats-up/?c=21">Glonass satellites</a> <a href="/whats-up/?c=35">Beidou satellites</a> <a href="/whats-up/?c=22">Galileo satellites</a> <a href="/whats-up/?c=15">Iridium satellites</a> <a href="/whats-up/?c=17">Globalstar satellites</a>  <br/> <h4><a href="/database/">FIND A SATELLITE</a></h4> <a href="/database/"> SEARCH DATABASE</a> <a href="/browse/"> BROWSE BY LAUNCH DATE</a> <a href="/satellites/"> BROWSE BY CATEGORY</a> <a href="/satellites/?c=&t=country"> BROWSE BY COUNTRY</a> </div> <div class="column"> <h4><a href="/satellites?c=&t=country">OWNERS/COUNTRIES</a></h4> <a href="/satellites?c=US&t=country"><img src='/img/org/us.gif' border='0' width='20' height='15' style="vertical-align: text-bottom"> UNITED STATES</a> <a href="/satellites?c=CIS&t=country"><img src='/img/org/cis.gif' border='0' width='20' height='15' style="vertical-align: text-bottom"> CIS (FORMER USSR)</a> <a href="/satellites?c=PRC&t=country"><img src='/img/org/prc.gif' border='0' width='20' height='15' style="vertical-align: text-bottom"> PEOPLE'S REPUBLIC OF CHINA</a> <a href="/satellites?c=JPN&t=country"><img src='/img/org/jpn.gif' border='0' width='20' height='15' style="vertical-align: text-bottom"> JAPAN</a> <a href="/satellites?c=ESA&t=country"><img src='/img/org/esa.gif' border='0' width='20' height='15' style="vertical-align: text-bottom"> EUROPEAN SPACE AGENCY</a> <a href="/satellites?c=FR&t=country"><img src='/img/org/fr.gif' border='0' width='20' height='15' style="vertical-align: text-bottom"> FRANCE</a> <a href="/satellites?c=IND&t=country"><img src='/img/org/ind.gif' border='0' width='20' height='15' style="vertical-align: text-bottom"> INDIA</a> <a href="/satellites?c=UK&t=country"><img src='/img/org/uk.gif' border='0' width='20' height='15' style="vertical-align: text-bottom"> UNITED KINGDOM</a> <a href="/satellites?c=CA&t=country"><img src='/img/org/ca.gif' border='0' width='20' height='15' style="vertical-align: text-bottom"> CANADA</a> <a href="/satellites?c=GER&t=country"><img src='/img/org/ger.gif' border='0' width='20' height='15' style="vertical-align: text-bottom"> GERMANY</a> <a href="/satellites?c=&t=country"> MORE OWNERS/COUNTRIES...</a> </div> </div> </div> </li> <li> <a class="top-heading" href="/info/?a=22">Alerting tools</a> <i class="caret"></i> <div class="dropdown right-aligned"> <div class="dd-inner"> <div class="column"> <h4>ALERTING TOOLS</h4> <a href="/info/?a=43"><img src="/ddmenu/phone.png" border="0" width="16" style="vertical-align: text-bottom"> SPACE STATION PREDICTIONS BY VOICE</a> <a href="/login/iss-notifications/"><img src="/ddmenu/alert.png" border="0" width="16" style="vertical-align: text-bottom"> SPACE STATION NOTIFICATION TOOL </a> <a href="/info/?a=15"><img src="/ddmenu/email.png" border="0" width="16" style="vertical-align: text-bottom"> ALERTS BY EMAIL AND SMS</a> </div> </div> </li> <li> <span class="top-heading">More stuff</span> <i class="caret"></i> <div class="dropdown right-aligned"> <div class="dd-inner"> <div class="column"> <h4>ADDITIONAL INFO</h4> <a href="/space-station" style="color:red"><b>HD LIVE STREAMING FROM ISS</b></a> <a href="/news/read.php?p=0">SATELLITE NEWS</a> <a href="/about/?a=donation">MAKE A DONATION</a> <a href="https://www.facebook.com/n2yodotcom">N2YO.COM ON FACEBOOK</a> <a href="/about/?a=links">EXTERNAL LINKS</a> <a href="/about/?a=faq">FAQ</a> <a href="/about/?a=feedback">CONTACT/FEEDBACK</a> <a href="/about/?a=privacy">PRIVACY POLICY</a> <a href="/about/?a=terms">TERMS OF USE</a> </div> <div class="column"> <h4>USER PREFERENCES</h4> <a href=https://www.n2yo.com/login/edit/>SIGN IN</a> <a href="https://www.n2yo.com/login/edit/">EDIT/CHANGE YOUR LOCATION</a> <br/> <h4>SITE OWNERS</h4> <a href="/widgets/">WIDGETS FOR YOUR PAGE</a> <a href="/api/">API ACCESS</a> <br/>  </div> </div> </div> </li> <li class="no-sub"><a class="top-heading" href=https://www.n2yo.com/login/edit/>Sign in</a></li> </ul> </nav>  <table style="width:100%"> <tr> <td class="hidecell" style="vertical-align:top;width:160px"> <script id="mNCC" language="javascript"> medianet_width = "160"; medianet_height = "600"; medianet_crid = "515138167"; medianet_versionId = "111299"; (function() { var isSSL = 'https:' == document.location.protocol; var mnSrc = (isSSL ? 'https:' : 'http:') + '//contextual.media.net/nmedianet.js?cid=8CUY6IMG3' + (isSSL ? '&https=1' : ''); document.write('<scr' + 'ipt type="text/javascript" id="mNSC" src="' + mnSrc + '"></scr' + 'ipt>'); })(); </script> </td> <td valign="top"> <H1>ADD A SATELLITE TRACKER TO YOUR WEB PAGE!</H3> If you have a web page, a website, or a blog, you could easily insert a real time JavaScript tracker showing your favorite satellite. Here is how. <h3>Configurable parameters</h3> <p> Three sizes available: small (about 400 px wide), medium (about 600 px wide), large (about 800 px wide). <p> <pre class="prettyprint"> var size_n2yo = '[size]'; (choices small, medium, large. Default is medium) </pre> <p> You can show one single satellite, or allow user to select one from a list. <p> For one single satellite: <p> <pre class="prettyprint"> var norad_n2yo = '[NORAD id]'; The NORAD id of the satellite, just look up in the database, it is a number. For ISS is 25544. </pre> <p> For multiple satellites you should list them separated by "," while the name you want to display will be separated by "|". <p> <pre class="prettyprint"> var norad_n2yo = '[NORAD id1]|[Name1],[NORAD id2]|[Name2]|[NORAD id3]|[Name3]'; ... etc </pre> <p> Example: var norad_n2yo = '25544|ISS,20580|Hubble'; This line will generate a list of 2 satellites: ISS (25544) and Hubble (20580) <p> You can show all passes which should include those optically invisible, or only those visible: <p> <pre class="prettyprint"> var allpasses_n2yo = '[n]'; n=1 for all passes and n=0 for optically visible passes </pre> <p> You can pick a map you like, 5 options are available: <p> <pre class="prettyprint"> var map_n2yo = '[n]'; just try and see which one you like. Default: 5 </pre> <p> <h3>Some examples</h3> <strong style="color:red">Hello World</strong> <p> This basic script will generate a map type 5, medium size, tracking the International Space Station (ISS) and forecast the next optically visible pass over user's location: <pre class="prettyprint"> <script type="text/javascript" src="https://www.n2yo.com/js/widget-tracker.js"></script> </pre> <center><script type="text/javascript" src="https://www.n2yo.com/js/widget-tracker.js"></script></center> <strong style="color:red">Single satellite</strong> <p> This script will use same default settings except the satellite, which is Hubble (NORAD id = 20580). <pre class="prettyprint"> <script> var norad_n2yo = '20580'; </script> <script type="text/javascript" src="https://www.n2yo.com/js/widget-tracker.js"></script> </pre> <center> <script> var norad_n2yo = '20580'; </script> <script type="text/javascript" src="https://www.n2yo.com/js/widget-tracker.js"></script> </center> <strong style="color:red">Single satellite, more customization</strong> <p> This script will generate a small map, type 1, tracking ISS and showing next satellite pass above user's location. <pre class="prettyprint"> <script> var norad_n2yo = '25544'; var size_n2yo = 'small'; var allpasses_n2yo = '1'; var map_n2yo = '2'; </script> <script type="text/javascript" src="https://www.n2yo.com/js/widget-tracker.js"></script> </pre> <center> <script> var norad_n2yo = '25544'; var size_n2yo = 'small'; var allpasses_n2yo = '1'; var map_n2yo = '2'; </script> <script type="text/javascript" src="https://www.n2yo.com/js/widget-tracker.js"></script> </center> <strong style="color:red">Multiple satellites, selectable from a dropdown list</strong> <p> This script will generate a list of 3 satellites on a medium map, type 2, tracking ISS, Hubble, Aeolus and showing next optically visible pass above user's location. <pre class="prettyprint"> <script> var norad_n2yo = '25544|ISS,43600|Aeolus,20580|HST'; var size_n2yo = 'medium'; var allpasses_n2yo = '0'; var map_n2yo = '2'; </script> <script type="text/javascript" src="https://www.n2yo.com/js/widget-tracker.js"></script> </pre> <center> <script> var norad_n2yo = '25544|ISS,43600|Aeolus,20580|HST'; var size_n2yo = 'medium'; var allpasses_n2yo = '0'; var map_n2yo = '2'; </script> <script type="text/javascript" src="https://www.n2yo.com/js/widget-tracker.js"></script> </center> </td> </tr> </table> <br/><br/> <table id="footer">  <tr> <td align="center"> <A HREF="/about/?a=links">Links</A>  <A HREF="/about/?a=terms">Terms of Use</A>  <A HREF="/about/?a=privacy">Privacy Policy</A>  <A HREF="/about/?a=feedback">Contact Us</A> <br/>Copyright © N2YO.com. All rights reserved  <br/><br/> <a class="addthis_button" href="https://www.addthis.com/bookmark.php?v=250&username=xa-4bfedf760e3dd1ee"><img src="https://s7.addthis.com/static/btn/v2/lg-share-en.gif" width="125" height="16" alt="Bookmark and Share" style="border:0"/></a><script type="text/javascript" src="https://s7.addthis.com/js/250/addthis_widget.js#username=xa-4bfedf760e3dd1ee"></script>  </td> </tr> </table> <script> (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){ (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o), m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m) })(window,document,'script','//www.google-analytics.com/analytics.js','ga'); ga('create', 'UA-330684-1', 'auto'); ga('send', 'pageview'); </script>  </BODY> </HTML>

CINXE.COM

Add a satellite tracker to your web page