Fixed chatballoons for Leaflet.

web/css/dynmap_style.css

@@ -703,6 +703,11 @@
 	top: -3px;
 	left: 0px;
 }
-.infowindow {
+
-color:black;
+.leaflet-popup {
+	color: black;
+}
+
+.balloonmessage {
+	word-wrap: break-word;
 }

web/js/chatballoon.js

@@ -1,50 +1,64 @@
 componentconstructors['chatballoon'] = function(dynmap, configuration) {
 	var me = this;
 	me.chatpopups = {};
+	$(dynmap).bind('playerupdated', function(event, player) {
+		var popup = me.chatpopups[player.name];
+		if (popup) {
+			var markerPosition = dynmap.getProjection().fromLocationToLatLng(player.location);
+			popup.layer.setLatLng(markerPosition);
+		}
+	});
+	$(dynmap).bind('worldchanged', function() {
+		$.each(me.chatpopups, function(name, popup) {
+			popup.close();
+		});
+	});
 	$(dynmap).bind('chat', function(event, message) {
 		if (message.source != 'player') {
 			return;
 		}
 		var player = dynmap.players[message.name];
-		var playerMarker = player && player.marker;
+		if (dynmap.world !== player.location.world) {
-		if (!playerMarker) {
-			return;
-		}
-		if (player.location.world != dynmap.world) {
 			return;
 		}
+		var popupPosition = dynmap.getProjection().fromLocationToLatLng(player.location);
+		console.log('popupPosition', popupPosition);
 		var popup = me.chatpopups[message.name];
 		if (!popup) {
-			popup = { lines: [ message.text ] };
+			me.chatpopups[message.name] = popup = {
-		} else {
+				layer: new L.Popup({autopan: false, closeButton: false}),
-			popup.lines[popup.lines.length] = message.text;
+				content: $('<div/>').addClass('balloonmessages')[0]
+			};
+			popup.layer.setContent(popup.content);
+			
+			popup.close = function() {
+				if (popup.timeout) { window.clearTimeout(popup.timeout); }
+				dynmap.map.removeLayer(popup.layer);
+				delete me.chatpopups[message.name];
+			};
+			
+			popup.layer.setLatLng(popupPosition);
+			dynmap.map.addLayer(popup.layer);
 		}
 		
-		var MAX_LINES = 5;
+		// Add line to balloon.
-		if (popup.lines.length > MAX_LINES) {
+		$('<div/>').addClass('balloonmessage').text(message.text).appendTo(popup.content);
-			popup.lines = popup.lines.slice(1);
+
+		// Remove older lines when too many messages are shown.
+		var children = $(popup.content).children();
+		if (children.length > 5) {
+			$(children[0]).remove();
 		}
-		var htmlMessage = '<div id="content"><b>' + message.name + "</b><br/><br/>";
+		
-		var line;
+		popup.layer.setContent(popup.content);
-		for (line in popup.lines) {
+		
-			htmlMessage = htmlMessage + popup.lines[line] + "<br/>";
-		}
-		htmlMessage = htmlMessage + "</div>";
-		if (!popup.infoWindow) {
-			popup.infoWindow = new google.maps.InfoWindow({
-				disableAutoPan: !(configuration.focuschatballoons || false),
-			    content: htmlMessage
-			});
-		} else {
-			popup.infoWindow.setContent(htmlMessage);
-		}
-		popup.infoWindow.open(dynmap.map, playerMarker);
-		me.chatpopups[message.name] = popup;
 		if (popup.timeout) { window.clearTimeout(popup.timeout); }
 		popup.timeout = window.setTimeout(function() {
-			popup.infoWindow.close();
+			popup.close();
-			popup.infoWindow = null;
-			delete me.chatpopups[message.name];
 		}, 8000);
+		
+		if (configuration.focuschatballoons) {
+			dynmap.panToLatLng(popupPosition);
+		}
 	});
 };