use custom marker

static/css/app.css

@@ -5,3 +5,19 @@
     bottom: 0px;
     top: 0px;
 }
+#users {
+    position: absolute;
+    right: 8px;
+}
+.person {
+    border: 2px solid rgb(255, 255, 255);
+    border-radius: 4px;
+    color: rgb(255, 255, 255);
+    cursor: pointer;
+    font-family: sans-serif;
+    font-size: 12px;
+    height: 12px;
+    line-height: 12px;
+    padding: 2px 4px 4px;
+    margin-bottom: 4px;
+}

static/js/app.js

@@ -4,7 +4,9 @@ window.app = (function() {
         foundLocation = false,
         map,
         marker,
-        username = 'Anonymous',
+        username = localStorage.username || 'Anonymous',
+        color = randomColor(),
+        userlist,
         users = [],
         zoomLevel = 23;
 
@@ -15,13 +17,20 @@ window.app = (function() {
         var user = {
             id: data.id,
             name: data.name,
-            color: randomColor()
+            color: data.color,
         };
+        if (!user.color) {
+            user.color = [255, 0, 0];
+        }
         users.push(user);
-        update({
+        if(coords) {
-            name: username,
+            update({
-            coords: coords
+                name: username,
-        });
+                color: color,
+                coords: coords
+            });
+        }
+        updateUserList();
         return user;
     }
 
@@ -32,7 +41,9 @@ window.app = (function() {
     }
 
     function initMap() {
-        navigator.geolocation.watchPosition(updateLocation, locationError);
+        navigator.geolocation.watchPosition(updateLocation, locationError, {
+            enableHighAccuracy: true
+        });
     }
 
     function joinRoom(room) {
@@ -55,6 +66,7 @@ window.app = (function() {
         } else {
             initMap();
         }
+        updateUserList();
     }
 
     function locationError(err) {
@@ -66,12 +78,21 @@ window.app = (function() {
     }
 
     function randomColor() {
-        var letters = '0123456789ABCDEF'.split('');
+        var colors = [
-        var color = '#';
+                [128, 0, 0],
-        for (var i = 0; i < 6; i++ ) {
+                [0, 128, 0],
-            color += letters[Math.floor(Math.random() * (letters.length-1))];
+                [0, 0, 128],
-        }
+                [128, 128, 0],
-        return color;
+                [0, 128, 128],
+                [128, 0, 128],
+                [128, 64, 0],
+                [64, 128, 0],
+                [0, 128, 64],
+                [0, 64, 128],
+                [64, 0, 128],
+                [128, 0, 64]
+            ];
+        return colors[Math.floor(Math.random() * 12)];
     }
 
     function randomName() {
@@ -111,7 +132,6 @@ window.app = (function() {
         };
         that.ws.onmessage = function (event) {
             var data = JSON.parse(event.data);
-            console.log(data);
             if (data[0] == 'leave') {
                 removeUser(data[1]);
             } else if (data[0] == 'update') {
@@ -131,10 +151,15 @@ window.app = (function() {
     }
 
     function updateLocation(loc) {
-        console.log(loc);
         coords = [loc.coords.latitude, loc.coords.longitude];
         var options = {
-            title: username
+            title: username,
+            icon: L.icon({
+                iconUrl: MarkerIcon({
+                    label: username[0],
+                    color: [255, 255, 255],
+                })
+            })
         };
         if (!foundLocation) {
             if (!map) {
@@ -147,6 +172,7 @@ window.app = (function() {
                 .addTo(map);
             map.setView(coords, zoomLevel);
             foundLocation = true;
+            updateUserList();
         } else {
             map.removeLayer(marker);
             marker = L.marker(coords, options)
@@ -165,9 +191,12 @@ window.app = (function() {
             user = createUser(data);
         }
         var options = {
-            'title': user.name,
+            title: user.name,
-            'icon': L.mapbox.marker.icon({
+            icon: L.icon({
-                'marker-color': user.color
+                iconUrl: MarkerIcon({
+                    label: user.name[0],
+                    background: user.color
+                })
             })
         };
         user.coords = data.coords;
@@ -179,5 +208,52 @@ window.app = (function() {
             .addTo(map);
     }
 
+    function updateUserList() {
+        var list = document.createElement('div');
+            list.id = 'users';
+        [{
+            name: username,
+            color: color
+        }].concat(users).forEach(function(user) {
+            var div = document.createElement('div');
+            div.className = 'person';
+            div.innerHTML = user.name;
+            div.style.background = 'rgb(' + user.color.join(', ') + ')';
+            div.style.top = '8px'
+            list.appendChild(div);
+        });
+        if (userlist) {
+            document.body.replaceChild(list, userlist);
+        } else {
+            document.body.appendChild(list);
+        }
+        userlist = list;
+    }
+
+    function MarkerIcon(options) {
+        options = options || {};
+        options.background = options.background || [255, 0, 0];
+        options.color = options.color || [255, 255, 255];
+        options.label = options.label || 'A';
+        var size = 20;
+        var canvas = document.createElement('canvas')
+        canvas.setAttribute('width', size);
+        canvas.setAttribute('height', size);
+        var context = canvas.getContext('2d');
+        context.fillStyle = 'rgb(' + options.background.join(', ') + ')';
+        context.arc(size / 2, size / 2, size / 2 - 2, 0, 360);
+        context.fill();
+        context.beginPath();
+        context.lineWidth = 2;
+        context.strokeStyle = 'rgb(' + options.color.join(', ') + ')';
+        context.arc(size / 2, size / 2, size / 2 - 1, 0, 360);
+        context.stroke();
+        context.font = '14px sans-serif';
+        context.textAlign = 'center';
+        context.fillStyle = 'rgb(' + options.color.join(', ') + ')';
+        context.fillText(options.label, size / 2, size * 0.75);
+        return canvas.toDataURL();
+    }
+
     return that;
 })();