Merge #1488: Make JSObserver work with Leaflet.

Fixes #1451.

overviewer_core/data/js_src/overviewer.js

@@ -15,6 +15,7 @@ overviewer.worldCtrl = null;
 overviewer.layerCtrl = null;
 overviewer.compass = null;
 overviewer.coord_box = null;
+overviewer.progress = null;
 overviewer.current_world = null;
 
 /// Records the current layer by name (if any) of each world

overviewer_core/data/js_src/util.js

@@ -67,6 +67,48 @@ overviewer.util = {
                 return this.coord_box;
             }
         });
+        overviewer.progressClass = L.Control.extend({
+            options: {
+                position: 'bottomright'
+            },
+            initialize: function() {
+                this.progress = L.DomUtil.create("div", "progress");
+                this.progress.innerHTML = 'Current render progress';
+                this.progress.style.visibility = 'hidden';
+            },
+            update: function() {
+                fetch("progress.json")
+                    .then(response => {
+                        if (!response.ok) {
+                            throw new Error('Response was not ok');
+                        }
+                        return response.json();
+                    })
+                    .then(data => {
+                        this.progress.innerHTML = data.message;
+                        if (data.update > 0) {
+                            setTimeout(this.update.bind(this), data.update);
+                            this.progress.style.visibility = '';
+                        } else {
+                            setTimeout(this.update.bind(this), 60000);
+                            this.progress.innerHTML = 'Hidden - data.update < 0';
+                            this.progress.style.visibility = 'hidden';
+                        }
+                    })
+                    .catch(error => {
+                        this.progress.innerHtml = 'Hidden - no data';
+                        this.progress.style.visibility = 'hidden';
+                        console.info('Error getting progress; hiding control', error);
+                    });
+            },
+            onAdd: function() {
+                // Not all browsers may have this
+                if ('fetch' in window) {
+                    setTimeout(this.update.bind(this), 0);
+                }
+                return this.progress;
+            }
+        });
         overviewer.compassClass = L.Control.extend({
             initialize: function(imagedict, options) {
                 L.Util.setOptions(this, options);
@@ -247,6 +289,7 @@ overviewer.util = {
         overviewer.compass = new overviewer.compassClass(
             overviewerConfig.CONST.image.compass);
         overviewer.coord_box = new overviewer.coordBoxClass();
+        overviewer.progress = new overviewer.progressClass();
 
 
         overviewerConfig.worlds.forEach(function(world_name, idx) {
@@ -258,6 +301,7 @@ overviewer.util = {
         overviewer.compass.addTo(overviewer.map);
         overviewer.worldCtrl.addTo(overviewer.map);
         overviewer.coord_box.addTo(overviewer.map);
+        overviewer.progress.addTo(overviewer.map);
 
         overviewer.map.on('mousemove', function(ev) {
             overviewer.coord_box.render(ev.latlng);

overviewer_core/data/web_assets/overviewer.css

@@ -165,7 +165,7 @@ div.worldcontrol select {
     font-size: 1.2em;
 }
 
-.leaflet-container .coordbox {
+.leaflet-container .coordbox, .leaflet-container .progress {
     box-shadow: none;
     font-size: 11px;
     background: rgba(255, 255, 255, 0.7);