LogalDeveloper/Minecraft-Overviewer
Archived
0
Fork 0
Code Activity

Updated template.html to use google maps api v3. This also resolves the bug where double-clicking on the right side of the map to zoom in would zoom somewhere else entirely.

Browse Source
This commit is contained in:
Gregory Short
2010-09-06 17:44:08 -05:00
parent 54fb6ace07
commit 56a8970bdc
1 changed files with 70 additions and 137 deletions
Download Patch File Download Diff File Expand all files Collapse all files

163
template.html
View File

@@ -1,64 +1,30 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" <!DOCTYPE html>
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head> <head>
<!-- <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
This document written by SomethingAwful forums user Bad Munki, August 2010. <style type="text/css">
Feel free to use it, in whole or in part, for whatever you like. html { height: 100% }
body { height: 100%; margin: 0px; padding: 0px ; background-color: #000; }
If you want to publish this to a web site, you will need to provide a valid #mcmap { height: 100% }
Google Maps API key. To obtain a free API key, go to: </style>
http://code.google.com/apis/maps/signup.html <script type="text/javascript"
and enter the requested information. Copy the key in its entirety, and src="http://maps.google.com/maps/api/js?sensor=false">
replace the text YOUR_API_KEY_HERE (on or about line 135 of this file) with </script>
the copied key. Do not add quotes, spaces, etc.
Enjoy!
-->
<script type="text/javascript"> <script type="text/javascript">
var map; var config = {
var host_div; path: '.',
var meta = { fileExt: 'png',
longName: 'Minecraft World', // The long name for your map. Example: Minecraft World 1 tileSize: 384,
shortName: 'minecraft', // The short name for your map, Example: world1 defaultZoom: 1,
path: '.', // The relative path to the quad tree. No trailing slash. Example: world1 maxZoom: {maxzoom}
copyright: '', // The copyright string for your map. Example: Copyright 2010 Uncle Sam
file_ext: 'png', // The filetype extension of your tiles. Example: png
minZoom: 0, // The minimum zoom level of the map. Example: 1
maxZoom: {maxzoom}, // The maximum zoom level of the map. Example: 5
defaultZoom: 1, // The initial zoom level of the map. Example: 3
centerX: 0, // The initial X coordinate to center on screen. Example: 1000
centerY: 0, // The initial Y coordinate to center on screen. Example: 800
}; };
function IVCreateViewer(div) { var MCMapOptions = {
host_div = div; getTileUrl: function(tile, zoom) {
if (!GBrowserIsCompatible()) { var url = config.path;
return; if(tile.x < 0 || tile.x >= Math.pow(2, zoom) || tile.y < 0 || tile.y >= Math.pow(2, zoom)) {
} url += '/blank';
if(!document.getElementById(host_div)) { } else if(zoom == 0) {
return;
}
IVResize();
map = new GMap2(document.getElementById(host_div), { mapTypes: [IVGetMapType()] });
map.setCenter(new GLatLng(meta.centerY, meta.centerX), meta.defaultZoom);
map.addControl(new GLargeMapControl());
document.getElementById(host_div).style.backgroundColor = '#000000';
}
function IVGetMapType() {
var copyrights = new GCopyrightCollection('Map data');
copyrights.addCopyright(new GCopyright(
'map_copyright',
new GLatLngBounds(new GLatLng(-90,-180), new GLatLng(90,180)),
0,
meta.copyright));
var tileset = new GTileLayer(copyrights, 0, 4);
tileset.getTileUrl = function(tile, zoom) {
var url = meta.path;
if(zoom == 0) {
url += '/base'; url += '/base';
} else { } else {
for(var z = zoom - 1; z >= 0; --z) { for(var z = zoom - 1; z >= 0; --z) {
@@ -67,74 +33,41 @@
url += '/' + (x + 2 * y) url += '/' + (x + 2 * y)
} }
} }
url += '.' + meta.file_ext; url += '.' + config.fileExt;
return(url); return(url);
}; },
tileset.isPng = function() { return !(meta.file_ext.match(/^png$/i) == null); }; tileSize: new google.maps.Size(config.tileSize, config.tileSize),
tileset.getOpacity = function() { return 1.0; }; maxZoom: config.maxZoom,
minZoom: 0,
var proj = new GMercatorProjection(meta.maxZoom + 1); isPng: !(config.fileExt.match(/^png$/i) == null)
proj.getWrapWidth = function(zoom) {
return Infinity;
};
proj.tileCheckRange = function(tile, zoom, tilesize) {
if(tile.x < 0 || tile.x >= Math.pow(2, zoom) || tile.y < 0 || tile.y >= Math.pow(2, zoom)) {
return false;
}
return true;
}; };
var maptype = new GMapType( var MCMapType = new google.maps.ImageMapType(MCMapOptions);
[tileset], MCMapType.name = "MC Map";
proj, MCMapType.alt = "Minecraft Map";
meta.title,
{
shortName:meta.shortName,
tileSize:384,
maxResolution:meta.maxZoom,
minResolution:meta.minZoom
});
return maptype; var map;
}
function IVResize() { function initialize() {
document.getElementById(host_div).style.width = (IVPageWidth() - 30) + 'px'; var mapOptions = {
document.getElementById(host_div).style.height = (IVPageHeight() - 30) + 'px'; zoom: config.defaultZoom,
if(map) { center: new google.maps.LatLng(0, 0),
map.checkResize(); mapTypeControlOptions: {
} mapTypeIds: ['mcmap'],
style: google.maps.MapTypeControlStyle.DROPDOWN_MENU
} }
};
map = new google.maps.Map(document.getElementById("mcmap"), mapOptions);
function IVUnload() { // Now attach the coordinate map type to the map's registry
GUnload(); map.mapTypes.set('mcmap', MCMapType);
}
function IVPageWidth() { // We can now set the map to use the 'coordinate' map type
if(window.innerWidth) { map.setMapTypeId('mcmap');
return window.innerWidth;
} else if(document.body) {
return document.body.clientWidth;
}
return null;
}
function IVPageHeight() {
if(window.innerHeight) {
return window.innerHeight;
} else if(document.body) {
return document.body.clientHeight;
}
return null;
} }
</script> </script>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>Minecraft Map Viewer</title>
<script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=YOUR_API_KEY_HERE" type="text/javascript"></script>
</head> </head>
<body onload="IVCreateViewer('map'); IVResize();" onunload="IVUnload();" onresize="IVResize();" style="background-color: #000000;"> <body onload="initialize()">
<center> <div id="mcmap" style="width:100%; height:100%"></div>
<div id="map" style="border: 1px solid #555"></div>
</center>
</body> </body>
</html> </html>