260 lines
12 KiB
HTML
260 lines
12 KiB
HTML
|
<!DOCTYPE html>
|
||
|
|
<html>
|
||
|
|
<head>
|
||
|
|
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
|
||
|
|
<style>
|
||
|
|
body {
|
||
|
|
margin: 0;
|
||
|
|
overflow: hidden;
|
||
|
|
}
|
||
|
|
#map {
|
||
|
|
width: 100%;
|
||
|
|
height: 100%;
|
||
|
|
}
|
||
|
|
#data {
|
||
|
|
position: absolute;
|
||
|
|
left: 0;
|
||
|
|
bottom: 0;
|
||
|
|
width: 100%;
|
||
|
|
height: 100px;
|
||
|
|
padding: 0;
|
||
|
|
border: 0;
|
||
|
|
background: rgba(0, 0, 0, 0.5);
|
||
|
|
font-family: Consolas;
|
||
|
|
font-size: 8px;
|
||
|
|
color: rgb(255, 255, 255);
|
||
|
|
overflow: auto;
|
||
|
|
z-index: 1000;
|
||
|
|
}
|
||
|
|
#data:focus {
|
||
|
|
outline: none;
|
||
|
|
}
|
||
|
|
.flag {
|
||
|
|
position: absolute;
|
||
|
|
width: 8px;
|
||
|
|
height: 8px;
|
||
|
|
margin-left: -4px;
|
||
|
|
margin-top: -4px;
|
||
|
|
-moz-border-radius: 1px;
|
||
|
|
-webkit-border-radius: 1px;
|
||
|
|
-moz-box-shadow: 1px 1px 2px rgba(0, 0, 0, 128);
|
||
|
|
-webkit-box-shadow: 1px 1px 2px rgba(0, 0, 0, 128);
|
||
|
|
}
|
||
|
|
.flag:hover {
|
||
|
|
width: 16px;
|
||
|
|
height: 16px;
|
||
|
|
margin-left: -8px;
|
||
|
|
margin-top: -8px;
|
||
|
|
opacity: 0.5;
|
||
|
|
-moz-border-radius: 2px;
|
||
|
|
-webkit-border-radius: 2px;
|
||
|
|
-moz-box-shadow: 2px 2px 4px rgba(0, 0, 0, 128);
|
||
|
|
-webkit-box-shadow: 2px 2px 4px rgba(0, 0, 0, 128);
|
||
|
|
}
|
||
|
|
.rect {
|
||
|
|
position: absolute;
|
||
|
|
border: 1px solid rgb(255, 255, 255);
|
||
|
|
z-index: 1;
|
||
|
|
-moz-box-shadow: 2px 2px 4px rgba(0, 0, 0, 128);
|
||
|
|
-webkit-box-shadow: 2px 2px 4px rgba(0, 0, 0, 128);
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
<script src="../../build/js/jquery-1.3.2.js"></script>
|
||
|
|
<script src="../../build/js/ox.js"></script>
|
||
|
|
<script src="../../build/js/ox.data.js"></script>
|
||
|
|
<script src="../../build/js/ox.geo.js"></script>
|
||
|
|
<script src="http://maps.google.com/maps/api/js?sensor=false"></script>
|
||
|
|
<script>
|
||
|
|
$(function() {
|
||
|
|
var $body = $("body"),
|
||
|
|
$map = $("<img/>")
|
||
|
|
.attr({
|
||
|
|
id: "map",
|
||
|
|
src: "map.png"
|
||
|
|
})
|
||
|
|
.appendTo($body),
|
||
|
|
$data = $("<textarea/>")
|
||
|
|
.attr({
|
||
|
|
id: "data"
|
||
|
|
})
|
||
|
|
.appendTo($body),
|
||
|
|
aliases = {
|
||
|
|
"Ascension Island": "Ascension Island, Saint Helena",
|
||
|
|
"England": "England, United Kingdom",
|
||
|
|
"Georgia": "Georgia, Europe",
|
||
|
|
"Holy See": "Vatican City",
|
||
|
|
// "Palestine": ["West Bank", "Gaza Strip"],
|
||
|
|
"Palestine": "West Bank",
|
||
|
|
"Saint Martin": "Sint Maarten",
|
||
|
|
"Scotland": "Scotland, United Kingdom",
|
||
|
|
"Svalbard and Jan Mayen": "Svalbard",
|
||
|
|
"Wales": "Wales, United Kingdom",
|
||
|
|
"Yugoslavia": "Serbia"
|
||
|
|
},
|
||
|
|
json = {};
|
||
|
|
///*
|
||
|
|
$.getJSON("geo.json", function(data) {
|
||
|
|
json = data;
|
||
|
|
getPlacemarks($.map(Ox.getCountries(true), function(v) {
|
||
|
|
return v.code.length == 2 ? v : null;
|
||
|
|
}));
|
||
|
|
});
|
||
|
|
//*/
|
||
|
|
/*
|
||
|
|
getPlacemarks($.map(Ox.getCountries(true), function(v) {
|
||
|
|
return v.code.length == 2 ? v : null;
|
||
|
|
}));
|
||
|
|
*/
|
||
|
|
function getPlacemarks(countries) {
|
||
|
|
var country = countries.shift();
|
||
|
|
if (!(country.code in json)) {
|
||
|
|
console.log(country);
|
||
|
|
Ox.getPlacemarks(aliases[country.name] || country.name, function(geodata) {
|
||
|
|
if (!geodata.results) {
|
||
|
|
console.log(country.name, geodata.status);
|
||
|
|
}
|
||
|
|
geodata = geodata.results[0];
|
||
|
|
data = {
|
||
|
|
address: aliases[country.name] || country.name,
|
||
|
|
geocode: {
|
||
|
|
address_components: geodata.address_components,
|
||
|
|
formatted_address: geodata.formatted_address,
|
||
|
|
geometry: {
|
||
|
|
location: {},
|
||
|
|
location_type: geodata.geometry.location_type
|
||
|
|
},
|
||
|
|
types: geodata.types
|
||
|
|
},
|
||
|
|
name: country.name,
|
||
|
|
time: +new Date()
|
||
|
|
};
|
||
|
|
$.each(["lat", "lng"], function(i, crd) {
|
||
|
|
data.geocode.geometry.location[crd] = parseFloat(
|
||
|
|
geodata.geometry.location[crd]().toFixed(8)
|
||
|
|
);
|
||
|
|
});
|
||
|
|
$.each(["bounds", "viewport"], function(i, obj) {
|
||
|
|
if (obj in geodata.geometry) {
|
||
|
|
data.geocode.geometry[obj] = {};
|
||
|
|
$.each(["center", "southWest", "northEast"], function(i, pnt) {
|
||
|
|
data.geocode.geometry[obj][pnt] = {};
|
||
|
|
$.each(["lat", "lng"], function(i, crd) {
|
||
|
|
data.geocode.geometry[obj][pnt][crd] = parseFloat(
|
||
|
|
geodata.geometry[obj][
|
||
|
|
"get" + pnt[0].toUpperCase() + pnt.substr(1)
|
||
|
|
]()[crd]().toFixed(8)
|
||
|
|
);
|
||
|
|
});
|
||
|
|
});
|
||
|
|
}
|
||
|
|
});
|
||
|
|
json[country.code] = data;
|
||
|
|
addFlag(country, json[country.code]);
|
||
|
|
addData(json)
|
||
|
|
if (country.name != geodata.formatted_address) {
|
||
|
|
console.log(country.name, geodata.formatted_address, geodata);
|
||
|
|
}
|
||
|
|
if (countries.length) {
|
||
|
|
setTimeout(function() {
|
||
|
|
getPlacemarks(countries);
|
||
|
|
}, 1000);
|
||
|
|
}
|
||
|
|
});
|
||
|
|
} else {
|
||
|
|
addFlag(country, json[country.code]);
|
||
|
|
addData(json);
|
||
|
|
if (countries.length) {
|
||
|
|
setTimeout(function() {
|
||
|
|
getPlacemarks(countries);
|
||
|
|
}, 100);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
function addData(json) {
|
||
|
|
//var scroll = $data[0].scrollTop == $data[0].scrollHeight;
|
||
|
|
$data.html(
|
||
|
|
JSON.stringify(json, null, 4)
|
||
|
|
);
|
||
|
|
/*
|
||
|
|
if (scroll) {
|
||
|
|
$data[0].scrollTop = $data[0].scrollHeight;
|
||
|
|
}
|
||
|
|
*/
|
||
|
|
}
|
||
|
|
function addFlag(country, data) {
|
||
|
|
var location = Ox.getXY(data.geocode.geometry.location.lat, data.geocode.geometry.location.lng),
|
||
|
|
bounds = "bounds" in data.geocode.geometry ? data.geocode.geometry.bounds : data.geocode.geometry.viewport,
|
||
|
|
southWest = Ox.getXY(bounds.southWest.lat, bounds.southWest.lng),
|
||
|
|
northEast = Ox.getXY(bounds.northEast.lat, bounds.northEast.lng),
|
||
|
|
crossesDateline = southWest.x > northEast.x,
|
||
|
|
$div = [];
|
||
|
|
if (crossesDateline) {
|
||
|
|
$div = [
|
||
|
|
$("<div/>")
|
||
|
|
.addClass("rect")
|
||
|
|
.css({
|
||
|
|
left: "-16px",
|
||
|
|
top: ($map.height() * northEast.y) + "px",
|
||
|
|
right: ($map.width() - $map.width() * northEast.x) + "px",
|
||
|
|
bottom: ($map.height() - $map.height() * southWest.y) + "px",
|
||
|
|
})
|
||
|
|
.hide()
|
||
|
|
.appendTo($body),
|
||
|
|
$("<div/>")
|
||
|
|
.addClass("rect")
|
||
|
|
.css({
|
||
|
|
left: ($map.width() * southWest.x) + "px",
|
||
|
|
top: ($map.height() * northEast.y) + "px",
|
||
|
|
right: "-16px",
|
||
|
|
bottom: ($map.height() - $map.height() * southWest.y) + "px",
|
||
|
|
})
|
||
|
|
.hide()
|
||
|
|
.appendTo($body),
|
||
|
|
|
||
|
|
];
|
||
|
|
} else {
|
||
|
|
$div = [
|
||
|
|
$("<div/>")
|
||
|
|
.addClass("rect")
|
||
|
|
.css({
|
||
|
|
left: ($map.width() * southWest.x) + "px",
|
||
|
|
top: ($map.height() * northEast.y) + "px",
|
||
|
|
right: ($map.width() - $map.width() * northEast.x) + "px",
|
||
|
|
bottom: ($map.height() - $map.height() * southWest.y) + "px",
|
||
|
|
})
|
||
|
|
.hide()
|
||
|
|
.appendTo($body)
|
||
|
|
];
|
||
|
|
}
|
||
|
|
$("<img/>")
|
||
|
|
.attr({
|
||
|
|
src: "../../tools/flags/png/16/" + (country.flag.indexOf("-") == 2 ?
|
||
|
|
country.flag.substr(0, 2) + "/" : "") + country.flag + ".png",
|
||
|
|
title: country.name + " ((" + bounds.southWest.lat + ", " + bounds.southWest.lng + "), (" + bounds.northEast.lat + ", " + bounds.northEast.lng + "))"
|
||
|
|
})
|
||
|
|
.addClass("flag")
|
||
|
|
.css({
|
||
|
|
left: (location.x * 100) + "%",
|
||
|
|
top: (location.y * 100) + "%"
|
||
|
|
})
|
||
|
|
.mouseenter(function() {
|
||
|
|
$(this).css({
|
||
|
|
zIndex: Ox.uid()
|
||
|
|
});
|
||
|
|
$.each($div, function() {
|
||
|
|
$(this).show();
|
||
|
|
});
|
||
|
|
})
|
||
|
|
.mouseleave(function() {
|
||
|
|
$.each($div, function() {
|
||
|
|
$(this).hide();
|
||
|
|
});
|
||
|
|
})
|
||
|
|
.appendTo($body);
|
||
|
|
window.status = Ox.length(json) + " " + data.address;
|
||
|
|
}
|
||
|
|
});
|
||
|
|
</script>
|
||
|
|
</head>
|
||
|
|
<body></body>
|
||
|
|
</html>
|