monero.fail/xmrnodes/templates/map.html

{% extends 'base.html' %}

{% block content %}

<div class="center info">
  <p>Peers seen ~24 hours: {{ 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 day.
    Older peers are shown as more transparent and will be removed 
    if not seen again after {{ config.PEER_LIFETIME }} hours.
  </p>
</div>
<div id="map" class="map"></div>
<div id="popup" class="popup" title="Welcome to OpenLayers"></div>

<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="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" type="text/css">
<style>
  .map {
    height: 600px;
    margin: 2em;
    padding: 0;
  }
  .popover-body {
    min-width: 276px;
  }
  .center.info {
    width: 50%;
    margin: auto;
    padding: 2em;
  }
</style>
<script src="https://cdn.polyfill.io/v3/polyfill.min.js?features=fetch,requestAnimationFrame,Element.prototype.classList,URL,TextDecoder"></script>
<script src="//cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.5.0/build/ol.js"></script>
<script src="//code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.bundle.min.js"></script>
<script>
 // Marker layer
 markerLayer = new ol.layer.Vector({
    source: new ol.source.Vector({
      features: [],
      projection: 'EPSG:3857'
    })
  });

 // Create the map
 var map = new ol.Map({
   target: 'map',
   layers: [
     new ol.layer.Tile({
       source: new ol.source.OSM()
     }),
     markerLayer
   ],
   view: new ol.View({
     center: ol.proj.fromLonLat([0, 25]),
     zoom: 1
   })
 });

 {% for peer in peers %}

   {% if peer.datetime | hours_elapsed > 24 %}
      {% set fill_color = 'rgba(238,111,45,.2)' %}
   {% elif peer.datetime | hours_elapsed > 16 %}
      {% set fill_color = 'rgba(238,111,45,.4)' %}
   {% elif peer.datetime | hours_elapsed > 8 %}
      {% set fill_color = 'rgba(238,111,45,.6)' %}
   {% elif peer.datetime | hours_elapsed > 4 %}
      {% set fill_color = 'rgba(238,111,45,.8)' %}
   {% else %}
      {% set fill_color = 'rgba(238,111,45,1)' %}
   {% endif %}
   var feature = new ol.Feature(
       new ol.geom.Point(ol.proj.transform(['{{ peer.lon }}', '{{ peer.lat }}'], 'EPSG:4326', 'EPSG:3857'))
   );
   feature.description = [
     'Peer {{ peer.url }}',
     'Last seen {{ peer.datetime | humanize }}'
   ];
   feature.setStyle(new ol.style.Style({
        image: new ol.style.Circle({
            radius: 6,
            fill: new ol.style.Fill({
                color: '{{ fill_color }}',
            }),
            stroke: new ol.style.Stroke({
                color: '#fff',
                width: 1
            })
        })
    })
  );
  markerLayer.getSource().addFeature(feature);
 {% endfor %}

  // Setup popup
  var popup = new ol.Overlay({
    element: $('#popup')[0],
  });
  map.addOverlay(popup);

  // Show details on each pixel
  map.on("click", function(e) {
      var element = popup.getElement();
      $(element).popover('dispose')
      map.forEachFeatureAtPixel(e.pixel, function (feature, layer) {
          var coordinate = e.coordinate;
          $(element).popover('dispose');
          popup.setPosition(coordinate);
          element.title = feature.description[0]
          $(element).popover({
            container: element,
            placement: 'top',
            animation: false,
            html: true,
            content: '<p>' + feature.description[1] + '</p>',
          });
          $(element).popover('show');
      });
  });
</script>
{% endblock %}