update manhattan grid example
This commit is contained in:
parent
01717f3727
commit
bad9f22aa2
1 changed files with 24 additions and 17 deletions
|
@ -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();
|
||||
|
|
Loading…
Reference in a new issue