code sample complete

3-transport/lessons/3-visualize-location-data/code/index.html

@@ -6,29 +6,59 @@
 
     <script type='text/javascript'>
 
-        function init() {
-            
+    var map, features;
+
+    function loadJSON(file) {
+        //load files and build up features object
+        var xhr = new XMLHttpRequest();
+        features = [];
+        xhr.onreadystatechange = function () {
+            if (xhr.readyState === XMLHttpRequest.DONE) {
+                if (xhr.status === 200) {
+                    gps = JSON.parse(xhr.responseText)
+                    features.push(
+                        new atlas.data.Feature(new atlas.data.Point([parseFloat(gps.gps.lon), parseFloat(gps.gps.lat)]))
+                    )
+                }
+            }
+        };
+        xhr.open("GET", file, true);
+        xhr.send();
+    }
+    
+    
+    
+    function init() {
             
-            fetch("https://gpssensorjimb.blob.core.windows.net/gps-data/?restype=container&comp=list")
-                .then(response => response.text())
-                .then(str => new window.DOMParser().parseFromString(str, "text/xml"))
-                .then(xml => {
-                    let blobList = Array.from(xml.querySelectorAll("Url")); //.getAttribute("Url");
+        
+
+        fetch("https://gpssensorjimb.blob.core.windows.net/gps-data/?restype=container&comp=list")
+            .then(response => response.text())
+            .then(str => new window.DOMParser().parseFromString(str, "text/xml"))
+            .then(xml => {
+                let blobList = Array.from(xml.querySelectorAll("Url"));
                     blobList.forEach(async blobUrl => {
-                        console.log(blobUrl);
-                    });
+                        loadJSON(blobUrl.innerHTML)                
+            });
         })
         .then( response => {
-            var map = new atlas.Map('myMap', {
-                center: [-122.33, 47.6],
-                zoom: 12,
+            map = new atlas.Map('myMap', {
+                center: [-122.26473, 47.73444],
+                zoom: 14,
                 authOptions: {
                     authType: "subscriptionKey",
                     subscriptionKey: "<your-key>",
 
                 }
             });
+            map.events.add('ready', function () {
+                var source = new atlas.source.DataSource();
+                map.sources.add(source);
+                map.layers.add(new atlas.layer.BubbleLayer(source));
+                source.add(features);
+            })
         })
+        
     }
     </script>
     <style>