0x2620/oxjs
2
0
Fork 1
Code Issues 172 Pull requests Releases Wiki Activity

update manhattan grid example

Browse source
This commit is contained in:
rolux 2012-07-05 21:38:56 +02:00
parent 01717f3727
commit bad9f22aa2
1 changed files with 24 additions and 17 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

35
examples/maps/manhattan_grid/js/example.js
View file

@ -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
<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'&#95;Plan&#95;of&#95;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();