mapsb/static/js/app.js

window.app = (function() {
    var that = {},
        coords,
        foundLocation = false,
        map,
        marker,
        username = 'Anonymous',
        users = [],
        zoomLevel = 23;

    window.onload = setup();
    document.body && window.onload();

    function createUser(data) {
        var user = {
            id: data.id,
            name: data.name,
            color: randomColor()
        };
        users.push(user);
        update({
            name: username,
            coords: coords
        });
        return user;
    }

    function getUserById(id) {
        return users.filter(function(user) {
            return user.id == id;
        })[0];
    }

    function initMap() {
        navigator.geolocation.watchPosition(updateLocation, locationError);
    }

    function joinRoom(room) {
        if(that.room) {
            post(['leave', that.room]);
        }
        users.forEach(function(user) {
            if (user.marker) {
                map.removeLayer(user.marker);
            }
        });
        users = [];
        that.room = room;
        post(['join', that.room]);
        if (coords) {
            update({
                name: username,
                coords: coords
            });
        } else {
            initMap();
        }
    }

    function locationError(err) {
        console.log(err);
    }

    function post(data) {
        that.ws.send(JSON.stringify(data));
    }

    function randomColor() {
        var letters = '0123456789ABCDEF'.split('');
        var color = '#';
        for (var i = 0; i < 6; i++ ) {
            color += letters[Math.floor(Math.random() * (letters.length-1))];
        }
        return color;
    }

    function randomName() {
        var name = '';
        while(name.length < 14) {
            name +=  String.fromCharCode('A'.charCodeAt(0) + Math.floor(Math.random() * 25));
        }
        return name;
    }

    function removeUser(id) {
        var user = getUserById(id);
        if (user) {
            if (user.marker) {
                map.removeLayer(user.marker);
            }
            users = users.filter(function(user) {
                user.id != id;
            });
        }
    }

    function setup() {
        var host = (document.location.protocol == 'http:' ? 'ws' : 'wss') + '://' + document.location.host;
        that.ws = new WebSocket(host + '/ws');
        that.ws.onopen = function () {
            window.onhashchange = function() {
                var name = document.location.hash.slice(1);
                if (name) {
                    document.title = '#' + name;
                    joinRoom(name);
                } else {
                    document.location.href = '#' + randomName();
                }
            }
            window.onhashchange();
        };
        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') {
                data[2].id = data[1];
                updateUserLocation(data[2]);
            }
        };
        that.ws.onclose = function (event) {
            setTimeout(function() {
                setup();
            }, 1000);
        };
    }

    function update(data) {
        post(['update', that.room, data]);
    }

    function updateLocation(loc) {
        console.log(loc);
        coords = [loc.coords.latitude, loc.coords.longitude];
        var options = {
            title: username
        };
        if (!foundLocation) {
            if (!map) {
                L.mapbox.accessToken = config.mapboxAccessToken;
                map = L.mapbox.map('map', 'mapbox.streets')
                    .setView(coords, zoomLevel);
            }
            marker = L.marker(coords, options)
                .bindPopup(options.title)
                .addTo(map);
            map.setView(coords, zoomLevel);
            foundLocation = true;
        } else {
            map.removeLayer(marker);
            marker = L.marker(coords, options)
                .bindPopup(options.title)
                .addTo(map);
        }
        update({
            name: username,
            coords: coords
        });
    }

    function updateUserLocation(data) {
        var user = getUserById(data.id);
        if (!user) {
            user = createUser(data);
        }
        var options = {
            'title': user.name,
            'icon': L.mapbox.marker.icon({
                'marker-color': user.color
            })
        };
        user.coords = data.coords;
        if (user.marker) {
            map.removeLayer(user.marker);
        }
        user.marker = L.marker(user.coords, options)
            .bindPopup(user.name)
            .addTo(map);
    }

    return that;
})();