improve map page

xmrnodes/routes/meta.py

@@ -7,7 +7,7 @@ from urllib.parse import urlparse
 
 from xmrnodes.helpers import rw_cache, get_highest_block
 from xmrnodes.forms import SubmitNode
-from xmrnodes.models import Node
+from xmrnodes.models import Node, Peer
 from xmrnodes import config
 
 bp = Blueprint("meta", "meta")
@@ -64,7 +64,7 @@ def index():
 @bp.route("/map")
 def map():
     try:
-        peers = rw_cache("map_peers")
+        peers = Peer.select()
         nodes = Node.select().where(Node.datetime_checked)
     except:
         flash("Couldn't load the map. Try again later.")

xmrnodes/templates/map.html

@@ -19,8 +19,8 @@
      <meta name="application-name" content="XMR Nodes">
      <meta name="msapplication-TileColor" content="#da532c">
      <meta name="keywords" content="wownero, monero, xmr, bitmonero, cryptocurrency">
-     <link rel="stylesheet" href="//cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.5.0/css/ol.css" type="text/css">
+     <link rel="preload stylesheet" href="//cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.5.0/css/ol.css" type="text/css">
-     <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" type="text/css">
+     <link rel="preload stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" type="text/css">
      <style>
        .map {
          height: 600px;
@@ -56,22 +56,26 @@
 {% endwith %}
 
 <div class="center info">
-  <p>Peers seen ~2 weeks: {{ peers | length }}</p>
+  <p>Recent Peers: {{ peers | length }}</p>
   <p>Source Node: {{ source_node }}</p>
   <p>
     This is not a full representation of the entire Monero network,
     just a look into the peers being recursively crawled from the source node ({{ source_node }}).
-    New peers are searched for once per week on average.
+    New peers are searched every hour and unresponsive nodes are removed.
-    Older peers are shown as more transparent and will be removed 
-    if not seen again after some time.
   </p>
   <br>
   <a href="/">Go home</a>
 </div>
-<div id="map" class="map"></div>
+<div id="map" class="map">
+  <div id="loadingContainer" style="width: 100%; text-align: center;">
+    <img id="loading" src="/static/images/helping.gif" style="width: 30%;" />
+  </div>
+</div>
 <div id="popup" class="popup" title="Welcome to OpenLayers"></div>
 
 <script>
+  function loadMap() {
+
     // Marker layer
     markerLayer = new ol.layer.Vector({
       source: new ol.source.Vector({
@@ -125,8 +129,7 @@
           width: 1
         })
       })
-    })
+    }));
-  );
     markerLayer.getSource().addFeature(feature);
     {% endfor %}
 
@@ -160,8 +163,7 @@
           width: 1
         })
       })
-    })
+    }));
-  );
     markerLayer.getSource().addFeature(feature);
     {% endfor %}
 
@@ -190,6 +192,15 @@
         $(element).popover('show');
       });
     });
+
+    // Remove loader
+    document.getElementById('loadingContainer').remove();
+  }
+
+  // Wait for full load
+  addEventListener("DOMContentLoaded", (event) => {
+    setTimeout(loadMap, 1000);
+  });
 </script>
 
 </body>