LogalDeveloper/Minecraft-Overviewer
Archived
0
Fork 0
Code Activity

Merge branch 'overlays' into dtt-c-render

Browse Source 
Conflicts:
	quadtree.py
	web_assets/functions.js
This commit is contained in:
Aaron Griffith
2011-04-18 18:29:51 -04:00
parent 82aa172dcc 5f6ceebc81
commit a6e8de484d
18 changed files with 720 additions and 295 deletions
Download Patch File Download Diff File Expand all files Collapse all files

522
web_assets/functions.js
View File

@@ -1,14 +1,16 @@
// var def
var map; // god of the overviewer... bow before the google api.
var markerCollection = {}; // holds groups of markers
var map;
var markersInit = false;
var regionsInit = false;
var markersInit = false; // only have to load the markers once, this just makes sure we only do it once
var regionCollection = {}; // holds groups of regions
var regionsInit = false; // only have to load the regions once, this just makes sure we only do it once
var prevInfoWindow = null;
// add a popup info window to the marker and then the marker to the map.
// marker is the clickable image on the map with all data.
// item is just the same item in the markers.js
function prepareSignMarker(marker, item) {
var c = "<div class=\"infoWindow\"><img src=\"signpost.png\" /><p>" + item.msg.replace(/\n/g,"<br/>") + "</p></div>";
var infowindow = new google.maps.InfoWindow({content: c
});
@@ -17,154 +19,289 @@ function prepareSignMarker(marker, item) {
prevInfoWindow.close()
infowindow.open(map,marker);
prevInfoWindow = infowindow
});
});
}
// reusable function for making drop down menus.
// title = string
// items = array
function createDropDown(title, items) {
var control = document.createElement("DIV");
control.id = "customControl"; // let's let a style sheet do most of the styling here
function drawMapControls() {
// viewstate link
var viewStateDiv = document.createElement('DIV');
//<div id="link" style="border:1px solid black;background-color:white;color:black;position:absolute;top:5px;right:5px"></div>
viewStateDiv.id="link";
map.controls[google.maps.ControlPosition.BOTTOM_RIGHT].push(viewStateDiv);
// compass rose, in the top right corner
var compassDiv = document.createElement('DIV');
compassDiv.style.padding = '5px';
var compassImg = document.createElement('IMG');
compassImg.src="compass.png";
compassDiv.appendChild(compassImg);
compassDiv.index = 0;
map.controls[google.maps.ControlPosition.TOP_RIGHT].push(compassDiv);
if (signGroups.length > 0) {
// signpost display control
//
var signControl = document.createElement("DIV");
signControl.id = "signControl"; // let's let a style sheet do most of the styling here
var controlText = document.createElement("DIV");
controlText.innerHTML = title;
var controlBorder = document.createElement("DIV");
controlBorder.id="top";
signControl.appendChild(controlBorder);
var controlText = document.createElement("DIV");
control.appendChild(controlBorder);
controlBorder.appendChild(controlText);
controlText.innerHTML = "Signposts";
var dropdownDiv = document.createElement("DIV");
$(controlText).click(function() {
$(dropdownDiv).toggle();
});
dropdownDiv.id="dropDown";
signControl.appendChild(dropdownDiv);
control.appendChild(dropdownDiv);
dropdownDiv.innerHTML="";
map.controls[google.maps.ControlPosition.TOP_RIGHT].push(signControl);
// add the functionality to toggle visibility of the items
$(controlText).click(function() {
$(dropdownDiv).toggle();
});
// add that control box we've made back to the map.
map.controls[google.maps.ControlPosition.TOP_RIGHT].push(control);
var hasSignGroup = false;
for (idx in signGroups) {
var item = signGroups[idx];
//console.log(item);
label = item.label;
hasSignGroup = true;
for (idx in items) {
// create the visible elements of the item
var item = items[idx];
//console.log(item); // debug
var d = document.createElement("div");
var n = document.createElement("input");
n.type="checkbox";
$(n).data("label",label);
jQuery(n).click(function(e) {
var t = $(e.target);
jQuery.each(markerCollection[t.data("label")], function(i,elem) {elem.setVisible(e.target.checked);});
});
// give it a name
$(n).data("label",item.label);
jQuery(n).click((function(local_idx, local_item) {
return function(e) {
item.action(local_idx, local_item, e.target.checked);
};
})(idx, item));
// if its checked, its gotta do something, do that here.
if (item.checked) {
n.checked = true;
jQuery.each(markerCollection[label], function(i,elem) {elem.setVisible(n.checked);});
item.action(idx, item.label, item.checked);
}
dropdownDiv.appendChild(d);
d.appendChild(n)
var textNode = document.createElement("text");
textNode.innerHTML = label + "<br/>";
if(item.icon) {
textNode.innerHTML = "<img width='15' height='15' src='"+item.icon+"'>" + item.label + "<br/>";
} else {
textNode.innerHTML = item.label + "<br/>";
}
d.appendChild(textNode);
}
}
}
function HomeControl(controlDiv, map) {
controlDiv.style.padding = '5px';
// Set CSS for the control border
var control = document.createElement('DIV');
control.id='top';
control.title = 'Click to center the map on the Spawn';
controlDiv.appendChild(control);
// Set CSS for the control interior
var controlText = document.createElement('DIV');
controlText.innerHTML = 'Spawn';
controlText.id='button';
control.appendChild(controlText);
// Setup the click event listeners: simply set the map to map center as definned below
google.maps.event.addDomListener(control, 'click', function() {
map.panTo(fromWorldToLatLng(config.center[0],
config.center[1],
config.center[2]));
});
}
// need to define the controls including the compass and layer controls. top right!
// input variables are for chumps... and reusable functions. this is neither.
function drawMapControls() {
// viewstate link (little link to where you're looking at the map, normally bottom left)
var viewStateDiv = document.createElement('DIV');
viewStateDiv.id="link";
// add it to the map, bottom left.
map.controls[google.maps.ControlPosition.BOTTOM_LEFT].push(viewStateDiv);
// compass rose, in the top right corner
var compassDiv = document.createElement('DIV');
compassDiv.style.padding = '5px';
var compassImg = document.createElement('IMG');
compassImg.src="compass.png";
compassDiv.appendChild(compassImg);
compassDiv.index = 0;
// add it to the map, top right.
map.controls[google.maps.ControlPosition.TOP_RIGHT].push(compassDiv);
// Spawn button
var homeControlDiv = document.createElement('DIV');
var homeControl = new HomeControl(homeControlDiv, map);
homeControlDiv.id = "customControl";
homeControlDiv.index = 1;
map.controls[google.maps.ControlPosition.TOP_RIGHT].push(homeControlDiv);
// only need to create the control if there are items in the list. as definned in config.js
if (signGroups.length > 0) {
// signpost display control
var items = [];
for (idx in signGroups) {
var signGroup = signGroups[idx];
var iconURL = signGroup.icon;
if (!iconURL) { iconURL = 'signpost.png'; }
items.push({
"label": signGroup.label,
"checked": signGroup.checked,
"icon": iconURL,
"action": function(n, item, checked) {
jQuery.each(markerCollection[item.label], function(i,elem) {
elem.setVisible(checked);
});
//alert(item.label);
}
});
}
createDropDown("Signposts", items);
}
// if there are any regions data, lets show the option to hide/show them.
if (regionGroups.length > 0) {
// region display control
var items = [];
for (idx in regionGroups) {
var regionGroup = regionGroups[idx];
items.push({
"label": regionGroup.label,
"checked": regionGroup.checked,
"action": function(n, item, checked) {
jQuery.each(regionCollection[item.label], function(i,elem) {
elem.setMap(checked ? map : null); // Thanks to LeastWeasel for this line!
});
}
});
}
createDropDown("Regions", items);
}
if (overlayMapTypes.length > 0) {
// overlay maps control
var items = [];
for (idx in overlayMapTypes) {
var overlay = overlayMapTypes[idx];
items.push({"label": overlay.name, "checked": false, "overlay": overlay,
"action": function(i, item, checked) {
if (checked) {
map.overlayMapTypes.push(item.overlay);
} else {
var idx_to_delete = -1;
map.overlayMapTypes.forEach(function(e, j) {
if (e == item.overlay) { idx_to_delete = j; }
});
if (idx_to_delete >= 0) {
map.overlayMapTypes.removeAt(idx_to_delete);
}
}
}});
}
createDropDown("Overlays", items);
}
}
// will be recoded by pi, currently always displays all regions all the time.
// parse the data as definned in the regions.js
function initRegions() {
if (regionsInit) { return; }
regionsInit = true;
for (i in regionGroups) {
regionCollection[regionGroups[i].label] = [];
}
for (i in regionData) {
var region = regionData[i];
// pull all the points out of the regions file.
var converted = new google.maps.MVCArray();
var infoPoint = "";
for (j in region.path) {
var point = region.path[j];
converted.push(fromWorldToLatLng(point.x, point.y, point.z));
}
for (idx in regionGroups) {
var regionGroup = regionGroups[idx];
var testfunc = regionGroup.match;
var clickable = regionGroup.clickable
var label = regionGroup.label;
if(region.label) {
var name = region.label
} else {
var name = 'rawr';
clickable = false; // if it doesn't have a name, we dont have to show it.
}
if (region.closed) {
new google.maps.Polygon({clickable: false,
geodesic: false,
map: map,
strokeColor: region.color,
strokeOpacity: region.opacity,
strokeWeight: 2,
fillColor: region.color,
fillOpacity: region.opacity * 0.25,
zIndex: i,
paths: converted
if (region.closed) {
var shape = new google.maps.Polygon({
name: name,
clickable: clickable,
geodesic: false,
map: null,
strokeColor: region.color,
strokeOpacity: region.opacity,
strokeWeight: 2,
fillColor: region.color,
fillOpacity: region.opacity * 0.25,
zIndex: i,
paths: converted
});
} else {
new google.maps.Polyline({clickable: false,
geodesic: false,
map: map,
strokeColor: region.color,
strokeOpacity: region.opacity,
strokeWeight: 2,
zIndex: i,
path: converted
} else {
var shape = new google.maps.Polyline({
name: name,
clickable: clickable,
geodesic: false,
map: null,
strokeColor: region.color,
strokeOpacity: region.opacity,
strokeWeight: 2,
zIndex: i,
path: converted
});
}
regionCollection[label].push(shape);
if (clickable) {
// add the region infowindow popup
infowindow = new google.maps.InfoWindow();
google.maps.event.addListener(shape, 'click', function(e,i) {
var contentString = "<b>Region: "+this.name+"</b><br />";
contentString += "Clicked Location: <br />" + e.latLng.lat() + "," + e.latLng.lng() + "<br />";
// Replace our Info Window's content and position
infowindow.setContent(contentString);
infowindow.setPosition(e.latLng);
infowindow.open(map);
});
}
}
}
}
// will initalize all the markers data as found in markers.js
// may need to be reviewed by agrif or someone else... little finicky right now.
function initMarkers() {
if (markersInit) { return; }
markersInit = true;
if (markersInit) { return; } // oh, we've already done this? nevermind, exit the function.
markersInit = true; // now that we've started, dont have to do it twice.
// first, give all collections an empty array to work with
for (i in signGroups) {
markerCollection[signGroups[i].label] = [];
}
for (i in markerData) {
var item = markerData[i];
@@ -180,8 +317,7 @@ function initMarkers() {
map: map,
title: jQuery.trim(item.msg),
icon: iconURL
});
});
continue;
}
@@ -208,11 +344,11 @@ function initMarkers() {
if (testfunc(item)) {
matched = true;
if (item.type == 'sign') { iconURL = 'signpost_icon.png';}
// can add custom types of images for externally definned item types, like 'command' here.
if (item.type == 'sign') { iconURL = 'signpost_icon.png'; }
//console.log(signGroup.icon);
if (signGroup.icon) { iconURL = signGroup.icon;
}
//console.log(signGroup.icon); //debug
if (signGroup.icon) { iconURL = signGroup.icon; }
var converted = fromWorldToLatLng(item.x, item.y, item.z);
var marker = new google.maps.Marker({position: converted,
@@ -220,19 +356,16 @@ function initMarkers() {
title: jQuery.trim(item.msg),
icon: iconURL,
visible: false
});
});
markerCollection[label].push(marker);
if (item.type == 'sign') {
prepareSignMarker(marker, item);
}
}
}
if (!matched) {
// is this signpost doesn't match any of the groups in config.js, add it automatically to the "__others__" group
if (item.type == 'sign') { iconURL = 'signpost_icon.png';}
@@ -254,12 +387,13 @@ function initMarkers() {
prepareSignMarker(marker, item);
}
}
}
}
// update the link in the viewstate.
function makeLink() {
var displayZoom = map.getZoom();
if (displayZoom == config.maxZoom) {
@@ -277,6 +411,7 @@ function makeLink() {
document.getElementById("link").innerHTML = a;
}
// load the map up and add all the functions relevant stuff to the map.
function initialize() {
var query = location.search.substring(1);
@@ -365,7 +500,7 @@ function initialize() {
for (idx in MCMapType) {
map.mapTypes.set('mcmap' + MCMapType[idx].name, MCMapType[idx]);
}
// We can now set the map to use the 'coordinate' map type
map.setMapTypeId(mapTypeIdDefault);
@@ -387,69 +522,69 @@ function initialize() {
}
// our custom projection maps Latitude to Y, and Longitude to X as normal,
// but it maps the range [0.0, 1.0] to [0, tileSize] in both directions
// so it is easier to position markers, etc. based on their position
// (find their position in the lowest-zoom image, and divide by tileSize)
function MCMapProjection() {
// our custom projection maps Latitude to Y, and Longitude to X as normal,
// but it maps the range [0.0, 1.0] to [0, tileSize] in both directions
// so it is easier to position markers, etc. based on their position
// (find their position in the lowest-zoom image, and divide by tileSize)
function MCMapProjection() {
this.inverseTileSize = 1.0 / config.tileSize;
}
}
MCMapProjection.prototype.fromLatLngToPoint = function(latLng) {
MCMapProjection.prototype.fromLatLngToPoint = function(latLng) {
var x = latLng.lng() * config.tileSize;
var y = latLng.lat() * config.tileSize;
return new google.maps.Point(x, y);
};
};
MCMapProjection.prototype.fromPointToLatLng = function(point) {
MCMapProjection.prototype.fromPointToLatLng = function(point) {
var lng = point.x * this.inverseTileSize;
var lat = point.y * this.inverseTileSize;
return new google.maps.LatLng(lat, lng);
};
};
// helper to get map LatLng from world coordinates
// takes arguments in X, Y, Z order
// (arguments are *out of order*, because within the function we use
// the axes like the rest of Minecraft Overviewer -- with the Z and Y
// flipped from normal minecraft usage.)
function fromWorldToLatLng(x, z, y)
{
// helper to get map LatLng from world coordinates
// takes arguments in X, Y, Z order
// (arguments are *out of order*, because within the function we use
// the axes like the rest of Minecraft Overviewer -- with the Z and Y
// flipped from normal minecraft usage.)
function fromWorldToLatLng(x, z, y)
{
// the width and height of all the highest-zoom tiles combined, inverted
var perPixel = 1.0 / (config.tileSize * Math.pow(2, config.maxZoom));
// This information about where the center column is may change with a different
// drawing implementation -- check it again after any drawing overhauls!
// point (0, 0, 127) is at (0.5, 0.0) of tile (tiles/2 - 1, tiles/2)
// so the Y coordinate is at 0.5, and the X is at 0.5 - ((tileSize / 2) / (tileSize * 2^maxZoom))
// or equivalently, 0.5 - (1 / 2^(maxZoom + 1))
var lng = 0.5 - (1.0 / Math.pow(2, config.maxZoom + 1));
var lat = 0.5;
// the following metrics mimic those in ChunkRenderer.chunk_render in "chunk.py"
// or, equivalently, chunk_render in src/iterate.c
// each block on X axis adds 12px to x and subtracts 6px from y
lng += 12 * x * perPixel;
lat -= 6 * x * perPixel;
// each block on Y axis adds 12px to x and adds 6px to y
lng += 12 * y * perPixel;
lat += 6 * y * perPixel;
// each block down along Z adds 12px to y
lat += 12 * (128 - z) * perPixel;
// add on 12 px to the X coordinate to center our point
lng += 12 * perPixel;
return new google.maps.LatLng(lat, lng);
}
// NOTE: X, Y and Z in this function are Minecraft world definitions
// (that is, X is horizontal, Y is altitude and Z is vertical).
function fromLatLngToWorld(lat, lng)
{
return new google.maps.LatLng(lat, lng);
}
// NOTE: X, Y and Z in this function are Minecraft world definitions
// (that is, X is horizontal, Y is altitude and Z is vertical).
function fromLatLngToWorld(lat, lng)
{
// Initialize world x/y/z object to be returned
var xyz = Array();
xyz.x = 0;
@@ -477,67 +612,74 @@ function initialize() {
// only latitude and longitude, so assume Y=64.
xyz.x += 64 + 1;
xyz.z -= 64 + 2;
return xyz;
}
function getTileUrlGenerator(path, path_base) {
return function(tile, zoom) {
var url = path;
var url_base = ( path_base ? path_base : '' );
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);
}
function getTileUrlGenerator(path, path_base, path_ext) {
return function(tile, zoom) {
var url = path;
var url_base = ( path_base ? path_base : '' );
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_base + url);
}
url = url + '.' + path_ext;
if(config.cacheMinutes > 0) {
var d = new Date();
url += '?c=' + Math.floor(d.getTime() / (1000 * 60 * config.cacheMinutes));
}
return(url_base + url);
}
}
var MCMapOptions = new Array;
var MCMapType = new Array;
var mapTypeIdDefault = null;
var mapTypeIds = [];
var overlayMapTypes = [];
for (idx in mapTypeData) {
var view = mapTypeData[idx];
var view = mapTypeData[idx];
var imgformat = view.imgformat ? view.imgformat : 'png';
MCMapOptions[view.label] = {
getTileUrl: getTileUrlGenerator(view.path, view.base),
tileSize: new google.maps.Size(config.tileSize, config.tileSize),
maxZoom: config.maxZoom,
minZoom: 0,
isPng: !(config.fileExt.match(/^png$/i) == null)
};
MCMapOptions[view.label] = {
getTileUrl: getTileUrlGenerator(view.path, view.base, imgformat),
tileSize: new google.maps.Size(config.tileSize, config.tileSize),
maxZoom: config.maxZoom,
minZoom: 0,
isPng: !(imgformat.match(/^png$/i) == null)
};
MCMapType[view.label] = new google.maps.ImageMapType(MCMapOptions[view.label]);
MCMapType[view.label].name = view.label;
MCMapType[view.label].alt = "Minecraft " + view.label + " Map";
MCMapType[view.label].projection = new MCMapProjection();
if (mapTypeIdDefault == null) {
mapTypeIdDefault = 'mcmap' + view.label;
MCMapType[view.label] = new google.maps.ImageMapType(MCMapOptions[view.label]);
MCMapType[view.label].name = view.label;
MCMapType[view.label].alt = "Minecraft " + view.label + " Map";
MCMapType[view.label].projection = new MCMapProjection();
if (view.overlay) {
overlayMapTypes.push(MCMapType[view.label]);
} else {
if (mapTypeIdDefault == null) {
mapTypeIdDefault = 'mcmap' + view.label;
}
mapTypeIds.push('mcmap' + view.label);
}
mapTypeIds.push('mcmap' + view.label);
}
function CoordMapType() {
}
function CoordMapType() {
}
function CoordMapType(tileSize) {
function CoordMapType(tileSize) {
this.tileSize = tileSize;
}
}
CoordMapType.prototype.getTile = function(coord, zoom, ownerDocument) {
CoordMapType.prototype.getTile = function(coord, zoom, ownerDocument) {
var div = ownerDocument.createElement('DIV');
div.innerHTML = "(" + coord.x + ", " + coord.y + ", " + zoom + ")";
div.innerHTML += "<br />";
@@ -549,4 +691,4 @@ for (idx in mapTypeData) {
div.style.borderWidth = '1px';
div.style.borderColor = '#AAAAAA';
return div;
};
};