Separated playermarkers to a component.

configuration.txt

@@ -87,6 +87,8 @@ web:
       - type: chatbox
         showplayerfaces: true
         messagettl: 5
+      - type: playermarkers
+        showplayerfaces: true
     
     defaultworld: world
     worlds:

web/index.html

@@ -29,6 +29,7 @@
 	<script type="text/javascript" src="js/chat.js"></script>
 	<script type="text/javascript" src="js/chatballoon.js"></script>
 	<script type="text/javascript" src="js/chatbox.js"></script>
+	<script type="text/javascript" src="js/playermarkers.js"></script>
 	<script type="text/javascript" src="config.js"></script>
 
 	<script type="text/javascript">

web/js/map.js

@@ -435,30 +435,6 @@ DynMap.prototype = {
 		
 		$(me).trigger('playeradded', [ player ]);
 		
-		var location = player.location;
-		// Create the player-marker.
-		var markerPosition = me.map.getProjection().fromWorldToLatLng(location.x, location.y, location.z);
-		player.marker = new CustomMarker(markerPosition, me.map, function(div) {
-			var playerImage;
-			$(div)
-				.addClass('Marker')
-				.addClass('playerMarker')
-				.append(playerImage = $('<img/>')
-						.attr({ src: 'images/player.png' }))
-				.append($('<span/>')
-					.addClass('playerName')
-					.text(player.name));
-			
-			if (me.options.showplayerfacesonmap) {
-				getMinecraftHead(player.name, 32, function(head) {
-					$(head)
-						.addClass('playericon')
-						.prependTo(div);
-					playerImage.remove();
-				});
-			}
-		});
-		
 		// Create the player-menu-item.
 		var playerIconContainer;
 		var menuitem = player.menuitem = $('<li/>')
@@ -499,11 +475,6 @@ DynMap.prototype = {
 		
 		$(me).trigger('playerupdated', [ player ]);
 		
-		// Update the marker.
-		var markerPosition = me.map.getProjection().fromWorldToLatLng(location.x, location.y, location.z);
-		player.marker.toggle(me.world === location.world);
-		player.marker.setPosition(markerPosition);
-		
 		// Update menuitem.
 		player.menuitem.toggleClass('otherworld', me.world !== location.world);
 		
@@ -519,9 +490,6 @@ DynMap.prototype = {
 		
 		$(me).trigger('playerremoved', [ player ]);
 		
-		// Remove the marker.
-		player.marker.remove();
-		
 		// Remove menu item.
 		player.menuitem.remove();
 	},

web/js/playermarkers.js

@@ -0,0 +1,40 @@
+componentconstructors['playermarkers'] = function(dynmap, configuration) {
+	return {
+		initialize: function() {
+			$(dynmap).bind('playeradded', function(event, player) {
+				// Create the player-marker.
+				var markerPosition = dynmap.map.getProjection().fromWorldToLatLng(player.location.x, player.location.y, player.location.z);
+				player.marker = new CustomMarker(markerPosition, dynmap.map, function(div) {
+					var playerImage;
+					$(div)
+						.addClass('Marker')
+						.addClass('playerMarker')
+						.append(playerImage = $('<img/>')
+								.attr({ src: 'images/player.png' }))
+						.append($('<span/>')
+							.addClass('playerName')
+							.text(player.name));
+					
+					if (configuration.showplayerfaces) {
+						getMinecraftHead(player.name, 32, function(head) {
+							$(head)
+								.addClass('playericon')
+								.prependTo(div);
+							playerImage.remove();
+						});
+					}
+				});
+			});
+			$(dynmap).bind('playerremoved', function(event, player) {
+				// Remove the marker.
+				player.marker.remove();
+			});
+			$(dynmap).bind('playerupdated', function(event, player) {
+				// Update the marker.
+				var markerPosition = dynmap.map.getProjection().fromWorldToLatLng(player.location.x, player.location.y, player.location.z);
+				player.marker.toggle(dynmap.world === player.location.world);
+				player.marker.setPosition(markerPosition);
+			});
+		}
+	};
+};