From 8a5194a9f8050b68da46d04831b9e31be3b4c0c0 Mon Sep 17 00:00:00 2001 From: NatureFreshMilk Date: Fri, 1 Feb 2019 13:20:50 +0100 Subject: [PATCH] proper bootstrap order --- server/static/index.html | 1 + server/static/js/LayerManager.js | 7 ++- server/static/js/RealtimeTileLayer.js | 59 ++++++++++--------- server/static/js/SimpleCRS.js | 7 +++ server/static/js/main.js | 18 ++---- server/static/js/overlays/TravelnetOverlay.js | 2 +- 6 files changed, 51 insertions(+), 43 deletions(-) create mode 100644 server/static/js/SimpleCRS.js diff --git a/server/static/index.html b/server/static/index.html index b945c2a..2616f63 100644 --- a/server/static/index.html +++ b/server/static/index.html @@ -15,6 +15,7 @@ + diff --git a/server/static/js/LayerManager.js b/server/static/js/LayerManager.js index 1e0908f..93ab147 100644 --- a/server/static/js/LayerManager.js +++ b/server/static/js/LayerManager.js @@ -1,6 +1,11 @@ 'use strict'; -function LayerManager(layers){ +function LayerManager(layers, map){ + + map.on('baselayerchange', function (e) { + console.log("baselayerchange", e.layer); + }); + } LayerManager.prototype.addListener = function(listener){ diff --git a/server/static/js/RealtimeTileLayer.js b/server/static/js/RealtimeTileLayer.js index a75eb13..0264f1c 100644 --- a/server/static/js/RealtimeTileLayer.js +++ b/server/static/js/RealtimeTileLayer.js @@ -1,36 +1,39 @@ 'use strict'; -function RealtimeTileLayer(wsChannel){ - var self = this; +var RealtimeTileLayer = L.TileLayer.extend({ - wsChannel.addListener("rendered-tile", function(tc){ - var id = self.getImageId(tc.layerid, tc.x, tc.y, tc.zoom); - var el = document.getElementById(id); + initialize: function(wsChannel, layerId) { + var self = this; + this.layerId = layerId; - if (el){ - //Update src attribute if img found - el.src = self.getTileSource(tc.layerid, tc.x, tc.y, tc.zoom, true); - } - }); -} + wsChannel.addListener("rendered-tile", function(tc){ + if (tc.layerid != self.layerId){ + //ignore other layers + return; + } -RealtimeTileLayer.prototype.getTileSource = function(layerId, x,y,zoom,cacheBust){ - return "api/tile/" + layerId + "/" + x + "/" + y + "/" + zoom + "?_=" + Date.now(); -}; + var id = self.getImageId(tc.layerid, tc.x, tc.y, tc.zoom); + var el = document.getElementById(id); -RealtimeTileLayer.prototype.getImageId = function(layerId, x, y, zoom){ - return "tile-" + layerId + "/" + x + "/" + y + "/" + zoom; -}; + if (el){ + //Update src attribute if img found + el.src = self.getTileSource(tc.layerid, tc.x, tc.y, tc.zoom, true); + } + }); + }, -RealtimeTileLayer.prototype.createLayer = function(layerId){ - var self = this; + getTileSource: function(x,y,zoom,cacheBust){ + return "api/tile/" + this.layerId + "/" + x + "/" + y + "/" + zoom + "?_=" + Date.now(); + }, - 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; - } - }); -}; + getImageId: function(x, y, zoom){ + return "tile-" + this.layerId + "/" + x + "/" + y + "/" + zoom; + }, + + createTile: function(coords){ + var tile = document.createElement('img'); + tile.src = this.getTileSource(coords.x, coords.y, coords.z); + tile.id = this.getImageId(coords.x, coords.y, coords.z); + return tile; + } +}); diff --git a/server/static/js/SimpleCRS.js b/server/static/js/SimpleCRS.js new file mode 100644 index 0000000..d0f13f3 --- /dev/null +++ b/server/static/js/SimpleCRS.js @@ -0,0 +1,7 @@ +'use strict'; + +var SimpleCRS = L.Util.extend({}, L.CRS.Simple, { + scale: function (zoom) { + return Math.pow(2, zoom-9); + } +}); diff --git a/server/static/js/main.js b/server/static/js/main.js index 310ba13..1704b4b 100644 --- a/server/static/js/main.js +++ b/server/static/js/main.js @@ -1,21 +1,12 @@ 'use strict'; api.getConfig().then(function(cfg){ - var layerMgr = new LayerManager(cfg.layers); var wsChannel = new WebSocketChannel(); wsChannel.connect(); 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]; @@ -24,7 +15,7 @@ api.getConfig().then(function(cfg){ maxZoom: 12, center: initialCenter, zoom: initialZoom, - crs: crs + crs: SimpleCRS }); map.attributionControl.addAttribution('Mapserver'); @@ -32,12 +23,13 @@ api.getConfig().then(function(cfg){ var layers = {}; var overlays = {} - var Layer = rtTiles.createLayer(0); - var tileLayer = new Layer(); + var layerMgr = new LayerManager(cfg.layers, map); + + var tileLayer = new RealtimeTileLayer(wsChannel, 0); tileLayer.addTo(map); layers["Base"] = tileLayer; - overlays["Travelnet"] = new TravelnetOverlay(); + overlays["Travelnet"] = new TravelnetOverlay(wsChannel, layerMgr); L.control.layers(layers, overlays).addTo(map); diff --git a/server/static/js/overlays/TravelnetOverlay.js b/server/static/js/overlays/TravelnetOverlay.js index 5b39e23..c48d43d 100644 --- a/server/static/js/overlays/TravelnetOverlay.js +++ b/server/static/js/overlays/TravelnetOverlay.js @@ -9,7 +9,7 @@ var TravelnetIcon = L.icon({ }); var TravelnetOverlay = L.LayerGroup.extend({ - initialize: function() { + initialize: function(wsChannel, layerMgr) { },