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.
This commit is contained in:
Gregory Short
207
template.html
207
template.html
@@ -1,140 +1,73 @@
|
|||||||
<!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" />
|
||||||
<!--
|
<style type="text/css">
|
||||||
This document written by SomethingAwful forums user Bad Munki, August 2010.
|
html { height: 100% }
|
||||||
Feel free to use it, in whole or in part, for whatever you like.
|
body { height: 100%; margin: 0px; padding: 0px ; background-color: #000; }
|
||||||
|
#mcmap { height: 100% }
|
||||||
If you want to publish this to a web site, you will need to provide a valid
|
</style>
|
||||||
Google Maps API key. To obtain a free API key, go to:
|
<script type="text/javascript"
|
||||||
http://code.google.com/apis/maps/signup.html
|
src="http://maps.google.com/maps/api/js?sensor=false">
|
||||||
and enter the requested information. Copy the key in its entirety, and
|
</script>
|
||||||
replace the text YOUR_API_KEY_HERE (on or about line 135 of this file) with
|
<script type="text/javascript">
|
||||||
the copied key. Do not add quotes, spaces, etc.
|
var config = {
|
||||||
|
path: '.',
|
||||||
Enjoy!
|
fileExt: 'png',
|
||||||
-->
|
tileSize: 384,
|
||||||
<script type="text/javascript">
|
defaultZoom: 1,
|
||||||
var map;
|
maxZoom: {maxzoom}
|
||||||
var host_div;
|
};
|
||||||
var meta = {
|
|
||||||
longName: 'Minecraft World', // The long name for your map. Example: Minecraft World 1
|
var MCMapOptions = {
|
||||||
shortName: 'minecraft', // The short name for your map, Example: world1
|
getTileUrl: function(tile, zoom) {
|
||||||
path: '.', // The relative path to the quad tree. No trailing slash. Example: world1
|
var url = config.path;
|
||||||
copyright: '', // The copyright string for your map. Example: Copyright 2010 Uncle Sam
|
if(tile.x < 0 || tile.x >= Math.pow(2, zoom) || tile.y < 0 || tile.y >= Math.pow(2, zoom)) {
|
||||||
file_ext: 'png', // The filetype extension of your tiles. Example: png
|
url += '/blank';
|
||||||
minZoom: 0, // The minimum zoom level of the map. Example: 1
|
} else if(zoom == 0) {
|
||||||
maxZoom: {maxzoom}, // The maximum zoom level of the map. Example: 5
|
url += '/base';
|
||||||
defaultZoom: 1, // The initial zoom level of the map. Example: 3
|
} else {
|
||||||
centerX: 0, // The initial X coordinate to center on screen. Example: 1000
|
for(var z = zoom - 1; z >= 0; --z) {
|
||||||
centerY: 0, // The initial Y coordinate to center on screen. Example: 800
|
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)
|
||||||
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();
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
url += '.' + config.fileExt;
|
||||||
function IVUnload() {
|
return(url);
|
||||||
GUnload();
|
},
|
||||||
|
tileSize: new google.maps.Size(config.tileSize, config.tileSize),
|
||||||
|
maxZoom: config.maxZoom,
|
||||||
|
minZoom: 0,
|
||||||
|
isPng: !(config.fileExt.match(/^png$/i) == null)
|
||||||
|
};
|
||||||
|
|
||||||
|
var MCMapType = new google.maps.ImageMapType(MCMapOptions);
|
||||||
|
MCMapType.name = "MC Map";
|
||||||
|
MCMapType.alt = "Minecraft Map";
|
||||||
|
|
||||||
|
var map;
|
||||||
|
|
||||||
|
function initialize() {
|
||||||
|
var mapOptions = {
|
||||||
|
zoom: config.defaultZoom,
|
||||||
|
center: new google.maps.LatLng(0, 0),
|
||||||
|
mapTypeControlOptions: {
|
||||||
|
mapTypeIds: ['mcmap'],
|
||||||
|
style: google.maps.MapTypeControlStyle.DROPDOWN_MENU
|
||||||
}
|
}
|
||||||
|
};
|
||||||
function IVPageWidth() {
|
map = new google.maps.Map(document.getElementById("mcmap"), mapOptions);
|
||||||
if(window.innerWidth) {
|
|
||||||
return window.innerWidth;
|
// Now attach the coordinate map type to the map's registry
|
||||||
} else if(document.body) {
|
map.mapTypes.set('mcmap', MCMapType);
|
||||||
return document.body.clientWidth;
|
|
||||||
}
|
// We can now set the map to use the 'coordinate' map type
|
||||||
return null;
|
map.setMapTypeId('mcmap');
|
||||||
}
|
}
|
||||||
|
</script>
|
||||||
function IVPageHeight() {
|
</head>
|
||||||
if(window.innerHeight) {
|
<body onload="initialize()">
|
||||||
return window.innerHeight;
|
<div id="mcmap" style="width:100%; height:100%"></div>
|
||||||
} else if(document.body) {
|
</body>
|
||||||
return document.body.clientHeight;
|
</html>
|
||||||
}
|
|
||||||
return null;
|
|
||||||
}
|
|
||||||
</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&v=2&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>
|
|
||||||
</html>
|
|
||||||
Reference in New Issue
Block a user