-
-
Save Haroenv/18f343d6fdedb0fd352d to your computer and use it in GitHub Desktop.
PubNub - ISS Demo
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <html> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <title>ISS PubNub demo</title> | |
| <script src="https://cdn.pubnub.com/pubnub-3.7.13.min.js"></script> | |
| <script src="jquery.js" charset="utf-8"></script> | |
| <!-- mapbox CDN --> | |
| <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' /> | |
| <script src='https://api.mapbox.com/mapbox.js/v2.2.3/mapbox.js'></script> | |
| <link href='https://api.mapbox.com/mapbox.js/v2.2.3/mapbox.css' rel='stylesheet' /> | |
| <style> | |
| body { margin:0; padding:0; } | |
| #map { position:absolute; top:0; bottom:0; width:100%; } | |
| .ui-coordinates { | |
| position:absolute; | |
| bottom:10px; | |
| left:10px; | |
| padding:5px 10px; | |
| background:rgba(0,0,0,0.5); | |
| color:#fff; | |
| font-size:11px; | |
| line-height:18px; | |
| border-radius:3px; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div id="map"></div> | |
| <pre id='coordinates' class='ui-coordinates'></pre> | |
| <script type="text/javascript"> | |
| $(document).ready(function() { | |
| var lat, lon; | |
| var pubnub = PUBNUB({ | |
| subscribe_key : 'demo' | |
| }); | |
| // initializing mapbox | |
| L.mapbox.accessToken = 'pk.eyJ1IjoiYW5tb2wxNzcxIiwiYSI6ImNYZXN1N28ifQ.s-1Hjdb2UR9_6eeTPJGn3A'; //public key | |
| var map = L.mapbox.map('map', 'mapbox.streets'); | |
| var marker = L.marker([-73, 40], { | |
| icon: L.mapbox.marker.icon({ | |
| 'marker-size': 'large', | |
| 'marker-symbol': 'rocket', | |
| "marker-color": "#63b6e5" | |
| }) | |
| }); | |
| marker.addTo(map); | |
| // Add a new line to the map with no points. | |
| var polyline = L.polyline([]).addTo(map); | |
| // Keep a tally of how many points we've added to the map. | |
| var pointsAdded = 0; | |
| var coordinates = document.getElementById('coordinates'); | |
| pubnub.subscribe({ | |
| channel : "iss-pubnub", | |
| message : function(message){ | |
| lat = message['latitude']; | |
| lon = message['longitude']; | |
| map.setView([lat, lon]); | |
| marker.setLatLng([lat, lon], 15); //15 is the zoomlevel | |
| polyline.addLatLng([lat, lon], pointsAdded); | |
| coordinates.innerHTML = 'Latitude: ' + lat + '<br />Longitude: ' + lon; | |
| } | |
| }) | |
| // pubnub subscribe end | |
| }); | |
| // document end | |
| </script> | |
| </body> | |
| </html> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| var getJSON = require('get-json') | |
| var pubnub = require("pubnub")({ | |
| subscribe_key: 'demo', // always required | |
| publish_key: 'demo' // only required if publishing | |
| }); | |
| function getISSlocation () { | |
| getJSON('http://api.open-notify.org/iss-now.json', function(error, response) { | |
| var lat = response['iss_position']['latitude']; | |
| var lon = response['iss_position']['longitude']; | |
| pubnub.publish({ | |
| channel: "iss-pubnub", | |
| message: {"latitude" : lat, "longitude" : lon}, //this is the message payload we are sending | |
| callback: function(m){console.log(m)} | |
| }); | |
| }); | |
| }); | |
| setTimeout(getISSlocation, 3000); | |
| } | |
| getISSlocation(); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment