Index: /trunk/atms_map_night_30sec.html
===================================================================
--- /trunk/atms_map_night_30sec.html	(revision 259)
+++ /trunk/atms_map_night_30sec.html	(revision 259)
@@ -0,0 +1,154 @@
+<!DOCTYPE html>
+<html>
+  <head>
+  <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
+    <title>ATMS Simulator Map Prototype</title> 
+    <style>
+      /* Set the size of the div element that contains the map */
+      #mapdiv {
+        height: 550px;  // or  height: 100%
+        width: 100%;  
+       }
+        /* Makes the sample page fill the window. */
+      html, body {
+        height: 100%;
+        margin: 0;
+        padding: 0;
+      }
+    </style>
+  </head>
+  <body>
+    <h3>ATMS Simulator Map Prototype 0.1</h3>
+    <!--The div element for the map -->
+    <div id="mapdiv"></div>
+    <script>
+    var map;  // a global variable for the google map
+    // Build a solid colored dot icon to use instead of the classic pin
+    function dotSymbol(color)
+    {
+        return {
+            path:google.maps.SymbolPath.CIRCLE,
+            scale: 3,
+            strokeColor: color,
+            fillColor: color,
+            fillOpacity: 1.0
+        };
+    }
+    function loadMapData()
+    {
+        // Load the map data
+        map.data.loadGeoJson('highways.json');
+//map.data.loadGeoJson("https://www.dropbox.com/s/qzlj63sqsua07ah/highways.json");
+        // Style the map data by applying the color property to each dot
+        map.data.setStyle(function(feature) 
+        {
+            // Property value can be any HTML color name
+            var ptColor = feature.getProperty("color");
+            return {
+                icon: dotSymbol(ptColor)
+                    };
+        });
+    }
+    // Initialize and add the map
+    function initMap() 
+    {
+        // The location of John Wayne Airport
+        var wayne = {lat: 33.687228, lng: -117.872148};
+        // The map, centered at John Wayne Airport
+        map = new google.maps.Map( document.getElementById('mapdiv'), 
+        {
+            zoom: 13, 
+            center: wayne,
+            styles: [
+                {elementType: 'geometry', stylers: [{color: '#242f3e'}]},
+                {elementType: 'labels.text.stroke', stylers: [{color: '#242f3e'}]},
+                {elementType: 'labels.text.fill', stylers: [{color: '#746855'}]},
+                {
+                  featureType: 'administrative.locality',
+                  elementType: 'labels.text.fill',
+                  stylers: [{color: '#d59563'}]
+                },
+                {
+                  featureType: 'poi',
+                  elementType: 'labels.text.fill',
+                  stylers: [{color: '#d59563'}]
+                },
+                {
+                  featureType: 'poi.park',
+                  elementType: 'geometry',
+                  stylers: [{color: '#263c3f'}]
+                },
+                {
+                  featureType: 'poi.park',
+                  elementType: 'labels.text.fill',
+                  stylers: [{color: '#6b9a76'}]
+                },
+                {
+                  featureType: 'road',
+                  elementType: 'geometry',
+                  stylers: [{color: '#38414e'}]
+                },
+                {
+                  featureType: 'road',
+                  elementType: 'geometry.stroke',
+                  stylers: [{color: '#212a37'}]
+                },
+                {
+                  featureType: 'road',
+                  elementType: 'labels.text.fill',
+                  stylers: [{color: '#9ca5b3'}]
+                },
+                {
+                  featureType: 'road.highway',
+                  elementType: 'geometry',
+                  stylers: [{color: '#746855'}]
+                },
+                {
+                  featureType: 'road.highway',
+                  elementType: 'geometry.stroke',
+                  stylers: [{color: '#1f2835'}]
+                },
+                {
+                  featureType: 'road.highway',
+                  elementType: 'labels.text.fill',
+                  stylers: [{color: '#f3d19c'}]
+                },
+                {
+                  featureType: 'transit',
+                  elementType: 'geometry',
+                  stylers: [{color: '#2f3948'}]
+                },
+                {
+                  featureType: 'transit.station',
+                  elementType: 'labels.text.fill',
+                  stylers: [{color: '#d59563'}]
+                },
+                {
+                  featureType: 'water',
+                  elementType: 'geometry',
+                  stylers: [{color: '#17263c'}]
+                },
+                {
+                  featureType: 'water',
+                  elementType: 'labels.text.fill',
+                  stylers: [{color: '#515c6d'}]
+                },
+                {
+                  featureType: 'water',
+                  elementType: 'labels.text.stroke',
+                  stylers: [{color: '#17263c'}]
+                }
+              ]
+            });
+        loadMapData();
+        // Start a time to refresh the map every 30 seconds
+        var myTimer = setInterval(loadMapData, 30000);
+    }
+
+    // Using John's API Key
+    </script>
+    <script async defer
+    src="https://maps.googleapis.com/maps/api/js?key=AIzaSyD6iTyN0DjP-9OVkAgicyp4tkC10naE_B8&callback=initMap">
+    </script>
+  </body>
+</html>
