Haroenv/index.html

## index.html
<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>

## index.js
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();
	<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>
	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();