').addClass('sign').hide().appendTo($body),
$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
system, by moving Columbus Circle by minus 59 streets in the direction of
the avenues and then by minus 8 avenues in the direction of the streets.
The resulting point is on Stanton St between Norfolk St and Suffolk St,
which is pretty close to where we expected it to be.
*/
points['0 & 0'] = Ox.getPoint(
Ox.getPoint(
points['8 & 59'],
-59 * distances.streets,
bearings.avenues
),
-8 * distances.avenues,
bearings.streets
);
/*
The second intersection of Zero Avenue, Zero Street and Broadway is half of
the Earth's circumference away from the first one, in any direction.
*/
points['-0 & -0'] = Ox.getPoint(
points['0 & 0'],
Ox.EARTH_CIRCUMFERENCE / 2,
0
);
/*
Now that we have constructed the origin, we can calculate the bearing of
Broadway, which runs from Zero & Zero through Columbus Circle.
*/
bearings.broadway = Ox.getBearing(points['0 & 0'], points['8 & 59']),
/*
Also, we can construct the poles, each of which is a quarter of Earth's
circumference away from Zero & Zero.
*/
poles = {
north: Ox.getPoint(points['0 & 0'], C / 4, bearings.avenues),
south: Ox.getPoint(points['0 & 0'], -C / 4, bearings.avenues),
west: Ox.getPoint(points['0 & 0'], C / 4, bearings.streets),
east: Ox.getPoint(points['0 & 0'], -C / 4, bearings.streets),
/*
Broadway has two poles as well, and constructing them will make drawing
easier. Ox.mod is the modulo function. Unlike `-90 % 360`,
which in JavaScript is -90, Ox.mod(-90, 360) returns 270.
*/
westBroadway: Ox.getPoint(
points['0 & 0'],
C / 4,
Ox.mod(bearings.broadway - 90, 360)
),
eastBroadway: Ox.getPoint(
points['0 & 0'],
C / 4,
Ox.mod(bearings.broadway + 90, 360)
)
};
/*
Now we calculate circles for Broadway, Avenues and Streets. Ox.getCircle
returns an array of lat/lng pairs that form a circle around a given point,
with a given radius and a given precision, so that the circle will have
`Math.pow(2, precision)` segments.
*/
lines = {
/*
Since there is only one Broadway, this is an array with just one circle
that runs around one of the Broadway Poles, at a distance of a quarter
of the Earth's circumference.
*/
broadway: [Ox.getCircle(poles.westBroadway, C / 4, precision)],
/*
For each 10,000th avenue, we compute a circle around the East Pole.
From there, avenues range from -34,966th to 34,966th, so we start at a
distance of 966 avenues from the pole, stop once the distance is half
of the Earth's circumference (the West Pole), and in each step increase
the distance by 10,000 avenues.
*/
avenues: Ox.range(
distances.avenues * (numbers.avenues % step),
C / 2,
distances.avenues * step
).map(function(distance) {
return Ox.getCircle(poles.east, distance, precision);
}),
/*
Then we do the same for streets, starting at the South Pole.
*/
streets: Ox.range(
distances.streets * (numbers.streets % step),
C / 2,
distances.streets * step
).map(function(distance) {
return Ox.getCircle(poles.south, distance, precision);
})
};
/*
Print our data to the console.
*/
Ox.print(JSON.stringify({
bearings: bearings,
distances: distances,
numbers: numbers,
points: points,
poles: poles
}, null, ' '));
/*
Before we start drawing, we define a few helper functions.
`getXYByLatLng` returns screen coordinates for a given point.
We use Ox.getXYByLatLng, which takes a lat/lng pair and returns its x/y
position on a 1×1 Mercator position, with `{x: 0, y: 0}` at the
bottom left and `{x: 1, y: 1}` at the top right.
*/
function getXYByLatLng(point) {
return Ox.map(Ox.getXYByLatLng(point), function(v) {
return v * mapSize;
});
}
/*
`getLatLngByXY` is the inverse of the above, just like
Ox.getLatLngByXY.
*/
function getLatLngByXY(xy) {
return Ox.getLatLngByXY(Ox.map(xy, function(v) {
return v / mapSize;
}));
}
/*
`getASByLatLng` takes lat/lng and returns avenue/street. To
compute the avenue, we subtract the point's distance from the West Pole, in
avenues, from the total number of avenues. To compute the street, we
subtract the point's distance from the North Pole, in avenues, from the
total number of streets. We also return the bearing of the avenues at this
point (which form a right angle with the line from the point to the West
Pole), the bearing of the streets (at a right angle with the line to the
North Pole) and the hemisphere (east or west of Broadway).
*/
function getASByLatLng(point) {
var n = Ox.getDistance(point, poles.north),
w = Ox.getDistance(point, poles.west);
return {
avenue: numbers.avenues - w / distances.avenues,
street: numbers.streets - n / distances.streets,
bearings: {
avenues: Ox.mod(Ox.getBearing(point, poles.west) + (
w < C / 4 ? -90 : 90
), 360),
streets: Ox.mod(Ox.getBearing(point, poles.north) + (
n < C / 4 ? -90 : 90
), 360)
},
hemisphere: Ox.getDistance(point, poles.eastBroadway) < C / 4
? 'E' : 'W'
};
}
/*
`getASByXY` returns avenue and street at the given screen
coordinates.
*/
function getASByXY(xy) {
return getASByLatLng(getLatLngByXY(xy));
}
/*
`drawPath` draws a path of lat/lng pairs on an image. For each
path segment, we have to check if it crosses the eastern or western edge of
the map that splits the Pacific Ocean. Note that our test (a segment
crosses the edge if it spans more than 180 degrees longitude) is obviously
incorrect, but works in our case, since all segments are sufficiently
short.
*/
function drawPath(image, path, options) {
var n, parts = [[]];
/*
...
*/
path.push(path[0]);
n = path.length;
Ox.loop(n, function(i) {
var lat, lng, split;
/*
Append each point to the last part.
*/
Ox.last(parts).push(path[i]);
if (Math.abs(path[i].lng - path[(i + 1) % n].lng) > 180) {
/*
If the next line crosses the edge, get the lat/lng of the
points where the line leaves and enters the map.
*/
lat = Ox.getCenter(path[i], path[i + 1]).lat;
lng = path[i].lng < 0 ? [-180, 180] : [180, -180];
/*
Append the first point to the last part and create a new part
with the second point.
*/
Ox.last(parts).push({lat: lat, lng: lng[0]});
parts.push([{lat: lat, lng: lng[1]}]);
}
});
/*
We draw each part, translating lat/lng to [x, y].
*/
parts.forEach(function(part) {
image.drawPath(part.map(function(point) {
var xy = getXYByLatLng(point);
return [xy.x, xy.y];
}), options);
});
}
/*
...
*/
Ox.Image('jpg/earth1024.jpg', function(image) {
mapSize = image.getSize().width;
drawPath(image, Ox.getCircle(points['0 & 0'], C / 4, 8), {
color: 'rgba(255, 255, 255, 0.25)'
});
['streets', 'avenues', 'broadway'].forEach(function(type) {
lines[type].forEach(function(line, i) {
drawPath(image, line, {
color: colors[type],
width: i == lines[type].length / 2 - 0.5 ? 2 : 1
});
});
});
$body.css({
minWidth: mapSize + 'px',
height: mapSize + 'px',
backgroundImage: 'url(' + image.src() + ')'
})
.on({
click: click,
mouseover: mouseover,
mousemove: mousemove,
mouseout: mouseout
});
[
{point: points['0 & 0'], title: 'Manhattan', z: 12},
{point: {lat: 48.87377, lng: 2.29505}, title: 'Paris', z: 13},
{point: poles.north, title: 'Uzbekistan', z: 14}
].forEach(function(marker, i) {
var as = getASByLatLng(marker.point),
g = {s: 256, v: 108, z: marker.z},
xy = getXYByLatLng(marker.point);
Ox.print(as)
Ox.extend(g, Ox.map(Ox.getXYByLatLng(marker.point), function(v) {
return Math.floor(v * Math.pow(2, g.z));
}));
Ox.$('
')
.addClass('marker')
.css({
left: xy.x - 4 + 'px',
top: xy.y - 4 + 'px'
})
.on({
click: function() {
$images.forEach(function($image) {
$image.hide();
});
$images[i].show();
}
})
.appendTo($body);
Ox.Image(Ox.formatString(
'jpg/v={v}&x={x}&y={y}&z={z}.jpg', g
), function(image) {
if (marker.title == 'Uzbekistan') {
Ox.range(
distances.streets * (numbers.streets % 1),
2000,
distances.streets
).forEach(function(distance) {
var circle = mapLine(Ox.getCircle(
poles.north, distance, precision
), g);
image.drawPath(circle, {
close: true,
color: colors.streets
});
});
} else {
Ox.loop(-200, 200, function(street) {
var line = getLine(g, marker.point, as, 'streets', street);
image.drawPath(line, {
color: colors.streets,
width: marker.title == 'Paris' || street ? 1 : 2
});
});
}
Ox.loop(-20, 20, function(avenue) {
var line = getLine(g, marker.point, as, 'avenues', avenue);
image.drawPath(line, {
color: colors.avenues,
width: marker.title == 'Paris' || avenue ? 1 : 2
});
});
if (marker.title == 'Manhattan') {
var line = mapLine(Ox.getLine(
Ox.getPoint(marker.point, -10000, bearings.broadway),
Ox.getPoint(marker.point, 10000, bearings.broadway),
1
), g);
image.drawPath(line, {color: 'rgba(0, 0, 255, 0.5)', width: 2});
}
['black', 'white'].forEach(function(color, i) {
image.drawText(marker.title, [240 - i, 240 - i], {
color: color,
font: 'bold 16px Lucida Grande, sans-serif',
textAlign: 'right'
});
})
$images[i] = Ox.$('![]()
')
.attr({src: image.src()})
.hide()
.appendTo($body);
});
});
});
function getLine(g, point, as, type, i) {
point = Ox.getPoint(
point,
i * distances[type],
as.bearings[type == 'avenues' ? 'streets' : 'avenues']
);
return mapLine(Ox.getLine(
Ox.getPoint(point, -10000, as.bearings[type]),
Ox.getPoint(point, 10000, as.bearings[type]),
1
), g);
}
function mapLine(line, g) {
return line.map(function(point) {
var xy = Ox.map(Ox.getXYByLatLng(point), function(value, key) {
return (value * Math.pow(2, g.z) - g[key]) * g.s;
});
return [xy.x, xy.y];
});
}
function click(e) {
if (e.target.className != 'marker') {
$images.forEach(function($image) {
$image.hide();
});
}
}
function mouseover() {
$post.show();
$sign.show();
}
function mousemove(e) {
if (e.target.tagName == 'IMG') {
mouseout();
return;
}
var left = window.scrollX,
right = left + window.innerWidth,
top = window.scrollY,
xy = {x: left + e.clientX, y: top + e.clientY},
latlng = getLatLngByXY(xy),
as = getASByXY(xy),
width, height, invertX, invertY;
$sign.html(
Ox.formatNumber(as.avenue, 0) + 'th Av & '
+ as.hemisphere + ' '
+ Ox.formatNumber(as.street, 0) + 'th St'
+ '
'
+ Ox.formatDegrees(latlng.lat, 'lat') + ' / '
+ Ox.formatDegrees(((latlng.lng + 180) % 360) - 180, 'lng')
+ '
'
)
width = $sign.width();
height = $sign.height();
invertX = xy.x + width > right;
invertY = xy.y - height - 32 < top;
$sign.css({
left: xy.x + (invertX ? 1 - width : -1) + 'px',
top: xy.y + (invertY ? 32 : -32 - height) + 'px'
});
$post.css({
left: xy.x - 1 + 'px',
top: xy.y + (invertY ? 0 : -32 - height) + 'px',
height: $sign.height() + 32 + 'px'
});
}
function mouseout() {
$post.hide();
$sign.hide();
}
});