Made dynmap's javascript self-contained, which allows for multiple maps on a single page.
This commit is contained in:
FrozenCow
parent
77b0bc1664
commit
dfe33efdc3
5 changed files with 333 additions and 306 deletions
533
web/map.js
533
web/map.js
|
|
@ -1,9 +1,26 @@
|
|||
if (!console) console = { log: function() {} };
|
||||
|
||||
function splitArgs(s) {
|
||||
var r = s.split(' ');
|
||||
delete arguments[0];
|
||||
var obj = {};
|
||||
var index = 0;
|
||||
for(var argumentIndex in arguments) {
|
||||
var argument = arguments[argumentIndex];
|
||||
var value = r[argumentIndex-1];
|
||||
obj[argument] = value;
|
||||
}
|
||||
return obj;
|
||||
}
|
||||
|
||||
function swtch(value, options, defaultOption) {
|
||||
return (options[value] || defaultOption)(value);
|
||||
}
|
||||
|
||||
function DynMapType() { }
|
||||
DynMapType.prototype = {
|
||||
onTileUpdated: function(tile, tileName) {
|
||||
var src = getTileUrl(tileName);
|
||||
var src = this.dynmap.getTileUrl(tileName);
|
||||
tile.attr('src', src);
|
||||
tile.show();
|
||||
}
|
||||
|
|
@ -50,217 +67,66 @@ MinecraftClock.prototype = {
|
|||
}
|
||||
};
|
||||
|
||||
var registeredTiles = new Array();
|
||||
var clock = null;
|
||||
var markers = new Array();
|
||||
var lasttimestamp = '0';
|
||||
var followingPlayer = '';
|
||||
|
||||
function getTileUrl(tileName, always) {
|
||||
var tile = registeredTiles[tileName];
|
||||
|
||||
if(tile) {
|
||||
return config.tileUrl + tileName + '.png?' + tile.lastseen;
|
||||
} else {
|
||||
return config.tileUrl + tileName + '.png?0';
|
||||
}
|
||||
function DynMap(options) {
|
||||
this.options = options;
|
||||
this.initialize();
|
||||
}
|
||||
|
||||
function registerTile(mapType, tileName, tile) {
|
||||
registeredTiles[tileName] = {
|
||||
tileElement: tile,
|
||||
mapType: mapType,
|
||||
lastseen: '0'
|
||||
};
|
||||
}
|
||||
|
||||
function unregisterTile(mapType, tileName) {
|
||||
delete registeredTiles[tileName];
|
||||
}
|
||||
|
||||
function onTileUpdated(tileName) {
|
||||
var tile = registeredTiles[tileName];
|
||||
|
||||
if (tile) {
|
||||
tile.lastseen = lasttimestamp;
|
||||
tile.mapType.onTileUpdated(tile.tileElement, tileName);
|
||||
}
|
||||
}
|
||||
|
||||
function updateMarker(mi) {
|
||||
if(mi.id in markers) {
|
||||
var m = markers[mi.id];
|
||||
m.toggle(mi.visible);
|
||||
m.setPosition(mi.position);
|
||||
} else {
|
||||
var contentfun = function(div,mi) {
|
||||
$(div)
|
||||
.addClass('Marker')
|
||||
.addClass(mi.type + 'Marker')
|
||||
.append($('<img/>').attr({src: mi.type + '.png'}))
|
||||
.append($('<span/>').text(mi.text));
|
||||
};
|
||||
if (mi.type == 'player') {
|
||||
contentfun = function(div, mi) {
|
||||
$(div)
|
||||
.addClass('Marker')
|
||||
.addClass('playerMarker')
|
||||
.append($('<span/>')
|
||||
.addClass('playerName')
|
||||
.text(mi.text));
|
||||
|
||||
getMinecraftHead(mi.text, 32, function(head) {
|
||||
$(head)
|
||||
.addClass('playerIcon')
|
||||
.prependTo(div);
|
||||
});
|
||||
};
|
||||
}
|
||||
var marker = new CustomMarker(mi.position, map, contentfun, mi);
|
||||
marker.markerType = mi.type;
|
||||
DynMap.prototype = {
|
||||
registeredTiles: new Array(),
|
||||
clock: null,
|
||||
markers: new Array(),
|
||||
lasttimestamp: '0',
|
||||
followingPlayer: '',
|
||||
initialize: function() {
|
||||
var me = this;
|
||||
|
||||
markers[mi.id] = marker;
|
||||
|
||||
if (mi.type == 'player') {
|
||||
marker.playerRow = $('<div/>')
|
||||
.attr({ id: 'playerrow_' + mi.text })
|
||||
.addClass('playerrow')
|
||||
.append(marker.followButton = $('<input/>')
|
||||
.attr({ type: 'checkbox',
|
||||
name: 'followPlayer',
|
||||
checked: false,
|
||||
value: mi.text
|
||||
})
|
||||
.addClass('followButton')
|
||||
.click(function(e) {
|
||||
followPlayer(mi.id != followingPlayer ? mi.id : '');
|
||||
}))
|
||||
.append(marker.playerIconContainer = $('<span/>'))
|
||||
.append($('<a/>')
|
||||
.text(mi.text)
|
||||
.attr({ href: '#' })
|
||||
.click(function(e) { map.panTo(markers[mi.id].getPosition()); })
|
||||
);
|
||||
|
||||
getMinecraftHead(mi.text, 16, function(head) {
|
||||
marker.playerRow.icon = $(head)
|
||||
.addClass('playerIcon')
|
||||
.appendTo(marker.playerIconContainer);
|
||||
});
|
||||
|
||||
$('#playerlst').append(marker.playerRow);
|
||||
}
|
||||
}
|
||||
|
||||
if(mi.id == followingPlayer) {
|
||||
map.panTo(markers[mi.id].getPosition());
|
||||
}
|
||||
}
|
||||
|
||||
function mapUpdate()
|
||||
{
|
||||
$.ajax({
|
||||
url: config.updateUrl + lasttimestamp,
|
||||
success: function(res) {
|
||||
$('#alert')
|
||||
.hide();
|
||||
var typeVisibleMap = {
|
||||
'warp': document.getElementById('showWarps').checked,
|
||||
'sign': document.getElementById('showSigns').checked,
|
||||
'home': document.getElementById('showHomes').checked,
|
||||
'spawn': document.getElementById('showSpawn').checked
|
||||
};
|
||||
|
||||
var typeCount = {};
|
||||
|
||||
var rows = res.split('\n');
|
||||
var loggedin = new Array();
|
||||
var firstRow = rows[0].split(' ');
|
||||
lasttimestamp = firstRow[0];
|
||||
delete rows[0];
|
||||
|
||||
var servertime = firstRow[1];
|
||||
clock.setTime(getMinecraftTime(servertime));
|
||||
|
||||
for(var line in rows) {
|
||||
var p = rows[line].split(' ');
|
||||
|
||||
if (p[0] == '') continue;
|
||||
|
||||
({ tile: function() {
|
||||
onTileUpdated(p[1]);
|
||||
}
|
||||
}[p[0]] || function() {
|
||||
var mi = {
|
||||
id: p[0] + '_' + p[1],
|
||||
text: p[1],
|
||||
type: p[0],
|
||||
position: map.getProjection().fromWorldToLatLng(p[2], p[3], p[4]),
|
||||
visible: ((p[0] in typeVisibleMap) ? typeVisibleMap[p[0]] : true)
|
||||
};
|
||||
|
||||
updateMarker(mi);
|
||||
loggedin[mi.id] = 1;
|
||||
if (!mi.type in typeCount) typeCount[mi.type] = 0;
|
||||
typeCount[mi.type]++;
|
||||
})();
|
||||
}
|
||||
|
||||
for(var m in markers) {
|
||||
if(!(m in loggedin)) {
|
||||
markers[m].remove(null);
|
||||
if (markers[m].playerRow) {
|
||||
markers[m].playerRow.remove();
|
||||
}
|
||||
delete markers[m];
|
||||
}
|
||||
}
|
||||
setTimeout(mapUpdate, config.updateRate);
|
||||
document.getElementById('warpsDiv').style.display = (typeCount['warps'] == 0)?'none':'';
|
||||
document.getElementById('signsDiv').style.display = (typeCount['signs'] == 0)?'none':'';
|
||||
document.getElementById('homesDiv').style.display = (typeCount['homes'] == 0)?'none':'';
|
||||
document.getElementById('spawnsDiv').style.display = (typeCount['spawns'] == 0)?'none':'';
|
||||
},
|
||||
error: function(request, statusText, ex) {
|
||||
$('#alert')
|
||||
.text('Could not update map')
|
||||
.show();
|
||||
setTimeout(mapUpdate, config.updateRate);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
window.onload = function initialize() {
|
||||
var mapOptions = {
|
||||
zoom: 1,
|
||||
center: new google.maps.LatLng(0, 1),
|
||||
navigationControl: true,
|
||||
navigationControlOptions: {
|
||||
style: google.maps.NavigationControlStyle.DEFAULT
|
||||
},
|
||||
scaleControl: false,
|
||||
mapTypeControl: false,
|
||||
streetViewControl: false,
|
||||
backgroundColor: '#000'
|
||||
};
|
||||
map = new google.maps.Map(document.getElementById("mcmap"), mapOptions);
|
||||
|
||||
google.maps.event.addListener(map, 'dragstart', function(mEvent) {
|
||||
followPlayer('');
|
||||
});
|
||||
google.maps.event.addListener(map, 'zoom_changed', function() {
|
||||
makeLink();
|
||||
});
|
||||
google.maps.event.addListener(map, 'center_changed', function() {
|
||||
makeLink();
|
||||
});
|
||||
map.dragstart = followPlayer('');
|
||||
|
||||
$.each(config.maps, function(name, mapType){
|
||||
map.mapTypes.set(name, mapType);
|
||||
var container = $(me.options.container);
|
||||
|
||||
var mapButton;
|
||||
$('#maplist').append($('<div/>')
|
||||
var mapContainer;
|
||||
(mapContainer = $('<div/>'))
|
||||
.addClass('map')
|
||||
.appendTo(container);
|
||||
|
||||
var map = this.map = new google.maps.Map(mapContainer.get(0), {
|
||||
zoom: 1,
|
||||
center: new google.maps.LatLng(0, 1),
|
||||
navigationControl: true,
|
||||
navigationControlOptions: {
|
||||
style: google.maps.NavigationControlStyle.DEFAULT
|
||||
},
|
||||
scaleControl: false,
|
||||
mapTypeControl: false,
|
||||
streetViewControl: false,
|
||||
backgroundColor: '#000'
|
||||
});
|
||||
|
||||
google.maps.event.addListener(map, 'dragstart', function(mEvent) {
|
||||
me.followPlayer('');
|
||||
});
|
||||
// TODO: Enable hash-links.
|
||||
/*google.maps.event.addListener(map, 'zoom_changed', function() {
|
||||
me.updateLink();
|
||||
});
|
||||
google.maps.event.addListener(map, 'center_changed', function() {
|
||||
me.updateLink();
|
||||
});*/
|
||||
|
||||
// The sidebar
|
||||
var sidebar = me.sidebar = $('<div/>')
|
||||
.addClass('sidebar')
|
||||
.appendTo(container);
|
||||
|
||||
// The map list.
|
||||
var maplist = me.maplist = $('<div/>')
|
||||
.addClass('maplist')
|
||||
.appendTo(sidebar);
|
||||
|
||||
$.each(me.options.maps, function(name, mapType){
|
||||
mapType.dynmap = me;
|
||||
map.mapTypes.set(name, mapType);
|
||||
|
||||
var mapButton;
|
||||
$('<div/>')
|
||||
.addClass('maprow')
|
||||
.append(mapButton = $('<input/>')
|
||||
.addClass('maptype_' + name)
|
||||
|
|
@ -269,42 +135,237 @@ window.onload = function initialize() {
|
|||
name: 'map',
|
||||
id: 'maptypebutton_' + name
|
||||
})
|
||||
.attr('checked', config.defaultMap == name ? 'checked' : null)
|
||||
.attr('checked', me.options.defaultMap == name ? 'checked' : null)
|
||||
)
|
||||
.append($('<label/>')
|
||||
.attr('for', 'maptypebutton_' + name)
|
||||
.text(name)
|
||||
)
|
||||
.click(function() {
|
||||
$('.mapbutton').removeAttr('checked');
|
||||
$('.mapbutton', maplist).removeAttr('checked');
|
||||
map.setMapTypeId(name);
|
||||
mapButton.attr('checked', 'checked');
|
||||
})
|
||||
);
|
||||
});
|
||||
.data('maptype', mapType)
|
||||
.appendTo(maplist);
|
||||
});
|
||||
map.setMapTypeId(me.options.defaultMap);
|
||||
|
||||
// The Player List
|
||||
var playerlist = me.playerlist = $('<div/>')
|
||||
.addClass('playerlist')
|
||||
.appendTo(sidebar);
|
||||
|
||||
// The Clock
|
||||
var clock = me.clock = new MinecraftClock(
|
||||
$('<div/>')
|
||||
.addClass('clock')
|
||||
.appendTo(sidebar)
|
||||
);
|
||||
|
||||
// TODO: Enable hash-links.
|
||||
/*
|
||||
var link;
|
||||
var linkbox = me.linkbox = $('<div/>')
|
||||
.addClass('linkbox')
|
||||
.append(link=$('<input type="text" />'))
|
||||
.data('link', link)
|
||||
.appendTo(container);*/
|
||||
|
||||
var alertbox = me.alertbox = $('<div/>')
|
||||
.addClass('alertbox')
|
||||
.appendTo(container);
|
||||
|
||||
setTimeout(function() { me.update(); }, me.options.updateRate);
|
||||
},
|
||||
update: function() {
|
||||
var me = this;
|
||||
$.ajax({
|
||||
url: me.options.updateUrl + me.lasttimestamp,
|
||||
success: function(res) {
|
||||
if (!res) {
|
||||
me.alertbox
|
||||
.text('Invalid response')
|
||||
.show();
|
||||
}
|
||||
|
||||
me.alertbox.hide();
|
||||
var rows = res.split('\n');
|
||||
var row = splitArgs(rows[0], 'timestamp', 'servertime');
|
||||
delete rows[0];
|
||||
|
||||
me.lasttimestamp = row.timestamp;
|
||||
me.clock.setTime(getMinecraftTime(row.servertime));
|
||||
|
||||
map.setMapTypeId(config.defaultMap);
|
||||
|
||||
clock = new MinecraftClock($('#clock'));
|
||||
|
||||
setTimeout(mapUpdate, config.updateRate);
|
||||
}
|
||||
var typeVisibleMap = {};
|
||||
var newmarkers = {};
|
||||
|
||||
for(var rowIndex in rows) {
|
||||
var line = rows[rowIndex];
|
||||
row = splitArgs(line, 'type', 'name', 'posx', 'posy', 'posz');
|
||||
|
||||
function followPlayer(name) {
|
||||
$('.followButton').removeAttr('checked');
|
||||
|
||||
if(name in markers) {
|
||||
var m = markers[name];
|
||||
$(m.followButton).attr('checked', 'checked');
|
||||
map.panTo(m.getPosition());
|
||||
}
|
||||
followingPlayer = name;
|
||||
}
|
||||
if (!row.type) continue;
|
||||
|
||||
swtch(row.type, {
|
||||
tile: function() {
|
||||
me.onTileUpdated(row.name);
|
||||
}
|
||||
}, function() {
|
||||
var mi = {
|
||||
id: row.type + '_' + row.name,
|
||||
text: row.name,
|
||||
type: row.type,
|
||||
position: me.map.getProjection().fromWorldToLatLng(parseFloat(row.posx), parseFloat(row.posy), parseFloat(row.posz)),
|
||||
visible: true
|
||||
};
|
||||
|
||||
function makeLink() {
|
||||
var a=location.href.substring(0,location.href.lastIndexOf("/")+1)
|
||||
+ "?lat=" + map.getCenter().lat().toFixed(6)
|
||||
+ "&lng=" + map.getCenter().lng().toFixed(6)
|
||||
+ "&zoom=" + map.getZoom();
|
||||
document.getElementById("link").innerHTML = a;
|
||||
}
|
||||
me.updateMarker(mi);
|
||||
newmarkers[mi.id] = mi;
|
||||
});
|
||||
}
|
||||
|
||||
for(var m in me.markers) {
|
||||
var marker = me.markers[m];
|
||||
if(!(m in newmarkers)) {
|
||||
marker.remove(null);
|
||||
if (marker.playerRow) {
|
||||
marker.playerRow.remove();
|
||||
}
|
||||
delete me.markers[m];
|
||||
}
|
||||
}
|
||||
setTimeout(function() { me.update(); }, me.options.updateRate);
|
||||
},
|
||||
error: function(request, statusText, ex) {
|
||||
me.alertbox
|
||||
.text('Could not update map')
|
||||
.show();
|
||||
setTimeout(function() { me.update(); }, me.options.updateRate);
|
||||
}
|
||||
});
|
||||
},
|
||||
onTileUpdated: function(tileName) {
|
||||
var me = this;
|
||||
var tile = this.registeredTiles[tileName];
|
||||
|
||||
if (tile) {
|
||||
tile.lastseen = this.lasttimestamp;
|
||||
tile.mapType.onTileUpdated(tile.tileElement, tileName);
|
||||
}
|
||||
},
|
||||
updateMarker: function(mi) {
|
||||
var me = this;
|
||||
var markers = me.markers;
|
||||
var map = me.map;
|
||||
|
||||
if(mi.id in markers) {
|
||||
var m = markers[mi.id];
|
||||
m.toggle(mi.visible);
|
||||
m.setPosition(mi.position);
|
||||
} else {
|
||||
var contentfun = function(div,mi) {
|
||||
$(div)
|
||||
.addClass('Marker')
|
||||
.addClass(mi.type + 'Marker')
|
||||
.append($('<img/>').attr({src: mi.type + '.png'}))
|
||||
.append($('<span/>').text(mi.text));
|
||||
};
|
||||
if (mi.type == 'player') {
|
||||
contentfun = function(div, mi) {
|
||||
$(div)
|
||||
.addClass('Marker')
|
||||
.addClass('playerMarker')
|
||||
.append($('<span/>')
|
||||
.addClass('playerName')
|
||||
.text(mi.text));
|
||||
|
||||
getMinecraftHead(mi.text, 32, function(head) {
|
||||
$(head)
|
||||
.addClass('playerIcon')
|
||||
.prependTo(div);
|
||||
});
|
||||
};
|
||||
}
|
||||
var marker = new CustomMarker(mi.position, map, contentfun, mi);
|
||||
marker.markerType = mi.type;
|
||||
|
||||
markers[mi.id] = marker;
|
||||
|
||||
if (mi.type == 'player') {
|
||||
marker.playerRow = $('<div/>')
|
||||
.attr({ id: 'playerrow_' + mi.text })
|
||||
.addClass('playerrow')
|
||||
.append(marker.followButton = $('<input/>')
|
||||
.attr({ type: 'checkbox',
|
||||
name: 'followPlayer',
|
||||
checked: false,
|
||||
value: mi.text
|
||||
})
|
||||
.addClass('followButton')
|
||||
.click(function(e) {
|
||||
me.followPlayer(mi.id != me.followingPlayer ? mi.id : '');
|
||||
}))
|
||||
.append(marker.playerIconContainer = $('<span/>'))
|
||||
.append($('<a/>')
|
||||
.text(mi.text)
|
||||
.attr({ href: '#' })
|
||||
.click(function(e) { map.panTo(markers[mi.id].getPosition()); })
|
||||
);
|
||||
|
||||
getMinecraftHead(mi.text, 16, function(head) {
|
||||
marker.playerRow.icon = $(head)
|
||||
.addClass('playerIcon')
|
||||
.appendTo(marker.playerIconContainer);
|
||||
});
|
||||
|
||||
me.playerlist.append(marker.playerRow);
|
||||
}
|
||||
}
|
||||
|
||||
if(mi.id == me.followingPlayer) {
|
||||
map.panTo(markers[mi.id].getPosition());
|
||||
}
|
||||
},
|
||||
followPlayer: function(name) {
|
||||
var me = this;
|
||||
$('.followButton', me.playerlist).removeAttr('checked');
|
||||
|
||||
var m = me.markers[name];
|
||||
if(m) {
|
||||
$(m.followButton).attr('checked', 'checked');
|
||||
me.map.panTo(m.getPosition());
|
||||
}
|
||||
this.followingPlayer = name;
|
||||
},
|
||||
getTileUrl: function(tileName, always) {
|
||||
var me = this;
|
||||
var tile = me.registeredTiles[tileName];
|
||||
|
||||
if(tile) {
|
||||
return me.options.tileUrl + tileName + '.png?' + tile.lastseen;
|
||||
} else {
|
||||
return me.options.tileUrl + tileName + '.png?0';
|
||||
}
|
||||
},
|
||||
registerTile: function(mapType, tileName, tile) {
|
||||
this.registeredTiles[tileName] = {
|
||||
tileElement: tile,
|
||||
mapType: mapType,
|
||||
lastseen: '0'
|
||||
};
|
||||
},
|
||||
unregisterTile: function(mapType, tileName) {
|
||||
delete registeredTiles[tileName];
|
||||
},
|
||||
// TODO: Enable hash-links.
|
||||
/* updateLink: function() {
|
||||
var me = this;
|
||||
var url = location.href.match(/^[^#]+/);
|
||||
|
||||
var a=url
|
||||
+ "#lat=" + me.map.getCenter().lat().toFixed(6)
|
||||
+ "&lng=" + me.map.getCenter().lng().toFixed(6)
|
||||
+ "&zoom=" + me.map.getZoom();
|
||||
me.linkbox.data('link').val(a);
|
||||
}*/
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue