191 lines
9.3 KiB
HTML
191 lines
9.3 KiB
HTML
|
<!DOCTYPE html>
|
||
|
|
<html>
|
||
|
|
<head>
|
||
|
|
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
|
||
|
|
<style>
|
||
|
|
body {
|
||
|
|
margin: 0;
|
||
|
|
overflow: hidden;
|
||
|
|
-moz-user-select: none;
|
||
|
|
-webkit-user-select: none;
|
||
|
|
}
|
||
|
|
.map {
|
||
|
|
position: absolute;
|
||
|
|
left: 0;
|
||
|
|
top: 0;
|
||
|
|
right: 0;
|
||
|
|
bottom: 0;
|
||
|
|
width: 1024px;
|
||
|
|
height: 640px;
|
||
|
|
margin: auto;
|
||
|
|
}
|
||
|
|
.flag {
|
||
|
|
position: absolute;
|
||
|
|
width: 8px;
|
||
|
|
height: 8px;
|
||
|
|
margin-left: -4px;
|
||
|
|
margin-top: -4px;
|
||
|
|
-moz-border-radius: 1px;
|
||
|
|
-webkit-border-radius: 1px;
|
||
|
|
-webkit-box-shadow: 1px 1px 2px rgba(0, 0, 0, 128);
|
||
|
|
}
|
||
|
|
.flag.hover,
|
||
|
|
.flag:hover {
|
||
|
|
width: 16px;
|
||
|
|
height: 15px;
|
||
|
|
margin-left: -8px;
|
||
|
|
margin-top: -8px;
|
||
|
|
-moz-border-radius: 2px;
|
||
|
|
-webkit-border-radius: 2px;
|
||
|
|
-webkit-box-shadow: 2px 2px 4px rgba(0, 0, 0, 128);
|
||
|
|
z-index: 1000;
|
||
|
|
}
|
||
|
|
</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"),
|
||
|
|
places = Ox.getCountries(true);
|
||
|
|
var $map = $("<img/>")
|
||
|
|
.attr({
|
||
|
|
src: "map.png"
|
||
|
|
})
|
||
|
|
.addClass("map")
|
||
|
|
.appendTo("body")
|
||
|
|
.click(function(e) {
|
||
|
|
var offset = $(this).offset(),
|
||
|
|
left = offset.left,
|
||
|
|
top = offset.top,
|
||
|
|
width = $(this).width(),
|
||
|
|
height = $(this).height(),
|
||
|
|
latLng = Ox.getLatLng((e.clientX - left) / width, (e.clientY - top) / height);
|
||
|
|
Ox.getPlacemarks(latLng.lat, latLng.lng, function(data) {
|
||
|
|
var length = data.results.length;
|
||
|
|
console.log(data)
|
||
|
|
if (length && data.results[length - 1].types[0] == "country") {
|
||
|
|
var $img = $("#" + data.results[length - 1].address_components[0].short_name);
|
||
|
|
if (!$img.length) {
|
||
|
|
Ox.getPlacemarks(data.results[length - 1].formatted_address, function(data) {
|
||
|
|
if (data.results.length) {
|
||
|
|
var location = data.results[0].geometry.location,
|
||
|
|
xy = Ox.getXY(location.lat(), location.lng());
|
||
|
|
//console.log(+new Date, place.name, location, xy);
|
||
|
|
var $img = $("<img/>")
|
||
|
|
.attr({
|
||
|
|
id: data.results[0].address_components[0].short_name,
|
||
|
|
src: "../../tools/flags/png/square/" + data.results[0].address_components[0].short_name + ".png",
|
||
|
|
title: data.results[0].formatted_address
|
||
|
|
})
|
||
|
|
.addClass("flag hover")
|
||
|
|
.css({
|
||
|
|
left: left + (xy.x * width) + "px",
|
||
|
|
top: top + (xy.y * height) + "px"
|
||
|
|
})
|
||
|
|
.mouseenter(function() {
|
||
|
|
$(this).css({
|
||
|
|
zIndex: Ox.uid()
|
||
|
|
});
|
||
|
|
})
|
||
|
|
.dblclick(function() {
|
||
|
|
$(this).remove();
|
||
|
|
})
|
||
|
|
.appendTo($body);
|
||
|
|
setTimeout(function() {
|
||
|
|
$img.removeClass("hover");
|
||
|
|
}, 1000);
|
||
|
|
} else {
|
||
|
|
//console.log("no results", place, data)
|
||
|
|
}
|
||
|
|
});
|
||
|
|
} else {
|
||
|
|
$img.addClass("hover");
|
||
|
|
setTimeout(function() {
|
||
|
|
$img.removeClass("hover");
|
||
|
|
}, 1000);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
});
|
||
|
|
});
|
||
|
|
// /*
|
||
|
|
var aliases = {
|
||
|
|
"Ascension Island": "Ascension Island, Saint Helena",
|
||
|
|
"England": "England, United Kingdom",
|
||
|
|
"Georgia": "Georgia, Europe",
|
||
|
|
"Holy See": "Vatican City",
|
||
|
|
"Palestine": "West Bank",
|
||
|
|
"Saint Martin": "Sint Maarten",
|
||
|
|
"Scotland": "Scotland, United Kingdom",
|
||
|
|
"Svalbard and Jan Mayen": "Svalbard",
|
||
|
|
"Wales": "Wales, United Kingdom",
|
||
|
|
"Yugoslavia": "Serbia"
|
||
|
|
};
|
||
|
|
var json = [];
|
||
|
|
setTimeout(function() {
|
||
|
|
getPlacemarks(places);
|
||
|
|
}, 1000);
|
||
|
|
function getPlacemarks(places) {
|
||
|
|
var place = places.shift();
|
||
|
|
Ox.getPlacemarks(aliases[place.name] || place.name, function(data) {
|
||
|
|
if (data.results.length) {
|
||
|
|
var location = data.results[0].geometry.location,
|
||
|
|
xy = Ox.getXY(location.lat(), location.lng()),
|
||
|
|
offset = $map.offset(),
|
||
|
|
left = offset.left,
|
||
|
|
top = offset.top,
|
||
|
|
width = $map.width(),
|
||
|
|
height = $map.height();
|
||
|
|
$("<img/>")
|
||
|
|
.attr({
|
||
|
|
src: "../../tools/flags/png/square/" + (place.flag.indexOf("-") == 2 ? place.flag.substr(0, 2) + "/" : "") + place.flag + ".png",
|
||
|
|
title: place.code + " " + place.name
|
||
|
|
})
|
||
|
|
.addClass("flag")
|
||
|
|
.css({
|
||
|
|
left: left + (xy.x * width) + "px",
|
||
|
|
top: top + (xy.y * height) + "px"
|
||
|
|
})
|
||
|
|
.mouseenter(function() {
|
||
|
|
$(this).css({
|
||
|
|
zIndex: Ox.uid()
|
||
|
|
});
|
||
|
|
})
|
||
|
|
.appendTo($body);
|
||
|
|
d = {
|
||
|
|
name: data.results[0].formatted_address,
|
||
|
|
center: {
|
||
|
|
lat: data.results[0].geometry.viewport.getCenter().lat().toFixed(10),
|
||
|
|
lng: data.results[0].geometry.viewport.getCenter().lng().toFixed(10)
|
||
|
|
},
|
||
|
|
southWest: {
|
||
|
|
lat: data.results[0].geometry.viewport.getSouthWest().lat().toFixed(10),
|
||
|
|
lng: data.results[0].geometry.viewport.getSouthWest().lng().toFixed(10)
|
||
|
|
},
|
||
|
|
northEast: {
|
||
|
|
lat: data.results[0].geometry.viewport.getNorthEast().lat().toFixed(10),
|
||
|
|
lng: data.results[0].geometry.viewport.getNorthEast().lng().toFixed(10)
|
||
|
|
}
|
||
|
|
};
|
||
|
|
console.log(JSON.stringify(d))
|
||
|
|
json.push(d);
|
||
|
|
} else {
|
||
|
|
console.log("no results", place, data)
|
||
|
|
}
|
||
|
|
});
|
||
|
|
if (places.length) {
|
||
|
|
setTimeout(function() {
|
||
|
|
getPlacemarks(places);
|
||
|
|
}, 1000);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
$("body").append($("<div/>").html(JSON.stringify(json)));
|
||
|
|
// */
|
||
|
|
});
|
||
|
|
</script>
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
</body>
|
||
|
|
</html>
|