diff --git a/server/static/index.html b/server/static/index.html index 71f0da9..ae60800 100644 --- a/server/static/index.html +++ b/server/static/index.html @@ -30,6 +30,7 @@ + diff --git a/server/static/js/overlays/AbstractIconOverlay.js b/server/static/js/overlays/AbstractIconOverlay.js new file mode 100644 index 0000000..78a10b6 --- /dev/null +++ b/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); + } + +}); diff --git a/server/static/js/overlays/PlayerOverlay.js b/server/static/js/overlays/PlayerOverlay.js index 3850099..c190d4b 100644 --- a/server/static/js/overlays/PlayerOverlay.js +++ b/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){ diff --git a/server/static/js/overlays/TravelnetOverlay.js b/server/static/js/overlays/TravelnetOverlay.js index 1b3cf30..c789626 100644 --- a/server/static/js/overlays/TravelnetOverlay.js +++ b/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); - - this.layerMgr = layerMgr; - this.wsChannel = wsChannel; - - this.currentObjects = []; - - this.onLayerChange = this.onLayerChange.bind(this); - this.onMapMove = debounce(this.onMapMove.bind(this), 50); + L.AbstractIconOverlay.prototype.initialize.call(this, wsChannel, layerMgr, "travelnet", TravelnetIcon); }, - 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); - - //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 = "

" + travelnet.attributes.station_name + "


" + - "X: " + travelnet.x + "
" + - "Y: " + travelnet.y + "
" + - "Z: " + travelnet.z + "
" + - "Network: " + travelnet.attributes.station_network + "
" + - "Owner: " + travelnet.attributes.owner + "
"; - - 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); + createPopup: function(travelnet){ + return "

" + travelnet.attributes.station_name + "


" + + "X: " + travelnet.x + "
" + + "Y: " + travelnet.y + "
" + + "Z: " + travelnet.z + "
" + + "Network: " + travelnet.attributes.station_network + "
" + + "Owner: " + travelnet.attributes.owner + "
"; } });