Work player marker layout - center icon on player location

web/css/dynmap_style.css

@@ -541,10 +541,24 @@
  * players on the map
  */
 
+.dynmap .playerIcon {
+	margin-top: -16px;
+	margin-left: -16px;
+	width: 32px;
+	height: 32px;
+}
+
+.dynmap .playerIconSm {
+	margin-top: -8px;
+	margin-left: -8px;
+	width: 16px;
+	height: 16px;
+}
+
 .dynmap .playerName {
 	position: absolute;
-	top: 0px;
-	left: 34px;
+	top: -16px;
+	left: 18px;
     z-index:20;
 
 	white-space: nowrap;
@@ -559,8 +573,8 @@
 
 .dynmap .playerNameSm {
 	position: absolute;
-	top: -1px;
-	left: 18px;
+	top: -16px;
+	left: 10px;
 
 	white-space: nowrap;
 
@@ -572,11 +586,30 @@
     border-radius: 3px;
 }
 
+.dynmap .playerNameNoHealth {
+	top: -7px;
+}
+
 .dynmap .healthContainer {
 	display: block;
 	position: absolute;
-	bottom: 0;
-	left: 34px;
+	top: -2px;
+	left: 18px;
+
+	width: 50px;
+
+	background: rgba(0,0,0,0.6);
+	padding: 2px;
+
+	-moz-border-radius: 3px;
+	border-radius: 3px;
+}
+
+.dynmap .healthContainerSm {
+	display: block;
+	position: absolute;
+	top: -2px;
+	left: 10px;
 
 	width: 50px;
 

web/js/playermarkers.js

@@ -13,21 +13,22 @@ componentconstructors['playermarkers'] = function(dynmap, configuration) {
 			// Only show player faces if canvas supported					
 			if(dynmap.canvassupport == false)
 				configuration.showplayerfaces = false;
-						
+					
+			var nm;	
 			$(div)
 				.addClass('Marker')
 				.addClass('playerMarker')
-				.append(playerImage = $('<img/>')
+				.append(playerImage = $('<img/>').addClass(configuration.smallplayerfaces?'playerIconSm':'playerIcon')
 						.attr({ src: 'images/player.png' }))
-				.append($('<span/>')
+				.append(nm = $('<span/>')
 					.addClass(configuration.smallplayerfaces?'playerNameSm':'playerName')
 					.text(player.name));
-
+			
 			if (configuration.showplayerfaces) {
 				if(configuration.smallplayerfaces) {
 					getMinecraftHead(player.account, 16, function(head) {
 						$(head)
-							.addClass('playericon')
+							.addClass('playerIconSm')
 						.prependTo(div);
 						playerImage.remove();
 					});
@@ -35,18 +36,15 @@ componentconstructors['playermarkers'] = function(dynmap, configuration) {
 				else {
 					getMinecraftHead(player.account, 32, function(head) {
 						$(head)
-							.addClass('playericon')
+							.addClass('playerIcon')
 						.prependTo(div);
 						playerImage.remove();
 					});
 				}
 			}
 			if (configuration.showplayerhealth) {
-                if(!configuration.showplayerfaces) /* Need 32 high */
-                    playerImage.css('margin-bottom','16px');
-                    
 				player.healthContainer = $('<div/>')
-					.addClass('healthContainer')
+					.addClass(configuration.smallplayerfaces?'healthContainerSm':'healthContainer')
 					.appendTo(div);
 				if (player.health !== undefined && player.armor !== undefined) {
 					player.healthBar = $('<div/>')
@@ -68,6 +66,9 @@ componentconstructors['playermarkers'] = function(dynmap, configuration) {
 					player.healthContainer.css('display','none');
 				}
 			}
+			else {
+				nm.addClass('playerNameNoHealth');
+			}
 			
 			return div;
 		}});