Upstream/dynmap
1
0
Fork 0
mirror of https://github.com/webbukkit/dynmap.git synced 2024-12-25 18:17:37 +01:00
Code Issues Projects Releases Wiki Activity

Abstracted from cave+normal to kzedmaps. Can now have any configurable type of map.

Browse Source
This commit is contained in:
FrozenCow 2011-01-10 23:58:39 +01:00
parent 4b5e6e6f80
commit 8263918b8d
5 changed files with 213 additions and 144 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
web/config.js
View File

@ -1,10 +1,17 @@
var setup = {
var config = {
tileUrl: 'tiles/',
updateUrl: 'up/', // For Apache and lighttpd
// updateUrl: 'up/default.aspx?lasttimestamp=', // For IIS
updateRate: 2000, // Seconds the map should poll for updates. (Seconds) * 1000. The default is 2000 (every 2 seconds).
showPortraitsOnMap: true,
showPortraitsInPlayerList: true,
showPlayerNameOnMap: false
showPlayerNameOnMap: false,
defaultMap: 'defaultmap',
maps: {
'defaultmap': new DefaultMapType(),
'cavemap': new CaveMapType()
},
tileWidth: 128,
tileHeight: 128
};

5
web/index.html
View File

@ -12,17 +12,18 @@
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<link rel="stylesheet" type="text/css" href="style.css" media="screen" />
<script type="text/javascript" src="jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="config.js"></script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript" src="custommarker.js"></script>
<script type="text/javascript" src="minecraft.js"></script>
<script type="text/javascript" src="map.js"></script>
<script type="text/javascript" src="kzedmaps.js"></script>
<script type="text/javascript" src="config.js"></script>
</head>
<body>
<div id="mcmap"></div>
<div id="plist">
<img id="plistbtn" alt="on" src="list_on.png" onclick="plistopen()" title="Toggle Player List" />
<img id="cavebtn" src="cave_off.png" title="Toggle X-Ray" onclick="caveSwitch()">
<div id="maplist"></div>
<div id="lst">
<div id="playerlst"></div>
<div id="clock"></div>

128
web/kzedmaps.js Normal file
View File

@ -0,0 +1,128 @@
function KzedProjection() {}
KzedProjection.prototype = {
fromLatLngToPoint: function(latLng) {
var x = (latLng.lng() * config.tileWidth)|0;
var y = (latLng.lat() * config.tileHeight)|0;
return new google.maps.Point(x, y);
},
fromPointToLatLng: function(point) {
var lng = point.x / config.tileWidth;
var lat = point.y / config.tileHeight;
return new google.maps.LatLng(lat, lng);
},
fromWorldToLatLng: function(x, y, z)
{
var dx = +x;
var dy = +y - 127;
var dz = +z;
var px = dx + dz;
var py = dx - dz - dy;
var lng = -px / config.tileWidth / 2 + 0.5;
var lat = py / config.tileHeight / 2;
return new google.maps.LatLng(lat, lng);
}
};
function KzedMapType() {}
KzedMapType.prototype = {
projection: new KzedProjection(),
tileSize: new google.maps.Size(128, 128),
minZoom: 0,
maxZoom: 3,
prefix: null,
getTile: function(coord, zoom, doc) {
var tileDebugText = null;
var tileSize = 128;
var tileName;
var imgSize;
var offset = {x: 0, y: 0};
var debugred;
var debugblue;
if (zoom == 0) {
// Most zoomed out tiles.
tileSize = 128;
imgSize = tileSize;
tileName = 'z' + this.prefix + '_' + (-coord.x * tileSize*2) + '_' + (coord.y * tileSize*2);
} else {
// Other zoom levels.
tileSize = 128;
// Helper functions.
var floor = Math.floor;
var div = function(x,y){return floor(x/y);}
var mod = function(x,y){return ((x%y)+y)%y;};
// Split the image up in ... segments (1*1 for zoom 1, 2*2 for zoom 2, 4*4 for zoom 3, etc).
var segments = Math.pow(2,zoom-1);
imgSize = segments*tileSize;
// Calculate the location relative to the world of this segment.
var mapcoord = {x: div(coord.x,segments)*tileSize, y: div(coord.y,segments)*tileSize};
// Calculate the location relative to the image of this segment.
offset = {x: mod(coord.x,segments)*-tileSize, y: mod(coord.y,segments)*-tileSize};
// The next couple of lines are somewhat of a hack, but makes it faster to render zoomed in tiles:
/*tileSize = imgSize;
if (offset.x == 0 && offset.y == 0) {
tileName = this.prefix + '_' + (-mapcoord.x) + '_' + mapcoord.y;
}
offset = {x: 0, y: 0};*/
// The next line is not:
tileName = this.prefix + '_' + (-mapcoord.x) + '_' + mapcoord.y;
}
var img;
var tile = $('<div/>')
.addClass('tile')
.css({
overflow: 'hidden',
width: tileSize + 'px',
height: tileSize + 'px'
});
if (tileDebugText) {
$('<span/>')
.text(tileDebugText)
.css({
position: 'absolute',
color: 'red'
})
.appendTo(tile);
}
if (tileName) {
img = $('<img/>')
.attr('src', tileUrl(tileName))
.error(function() { img.hide(); })
.css({
width: imgSize + 'px',
height: imgSize + 'px',
borderStyle: 'none',
marginLeft: offset.x + 'px',
marginTop: offset.y + 'px'
})
.appendTo(tile);
tileDict[tileName] = img;
} else {
delete tileDict[tileName];
}
return tile.get(0);
},
};
DefaultMapType.prototype = new KzedMapType();
DefaultMapType.prototype.constructor = DefaultMapType;
function DefaultMapType(){}
DefaultMapType.prototype.prefix = 't';
CaveMapType.prototype = new KzedMapType();
CaveMapType.prototype.constructor = CaveMapType;
function CaveMapType(){}
CaveMapType.prototype.prefix = 'ct';

178
web/map.js
View File

@ -1,3 +1,5 @@
if (!console) console = { log: function() {} };
/* generic function for making an XMLHttpRequest
* url: request URL
* func: callback function for success
@ -52,48 +54,6 @@ function makeRequest(url, func, type, fail, post, contenttype)
}
}
var config = {
tileUrl: setup.tileUrl,
updateUrl: setup.updateUrl,
tileWidth: 128,
tileHeight: 128,
updateRate: setup.updateRate
};
function MCMapProjection() {
}
MCMapProjection.prototype.fromLatLngToPoint = function(latLng) {
var x = (latLng.lng() * config.tileWidth)|0;
var y = (latLng.lat() * config.tileHeight)|0;
return new google.maps.Point(x, y);
};
MCMapProjection.prototype.fromPointToLatLng = function(point) {
var lng = point.x / config.tileWidth;
var lat = point.y / config.tileHeight;
return new google.maps.LatLng(lat, lng);
};
function fromWorldToLatLng(x, y, z)
{
var dx = +x;
var dy = +y - 127;
var dz = +z;
var px = dx + dz;
var py = dx - dz - dy;
var lng = -px / config.tileWidth / 2 + 0.5;
var lat = py / config.tileHeight / 2;
return new google.maps.LatLng(lat, lng);
}
function mcMapType() {
}
var tileDict = new Array();
var lastSeen = new Array();
@ -108,86 +68,20 @@ function makeRequest(url, func, type, fail, post, contenttype)
}
}
function imgSubst(tile) {
if(!(tile in tileDict))
function onTileUpdated(tileName, f) {
}
function imgSubst(tileName) {
if(!(tileName in tileDict))
return;
var src = tileUrl(tile);
var t = tileDict[tile];
t.src = src;
t.style.display = '';
t.onerror = function() {
setTimeout(function() {
t.src = tileUrl(tile, 1);
}, 1000);
t.onerror = '';
}
var src = tileUrl(tileName);
var t = tileDict[tileName];
t.attr('src', src);
t.show();
}
var caveMode = false;
function caveSwitch()
{
caveMode = !caveMode;
if(caveMode) {
cavebtn.src = 'cave_on.png';
map.setMapTypeId('cavemap');
} else {
cavebtn.src = 'cave_off.png';
map.setMapTypeId('mcmap');
}
}
function getImageSize(zoom) {
return zoom > 0 ? config.tileWidth : config.tileWidth*2;
}
function getTileSize(zoom, imageSize) {
imageSize = imageSize || getImageSize(zoom);
return Math.pow(2, 6+zoom) * (imageSize / config.tileWidth);
}
function getTileInfo(coord, zoom) {
var imageSize = getImageSize(zoom);
var tileSize = getTileSize(zoom, imageSize);
var imageName = '';
if (caveMode) imageName += 'c';
if (zoom == 0) imageName += 'z';
imageName += 't_' + (-coord.x * imageSize) + '_' + (coord.y * imageSize);
return {
name: imageName,
size: tileSize,
};
}
mcMapType.prototype.tileSize = new google.maps.Size(config.tileWidth, config.tileHeight);
mcMapType.prototype.minZoom = 0;
mcMapType.prototype.maxZoom = 3;
mcMapType.prototype.getTile = function(coord, zoom, doc) {
var img = doc.createElement('IMG');
img.onerror = function() { img.style.display = 'none'; }
var tileInfo = getTileInfo(coord, zoom);
img.style.width = tileInfo.size + 'px';
img.style.height = tileInfo.size + 'px';
img.style.borderStyle = 'none';
//img.style.border = '1px solid red';
//img.style.margin = '-1px -1px -1px -1px';
tileDict[tileInfo.name] = img;
var url = tileUrl(tileInfo.name);
img.src = url;
//img.style.background = 'url(' + url + ')';
//img.innerHTML = '<small>' + tilename + '</small>';
return img;
}
var markers = new Array();
var lasttimestamp = '0';
@ -195,7 +89,6 @@ function makeRequest(url, func, type, fail, post, contenttype)
var lst;
var plistbtn;
var cavebtn;
var lstopen = true;
var oldplayerlst = '[Connecting]';
var servertime = 0;
@ -312,7 +205,7 @@ function makeRequest(url, func, type, fail, post, contenttype)
id: p[0] + '_' + p[1],
text: p[1],
type: p[0],
position: fromWorldToLatLng(p[2], p[3], p[4]),
position: map.getProjection().fromWorldToLatLng(p[2], p[3], p[4]),
visible: ((p[0] in typeVisibleMap) ? typeVisibleMap[p[0]] : true)
};
@ -369,7 +262,6 @@ function makeRequest(url, func, type, fail, post, contenttype)
window.onload = function initialize() {
lst = document.getElementById('lst');
plistbtn = document.getElementById('plistbtn');
cavebtn = document.getElementById('cavebtn');
var mapOptions = {
zoom: 1,
@ -381,20 +273,9 @@ function makeRequest(url, func, type, fail, post, contenttype)
scaleControl: false,
mapTypeControl: false,
streetViewControl: false,
mapTypeId: 'mcmap',
backgroundColor: '#000'
};
map = new google.maps.Map(document.getElementById("mcmap"), mapOptions);
mapType = new mcMapType();
mapType.projection = new MCMapProjection();
caveMapType = new mcMapType();
caveMapType.projection = new MCMapProjection();
map.zoom_changed = function() {
var tileSize = getTileSize(map.zoom);
mapType.tileSize = new google.maps.Size(tileSize, tileSize);
caveMapType.tileSize = mapType.tileSize;
};
google.maps.event.addListener(map, 'dragstart', function(mEvent) {
plfollow('');
@ -407,11 +288,36 @@ function makeRequest(url, func, type, fail, post, contenttype)
});
map.dragstart = plfollow('');
map.mapTypes.set('mcmap', mapType);
map.mapTypes.set('cavemap', caveMapType);
$.each(config.maps, function(name, mapType){
map.mapTypes.set(name, mapType);
map.setMapTypeId('mcmap');
mapUpdate();
var mapButton;
$('#maplist').append($('<div/>')
.addClass('maprow')
.append(mapButton = $('<input/>')
.addClass('maptype_' + name)
.attr({
type: 'radio',
name: 'map',
id: 'maptypebutton_' + name
})
.attr('checked', config.defaultMap == name ? 'checked' : null)
)
.append($('<label/>')
.attr('for', 'maptypebutton_' + name)
.text(name)
)
.click(function() {
$('.mapbutton').removeAttr('checked');
map.setMapTypeId(name);
mapButton.attr('checked', 'checked');
})
);
});
map.setMapTypeId(config.defaultMap);
setTimeout(mapUpdate, config.updateRate);
}
function plistopen() {

31
web/style.css
View File

@ -10,7 +10,12 @@ body { height: 100%; margin: 0px; padding: 0px ; background-color: #000; }
opacity: 0.6;
padding: 2px;
}
#lst {
input {
margin: 0px;
}
#lst, label {
clear:both;
font-family: sans-serif;
font-size: 8pt;
@ -51,7 +56,7 @@ body { height: 100%; margin: 0px; padding: 0px ; background-color: #000; }
height:14px;
width:14px;
}
a, a:visited {
a, a:visited, label {
color: white;
text-decoration: none;
}
@ -149,3 +154,25 @@ a, a:visited {
.followButton.enabled {
background-image: url(follow_on.png);
}
.maprow {
overflow: hidden;
width: 120px;
padding: 1px;
}
.maprow:hover {
border: 1px solid #222222;
background-color: #333333;
padding: 0px;
}
.maprow, .maprow * {
cursor: pointer;
}
.maprow label {
display: inline-box;
height: 15px;
margin-left: 5px;
}