From a5ae7032584889362fc7ea1e342cd26190c799bb Mon Sep 17 00:00:00 2001
From: Aaron Griffith <aargri@gmail.com>
Date: Sat, 9 Oct 2010 15:44:48 -0400
Subject: [PATCH] added support for ploylines and polygons on the google map

Polygons and polylines are read from the new file "regions.js". Polylines
(entries with "closed" set to false) are just lines drawn on the map.
Polygons (entries with "closed" set to true) are closed loops that are
filled in with a transparent color.
---
 quadtree.py   | 13 +++++++++++--
 template.html | 46 +++++++++++++++++++++++++++++++++++++++++++++-
 2 files changed, 56 insertions(+), 3 deletions(-)

diff --git a/quadtree.py b/quadtree.py
index 553c67f..27e3472 100644
--- a/quadtree.py
+++ b/quadtree.py
@@ -128,11 +128,20 @@ class QuadtreeGen(object):
         with open(os.path.join(self.destdir, "index.html"), 'w') as output:
             output.write(html)
 
-        
-
+        # write out the default marker table
         with open(os.path.join(self.destdir, "markers.js"), 'w') as output:
             output.write("var markerData=%s" % json.dumps(self.world.POI))
 
+        # write out the default (empty, but documented) region table
+        with open(os.path.join(self.destdir, "regions.js"), 'w') as output:
+            output.write('var regionData=[\n');
+            output.write('  // {"color": "#FFAA00", "opacity": 0.5, "closed": true, "path": [\n')
+            output.write('  //   {"x": 0, "y": 0, "z": 0},\n')
+            output.write('  //   {"x": 0, "y": 10, "z": 0},\n')
+            output.write('  //   {"x": 0, "y": 0, "z": 10}\n')
+            output.write('  // ]},\n')
+            output.write('];');
+        
         # Write a blank image
         blank = Image.new("RGBA", (1,1))
         tileDir = os.path.join(self.destdir, "tiles")
diff --git a/template.html b/template.html
index 4387e8a..b304077 100644
--- a/template.html
+++ b/template.html
@@ -8,6 +8,7 @@
   #mcmap { height: 100% }
 </style>
 <script type="text/javascript" src="markers.js"></script>
+<script type="text/javascript" src="regions.js"></script>
 <script type="text/javascript"
     src="http://maps.google.com/maps/api/js?sensor=false">
 </script>
@@ -155,6 +156,48 @@
    }
   }
   
+  var regionsInit = false;
+  function initRegions() {
+    if (regionsInit) { return; }
+    
+    regionsInit = true;
+    
+    for (i in regionData) {
+      var region = regionData[i];
+      var converted = new google.maps.MVCArray();
+      for (j in region.path) {
+        var point = region.path[j];
+        converted.push(fromWorldToLatLng(point.x, point.y, point.z));
+      }
+      
+      if (region.closed) {
+        new google.maps.Polygon({
+          clickable: false,
+          geodesic: false,
+          map: map,
+          strokeColor: region.color,
+          strokeOpacity: region.opacity,
+          strokeWeight: 2,
+          fillColor: region.color,
+          fillOpacity: region.opacity * 0.25,
+          zIndex: i,
+          paths: converted
+        });
+      } else {
+        new google.maps.Polyline({
+          clickable: false,
+          geodesic: false,
+          map: map,
+          strokeColor: region.color,
+          strokeOpacity: region.opacity,
+          strokeWeight: 2,
+          zIndex: i,
+          path: converted
+        });
+      }
+    }
+  }
+  
   function initialize() {
     var mapOptions = {
       zoom: config.defaultZoom,
@@ -187,8 +230,9 @@
     // We can now set the map to use the 'coordinate' map type
     map.setMapTypeId('mcmap');
 	
-	// initialize the markers
+	// initialize the markers and regions
 	initMarkers();
+    initRegions();
   }
 </script>
 </head>