From bad9f22aa26e55dc2022f26991e5907f3ea0a188 Mon Sep 17 00:00:00 2001
From: rolux <rolux@rolux.org>
Date: Thu, 5 Jul 2012 21:38:56 +0200
Subject: [PATCH] update manhattan grid example
---
examples/maps/manhattan_grid/js/example.js | 41 +++++++++++++---------
1 file changed, 24 insertions(+), 17 deletions(-)
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
- <a href="http://en.wikipedia.org/wiki/Commissioners'_Plan_of_1811">Plan</a>
- of the grid.
+ between streets, which is not too far from the
+ <a href="http://en.wikipedia.org/wiki/Commissioners'_Plan_of_1811"
+ 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 = [],
- lines, mapSize, poles;
+ $images = [];
/*
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
- the map that is not a marker will hide the currently visible overlay image
- (if any).
+ Now all that's left is to define our event handlers. Clicking on any point
+ of the map that is not a marker will hide the currently visible overlay
+ 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();