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

197
template.html
View File

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