diff --git a/cmd/mtwebmapper/web/index.html b/cmd/mtwebmapper/web/index.html
index d955a7c..8fcd159 100644
--- a/cmd/mtwebmapper/web/index.html
+++ b/cmd/mtwebmapper/web/index.html
@@ -30,6 +30,14 @@
             box-shadow: 0 1px 3px rgba(0,0,0,0.3);
             background-color:rgba(255,255,255,.85);
         }
+        .outlinedText {
+            color: black;
+            text-shadow:
+            -1px -1px 0 #fff,
+            1px -1px 0 #fff,
+            -1px 1px 0 #fff,
+            1px 1px 0 #fff;
+        }
     </style>
 </head>
 <body>
@@ -39,9 +47,10 @@
     <script src="js/easy-button.js"></script>
     <script src="js/auto-update.js"></script>
     <script type="text/javascript" src="js/leaflet-hash.js"></script>
+    <script type="text/javascript" src="js/leaflet.ajax.js"></script>
     <script>
 
-var useWebsocket = false; // Set to true if you want websocket support
+var useWebsocket = true; // Set to true if you want websocket support
 
 L.Projection.NoWrap = {
     project: function (latlng) {
@@ -69,13 +78,25 @@ var world = new L.tileLayer('map/{z}/{x}/{y}.png', {
     unloadInvisibleTiles: true
 });
 
+var players = L.geoJson.ajax('/players', {
+    pointToLayer: function(feature, latlng) {
+        return L.marker(latlng, {
+            icon:L.divIcon({
+                className: 'label',
+                html:  '<table border="0" width="120" height="40"><tr align="center"><td align="center" >' + feature.properties.name + '</td></tr><tr><td align="center"><img src="markers/player.png" width="12" height="17" class=""/></td></tr></table>',
+                iconSize: [120, 40],
+                iconAnchor: [57, 40]
+            })
+        });
+    }
+});
 var rasterMaps = {
     "A demo world": world,
 };
 
 var latest = world
 
-var overlayMaps = {};
+var overlayMaps = {'Players': players};
 
 var map = L.map('map', {
     center: [0,0],
@@ -104,13 +125,15 @@ if (useWebsocket && 'WebSocket' in window) {
         else {
             manualUpdateControl.getContainer().style = 'visibility: visible';
         }
-    });
+    },
+    players);
 }
 var layersControl = new L.Control.Layers(rasterMaps, overlayMaps, {collapsed: false});
 map.addControl(layersControl);
 
-manualUpdateControl = L.easyButton('fa-refresh', 
+manualUpdateControl = L.easyButton('fa-refresh',
     function (){
+        players.refresh();
         var tiles = document.getElementsByTagName("img");
         for (var i = 0; i < tiles.length; i++) {
             var img = tiles[i];
diff --git a/cmd/mtwebmapper/web/js/auto-update.js b/cmd/mtwebmapper/web/js/auto-update.js
index e1b6bfb..89ca8af 100644
--- a/cmd/mtwebmapper/web/js/auto-update.js
+++ b/cmd/mtwebmapper/web/js/auto-update.js
@@ -1,7 +1,8 @@
 L.Control.AutoUpdate = L.Control.extend({
     options: {
         position: 'topleft',
-        label: 'Automatic update'
+        label: 'Automatic update',
+        layer: undefined
     },
     pressed: true,
 
@@ -37,27 +38,46 @@ L.Control.AutoUpdate = L.Control.extend({
     },
 
     autoUpdate: function() {
+        var me = this;
         this.socket = new WebSocket('ws://' + window.location.host + '/ws');
 
         this.socket.onmessage = function(evt) {
 
+            var updatePlayers = function(json) {
+                if (!(typeof json === "string")) {
+                    return;
+                }
+                var players;
+                try {
+                    players = JSON.parse(json);
+                }
+                catch (err) {
+                    return;
+                }
+
+                if (players.players) {
+                    me.options.layer.clearLayers();
+                    me.options.layer.addData(players.players);
+                }
+            }(evt.data);
+
             var invalidate = function(json) {
                 var invalidateAll = function(x, y, z) { return true; };
 
                 if (!(typeof json === "string")) {
                     return invalidateAll;
                 }
-                var msg;
+                var tiles;
+                var tileData;
                 try {
-                    msg = JSON.parse(json);
+                    var tileData = JSON.parse(json);
                 } catch (err) {
                     return invalidateAll;
                 }
-
-                var tiles = msg.tiles;
-                if !tiles {
-                    continue;
+                if (!tileData.tiles) {
+                    return invalidateAll;
                 }
+                tiles = tileData.tiles;
 
                 var pyramid = new Array(9);
                 var last = new Object();
@@ -119,7 +139,7 @@ L.Control.AutoUpdate = L.Control.extend({
     }
 });
 
-L.autoUpdate = function(cbLabel, cbFunc, cbMap) {
+L.autoUpdate = function(cbLabel, cbFunc, layer, cbMap) {
     var control = new L.Control.AutoUpdate();
     if (cbLabel) {
         control.options.label = cbLabel;
@@ -129,6 +149,10 @@ L.autoUpdate = function(cbLabel, cbFunc, cbMap) {
         control.intendedFunction = cbFunc;
     }
 
+    if (layer) {
+        control.options.layer = layer;
+    }
+
     if (cbMap === '') {
         return control;
     }
