globals refactoring

static/js/LayerManager.js

@@ -0,0 +1,34 @@
+import RealtimeTileLayer from './map/RealtimeTileLayer.js';
+
+class LayerManager {
+
+  setup(layers){
+    this.layers = layers;
+    this.currentLayer = this.layers[0];
+  }
+
+  setLayerId(layerId){
+    var self = this;
+    this.layers.forEach(function(layer){
+      if (layer.id == layerId){
+        self.currentLayer = layer;
+        return;
+      }
+    });
+
+    if (layerId != this.currentLayer.id){
+      // layer not found
+      this.currentLayer = this.layers[0];
+    }
+  }
+
+  getLayerByY(y){
+    return this.layers.find(layer => (y >= (layer.from*16) && y <= (layer.to*16)));
+  }
+
+  getCurrentLayer(){
+    return this.currentLayer;
+  }
+}
+
+export default new LayerManager();

static/js/components/LayerSelector.js

@@ -0,0 +1,22 @@
+import LayerManager from '../LayerManager.js';
+
+function onchange(e){
+  const params = m.route.param();
+  params.layerId = e.target.value;
+
+  m.route.set("/map/:layerId/:zoom/:lon/:lat", params);
+}
+
+
+export default {
+  view: function(){
+
+    const layers = LayerManager.layers.map(layer => m(
+      "option",
+      { value: layer.id, selected: layer.id == LayerManager.getCurrentLayer().id },
+      layer.name
+    ))
+
+    return m("select", { class: "form-control", onchange: onchange },layers);
+  }
+};

static/js/components/Map.js

@@ -1,33 +1,36 @@
-import layerManager from '../map/LayerManager.js';
+import layerManager from '../LayerManager.js';
 import { createMap } from '../map/MapFactory.js';
 
