pics, travelnet layer stub

server/static/index.html

@@ -13,9 +13,10 @@
 
     <script src="js/lib/leaflet.js"></script>
     <script src="js/lib/mithril.min.js"></script>
-    <script src="js/RealtimeTileLayer.js"></script>
     <script src="js/WebSocketChannel.js"></script>
+    <script src="js/RealtimeTileLayer.js"></script>
     <script src="js/CoordinatesDisplay.js"></script>
+    <script src="js/overlays/TravelnetOverlay.js"></script>
     <script src="js/main.js"></script>
 
   </body>

server/static/js/RealtimeTileLayer.js

@@ -9,7 +9,20 @@ var RealtimeTileLayer = (function(){
       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){
@@ -19,16 +32,6 @@ var RealtimeTileLayer = (function(){
             return tile;
           }
         });
-    },
-
-    update: function(data){
-        var id = getImageId(data.layerid, data.x, data.y, data.zoom);
-        var el = document.getElementById(id);
-
-        if (el){
-            //Update src attribute if img found
-            el.src = getTileSource(data.layerid, data.x, data.y, data.zoom, true);
-        }
     }
   };
 

server/static/js/WebSocketChannel.js

@@ -0,0 +1,44 @@
+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){
+    var list = listenerMap[type];
+    if (!list){
+      list = [];
+      listenerMap[type] = list;
+    }
+
+    list.push(listener);
+  }
+
+  function connect(){
+    var ws = new WebSocket(wsUrl);
+
+    ws.onmessage = function(e){
+      var event = JSON.parse(e.data);
+      //rendered-tile, mapobject-created, mapobjects-cleared
+
+      var listeners = listenerMap[event.type];
+      if (listeners){
+        listeners.forEach(function(listener){
+          listener(event.data);
+        });
+      }
+    }
+
+    ws.onerror = function(){
+      //reconnect after some time
+      setTimeout(connect, 1000);
+    }
+  }
+
+  return {
+    connect: connect,
+    addListener: addListener
+  };
+
+}());

server/static/js/WebsocketChannel.js

@@ -1,37 +0,0 @@
-var WebSocketChannel = (function(){
-  'use strict';
-
-  var wsUrl = location.protocol.replace("http", "ws") + "//" + location.host + location.pathname.substring(0, location.pathname.lastIndexOf("/")) + "/api/ws";
-
-  function connect(){
-    var ws = new WebSocket(wsUrl);
-
-    ws.onmessage = function(e){
-      var event = JSON.parse(e.data);
-
-      if (event.type == "rendered-tile"){
-        //Update tiles
-        RealtimeTileLayer.update(event.data)
-
-      } else if (event.type == "mapobject-created"){
-        //TODO
-        console.log(event);
-
-      } else if (event.type == "mapobjects-cleared"){
-        //TODO
-        console.log(event);
-
-      }
-    }
-
-    ws.onerror = function(){
-      //reconnect after some time
-      setTimeout(connect, 1000);
-    }
-  }
-
-  return {
-    connect: connect
-  };
-
-}());

server/static/js/main.js

@@ -1,5 +1,6 @@
 
 (function(){
+    'use strict';
 
     var crs = L.Util.extend({}, L.CRS.Simple, {
         //transformation: L.transformation(0.001, 0, -0.001, 0),
@@ -24,12 +25,18 @@
     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);
 
-    L.control.layers(layers, {}).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);

server/static/js/overlays/TravelnetOverlay.js

@@ -0,0 +1,22 @@
+var TravelnetOverlay = (function(){
+  'use strict';
+
+  var TravelnetIcon = L.icon({
+		iconUrl: 'pics/travelnet_inv.png',
+
+		iconSize:     [64, 64],
+		iconAnchor:   [32, 32],
+		popupAnchor:  [0, -32]
+	});
+
+  return L.LayerGroup.extend({
+    onAdd: function(map) {
+      console.log("TravelnetOverlay.onAdd");
+    },
+
+    onRemove: function(map) {
+      console.log("TravelnetOverlay.onRemove");
+    }
+  });
+
+}());