maps

2016-01-26 14:23:03 +05:30 · 2016-01-26 14:23:03 +05:30 · 45b9c8036d
commit 45b9c8036d
5 changed files with 352 additions and 0 deletions
--- a/static/css/app.css
+++ b/static/css/app.css
@ -0,0 +1,7 @@
+#map {
+    position: absolute;
+    left: 0px;
+    right: 0px;
+    bottom: 0px;
+    top: 0px;
+}
--- a/static/index.html
+++ b/static/index.html
@ -0,0 +1,14 @@
+<!DOCTYPE HTML>
+<html>
+    <head>
+        <title>Open Media Library</title>
+        <meta charset="UTF-8"/>
+        <script>var config = {};</script>
+        <script src="https://api.mapbox.com/mapbox.js/v2.2.2/mapbox.js" type="text/javascript"></script>
+        <script src="/static/js/app.js?0" type="text/javascript"></script>
+        <link rel="stylesheet" type="text/css" href="https://api.mapbox.com/mapbox.js/v2.2.2/mapbox.css" />
+        <link rel="stylesheet" type="text/css" href="/static/css/app.css" />
+        <meta name="google" value="notranslate"/>
+    </head>
+    <body><div id="map"></div></body>
+</html>
--- a/static/js/app.js
+++ b/static/js/app.js
@ -0,0 +1,183 @@
+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;
+})();