diff --git a/server/static/js/LayerManager.js b/server/static/js/LayerManager.js
index b1d44a8..3f42cc7 100644
--- a/server/static/js/LayerManager.js
+++ b/server/static/js/LayerManager.js
@@ -1,11 +1,11 @@
-var LayerManager = (function(){
+var LayerManager = function(layers){
+ this.addListener = function(listener){
+ };
-
- return {
- init: function(layers){
-
- }
+ this.getCurrentLayer = function(){
+ };
+
};
-}());
+};
diff --git a/server/static/js/RealtimeTileLayer.js b/server/static/js/RealtimeTileLayer.js
index bf681f9..a14312e 100644
--- a/server/static/js/RealtimeTileLayer.js
+++ b/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;
+ }
+ });
};
-}())
+};
diff --git a/server/static/js/WebSocketChannel.js b/server/static/js/WebSocketChannel.js
index d798b4f..2db804e 100644
--- a/server/static/js/WebSocketChannel.js
+++ b/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
};
-}());
+};
diff --git a/server/static/js/main.js b/server/static/js/main.js
index 6a102f6..67e8de9 100644
--- a/server/static/js/main.js
+++ b/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('Mapserver');
-
- 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('Mapserver');
+
+ 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);
+
+});