js org

server/static/index.html

@@ -30,8 +30,9 @@
 
     <script src="js/lib/leaflet.js"></script>
     <script src="js/lib/mithril.min.js"></script>
-    <script src="js/realtimelayer.js"></script>
-    <script src="js/L.control.coordinatesDisplay.js"></script>
+    <script src="js/RealtimeTileLayer.js"></script>
+    <script src="js/WebSocketChannel.js"></script>
+    <script src="js/CoordinatesDisplay.js"></script>
     <script src="js/main.js"></script>
 
   </body>

server/static/js/CoordinatesDisplay.js

@@ -1,7 +1,8 @@
-(function(){
-  // coord display
+var CoordinatesDisplay = (function(){
+  'use strict';
 
-  L.Control.CoordinatesDisplay = L.Control.extend({
+  // coord display
+  var CoordinatesDisplay = L.Control.extend({
       onAdd: function(map) {
         var div = L.DomUtil.create('div', 'leaflet-bar leaflet-custom-display');
         function update(ev){
@@ -20,8 +21,10 @@
       }
   });
 
-  L.control.coordinatesDisplay = function(opts) {
-      return new L.Control.CoordinatesDisplay(opts);
+  return {
+    create: function(opts){
+      return new CoordinatesDisplay(opts);
+    }
   }
 
-})()
+}())

server/static/js/RealtimeTileLayer.js

@@ -1,5 +1,5 @@
-(function(){
-
+var RealtimeTileLayer = (function(){
+  'use strict';
 
   function getTileSource(layerId, x,y,zoom,cacheBust){
       return "api/tile/" + layerId + "/" + x + "/" + y + "/" + zoom + "?_=" + Date.now();
@@ -9,7 +9,7 @@
       return "tile-" + layerId + "/" + x + "/" + y + "/" + zoom;
   }
 
-  window.realtimelayer = {
+  return {
     create: function(layerId){
         return L.TileLayer.extend({
           createTile: function(coords){
@@ -33,5 +33,4 @@
   };
 
 
-
-})()
+}())

server/static/js/WebsocketChannel.js

@@ -0,0 +1,21 @@
+var WebSocketChannel = (function(){
+  'use strict';
+
+  function connect(){
+    var wsUrl = location.protocol.replace("http", "ws") + "//" + location.host + location.pathname.substring(0, location.pathname.lastIndexOf("/")) + "/api/ws";
+    var ws = new WebSocket(wsUrl);
+
+    ws.onmessage = function(e){
+      var event = JSON.parse(e.data);
+
+      if (event.type == "rendered-tile"){
+        RealtimeTileLayer.update(event.data)
+      }
+    }
+  }
+
+  return {
+    connect: connect
+  };
+
+}());

server/static/js/main.js

@@ -19,27 +19,17 @@
       crs: crs
     });
 
-
-    var wsUrl = location.protocol.replace("http", "ws") + "//" + location.host + location.pathname.substring(0, location.pathname.lastIndexOf("/")) + "/api/ws";
-    var ws = new WebSocket(wsUrl);
-
-    ws.onmessage = function(e){
-      var event = JSON.parse(e.data);
-
-      if (event.type == "rendered-tile"){
-        realtimelayer.update(event.data)
-      }
-    }
+    WebSocketChannel.connect();
 
     var layers = {};
 
-    var Layer = realtimelayer.create(0);
+    var Layer = RealtimeTileLayer.create(0);
     var tileLayer = new Layer();
     tileLayer.addTo(map);
 
     L.control.layers(layers, {}).addTo(map);
 
-    var el = L.control.coordinatesDisplay({ position: 'bottomleft' });
+    var el = CoordinatesDisplay.create({ position: 'bottomleft' });
     el.addTo(map);