+function setupMap(vnode){
+  const map = createMap(
+    vnode.dom,
+    layerManager.getCurrentLayer().id,
+    +vnode.attrs.zoom,
+    +vnode.attrs.lat,
+    +vnode.attrs.lon
+  );
+
+  vnode.state.map = map;
+
+  function updateHash(){
+    const center = map.getCenter();
+    const layerId = layerManager.getCurrentLayer().id;
+
+    m.route.set(`/map/${layerId}/${map.getZoom()}/` +
+      `${Math.floor(center.lng)}/${Math.floor(center.lat)}`);
+  }
+
+  map.on('zoomend', updateHash);
+  map.on('moveend', updateHash);
+}
+
 export default {
   view(){
     return m("div", { class: "full-screen" });
   },
 
   oncreate(vnode){
-
-    const map = createMap(
-      vnode.dom,
-      +vnode.attrs.layerId,
-      +vnode.attrs.zoom,
-      +vnode.attrs.lat,
-      +vnode.attrs.lon
-    );
-
-    vnode.state.map = map;
-
-    function updateHash(){
-      const center = map.getCenter();
-      const layerId = layerManager.getCurrentLayer().id;
-
-      m.route.set(`/map/${layerId}/${map.getZoom()}/${center.lng}/${center.lat}`);
-    }
-
-    map.on('zoomend', updateHash);
-    map.on('moveend', updateHash);
-    map.on('baselayerchange', updateHash);
+    setupMap(vnode);
   },
 
   onbeforeupdate(newVnode) {
@@ -36,13 +39,22 @@ export default {
 
     return newAattrs.layerId != layerManager.getCurrentLayer().id ||
       newAattrs.zoom != newVnode.state.map.getZoom() ||
-      Math.abs(newAattrs.lat - center.lat) > 0.1 ||
-      Math.abs(newAattrs.lat - center.lat) > 0.1;
+      Math.abs(newAattrs.lat - center.lat) > 2 ||
+      Math.abs(newAattrs.lat - center.lat) > 2;
   },
 
   onupdate(vnode){
-    layerManager.switchLayer(+vnode.attrs.layerId);
-    vnode.state.map.setView([+vnode.attrs.lat, +vnode.attrs.lon], +vnode.attrs.zoom);
+    if (vnode.attrs.layerId != layerManager.getCurrentLayer().id){
+      //layer changed, recreate map
+      vnode.state.map.remove();
+      layerManager.setLayerId(vnode.attrs.layerId);
+      setupMap(vnode);
+
+    } else {
+      //position/zoom change
+      vnode.state.map.setView([+vnode.attrs.lat, +vnode.attrs.lon], +vnode.attrs.zoom);
+
+    }
   },
 
   onremove(vnode){

static/js/components/SearchResult.js

@@ -1,4 +1,4 @@
-import layerMgr from '../map/LayerManager.js';
+import layerMgr from '../LayerManager.js';
 
 export default {
   view: function(vnode){

static/js/main.js

@@ -4,7 +4,7 @@ import routes from './routes.js';
 import wsChannel from './WebSocketChannel.js';
 import config from './config.js';
 import { hashCompat } from './compat.js';
-import layerManager from './map/LayerManager.js';
+import layerManager from './LayerManager.js';
 
 // hash route compat
 hashCompat();

static/js/map/LayerControl.js

@@ -1,20 +0,0 @@
-
-const Component = {
-  view: function(){
-    return m("select", {
-      class: "form-control"
-        },[
-          m("option", { value: "Ground" }, "Ground"),
-          m("option", { value: "Sky" }, "Sky")
-        ]
-    );
-  }
-};
-
-export default L.Control.extend({
-    onAdd: function() {
-      var div = L.DomUtil.create('div');
-      m.mount(div, Component);
-      return div;
-    }
-});

static/js/map/LayerManager.js

@@ -1,81 +0,0 @@
-import RealtimeTileLayer from './RealtimeTileLayer.js';
-
-class LayerManager {
-
-  setup(layers){
-    this.listeners = [];
-    this.layers = layers;
-    this.currentLayer = this.layers[0];
-  }
-
-  setupMap(wsChannel, map, currentLayerId){
-    this.map = map;
-    this.layerObjects = {};
-
-    var self = this;
-
-    //All layers
-    this.layers.forEach(function(layer){
-      var tileLayer = new RealtimeTileLayer(wsChannel, layer.id, map);
-      self.layerObjects[layer.name] = tileLayer;
-      if (layer.id == currentLayerId){
-        tileLayer.addTo(map);
-        self.currentLayer = layer;
-      }
-    });
-
-    map.on('baselayerchange', function (e) {
-        self.setLayerId(e.layer.layerId);
-    });
-  }
-
-  switchLayer(layerId){
-    var self = this;
-    Object.keys(this.layerObjects).forEach(function(key){
-      var layerObj = self.layerObjects[key];
-      if (self.map.hasLayer(layerObj)){
-        self.map.removeLayer(layerObj);
-      }
-    });
-
-    Object.keys(this.layerObjects).forEach(function(key){
-      var layerObj = self.layerObjects[key];
-      if (layerObj.layerId == layerId){
-        self.map.addLayer(layerObj);
-      }
-    });
-  }
-
-  setLayerId(layerId){
-    var self = this;
-    this.layers.forEach(function(layer){
-      if (layer.id == layerId){
-        self.currentLayer = layer;
-        self.listeners.forEach(function(listener){
-          listener(layer);
-        });
-        return;
-      }
-    });
-  }
-
-  getLayerByY(y){
-    return this.layers.find(layer => (y >= (layer.from*16) && y <= (layer.to*16)));
-  }
-
-  addListener(listener){
-    this.listeners.push(listener);
-  }
-
-  removeListener(listener){
-    this.listeners = this.listeners.filter(function(el){
-      return el != listener;
-    });
-  }
-
-  getCurrentLayer(){
-    return this.currentLayer;
-  }
-}
-
-export default new LayerManager();

static/js/map/MapFactory.js

@@ -2,11 +2,11 @@ import wsChannel from '../WebSocketChannel.js';
 import SimpleCRS from './SimpleCRS.js';
 import CoordinatesDisplay from './CoordinatesDisplay.js';
 import WorldInfoDisplay from './WorldInfoDisplay.js';
-import SearchControl from './SearchControl.js';
-import LayerControl from './LayerControl.js';
+import TopRightControl from './TopRightControl.js';
 import Overlaysetup from './Overlaysetup.js';
 import CustomOverlay from './CustomOverlay.js';
-import layerManager from './LayerManager.js';
+import RealtimeTileLayer from './RealtimeTileLayer.js';
+
 import config from '../config.js';
 
 
@@ -24,25 +24,20 @@ export function createMap(node, layerId, zoom, lat, lon){
 
   map.attributionControl.addAttribution('<a href="https://github.com/minetest-tools/mapserver">Minetest Mapserver</a>');
 
-  var overlays = {};
-
-  layerManager.setupMap(wsChannel, map, layerId);
+  var tileLayer = new RealtimeTileLayer(wsChannel, layerId, map);
+  tileLayer.addTo(map);
 
   //All overlays
-  Overlaysetup(cfg, map, overlays, wsChannel, layerManager);
+  var overlays = {};
+  Overlaysetup(cfg, map, overlays);
   CustomOverlay(map, overlays);
 
   new CoordinatesDisplay({ position: 'bottomleft' }).addTo(map);
   new WorldInfoDisplay(wsChannel, { position: 'bottomright' }).addTo(map);
-
-  if (cfg.enablesearch){
-    new SearchControl(wsChannel, { position: 'topright' }).addTo(map);
-  }
-
-  new LayerControl({ position: 'topright' }).addTo(map);
+  new TopRightControl({ position: 'topright' }).addTo(map);
 
   //layer control
-  L.control.layers(layerManager.layerObjects, overlays, { position: "topright" }).addTo(map);
+  L.control.layers({}, overlays, { position: "topright" }).addTo(map);
 
   return map;
 }

static/js/map/Overlaysetup.js

@@ -22,140 +22,140 @@ import BorderOverlay from './overlays/BorderOverlay.js';
 import TrainOverlay from './overlays/TrainOverlay.js';
 import TrainsignalOverlay from './overlays/TrainsignalOverlay.js';
 
-export default function(cfg, map, overlays, wsChannel, layerMgr){
+export default function(cfg, map, overlays, wsChannel){
 
   function isDefault(key){
     return cfg.defaultoverlays.indexOf(key) >= 0;
   }
 
   if (cfg.mapobjects.mapserver_player) {
-    overlays.Player = new PlayerOverlay(wsChannel, layerMgr);
+    overlays.Player = new PlayerOverlay();
     if (isDefault("mapserver_player")) {
       map.addLayer(overlays.Player);
     }
   }
 
   if (cfg.mapobjects.mapserver_poi) {
-    overlays.POI = new PoiOverlay(wsChannel, layerMgr);
+    overlays.POI = new PoiOverlay(wsChannel);
     if (isDefault("mapserver_poi")) {
       map.addLayer(overlays.POI);
     }
   }
 
   if (cfg.mapobjects.smartshop || cfg.mapobjects.fancyvend) {
-    overlays.Shop = new ShopOverlay(wsChannel, layerMgr);
+    overlays.Shop = new ShopOverlay();
     if (isDefault("smartshop") || isDefault("fancyvend")) {
       map.addLayer(overlays.Shop);
     }
   }
 
   if (cfg.mapobjects.mapserver_label) {
-    overlays.Label = new LabelOverlay(wsChannel, layerMgr);
+    overlays.Label = new LabelOverlay();
     if (isDefault("mapserver_label")) {
       map.addLayer(overlays.Label);
     }
   }
 
   if (cfg.mapobjects.mapserver_trainline) {
-    overlays.Trainlines = new TrainlineOverlay(wsChannel, layerMgr);
+    overlays.Trainlines = new TrainlineOverlay();
     if (isDefault("mapserver_trainline")) {
       map.addLayer(overlays.Trainlines);
     }
   }
 
   if (cfg.mapobjects.mapserver_border) {
-    overlays.Border = new BorderOverlay(wsChannel, layerMgr);
+    overlays.Border = new BorderOverlay();
     if (isDefault("mapserver_border")) {
       map.addLayer(overlays.Border);
     }
   }
 
   if (cfg.mapobjects.travelnet) {
-    overlays.Travelnet = new TravelnetOverlay(wsChannel, layerMgr);
+    overlays.Travelnet = new TravelnetOverlay();
     if (isDefault("travelnet")) {
       map.addLayer(overlays.Travelnet);
     }
   }
 
   if (cfg.mapobjects.bones) {
-    overlays.Bones = new BonesOverlay(wsChannel, layerMgr);
+    overlays.Bones = new BonesOverlay();
     if (isDefault("bones")) {
       map.addLayer(overlays.Bones);
     }
   }
 
   if (cfg.mapobjects.digilines) {
-    overlays["Digilines LCD"] = new LcdOverlay(wsChannel, layerMgr);
+    overlays["Digilines LCD"] = new LcdOverlay();
     if (isDefault("digilines")) {
       map.addLayer(overlays["Digilines LCD"]);
     }
   }
 
   if (cfg.mapobjects.digiterms) {
-    overlays.Digiterms = new DigitermOverlay(wsChannel, layerMgr);
+    overlays.Digiterms = new DigitermOverlay();
     if (isDefault("digiterms")) {
       map.addLayer(overlays.Digiterms);
     }
   }
 
   if (cfg.mapobjects.luacontroller) {
-    overlays["Lua Controller"] = new LuacontrollerOverlay(wsChannel, layerMgr);
+    overlays["Lua Controller"] = new LuacontrollerOverlay();
     if (isDefault("luacontroller")) {
       map.addLayer(overlays["Lua Controller"]);
     }
   }
 
   if (cfg.mapobjects.technic_anchor) {
-    overlays["Technic Anchor"] = new TechnicAnchorOverlay(wsChannel, layerMgr);
+    overlays["Technic Anchor"] = new TechnicAnchorOverlay();
     if (isDefault("technic_anchor")) {
       map.addLayer(overlays["Technic Anchor"]);
     }
   }
 
   if (cfg.mapobjects.technic_quarry) {
-    overlays["Technic Quarry"] = new TechnicQuarryOverlay(wsChannel, layerMgr);
+    overlays["Technic Quarry"] = new TechnicQuarryOverlay();
     if (isDefault("technic_quarry")) {
       map.addLayer(overlays["Technic Quarry"]);
     }
   }
 
   if (cfg.mapobjects.technic_switch) {
-    overlays["Technic Switching station"] = new TechnicSwitchOverlay(wsChannel, layerMgr);
+    overlays["Technic Switching station"] = new TechnicSwitchOverlay();
     if (isDefault("technic_switch")) {
       map.addLayer(overlays["Technic Switching station"]);
     }
   }
 
   if (cfg.mapobjects.protector) {
-    overlays.Protector = new ProtectorOverlay(wsChannel, layerMgr);
+    overlays.Protector = new ProtectorOverlay();
     if (isDefault("protector")) {
       map.addLayer(overlays.Protector);
     }
   }
 
   if (cfg.mapobjects.xpprotector) {
-    overlays["XP Protector"] = new XPProtectorOverlay(wsChannel, layerMgr);
+    overlays["XP Protector"] = new XPProtectorOverlay();
     if (isDefault("xpprotector")) {
       map.addLayer(overlays["XP Protector"]);
     }
   }
 
   if (cfg.mapobjects.privprotector) {
-    overlays["Priv Protector"] = new PrivProtectorOverlay(wsChannel, layerMgr);
+    overlays["Priv Protector"] = new PrivProtectorOverlay();
     if (isDefault("privprotector")) {
       map.addLayer(overlays["Priv Protector"]);
     }
   }
 
   if (cfg.mapobjects.mission) {
-    overlays.Missions = new MissionOverlay(wsChannel, layerMgr);
+    overlays.Missions = new MissionOverlay();
     if (isDefault("mission")) {
       map.addLayer(overlays.Missions);
     }
   }
 
   if (cfg.mapobjects.train) {
-    overlays.Trains = new TrainOverlay(wsChannel, layerMgr);
+    overlays.Trains = new TrainOverlay();
 
     if (isDefault("train")) {
       map.addLayer(overlays.Trains);
@@ -163,7 +163,7 @@ export default function(cfg, map, overlays, wsChannel, layerMgr){
   }
 
   if (cfg.mapobjects.trainsignal) {
-    overlays.Trainsignals = new TrainsignalOverlay(wsChannel, layerMgr);
+    overlays.Trainsignals = new TrainsignalOverlay();
 
     if (isDefault("trainsignal")) {
       map.addLayer(overlays.Trainsignals);
@@ -171,21 +171,21 @@ export default function(cfg, map, overlays, wsChannel, layerMgr){
   }
 
   if (cfg.mapobjects.minecart) {
-    overlays.Minecart = new MinecartOverlay(wsChannel, layerMgr);
+    overlays.Minecart = new MinecartOverlay();
     if (isDefault("minecart")) {
       map.addLayer(overlays.Minecart);
     }
   }
 
   if (cfg.mapobjects.atm) {
-    overlays.ATM = new ATMOverlay(wsChannel, layerMgr);
+    overlays.ATM = new ATMOverlay();
     if (isDefault("atm")) {
       map.addLayer(overlays.ATM);
     }
   }
 
   if (cfg.mapobjects.locator) {
-    overlays.Locator = new LocatorOverlay(wsChannel, layerMgr);
+    overlays.Locator = new LocatorOverlay();
     if (isDefault("locator")) {
       map.addLayer(overlays.Locator);
     }

static/js/map/SearchControl.js

@@ -1,13 +0,0 @@
-import SearchInput from '../components/SearchInput.js';
-
-export default L.Control.extend({
-    initialize: function(wsChannel, opts) {
-        L.Control.prototype.initialize.call(this, opts);
-    },
-
-    onAdd: function() {
-      var div = L.DomUtil.create('div');
-      m.mount(div, SearchInput);
-      return div;
-    }
-});

static/js/map/TopRightControl.js

@@ -0,0 +1,27 @@
+import SearchInput from '../components/SearchInput.js';
+import LayerSelector from '../components/LayerSelector.js';
+import config from '../config.js';
+
+const Component = {
+  view: function(){
+    const cfg = config.get();
+
+    return m("div", [
+      cfg.enablesearch ? m(SearchInput) : null,
+      m(LayerSelector)
+    ])
+  }
+}
+
+
+export default L.Control.extend({
+    initialize: function(wsChannel, opts) {
+        L.Control.prototype.initialize.call(this, opts);
+    },
+
+    onAdd: function() {
+      var div = L.DomUtil.create('div');
+      m.mount(div, Component);
+      return div;
+    }
+});

static/js/map/overlays/ATMOverlay.js

@@ -1,8 +1,8 @@
 import AbstractIconOverlay from './AbstractIconOverlay.js';
 
 export default AbstractIconOverlay.extend({
-  initialize: function(wsChannel, layerMgr) {
-    AbstractIconOverlay.prototype.initialize.call(this, wsChannel, layerMgr, "atm");
+  initialize: function() {
+    AbstractIconOverlay.prototype.initialize.call(this, "atm");
   },
 
   getMaxDisplayedZoom: function(){

static/js/map/overlays/AbstractGeoJsonOverlay.js

@@ -1,21 +1,17 @@
 import debounce from '../../util/debounce.js';
+import wsChannel from '../../WebSocketChannel.js';
+import layerMgr from '../../LayerManager.js';
+
 import { getMapObjects } from '../../api.js';
 
 export default L.LayerGroup.extend({
-  initialize: function(wsChannel, layerMgr, type) {
+  initialize: function(type) {
     L.LayerGroup.prototype.initialize.call(this);
-
-    this.layerMgr = layerMgr;
-    this.wsChannel = wsChannel;
     this.type = type;
 
-    this.onLayerChange = this.onLayerChange.bind(this);
     this.onMapMove = debounce(this.onMapMove.bind(this), 50);
   },
 
-  onLayerChange: function(){
-    this.reDraw();
-  },
 
   onMapMove: function(){
     this.reDraw();
@@ -61,7 +57,7 @@ export default L.LayerGroup.extend({
       return;
     }
 
-    var mapLayer = this.layerMgr.getCurrentLayer();
+    var mapLayer = layerMgr.getCurrentLayer();
     var min = this._map.getBounds().getSouthWest();
     var max = this._map.getBounds().getNorthEast();
 
@@ -90,7 +86,6 @@ export default L.LayerGroup.extend({
     this.map = map;
     map.on("zoomend", this.onMapMove);
     map.on("moveend", this.onMapMove);
-    this.layerMgr.addListener(this.onLayerChange);
     this.reDraw(true);
   },
 
@@ -98,7 +93,6 @@ export default L.LayerGroup.extend({
     this.clearLayers();
     map.off("zoomend", this.onMapMove);
     map.off("moveend", this.onMapMove);
-    this.layerMgr.removeListener(this.onLayerChange);
   }
 
 });

static/js/map/overlays/AbstractIconOverlay.js

@@ -1,12 +1,13 @@
 import debounce from '../../util/debounce.js';
+import wsChannel from '../../WebSocketChannel.js';
+import layerMgr from '../../LayerManager.js';
+
 import { getMapObjects } from '../../api.js';
 
 export default L.LayerGroup.extend({
-  initialize: function(wsChannel, layerMgr, type, icon) {
+  initialize: function(type, icon) {
     L.LayerGroup.prototype.initialize.call(this);
 
-    this.layerMgr = layerMgr;
-    this.wsChannel = wsChannel;
     this.type = type;
     this.icon = icon;
 
@@ -66,7 +67,7 @@ export default L.LayerGroup.extend({
       this.currentObjects = {};
     }
 
-    var mapLayer = this.layerMgr.getCurrentLayer();
+    var mapLayer = layerMgr.getCurrentLayer();
     var min = this.map.getBounds().getSouthWest();
     var max = this.map.getBounds().getNorthEast();
 
@@ -134,8 +135,7 @@ export default L.LayerGroup.extend({
     this.map = map;
     map.on("zoomend", this.onMapMove);
     map.on("moveend", this.onMapMove);
-    this.layerMgr.addListener(this.onLayerChange);
-    this.wsChannel.addListener("mapobject-created", this.onMapObjectUpdated);
+    wsChannel.addListener("mapobject-created", this.onMapObjectUpdated);
     this.reDraw(true);
   },
 
@@ -143,8 +143,7 @@ export default L.LayerGroup.extend({
     this.clearLayers();
     map.off("zoomend", this.onMapMove);
     map.off("moveend", this.onMapMove);
-    this.layerMgr.removeListener(this.onLayerChange);
-    this.wsChannel.removeListener("mapobject-created", this.onMapObjectUpdated);
+    wsChannel.removeListener("mapobject-created", this.onMapObjectUpdated);
   }
 
 });

static/js/map/overlays/BonesOverlay.js

@@ -9,8 +9,8 @@ var BonesIcon = L.icon({
 });
 
 export default AbstractIconOverlay.extend({
-  initialize: function(wsChannel, layerMgr) {
-    AbstractIconOverlay.prototype.initialize.call(this, wsChannel, layerMgr, "bones", BonesIcon);
+  initialize: function() {
+    AbstractIconOverlay.prototype.initialize.call(this, "bones", BonesIcon);
   },
 
   createPopup: function(bones){

static/js/map/overlays/BorderOverlay.js

@@ -1,8 +1,8 @@
 import AbstractGeoJsonOverlay from './AbstractGeoJsonOverlay.js';
 
 export default AbstractGeoJsonOverlay.extend({
-  initialize: function(wsChannel, layerMgr) {
-    AbstractGeoJsonOverlay.prototype.initialize.call(this, wsChannel, layerMgr, "border");
+  initialize: function() {
+    AbstractGeoJsonOverlay.prototype.initialize.call(this, "border");
   },
 
   getMaxDisplayedZoom: function(){

static/js/map/overlays/DigitermOverlay.js

@@ -9,8 +9,8 @@ var DigitermIcon = L.icon({
 });
 
 export default AbstractIconOverlay.extend({
-  initialize: function(wsChannel, layerMgr) {
-    AbstractIconOverlay.prototype.initialize.call(this, wsChannel, layerMgr, "digiterm", DigitermIcon);
+  initialize: function() {
+    AbstractIconOverlay.prototype.initialize.call(this, "digiterm", DigitermIcon);
   },
 
   createPopup: function(lcd){

static/js/map/overlays/LabelOverlay.js

@@ -1,8 +1,8 @@
 import AbstractIconOverlay from './AbstractIconOverlay.js';
 
 export default AbstractIconOverlay.extend({
-  initialize: function(wsChannel, layerMgr) {
-    AbstractIconOverlay.prototype.initialize.call(this, wsChannel, layerMgr, "label");
+  initialize: function() {
+    AbstractIconOverlay.prototype.initialize.call(this, "label");
   },
 
   getMaxDisplayedZoom: function(){

static/js/map/overlays/LcdOverlay.js

@@ -9,8 +9,8 @@ var LcdIcon = L.icon({
 });
 
 export default AbstractIconOverlay.extend({
-  initialize: function(wsChannel, layerMgr) {
-    AbstractIconOverlay.prototype.initialize.call(this, wsChannel, layerMgr, "digilinelcd", LcdIcon);
+  initialize: function() {
+    AbstractIconOverlay.prototype.initialize.call(this, "digilinelcd", LcdIcon);
   },
 
   createPopup: function(lcd){

static/js/map/overlays/LocatorOverlay.js

@@ -1,8 +1,8 @@
 import AbstractIconOverlay from './AbstractIconOverlay.js';
 
 export default AbstractIconOverlay.extend({
-  initialize: function(wsChannel, layerMgr) {
-    AbstractIconOverlay.prototype.initialize.call(this, wsChannel, layerMgr, "locator");
+  initialize: function() {
+    AbstractIconOverlay.prototype.initialize.call(this, "locator");
   },
 
   getMaxDisplayedZoom: function(){

static/js/map/overlays/LuacontrollerOverlay.js

@@ -17,8 +17,8 @@ var LuacontrollerBurntIcon = L.icon({
 });
 
 export default AbstractIconOverlay.extend({
-  initialize: function(wsChannel, layerMgr) {
-    AbstractIconOverlay.prototype.initialize.call(this, wsChannel, layerMgr, "luacontroller");
+  initialize: function() {
+    AbstractIconOverlay.prototype.initialize.call(this, "luacontroller");
   },
 
   getIcon: function(ctrl){

static/js/map/overlays/MinecartOverlay.js

@@ -1,21 +1,22 @@
+import wsChannel from '../../WebSocketChannel.js';
+import layerMgr from '../../LayerManager.js';
+
+let minecarts = [];
+
+//update minecarts all the time
+wsChannel.addListener("minetest-info", function(info){
+  minecarts = info.minecarts || [];
+});
+
 
 export default L.LayerGroup.extend({
-  initialize: function(wsChannel, layerMgr) {
+  initialize: function() {
     L.LayerGroup.prototype.initialize.call(this);
 
-    this.layerMgr = layerMgr;
-    this.wsChannel = wsChannel;
-
     this.currentObjects = {}; // name => marker
-    this.minecarts = [];
 
     this.reDraw = this.reDraw.bind(this);
     this.onMinetestUpdate = this.onMinetestUpdate.bind(this);
-
-    //update players all the time
-    this.wsChannel.addListener("minetest-info", function(info){
-      this.minecarts = info.minecarts || [];
-    }.bind(this));
   },
 
   createMarker: function(cart){
@@ -38,7 +39,7 @@ export default L.LayerGroup.extend({
   },
 
   isCartInCurrentLayer: function(cart){
-    var mapLayer = this.layerMgr.getCurrentLayer();
+    var mapLayer = layerMgr.getCurrentLayer();
 
     return (cart.pos.y >= (mapLayer.from*16) && cart.pos.y <= (mapLayer.to*16));
   },
@@ -47,7 +48,7 @@ export default L.LayerGroup.extend({
   onMinetestUpdate: function(/*info*/){
     var self = this;
 
-    this.minecarts.forEach(function(cart){
+    minecarts.forEach(function(cart){
       var isInLayer = self.isCartInCurrentLayer(cart);
 
       if (!isInLayer){
@@ -76,7 +77,7 @@ export default L.LayerGroup.extend({
     });
 
     Object.keys(self.currentObjects).forEach(function(existingId){
-      var cartIsActive = self.minecarts.find(function(t){
+      var cartIsActive = minecarts.find(function(t){
         return t.id == existingId;
       });
 
@@ -92,9 +93,7 @@ export default L.LayerGroup.extend({
     this.currentObjects = {};
     this.clearLayers();
 
-    var mapLayer = this.layerMgr.getCurrentLayer();
-
-    this.minecarts.forEach(function(cart){
+    minecarts.forEach(function(cart){
       if (!self.isCartInCurrentLayer(cart)){
         //not in current layer
         return;
@@ -108,14 +107,12 @@ export default L.LayerGroup.extend({
   },
 
   onAdd: function(/*map*/) {
-    this.layerMgr.addListener(this.reDraw);
-    this.wsChannel.addListener("minetest-info", this.onMinetestUpdate);
+    wsChannel.addListener("minetest-info", this.onMinetestUpdate);
     this.reDraw();
   },
 
   onRemove: function(/*map*/) {
     this.clearLayers();
-    this.layerMgr.removeListener(this.reDraw);
-    this.wsChannel.removeListener("minetest-info", this.onMinetestUpdate);
+    wsChannel.removeListener("minetest-info", this.onMinetestUpdate);
   }
 });

static/js/map/overlays/MissionOverlay.js

@@ -9,8 +9,8 @@ var MissionIcon = L.icon({
 });
 
 export default AbstractIconOverlay.extend({
-  initialize: function(wsChannel, layerMgr) {
-    AbstractIconOverlay.prototype.initialize.call(this, wsChannel, layerMgr, "mission", MissionIcon);
+  initialize: function() {
+    AbstractIconOverlay.prototype.initialize.call(this, "mission", MissionIcon);
   },
 
   createPopup: function(mission){

static/js/map/overlays/PlayerOverlay.js

@@ -1,3 +1,12 @@
+import wsChannel from '../../WebSocketChannel.js';
+import layerMgr from '../../LayerManager.js';
+
+let players = [];
+
+//update players all the time
+wsChannel.addListener("minetest-info", function(info){
+  players = info.players || [];
+});
 
 var PlayerIcon = L.icon({
   iconUrl: 'pics/sam.png',
@@ -8,22 +17,13 @@ var PlayerIcon = L.icon({
 });
 
 export default L.LayerGroup.extend({
-  initialize: function(wsChannel, layerMgr) {
+  initialize: function() {
     L.LayerGroup.prototype.initialize.call(this);
 
-    this.layerMgr = layerMgr;
-    this.wsChannel = wsChannel;
-
     this.currentObjects = {}; // name => marker
-    this.players = [];
 
     this.reDraw = this.reDraw.bind(this);
     this.onMinetestUpdate = this.onMinetestUpdate.bind(this);
-
-    //update players all the time
-    this.wsChannel.addListener("minetest-info", function(info){
-      this.players = info.players || [];
-    }.bind(this));
   },
 
   createPopup: function(player){
@@ -62,14 +62,14 @@ export default L.LayerGroup.extend({
   },
 
   isPlayerInCurrentLayer: function(player){
-    var mapLayer = this.layerMgr.getCurrentLayer();
+    var mapLayer = layerMgr.getCurrentLayer();
 
     return (player.pos.y >= (mapLayer.from*16) && player.pos.y <= (mapLayer.to*16));
   },
 
   onMinetestUpdate: function(/*info*/){
 
-    this.players.forEach(player => {
+    players.forEach(player => {
       var isInLayer = this.isPlayerInCurrentLayer(player);
 
       if (!isInLayer){
@@ -99,7 +99,7 @@ export default L.LayerGroup.extend({
     });
 
     Object.keys(this.currentObjects).forEach(existingName => {
-      var playerIsActive = this.players.find(function(p){
+      var playerIsActive = players.find(function(p){
         return p.name == existingName;
       });
 
@@ -115,9 +115,7 @@ export default L.LayerGroup.extend({
     this.currentObjects = {};
     this.clearLayers();
 
-    var mapLayer = this.layerMgr.getCurrentLayer();
-
-    this.players.forEach(player => {
+    players.forEach(player => {
       if (!this.isPlayerInCurrentLayer(player)){
         //not in current layer
         return;
@@ -131,14 +129,12 @@ export default L.LayerGroup.extend({
   },
 
   onAdd: function(/*map*/) {
-    this.layerMgr.addListener(this.reDraw);
-    this.wsChannel.addListener("minetest-info", this.onMinetestUpdate);
+    wsChannel.addListener("minetest-info", this.onMinetestUpdate);
     this.reDraw();
   },
 
   onRemove: function(/*map*/) {
     this.clearLayers();
-    this.layerMgr.removeListener(this.reDraw);
-    this.wsChannel.removeListener("minetest-info", this.onMinetestUpdate);
+    wsChannel.removeListener("minetest-info", this.onMinetestUpdate);
   }
 });

static/js/map/overlays/PoiOverlay.js

@@ -1,8 +1,8 @@
 import AbstractIconOverlay from './AbstractIconOverlay.js';
 
 export default AbstractIconOverlay.extend({
-  initialize: function(wsChannel, layerMgr) {
-    AbstractIconOverlay.prototype.initialize.call(this, wsChannel, layerMgr, "poi");
+  initialize: function() {
+    AbstractIconOverlay.prototype.initialize.call(this, "poi");
   },
 
   getIcon: function(obj){

static/js/map/overlays/PrivProtectorOverlay.js

@@ -1,8 +1,8 @@
 import AbstractGeoJsonOverlay from './AbstractGeoJsonOverlay.js';
 
 export default AbstractGeoJsonOverlay.extend({
-  initialize: function(wsChannel, layerMgr) {
-    AbstractGeoJsonOverlay.prototype.initialize.call(this, wsChannel, layerMgr, "privprotector");
+  initialize: function() {
+    AbstractGeoJsonOverlay.prototype.initialize.call(this, "privprotector");
   },
 
   createFeature: function(protector){

static/js/map/overlays/ProtectorOverlay.js

@@ -1,8 +1,8 @@
 import AbstractGeoJsonOverlay from './AbstractGeoJsonOverlay.js';
 
 export default AbstractGeoJsonOverlay.extend({
-  initialize: function(wsChannel, layerMgr) {
-    AbstractGeoJsonOverlay.prototype.initialize.call(this, wsChannel, layerMgr, "protector");
+  initialize: function() {
+    AbstractGeoJsonOverlay.prototype.initialize.call(this, "protector");
   },
 
   getMaxDisplayedZoom: function(){

static/js/map/overlays/ShopOverlay.js

@@ -16,8 +16,8 @@ var ShopEmptyIcon = L.icon({
 
 
 export default AbstractIconOverlay.extend({
-  initialize: function(wsChannel, layerMgr) {
-    AbstractIconOverlay.prototype.initialize.call(this, wsChannel, layerMgr, "shop");
+  initialize: function() {
+    AbstractIconOverlay.prototype.initialize.call(this, "shop");
   },
 
   getMaxDisplayedZoom: function(){

static/js/map/overlays/TechnicAnchorOverlay.js

@@ -9,8 +9,8 @@ var TechnicAnchorIcon = L.icon({
 });
 
 export default AbstractIconOverlay.extend({
-  initialize: function(wsChannel, layerMgr) {
-    AbstractIconOverlay.prototype.initialize.call(this, wsChannel, layerMgr, "technicanchor", TechnicAnchorIcon);
+  initialize: function() {
+    AbstractIconOverlay.prototype.initialize.call(this, "technicanchor", TechnicAnchorIcon);
   },
 
   createPopup: function(lcd){

static/js/map/overlays/TechnicQuarryOverlay.js

@@ -9,8 +9,8 @@ var TechnicQuarryIcon = L.icon({
 });
 
 export default AbstractIconOverlay.extend({
-  initialize: function(wsChannel, layerMgr) {
-    AbstractIconOverlay.prototype.initialize.call(this, wsChannel, layerMgr, "technicquarry", TechnicQuarryIcon);
+  initialize: function() {
+    AbstractIconOverlay.prototype.initialize.call(this, "technicquarry", TechnicQuarryIcon);
   },
 
   createPopup: function(quarry){

static/js/map/overlays/TechnicSwitchOverlay.js

@@ -9,8 +9,8 @@ var TechnicSwitchIcon = L.icon({
 });
 
 export default AbstractIconOverlay.extend({
-  initialize: function(wsChannel, layerMgr) {
-    AbstractIconOverlay.prototype.initialize.call(this, wsChannel, layerMgr, "technicswitch", TechnicSwitchIcon);
+  initialize: function() {
+    AbstractIconOverlay.prototype.initialize.call(this, "technicswitch", TechnicSwitchIcon);
   },
 
   createPopup: function(sw){

static/js/map/overlays/TrainOverlay.js

@@ -1,3 +1,5 @@
+import wsChannel from '../../WebSocketChannel.js';
+import layerMgr from '../../LayerManager.js';
 
 function getTrainImageUrlForType(type){
   switch(type){
@@ -29,23 +31,20 @@ function getTrainImageUrlForType(type){
   }
 }
 
+let trains = [];
+
+//update trains all the time
+wsChannel.addListener("minetest-info", function(info){
+  trains = info.trains || [];
+});
+
 export default L.LayerGroup.extend({
-  initialize: function(wsChannel, layerMgr) {
+  initialize: function() {
     L.LayerGroup.prototype.initialize.call(this);
 
-    this.layerMgr = layerMgr;
-    this.wsChannel = wsChannel;
-
     this.currentObjects = {}; // name => marker
-    this.trains = [];
 
     this.reDraw = this.reDraw.bind(this);
-    this.onMinetestUpdate = this.onMinetestUpdate.bind(this);
-
-    //update players all the time
-    this.wsChannel.addListener("minetest-info", function(info){
-      this.trains = info.trains || [];
-    }.bind(this));
   },
 
   createPopup: function(train){
@@ -100,7 +99,7 @@ export default L.LayerGroup.extend({
   },
 
   isTrainInCurrentLayer: function(train){
-    var mapLayer = this.layerMgr.getCurrentLayer();
+    var mapLayer = layerMgr.getCurrentLayer();
 
     return (train.pos.y >= (mapLayer.from*16) && train.pos.y <= (mapLayer.to*16));
   },
@@ -114,7 +113,7 @@ export default L.LayerGroup.extend({
       return;
     }
 
-    this.trains.forEach(train => {
+    trains.forEach(train => {
       var isInLayer = this.isTrainInCurrentLayer(train);
 
       if (!isInLayer){
@@ -144,7 +143,7 @@ export default L.LayerGroup.extend({
     });
 
     Object.keys(this.currentObjects).forEach(existingId => {
-      var trainIsActive = this.trains.find(function(t){
+      var trainIsActive = trains.find(function(t){
         return t.id == existingId;
       });
 
@@ -164,9 +163,9 @@ export default L.LayerGroup.extend({
       return;
     }
 
-    var mapLayer = this.layerMgr.getCurrentLayer();
+    var mapLayer = layerMgr.getCurrentLayer();
 
-    this.trains.forEach(train => {
+    trains.forEach(train => {
       if (!this.isTrainInCurrentLayer(train)){
         //not in current layer
         return;
@@ -181,14 +180,12 @@ export default L.LayerGroup.extend({
 
   onAdd: function(map) {
     this.map = map;
-    this.layerMgr.addListener(() => this.reDraw());
-    this.wsChannel.addListener("minetest-info", () => this.onMinetestUpdate());
+    wsChannel.addListener("minetest-info", () => this.onMinetestUpdate());
     this.reDraw();
   },
 
   onRemove: function(/*map*/) {
     this.clearLayers();
-    this.layerMgr.removeListener(() => this.reDraw());
-    this.wsChannel.removeListener("minetest-info", () => this.onMinetestUpdate());
+    wsChannel.removeListener("minetest-info", () => this.onMinetestUpdate());
   }
 });

static/js/map/overlays/TrainlineOverlay.js

@@ -1,8 +1,8 @@
 import AbstractGeoJsonOverlay from './AbstractGeoJsonOverlay.js';
 
 export default AbstractGeoJsonOverlay.extend({
-  initialize: function(wsChannel, layerMgr) {
-    AbstractGeoJsonOverlay.prototype.initialize.call(this, wsChannel, layerMgr, "train");
+  initialize: function() {
+    AbstractGeoJsonOverlay.prototype.initialize.call(this, "train");
   },
 
   createGeoJson: function(objects){

static/js/map/overlays/TrainsignalOverlay.js

@@ -1,3 +1,5 @@
+import wsChannel from '../../WebSocketChannel.js';
+import layerMgr from '../../LayerManager.js';
 
 var IconOn = L.icon({
   iconUrl: "pics/advtrains/advtrains_signal_on.png",
@@ -13,25 +15,18 @@ var IconOff = L.icon({
   popupAnchor:  [0, -16]
 });
 
+let signals = [];
 
+//update signals all the time
+wsChannel.addListener("minetest-info", function(info){
+  signals = info.signals || [];
+});
 
 export default L.LayerGroup.extend({
-  initialize: function(wsChannel, layerMgr) {
+  initialize: function() {
     L.LayerGroup.prototype.initialize.call(this);
 
-    this.layerMgr = layerMgr;
-    this.wsChannel = wsChannel;
-
     this.currentObjects = {}; // name => marker
-    this.signals = [];
-
-    this.reDraw = this.reDraw.bind(this);
-    this.onMinetestUpdate = this.onMinetestUpdate.bind(this);
-
-    //update players all the time
-    this.wsChannel.addListener("minetest-info", function(info){
-      this.signals = info.signals || [];
-    }.bind(this));
   },
 
   createPopup: function(signal){
@@ -61,7 +56,7 @@ export default L.LayerGroup.extend({
   },
 
   isSignalInCurrentLayer: function(signal){
-    var mapLayer = this.layerMgr.getCurrentLayer();
+    var mapLayer = layerMgr.getCurrentLayer();
 
     return (signal.pos.y >= (mapLayer.from*16) && signal.pos.y <= (mapLayer.to*16));
   },
@@ -127,7 +122,7 @@ export default L.LayerGroup.extend({
       return;
     }
 
-    var mapLayer = this.layerMgr.getCurrentLayer();
+    var mapLayer = layerMgr.getCurrentLayer();
 
     this.signals.forEach(signal => {
       if (!this.isSignalInCurrentLayer(signal)){
@@ -145,14 +140,12 @@ export default L.LayerGroup.extend({
 
   onAdd: function(map) {
     this.map = map;
-    this.layerMgr.addListener(() => this.reDraw());
-    this.wsChannel.addListener("minetest-info", () => this.onMinetestUpdate());
+    wsChannel.addListener("minetest-info", () => this.onMinetestUpdate());
     this.reDraw();
   },
 
   onRemove: function(/*map*/) {
     this.clearLayers();
-    this.layerMgr.removeListener(() => this.reDraw());
-    this.wsChannel.removeListener("minetest-info", () => this.onMinetestUpdate());
+    wsChannel.removeListener("minetest-info", () => this.onMinetestUpdate());
   }
 });

static/js/map/overlays/TravelnetOverlay.js

@@ -9,8 +9,8 @@ var TravelnetIcon = L.icon({
 });
 
 export default AbstractIconOverlay.extend({
-  initialize: function(wsChannel, layerMgr) {
-    AbstractIconOverlay.prototype.initialize.call(this, wsChannel, layerMgr, "travelnet", TravelnetIcon);
+  initialize: function() {
+    AbstractIconOverlay.prototype.initialize.call(this, "travelnet", TravelnetIcon);
   },
 
   createPopup: function(travelnet){

static/js/map/overlays/XPProtectorOverlay.js

@@ -1,8 +1,8 @@
 import AbstractGeoJsonOverlay from './AbstractGeoJsonOverlay.js';
 
 export default AbstractGeoJsonOverlay.extend({
-  initialize: function(wsChannel, layerMgr) {
-    AbstractGeoJsonOverlay.prototype.initialize.call(this, wsChannel, layerMgr, "xpprotector");
+  initialize: function() {
+    AbstractGeoJsonOverlay.prototype.initialize.call(this, "xpprotector");
   },
 
   createFeature: function(protector){