<!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; Ox.print(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()); //Ox.print(+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 { //Ox.print("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) } }; Ox.print(JSON.stringify(d)) json.push(d); } else { Ox.print("no results", place, data) } }); if (places.length) { setTimeout(function() { getPlacemarks(places); }, 1000); } } $("body").append($("<div/>").html(JSON.stringify(json))); // */ }); </script> </head> <body> </body> </html>