js rewrite

server/static/js/LayerManager.js

@@ -1,11 +1,11 @@
-var LayerManager = (function(){
+var LayerManager = function(layers){
 
+    this.addListener = function(listener){
+    };
 
+    this.getCurrentLayer = function(){
+    };
     
-  return {
-    init: function(layers){
-      
-    }
   };
 
-}());
+};

server/static/js/RealtimeTileLayer.js

@@ -1,39 +1,36 @@
-var RealtimeTileLayer = (function(){
+var RealtimeTileLayer = function(wsChannel){
   'use strict';
+  var self = this;
 
-  function getTileSource(layerId, x,y,zoom,cacheBust){
+  wsChannel.addListener("rendered-tile", function(tc){
+    var id = self.getImageId(tc.layerid, tc.x, tc.y, tc.zoom);
+    var el = document.getElementById(id);
+
+    if (el){
+        //Update src attribute if img found
+        el.src = self.getTileSource(tc.layerid, tc.x, tc.y, tc.zoom, true);
+    }
+  });
+
+
+  this.getTileSource = function(layerId, x,y,zoom,cacheBust){
       return "api/tile/" + layerId + "/" + x + "/" + y + "/" + zoom + "?_=" + Date.now();
   }
 
-  function getImageId(layerId, x, y, zoom){
+  this.getImageId = function(layerId, x, y, zoom){
       return "tile-" + layerId + "/" + x + "/" + y + "/" + zoom;
   }
 
-
-
-  return {
-    init: function(){
-      WebSocketChannel.addListener("rendered-tile", function(tc){
-        var id = getImageId(tc.layerid, tc.x, tc.y, tc.zoom);
-        var el = document.getElementById(id);
-
-        if (el){
-            //Update src attribute if img found
-            el.src = getTileSource(tc.layerid, tc.x, tc.y, tc.zoom, true);
-        }
-      });
-    },
-    create: function(layerId){
-        return L.TileLayer.extend({
-          createTile: function(coords){
-            var tile = document.createElement('img');
-            tile.src = getTileSource(layerId, coords.x, coords.y, coords.z);
-            tile.id = getImageId(layerId, coords.x, coords.y, coords.z);
-            return tile;
-          }
-        });
-    }
+  this.createLayer = function(layerId){
+    return L.TileLayer.extend({
+      createTile: function(coords){
+        var tile = document.createElement('img');
+        tile.src = self.getTileSource(layerId, coords.x, coords.y, coords.z);
+        tile.id = self.getImageId(layerId, coords.x, coords.y, coords.z);
+        return tile;
+      }
+    });
   };
 
 
-}())
+};

server/static/js/WebSocketChannel.js

@@ -1,11 +1,10 @@
-var WebSocketChannel = (function(){
+var WebSocketChannel = function(){
   'use strict';
-
   var wsUrl = location.protocol.replace("http", "ws") + "//" + location.host + location.pathname.substring(0, location.pathname.lastIndexOf("/")) + "/api/ws";
 
   var listenerMap = {/* type -> [listeners] */};
 
-  function addListener(type, listener){
+  this.addListener = function(type, listener){
     var list = listenerMap[type];
     if (!list){
       list = [];
@@ -13,9 +12,9 @@ var WebSocketChannel = (function(){
     }
 
     list.push(listener);
-  }
+  };
 
-  function connect(){
+  this.connect = function(){
     var ws = new WebSocket(wsUrl);
 
     ws.onmessage = function(e){
@@ -34,11 +33,6 @@ var WebSocketChannel = (function(){
       //reconnect after some time
       setTimeout(connect, 1000);
     }
-  }
-
-  return {
-    connect: connect,
-    addListener: addListener
   };
 
-}());
+};

server/static/js/main.js

@@ -1,51 +1,47 @@
+'use strict';
 
-(function(){
-    'use strict';
+api.getConfig().then(function(cfg){
+  var layerMgr = new LayerManager(cfg.layers);
 
-    api.getConfig().then(function(cfg){
-      LayerManager.init(cfg.layers);
+  var wsChannel = new WebSocketChannel();
+  wsChannel.connect();
 
-    });
-
-    var crs = L.Util.extend({}, L.CRS.Simple, {
-        //transformation: L.transformation(0.001, 0, -0.001, 0),
-        scale: function (zoom) {
-            return Math.pow(2, zoom-9);
-        }
-    });
-
-    var initialZoom = 11;
-    var initialCenter = [0, 0];
-
-    var map = L.map('image-map', {
-      minZoom: 2,
-      maxZoom: 12,
-      center: initialCenter,
-      zoom: initialZoom,
-      crs: crs
-    });
-
-    WebSocketChannel.connect();
-
-    map.attributionControl.addAttribution('<a href="https://github.com/thomasrudin-mt/mapserver">Mapserver</a>');
-
-    var layers = {};
-    var overlays = {}
-
-    RealtimeTileLayer.init();
-
-    var Layer = RealtimeTileLayer.create(0);
-    var tileLayer = new Layer();
-    tileLayer.addTo(map);
-
-    layers["Base"] = tileLayer;
-    overlays["Travelnet"] = new TravelnetOverlay();
-
-    L.control.layers(layers, overlays).addTo(map);
-
-    var el = CoordinatesDisplay.create({ position: 'bottomleft' });
-    el.addTo(map);
+  var rtTiles = new RealtimeTileLayer(wsChannel);
 
 
+  var crs = L.Util.extend({}, L.CRS.Simple, {
+      //transformation: L.transformation(0.001, 0, -0.001, 0),
+      scale: function (zoom) {
+          return Math.pow(2, zoom-9);
+      }
+  });
 
-})()
+  var initialZoom = 11;
+  var initialCenter = [0, 0];
+
+  var map = L.map('image-map', {
+    minZoom: 2,
+    maxZoom: 12,
+    center: initialCenter,
+    zoom: initialZoom,
+    crs: crs
+  });
+
+  map.attributionControl.addAttribution('<a href="https://github.com/thomasrudin-mt/mapserver">Mapserver</a>');
+
+  var layers = {};
+  var overlays = {}
+
+  var Layer = rtTiles.createLayer(0);
+  var tileLayer = new Layer();
+  tileLayer.addTo(map);
+
+  layers["Base"] = tileLayer;
+  overlays["Travelnet"] = new TravelnetOverlay();
+
+  L.control.layers(layers, overlays).addTo(map);
+
+  var el = CoordinatesDisplay.create({ position: 'bottomleft' });
+  el.addTo(map);
+
+});