diff --git a/examples/maps/manhattan_grid/js/example.js b/examples/maps/manhattan_grid/js/example.js index e5762769..aaaa59a6 100644 --- a/examples/maps/manhattan_grid/js/example.js +++ b/examples/maps/manhattan_grid/js/example.js @@ -26,13 +26,14 @@ 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() { - /* - Ox.EARTH_CIRCUMFERENCE (40075016.68557849) is a built-in constant. - */ + /* + Ox.EARTH_CIRCUMFERENCE (40075016.68557849) is a built-in constant. + */ var C = Ox.EARTH_CIRCUMFERENCE, /* We need a few points to determine the orientation and spacing of @@ -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 - Plan - of the grid. + between streets, which is not too far from the + actual plan 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.$('