From 39be159cda086c489d6a1eb3655328b932205ccd Mon Sep 17 00:00:00 2001 From: NatureFreshMilk Date: Fri, 1 Feb 2019 12:46:38 +0100 Subject: [PATCH] js rewrite --- server/static/js/LayerManager.js | 14 ++--- server/static/js/RealtimeTileLayer.js | 53 ++++++++--------- server/static/js/WebSocketChannel.js | 16 ++--- server/static/js/main.js | 86 +++++++++++++-------------- 4 files changed, 78 insertions(+), 91 deletions(-) diff --git a/server/static/js/LayerManager.js b/server/static/js/LayerManager.js index b1d44a8..3f42cc7 100644 --- a/server/static/js/LayerManager.js +++ b/server/static/js/LayerManager.js @@ -1,11 +1,11 @@ -var LayerManager = (function(){ +var LayerManager = function(layers){ + this.addListener = function(listener){ + }; - - return { - init: function(layers){ - - } + this.getCurrentLayer = function(){ + }; + }; -}()); +}; diff --git a/server/static/js/RealtimeTileLayer.js b/server/static/js/RealtimeTileLayer.js index bf681f9..a14312e 100644 --- a/server/static/js/RealtimeTileLayer.js +++ b/server/static/js/RealtimeTileLayer.js @@ -1,39 +1,36 @@ -var RealtimeTileLayer = (function(){ +var RealtimeTileLayer = function(wsChannel){ 'use strict'; + var self = this; - function getTileSource(layerId, x,y,zoom,cacheBust){ + wsChannel.addListener("rendered-tile", function(tc){ + var id = self.getImageId(tc.layerid, tc.x, tc.y, tc.zoom); + var el = document.getElementById(id); + + if (el){ + //Update src attribute if img found + el.src = self.getTileSource(tc.layerid, tc.x, tc.y, tc.zoom, true); + } + }); + + + this.getTileSource = function(layerId, x,y,zoom,cacheBust){ return "api/tile/" + layerId + "/" + x + "/" + y + "/" + zoom + "?_=" + Date.now(); } - function getImageId(layerId, x, y, zoom){ + this.getImageId = function(layerId, x, y, zoom){ 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){ - var tile = document.createElement('img'); - tile.src = getTileSource(layerId, coords.x, coords.y, coords.z); - tile.id = getImageId(layerId, coords.x, coords.y, coords.z); - return tile; - } - }); - } + this.createLayer = function(layerId){ + 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; + } + }); }; -}()) +}; diff --git a/server/static/js/WebSocketChannel.js b/server/static/js/WebSocketChannel.js index d798b4f..2db804e 100644 --- a/server/static/js/WebSocketChannel.js +++ b/server/static/js/WebSocketChannel.js @@ -1,11 +1,10 @@ -var WebSocketChannel = (function(){ +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){ + this.addListener = function(type, listener){ var list = listenerMap[type]; if (!list){ list = []; @@ -13,9 +12,9 @@ var WebSocketChannel = (function(){ } list.push(listener); - } + }; - function connect(){ + this.connect = function(){ var ws = new WebSocket(wsUrl); ws.onmessage = function(e){ @@ -34,11 +33,6 @@ var WebSocketChannel = (function(){ //reconnect after some time setTimeout(connect, 1000); } - } - - return { - connect: connect, - addListener: addListener }; -}()); +}; diff --git a/server/static/js/main.js b/server/static/js/main.js index 6a102f6..67e8de9 100644 --- a/server/static/js/main.js +++ b/server/static/js/main.js @@ -1,51 +1,47 @@ +'use strict'; -(function(){ - 'use strict'; +api.getConfig().then(function(cfg){ + var layerMgr = new LayerManager(cfg.layers); - api.getConfig().then(function(cfg){ - LayerManager.init(cfg.layers); - - }); + var wsChannel = new WebSocketChannel(); + wsChannel.connect(); - 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]; - - var map = L.map('image-map', { - minZoom: 2, - maxZoom: 12, - center: initialCenter, - zoom: initialZoom, - crs: crs - }); - - WebSocketChannel.connect(); - - map.attributionControl.addAttribution('Mapserver'); - - var layers = {}; - var overlays = {} - - RealtimeTileLayer.init(); - - var Layer = RealtimeTileLayer.create(0); - var tileLayer = new Layer(); - tileLayer.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); + 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]; + + var map = L.map('image-map', { + minZoom: 2, + maxZoom: 12, + center: initialCenter, + zoom: initialZoom, + crs: crs + }); + + map.attributionControl.addAttribution('Mapserver'); + + var layers = {}; + var overlays = {} + + var Layer = rtTiles.createLayer(0); + var tileLayer = new Layer(); + tileLayer.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); + +});