arscan · arscan · Feb 27, 2016 · Feb 27, 2016 · Feb 27, 2016 · Mar 1, 2016
diff --git a/build/encom-globe.js b/build/encom-globe.js
diff --git a/build/encom-globe.min.js b/build/encom-globe.min.js
diff --git a/display/display-data.js b/display/display-data.js
@@ -0,0 +1,18 @@
+var data = [
+    {id: 0, lat:42.35843,lng:-71.05977, label: "Boston"},
+    {id: 1, lat:25.77427,lng:-80.19366, label: "Miami"},
+    {id: 2, lat:37.77493,lng:-122.41942, label: "San Francisco"},
+    {id: 3, lat:-23.5475,lng:-46.63611, label: "Sao Paulo"},
+    {id: 4, lat:-12.04318,lng:-77.02824, label: "Lima"},
+    {id: 5, lat:21.30694,lng:-157.85833, label: "Honolulu"},
+    {id: 6, lat:-31.95224,lng:115.8614, label: "Perth"},
+    {id: 7, lat:-33.86785,lng:151.20732, label: "Sydney"},
+    {id: 8, lat: -42, lng: 174, label: "New Zealand"},
+    {id: 9, lat:22.28552,lng:114.15769, label: "Hong Kong"},
+    {id: 10, lat:19.07283,lng:72.88261, label: "Mumbai"},
+    {id: 11, lat:30.06263,lng:31.24967, label:"Cairo"},
+    {id: 12, lat:-33.92584,lng:18.42322, label:"Cape Town"},
+    {id: 13, lat:52.52437,lng:13.41053, label:"Berlin"},
+    {id: 14, lat:55.95206,lng:-3.19648, label:"Edinburgh"},
+    {id: 15, lat:55.75222,lng:37.61556, label:"Moscow"},
+]
diff --git a/display/display.html b/display/display.html
@@ -0,0 +1,21 @@
+<html>
+<head>
+  <link href="styles.css" rel="stylesheet" type="text/css" />
+</head>
+<body>
+
+  <div id="globe"></div>
+
+  <!-- these are just for the demo page / options -->
+  <script src="//code.jquery.com/jquery-2.0.3.min.js"></script>
+
+
+  <!-- required for the application -->
+  <script src="display-data.js"></script> <!-- locations -->
+  <script src="../grid.js"></script> <!-- data for the globe skin -->
+
+  <script src="../build/encom-globe.js"></script>
+  <script src="display.js"></script>
+
+
+</html>
diff --git a/display/display.js b/display/display.js
@@ -0,0 +1,90 @@
+var globe;
+
+function createGlobe(){
+
+  globe = new ENCOM.Globe(window.innerWidth, window.innerHeight, {
+    data: data, // from the display-data.js
+    tiles: grid.tiles
+  });
+
+  globe.setClickHandler(function(id){
+      alert(id);
+  });
+
+  // var defaults = {
+  //   font: "Inconsolata",
+  //   baseColor: "#ffcc00",
+  //   markerColor: "#ffcc00",
+  //   pinColor: "#00eeee",
+  //   satelliteColor: "#ff0000",
+  //   introLinesAltitude: 1.10,
+  //   introLinesDuration: 2000,
+  //   introLinesColor: "#8FD8D8",
+  //   introLinesCount: 60,
+  //   scale: 1.0, // set to lower if you want the globe to be smaller
+  //   dayLength: 28000, // set to 0 if you don't want it to spin
+  //   maxPins: 500,
+  //   maxMarkers: 4,
+  //   data: [],
+  //   tiles: [],
+  //   viewAngle: .1, // North-South camera angle; between -Math.PI and Math.PI
+  //   cameraAngle: Math.PI, // East-West camera angle; between -Math.PI and Math.PI
+  //   viewAngleResetTime: 30000 // time in MS to wait before reseting viewAngle back to default
+  // };
+
+  $("#globe").append(globe.domElement);
+
+  /* add some satellites in 4 seconds */
+  setTimeout(function(){
+    var constellation = [];
+    var alt =  parseFloat($("#globe-sa").val());
+    var opts = {
+      coreColor: "#ff0000",
+      numWaves: 8
+    };
+
+    for(var i = 0; i< 2; i++){
+      for(var j = 0; j< 3; j++){
+        constellation.push({
+          lat: 50 * i - 30 + 15 * Math.random(), 
+          lon: 120 * j - 120 + 30 * i,
+          altitude: 1.3
+        });
+      }
+    }
+
+    globe.addConstellation(constellation, opts);
+  }, 4000);
+
+  /* add some of the yellow markers in 2 seconds */
+  /* probably should be taken out, but left in in case worth being repurposed */
+  setTimeout(function(){
+      globe.addMarker(49.25, -123.1, "Vancouver");
+      globe.addMarker(35.6895, 129.69171, "Tokyo", true);
+  }, 2000);
+
+  function animate(){
+    globe.tick();
+    requestAnimationFrame(animate);
+  }
+
+  globe.init(animate);
+}
+
+/* web font stuff*/
+var wf = document.createElement('script');
+wf.src = ('https:' == document.location.protocol ? 'https' : 'http') +
+  '://ajax.googleapis.com/ajax/libs/webfont/1.4.7/webfont.js';
+wf.type = 'text/javascript';
+wf.async = 'true';
+var s = document.getElementsByTagName('script')[0];
+s.parentNode.insertBefore(wf, s);
+
+WebFontConfig = {
+  google: {
+    families: ['Inconsolata']
+  },
+  active: function(){
+    createGlobe(); /* start the globe after the font is loaded */
+  }
+};
diff --git a/display/styles.css b/display/styles.css
@@ -0,0 +1,13 @@
+
+/* 775 by 363 */
+
+body {
+    background-color: #000000;
+}
+
+#globe {
+    margin: 0;
+    padding: 0;
+    width: 100%;
+    height: 100%;
+}