update manhattan grid example

examples/maps/manhattan_grid/js/example.js

@@ -26,7 +26,8 @@ coordinate system.
 'use strict';
 
 /*
-Include the Image module.
+First of all, we include the Image module. We're going to draw paths on a map
+image, and Ox.Image provides a `drawPath` method for that.
 */
 Ox.load('Image', function() {
 
@@ -40,7 +41,8 @@ Ox.load('Image', function() {
         */
         points = {
             /*
-            Columbus Circle, the lower western corner of Central Park
+            Columbus Circle (8th Ave and 59th St), the lower western corner of
+            Central Park
             */
             '8 & 59': {lat: 40.76807,lng: -73.98190},
             /*
@@ -75,9 +77,9 @@ Ox.load('Image', function() {
         Ox.getDistance returns the distance, in meters, from one lat/lng pair
         to another. We use this to determine the spacing between avenues and
         between streets. The result is 287 meters between Avenues and 81 meters
-        between streets, which is not too far from the actual
+        between streets, which is not too far from the
-        <a href="http://en.wikipedia.org/wiki/Commissioners'_Plan_of_1811">Plan</a>
+        <a href="http://en.wikipedia.org/wiki/Commissioners'&#95;Plan&#95;of&#95;1811"
-        of the grid.
+        target="_blank">actual plan</a> of the grid.
         */
         distances = {
             avenues: Ox.getDistance(points['8 & 59'], points['5 & 59']) / 3,
@@ -91,18 +93,23 @@ Ox.load('Image', function() {
         numbers = Ox.map(distances, function(distance) {
             return C / 4 / distance;
         }),
+        /*
+        A few more variables that we'll need later.
+        */
         colors = {
             broadway: 'rgba(0, 0, 255, 0.5)',
             avenues: 'rgba(0, 255, 0, 0.5)',
             streets: 'rgba(255, 0, 0, 0.5)'
         },
+        lines,
+        poles,
+        mapSize,
         precision = 8,
         step = 10000,
         $body = Ox.$('body'),
         $post = Ox.$('<div>').addClass('post').hide().appendTo($body),
         $sign = Ox.$('<div>').addClass('sign').hide().appendTo($body),
-        $images = [],
+        $images = [];
-        lines, mapSize, poles;
     /*
     Ox.getPoint takes a lat/lng pair, a distance and a bearing, and returns the
     resulting point. We use this to construct the origin of the coordinate
@@ -326,7 +333,7 @@ Ox.load('Image', function() {
         Zero St, with a radius of the quarter of the Earth's circumference. This
         is the line that runs through all four poles of our coordinate system.
         */
-        drawPath(image, Ox.getCircle(points['0 & 0'], C / 4, 8), {
+        drawPath(image, Ox.getCircle(points['0 & 0'], C / 4, precision), {
             color: 'rgba(255, 255, 255, 0.25)'
         });
         /*
@@ -462,7 +469,7 @@ Ox.load('Image', function() {
                     });
                 });
                 /*
-                Then, on the Manhattan tile, we add Broadway.
+                Then, on the Manhattan tile, we draw 20 kilometers of Broadway.
                 */
                 if (marker.title == 'Manhattan') {
                     var line = mapLine(Ox.getLine(
@@ -520,7 +527,7 @@ Ox.load('Image', function() {
 
     /*
     `getLine` is a helper function that returns the i-th avenue or street from a
-    given point, as an array of x/y coordinates on the zoomed-in map tile.
+    given intersection.
     */
     function getLine(g, point, as, type, i) {
         point = Ox.getPoint(
@@ -551,9 +558,9 @@ Ox.load('Image', function() {
     }
 
     /*
-    Now all that's left is adding our event handlers. Clicking on any point of
+    Now all that's left is to define our event handlers. Clicking on any point
-    the map that is not a marker will hide the currently visible overlay image
+    of the map that is not a marker will hide the currently visible overlay
-    (if any).
+    image (if any).
     */
     function onClick(e) {
         if (e.target.className != 'marker') {
@@ -565,7 +572,7 @@ Ox.load('Image', function() {
 
     /*
     When the mouse enters the map, show a street sign (which consists of a post
-    an the actual sign).
+    and the actual sign).
     */
     function onMouseover() {
         $post.show();