From 744e1eea1235a41b8f2298790817186d8899550d Mon Sep 17 00:00:00 2001
From: NatureFreshMilk <naturefreshmilk@github.com>
Date: Tue, 29 Jan 2019 08:36:46 +0100
Subject: [PATCH] js split

---
 server/static/index.html                      |  2 +
 .../static/js/L.control.coordinatesDisplay.js | 27 +++++++++
 server/static/js/main.js                      | 58 +------------------
 server/static/js/realtimelayer.js             | 37 ++++++++++++
 4 files changed, 68 insertions(+), 56 deletions(-)
 create mode 100644 server/static/js/L.control.coordinatesDisplay.js
 create mode 100644 server/static/js/realtimelayer.js

diff --git a/server/static/index.html b/server/static/index.html
index e6cd122..13fc1f2 100644
--- a/server/static/index.html
+++ b/server/static/index.html
@@ -30,6 +30,8 @@
 
     <script src="js/lib/leaflet.js"></script>
     <script src="js/lib/mithril.min.js"></script>
+    <script src="js/realtimelayer.js"></script>
+    <script src="js/L.control.coordinatesDisplay.js"></script>
     <script src="js/main.js"></script>
 
   </body>
diff --git a/server/static/js/L.control.coordinatesDisplay.js b/server/static/js/L.control.coordinatesDisplay.js
new file mode 100644
index 0000000..57c4257
--- /dev/null
+++ b/server/static/js/L.control.coordinatesDisplay.js
@@ -0,0 +1,27 @@
+(function(){
+  // coord display
+
+  L.Control.CoordinatesDisplay = L.Control.extend({
+      onAdd: function(map) {
+        var div = L.DomUtil.create('div', 'leaflet-bar leaflet-custom-display');
+        function update(ev){
+          var latlng = ev.latlng;
+          div.innerHTML = "X:" + parseInt(latlng.lng) + " Z:" + parseInt(latlng.lat);
+        }
+
+        map.on('mousemove', update);
+        map.on('click', update);
+        map.on('touch', update);
+
+        return div;
+      },
+
+      onRemove: function(map) {
+      }
+  });
+
+  L.control.coordinatesDisplay = function(opts) {
+      return new L.Control.CoordinatesDisplay(opts);
+  }
+
+})()
diff --git a/server/static/js/main.js b/server/static/js/main.js
index 39b103d..c90b75a 100644
--- a/server/static/js/main.js
+++ b/server/static/js/main.js
@@ -19,35 +19,6 @@
       crs: crs
     });
 
-    function getTileSource(layerId, x,y,zoom,cacheBust){
-        return "api/tile/" + layerId + "/" + x + "/" + y + "/" + zoom + "?_=" + Date.now();
-    }
-
-    function getImageId(layerId, x, y, zoom){
-        return "tile-" + layerId + "/" + x + "/" + y + "/" + zoom;
-    }
-
-    function createTileLayer(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;
-          }
-        });
-    }
-
-    function updateTile(data){
-        var id = getImageId(data.layerid, data.x, data.y, data.zoom);
-        var el = document.getElementById(id);
-
-        if (el){
-            //Update src attribute if img found
-            el.src = getTileSource(data.layerid, data.x, data.y, data.zoom, true);
-        }
-    }
-
 
     var wsUrl = location.protocol.replace("http", "ws") + "//" + location.host + location.pathname.substring(0, location.pathname.lastIndexOf("/")) + "/api/ws";
     var ws = new WebSocket(wsUrl);
@@ -56,43 +27,18 @@
       var event = JSON.parse(e.data);
 
       if (event.type == "rendered-tile"){
-        updateTile(event.data)
+        realtimelayer.update(event.data)
       }
     }
 
     var layers = {};
 
-    var Layer = createTileLayer(0);
+    var Layer = realtimelayer.create(0);
     var tileLayer = new Layer();
     tileLayer.addTo(map);
 
     L.control.layers(layers, {}).addTo(map);
 
-    // coord display
-
-    L.Control.CoordinatesDisplay = L.Control.extend({
-        onAdd: function(map) {
-      var div = L.DomUtil.create('div', 'leaflet-bar leaflet-custom-display');
-      function update(ev){
-        var latlng = ev.latlng;
-        div.innerHTML = "X:" + parseInt(latlng.lng) + " Z:" + parseInt(latlng.lat);
-      }
-
-      map.on('mousemove', update);
-      map.on('click', update);
-      map.on('touch', update);
-
-      return div;
-        },
-
-        onRemove: function(map) {
-        }
-    });
-
-    L.control.coordinatesDisplay = function(opts) {
-        return new L.Control.CoordinatesDisplay(opts);
-    }
-
     var el = L.control.coordinatesDisplay({ position: 'bottomleft' });
     el.addTo(map);
 
diff --git a/server/static/js/realtimelayer.js b/server/static/js/realtimelayer.js
new file mode 100644
index 0000000..ff602fc
--- /dev/null
+++ b/server/static/js/realtimelayer.js
@@ -0,0 +1,37 @@
+(function(){
+
+
+  function getTileSource(layerId, x,y,zoom,cacheBust){
+      return "api/tile/" + layerId + "/" + x + "/" + y + "/" + zoom + "?_=" + Date.now();
+  }
+
+  function getImageId(layerId, x, y, zoom){
+      return "tile-" + layerId + "/" + x + "/" + y + "/" + zoom;
+  }
+
+  window.realtimelayer = {
+    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;
+          }
+        });
+    },
+
+    update: function(data){
+        var id = getImageId(data.layerid, data.x, data.y, data.zoom);
+        var el = document.getElementById(id);
+
+        if (el){
+            //Update src attribute if img found
+            el.src = getTileSource(data.layerid, data.x, data.y, data.zoom, true);
+        }
+    }
+  };
+
+
+
+})()