Index: trunk/webapps/scaling_dotsize_prototype.html
===================================================================
--- trunk/webapps/scaling_dotsize_prototype.html	(revision 321)
+++ trunk/webapps/scaling_dotsize_prototype.html	(revision 321)
@@ -0,0 +1,109 @@
+<!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;  
+        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>
+// 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 dotSize(factor)
+{
+    console.log("setting dot size to ", factor)
+    var border = 1;
+    if (map.getZoom() < 13) border = 1;
+    if (map.getZoom() < 11) border = 0;
+    return {
+        path:google.maps.SymbolPath.CIRCLE,
+        scale: factor,
+        strokeColor: "04B431", // the outline
+        strokeWeight: border,
+        fillColor: "red",
+        fillOpacity: 1.0
+    };
+}
+
+var map;
+// Initialize and add the map
+function initMap() {
+  // The location of John Wayne Airport
+  var wayne = {lat: 33.687228, lng: -117.872148};
+  var pt2 = {lat: 33.684551, lng: -117.862034};
+  var pt3 = {lat: 33.683404, lng: -117.858893};
+var colorRed = "FE7569"; // light red
+var colorGreen = "04B431";
+//    var redPin = new google.maps.MarkerImage("http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=%E2%80%A2|" + colorGreen,        new google.maps.Size(21, 34),        newgoogle.maps.Point(0,0),        new google.maps.Point(10, 34));
+//    var greenPin = new google.maps.MarkerImage("http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=%E2%80%A2|" + colorGreen,        new google.maps.Size(21, 34),        new google.maps.Point(0,0),        new google.maps.Point(10, 34));
+  // The map, centered at John Wayne Airport
+  map = new google.maps.Map(
+      document.getElementById('mapdiv'), {zoom: 13, center: wayne});
+  // The marker, positioned at John Wayne Airport
+//  var marker = new google.maps.Marker({position: wayne, map: map, icon: 'http://maps.google.com/mapfiles/ms/icons/red-dot.png'});
+//  var mark2  = new google.maps.Marker({position: pt2, map: map, icon: 'http://maps.google.com/mapfiles/ms/icons/yellow-dot.png'});
+//  var mark3  = new google.maps.Marker({position: pt3, map: map, icon: 'http://maps.google.com/mapfiles/ms/icons/green-dot.png'});
+
+  
+//  var mark3  = new google.maps.Marker(            {map: map,             position: pt3,              icon: dotSymbol('green')             }                                       );
+
+//  var trafficLayer = new google.maps.TrafficLayer();
+//   trafficLayer.setMap(map);
+
+    // Load the map data
+    map.data.loadGeoJson('highways.json');
+    // Style the map data by applying the color property to each dot
+    map.data.setStyle(function(feature) {
+        var ptColor = feature.getProperty("color");
+        return {
+            icon: dotSymbol(ptColor)
+                };
+    });
+
+    map.addListener('zoom_changed', function() {
+        console.log("Zoom changed to ",map.getZoom());
+        map.data.setStyle(function(feature) {
+        var zoomFactor = map.getZoom() - 9;
+        if (zoomFactor < 1) zoomFactor = 1;
+        return {
+            icon: dotSize(zoomFactor)
+                };
+        });
+
+    });
+
+        // Start a time to refresh the map every 5 seconds
+        //var myTimer = setInterval(dotResize, 5000);
+
+}
+    </script>
+    <script async defer
+    src="https://maps.googleapis.com/maps/api/js?key=AIzaSyD6iTyN0DjP-9OVkAgicyp4tkC10naE_B8&callback=initMap">
+    </script>
+  </body>
+</html>
