proper bootstrap order

server/static/index.html

@@ -15,6 +15,7 @@
     <script src="js/lib/mithril.min.js"></script>
     <script src="js/api.js"></script>
     <script src="js/LayerManager.js"></script>
+    <script src="js/SimpleCRS.js"></script>
     <script src="js/WebSocketChannel.js"></script>
     <script src="js/RealtimeTileLayer.js"></script>
     <script src="js/CoordinatesDisplay.js"></script>

server/static/js/LayerManager.js

@@ -1,6 +1,11 @@
 'use strict';
 
-function LayerManager(layers){
+function LayerManager(layers, map){
+
+  map.on('baselayerchange', function (e) {
+      console.log("baselayerchange", e.layer);
+  });
+  
 }
 
 LayerManager.prototype.addListener = function(listener){

server/static/js/RealtimeTileLayer.js

@@ -1,36 +1,39 @@
 'use strict';
 
-function RealtimeTileLayer(wsChannel){
-  var self = this;
+var RealtimeTileLayer = L.TileLayer.extend({
 
-  wsChannel.addListener("rendered-tile", function(tc){
-    var id = self.getImageId(tc.layerid, tc.x, tc.y, tc.zoom);
-    var el = document.getElementById(id);
+  initialize: function(wsChannel, layerId) {
+    var self = this;
+    this.layerId = layerId;
 
-    if (el){
-        //Update src attribute if img found
-        el.src = self.getTileSource(tc.layerid, tc.x, tc.y, tc.zoom, true);
-    }
-  });
-}
+    wsChannel.addListener("rendered-tile", function(tc){
+      if (tc.layerid != self.layerId){
+        //ignore other layers
+        return;
+      }
 
-RealtimeTileLayer.prototype.getTileSource = function(layerId, x,y,zoom,cacheBust){
-    return "api/tile/" + layerId + "/" + x + "/" + y + "/" + zoom + "?_=" + Date.now();
-};
+      var id = self.getImageId(tc.layerid, tc.x, tc.y, tc.zoom);
+      var el = document.getElementById(id);
 
-RealtimeTileLayer.prototype.getImageId = function(layerId, x, y, zoom){
-    return "tile-" + layerId + "/" + x + "/" + y + "/" + zoom;
-};
+      if (el){
+          //Update src attribute if img found
+          el.src = self.getTileSource(tc.layerid, tc.x, tc.y, tc.zoom, true);
+      }
+    });
+  },
 
-RealtimeTileLayer.prototype.createLayer = function(layerId){
-  var self = this;
+  getTileSource: function(x,y,zoom,cacheBust){
+      return "api/tile/" + this.layerId + "/" + x + "/" + y + "/" + zoom + "?_=" + Date.now();
+  },
 
-  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;
-    }
-  });
-};
+  getImageId: function(x, y, zoom){
+      return "tile-" + this.layerId + "/" + x + "/" + y + "/" + zoom;
+  },
+
+  createTile: function(coords){
+    var tile = document.createElement('img');
+    tile.src = this.getTileSource(coords.x, coords.y, coords.z);
+    tile.id = this.getImageId(coords.x, coords.y, coords.z);
+    return tile;
+  }
+});

server/static/js/SimpleCRS.js

@@ -0,0 +1,7 @@
+'use strict';
+
+var SimpleCRS = L.Util.extend({}, L.CRS.Simple, {
+    scale: function (zoom) {
+        return Math.pow(2, zoom-9);
+    }
+});

server/static/js/main.js

@@ -1,21 +1,12 @@
 'use strict';
 
 api.getConfig().then(function(cfg){
-  var layerMgr = new LayerManager(cfg.layers);
 
   var wsChannel = new WebSocketChannel();
   wsChannel.connect();
 
   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];
 
@@ -24,7 +15,7 @@ api.getConfig().then(function(cfg){
     maxZoom: 12,
     center: initialCenter,
     zoom: initialZoom,
-    crs: crs
+    crs: SimpleCRS
   });
 
   map.attributionControl.addAttribution('<a href="https://github.com/thomasrudin-mt/mapserver">Mapserver</a>');
@@ -32,12 +23,13 @@ api.getConfig().then(function(cfg){
   var layers = {};
   var overlays = {}
 
-  var Layer = rtTiles.createLayer(0);
-  var tileLayer = new Layer();
+  var layerMgr = new LayerManager(cfg.layers, map);
+
+  var tileLayer = new RealtimeTileLayer(wsChannel, 0);
   tileLayer.addTo(map);
 
   layers["Base"] = tileLayer;
-  overlays["Travelnet"] = new TravelnetOverlay();
+  overlays["Travelnet"] = new TravelnetOverlay(wsChannel, layerMgr);
 
   L.control.layers(layers, overlays).addTo(map);
 

server/static/js/overlays/TravelnetOverlay.js

@@ -9,7 +9,7 @@ var TravelnetIcon = L.icon({
 });
 
 var TravelnetOverlay = L.LayerGroup.extend({
-  initialize: function() {
+  initialize: function(wsChannel, layerMgr) {
 
   },