abstract icon

server/static/index.html

@@ -30,6 +30,7 @@
     <script src="js/WorldInfoDisplay.js"></script>
 
     <!-- overlays -->
+    <script src="js/overlays/AbstractIconOverlay.js"></script>
     <script src="js/overlays/TravelnetOverlay.js"></script>
     <script src="js/overlays/PlayerOverlay.js"></script>
 

server/static/js/overlays/AbstractIconOverlay.js

@@ -0,0 +1,91 @@
+'use strict';
+
+var AbstractIconOverlay = L.LayerGroup.extend({
+  initialize: function(wsChannel, layerMgr, type, icon) {
+    L.LayerGroup.prototype.initialize.call(this);
+
+    this.layerMgr = layerMgr;
+    this.wsChannel = wsChannel;
+    this.type = type;
+    this.icon = icon;
+
+    this.currentObjects = {};
+
+    this.onLayerChange = this.onLayerChange.bind(this);
+    this.onMapMove = debounce(this.onMapMove.bind(this), 50);
+  },
+
+  hashPos: function(x,y,z){
+    return x + "/" + y "/" + z;
+  },
+
+  onLayerChange: function(layer){
+    this.reDraw(true);
+  },
+
+  onMapMove: function(){
+    this.reDraw(false);
+  },
+
+  reDraw: function(full){
+    var self = this;
+
+    if (this._map.getZoom() < 10) {
+      this.clearLayers();
+      this.currentObjects = {};
+      return;
+    }
+
+    if (full){
+      this.clearLayers();
+      this.currentObjects = {};
+    }
+
+    var mapLayer = this.layerMgr.getCurrentLayer()
+    var min = this._map.getBounds().getSouthWest();
+    var max = this._map.getBounds().getNorthEast();
+
+    var y1 = parseInt(mapLayer.from/16);
+    var y2 = parseInt(mapLayer.to/16);
+    var x1 = parseInt(min.lng);
+    var x2 = parseInt(max.lng);
+    var z1 = parseInt(min.lat);
+    var z2 = parseInt(max.lat);
+
+    api.getMapObjects(
+      x1, y1, y1,
+      x2, y2, z2,
+      this.type)
+    .then(function(objects){
+      //TODO: remove non-existing markers, add new ones
+      if (!full){
+        self.clearLayers();
+      }
+
+      objects.forEach(function(obj){
+        var marker = L.marker([obj.z, obj.x], {icon: self.icon});
+        marker.bindPopup(self.getPopup(obj));
+        marker.addTo(self);
+
+        var hash = self.hashPos(obj.x, obj.y, obj.z);
+        self.currentObjects[hash] = marker;
+      });
+    })
+
+  },
+
+  onAdd: function(map) {
+    map.on("zoomend", this.onMapMove);
+    map.on("moveend", this.onMapMove);
+    this.layerMgr.addListener(this.onLayerChange);
+    this.reDraw(true)
+  },
+
+  onRemove: function(map) {
+    this.clearLayers();
+    map.off("zoomend", this.onMapMove);
+    map.off("moveend", this.onMapMove);
+    this.layerMgr.removeListener(this.onLayerChange);
+  }
+
+});

server/static/js/overlays/PlayerOverlay.js

@@ -35,7 +35,6 @@ var PlayerOverlay = L.LayerGroup.extend({
   },
 
   onMinetestUpdate: function(info){
-    //TODO incremental update
     var self = this;
 
     this.players.forEach(function(player){

server/static/js/overlays/TravelnetOverlay.js

@@ -8,89 +8,17 @@ var TravelnetIcon = L.icon({
   popupAnchor:  [0, -32]
 });
 
-var TravelnetOverlay = L.LayerGroup.extend({
+var TravelnetOverlay = L.AbstractIconOverlay.extend({
   initialize: function(wsChannel, layerMgr) {
-    L.LayerGroup.prototype.initialize.call(this);
+    L.AbstractIconOverlay.prototype.initialize.call(this, wsChannel, layerMgr, "travelnet", TravelnetIcon);
-
-    this.layerMgr = layerMgr;
-    this.wsChannel = wsChannel;
-
-    this.currentObjects = [];
-
-    this.onLayerChange = this.onLayerChange.bind(this);
-    this.onMapMove = debounce(this.onMapMove.bind(this), 50);
   },
 
-  onLayerChange: function(layer){
+  createPopup: function(travelnet){
-    this.reDraw(true);
+    return "<h4>" + travelnet.attributes.station_name + "</h4><hr>" +
-  },
+      "<b>X: </b> " + travelnet.x + "<br>" +
-
+      "<b>Y: </b> " + travelnet.y + "<br>" +
-  onMapMove: function(){
+      "<b>Z: </b> " + travelnet.z + "<br>" +
-    this.reDraw(false);
+      "<b>Network: </b> " + travelnet.attributes.station_network + "<br>" +
-  },
+      "<b>Owner: </b> " + travelnet.attributes.owner + "<br>";
-
-  reDraw: function(full){
-    var self = this;
-
-    if (this._map.getZoom() < 10) {
-      this.clearLayers();
-      this.currentObjects = [];
-      return;
-    }
-
-    if (full){
-      this.clearLayers();
-      this.currentObjects = [];
-    }
-
-    var mapLayer = this.layerMgr.getCurrentLayer()
-    var min = this._map.getBounds().getSouthWest();
-    var max = this._map.getBounds().getNorthEast();
-
-    var y1 = parseInt(mapLayer.from/16);
-    var y2 = parseInt(mapLayer.to/16);
-    var x1 = parseInt(min.lng);
-    var x2 = parseInt(max.lng);
-    var z1 = parseInt(min.lat);
-    var z2 = parseInt(max.lat);
-
-    //TODO: get coords
-    api.getMapObjects(
-      x1, y1, y1,
-      x2, y2, z2,
-      "travelnet")
-    .then(function(travelnets){
-      //TODO: remove non-existing markers, add new ones
-      if (!full){
-        self.clearLayers();
-      }
-
-      travelnets.forEach(function(travelnet){
-        var popup = "<h4>" + travelnet.attributes.station_name + "</h4><hr>" +
-          "<b>X: </b> " + travelnet.x + "<br>" +
-          "<b>Y: </b> " + travelnet.y + "<br>" +
-          "<b>Z: </b> " + travelnet.z + "<br>" +
-          "<b>Network: </b> " + travelnet.attributes.station_network + "<br>" +
-          "<b>Owner: </b> " + travelnet.attributes.owner + "<br>";
-
-        var marker = L.marker([travelnet.z, travelnet.x], {icon: TravelnetIcon});
-        marker.bindPopup(popup).addTo(self);
-      });
-    })
-
-  },
-
-  onAdd: function(map) {
-    map.on("zoomend", this.onMapMove);
-    map.on("moveend", this.onMapMove);
-    this.layerMgr.addListener(this.onLayerChange);
-    this.reDraw(true)
-  },
-
-  onRemove: function(map) {
-    this.clearLayers();
-    map.off("zoomend", this.onMapMove);
-    map.off("moveend", this.onMapMove);
-    this.layerMgr.removeListener(this.onLayerChange);
   }
 });