80c15a3910
The spawn point is automatically added to the gmap as a marker. Adding other markers (signs, mob spawners, etc) should be fairly easy. Note: the math that converts from in-game block coordinates to pixel coordinates is iffy. it requires a careful codereview
177 lines
4.9 KiB
HTML
177 lines
4.9 KiB
HTML
<!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="markers.js"></script>
|
|
<script type="text/javascript"
|
|
src="http://maps.google.com/maps/api/js?sensor=false">
|
|
</script>
|
|
<script type="text/javascript">
|
|
var config = {
|
|
path: 'tiles',
|
|
fileExt: 'png',
|
|
tileSize: 384,
|
|
defaultZoom: 1,
|
|
maxZoom: {maxzoom},
|
|
cacheMinutes: 0, // Change this to have browsers automatically requiest new images every x minutes
|
|
debug: false
|
|
};
|
|
|
|
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 = url + '.' + config.fileExt;
|
|
if(config.cacheMinutes > 0) {
|
|
var d = new Date();
|
|
url += '?c=' + Math.floor(d.getTime() / (1000 * 60 * config.cacheMinutes));
|
|
}
|
|
return(url);
|
|
},
|
|
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";
|
|
|
|
function CoordMapType() {
|
|
}
|
|
|
|
function CoordMapType(tileSize) {
|
|
this.tileSize = tileSize;
|
|
}
|
|
|
|
CoordMapType.prototype.getTile = function(coord, zoom, ownerDocument) {
|
|
var div = ownerDocument.createElement('DIV');
|
|
div.innerHTML = "(" + coord.x + ", " + coord.y + ", " + zoom + ")";
|
|
div.innerHTML += "<br />";
|
|
div.innerHTML += MCMapOptions.getTileUrl(coord, zoom);
|
|
div.style.width = this.tileSize.width + 'px';
|
|
div.style.height = this.tileSize.height + 'px';
|
|
div.style.fontSize = '10';
|
|
div.style.borderStyle = 'solid';
|
|
div.style.borderWidth = '1px';
|
|
div.style.borderColor = '#AAAAAA';
|
|
return div;
|
|
};
|
|
|
|
var map;
|
|
var prot;
|
|
|
|
var markersInit = false;
|
|
|
|
function convertCoords (x,y,z) {
|
|
|
|
var imgx = 0;
|
|
var imgy = 0;
|
|
|
|
imgx = imgx + (12*x);
|
|
imgy = imgy - (6*x);
|
|
|
|
imgx = imgx + (12 * y);
|
|
imgy = imgy + (6* y);
|
|
|
|
imgy = imgy - (12*z);
|
|
|
|
// this math is mysterious. i don't fully understand it
|
|
// but the idea is to assume that block 0,0,0 in chunk 0,0
|
|
// is drawn in the very middle of the gmap at (192,192)
|
|
return [192*Math.pow(2,config.maxZoom)+imgx, 192*Math.pow(2,config.maxZoom)+imgy+768+768];
|
|
}
|
|
|
|
function initMarkers() {
|
|
if (markersInit) { return; }
|
|
|
|
markersInit = true;
|
|
|
|
prot = map.getProjection();
|
|
|
|
for (i in markerData) {
|
|
var item = markerData[i];
|
|
|
|
var converted = convertCoords(item.x-16, item.z, item.y);
|
|
|
|
|
|
var x = converted[0] / Math.pow(2, config.maxZoom);
|
|
var y = converted[1] / Math.pow(2, config.maxZoom);
|
|
var p = new google.maps.Point(x,y);
|
|
var marker = new google.maps.Marker({
|
|
position: prot.fromPointToLatLng(p),
|
|
map: map,
|
|
title:item.msg
|
|
});
|
|
|
|
}
|
|
|
|
|
|
|
|
}
|
|
|
|
function initialize() {
|
|
var mapOptions = {
|
|
zoom: config.defaultZoom,
|
|
center: new google.maps.LatLng(-45, 90),
|
|
navigationControl: true,
|
|
scaleControl: false,
|
|
mapTypeControl: false,
|
|
mapTypeId: 'mcmap'
|
|
};
|
|
map = new google.maps.Map(document.getElementById("mcmap"), mapOptions);
|
|
|
|
if(config.debug) {
|
|
map.overlayMapTypes.insertAt(0, new CoordMapType(new google.maps.Size(config.tileSize, config.tileSize)));
|
|
}
|
|
|
|
|
|
|
|
// 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');
|
|
|
|
prot = map.getProjection();
|
|
|
|
if (config.debug)
|
|
google.maps.event.addListener(map, 'click', function(event) {
|
|
console.log("latLng: " + event.latLng.lat() + ", " + event.latLng.lng());
|
|
var pnt = prot.fromLatLngToPoint(event.latLng);
|
|
|
|
console.log("point: " + pnt);//
|
|
var pxx = pnt.x * Math.pow(2,config.maxZoom);
|
|
var pxy = pnt.y * Math.pow(2,config.maxZoom);
|
|
console.log("pixel: " + pxx + ", " + pxy);
|
|
});
|
|
|
|
google.maps.event.addListener(map, 'projection_changed', function(event) {
|
|
initMarkers();
|
|
});
|
|
|
|
|
|
}
|
|
</script>
|
|
</head>
|
|
<body onload="initialize()">
|
|
<div id="mcmap" style="width:100%; height:100%"></div>
|
|
</body>
|
|
</html>
|