--- a
+++ b/qiita_pet/templates/stats.html
@@ -0,0 +1,209 @@
+{% extends sitebase.html %}
+{% block head %}
+<link rel="stylesheet" href="{% raw qiita_config.portal_dir %}/static/vendor/css/ol.css" type="text/css">
+<style type="text/css">
+  #map-canvas { height: 500px; }
+
+  .ol-popup {
+    position: absolute;
+    background-color: white;
+    -webkit-filter: drop-shadow(0 1px 4px rgba(0,0,0,0.2));
+    filter: drop-shadow(0 1px 4px rgba(0,0,0,0.2));
+    padding: 15px;
+    border-radius: 10px;
+    border: 1px solid #cccccc;
+    bottom: 12px;
+    left: -50px;
+    min-width: 180px;
+  }
+  .ol-popup:after, .ol-popup:before {
+    top: 100%;
+    border: solid transparent;
+    content: " ";
+    height: 0;
+    width: 0;
+    position: absolute;
+    pointer-events: none;
+  }
+  .ol-popup:after {
+    border-top-color: white;
+    border-width: 10px;
+    left: 48px;
+    margin-left: -10px;
+  }
+  .ol-popup:before {
+    border-top-color: #cccccc;
+    border-width: 11px;
+    left: 48px;
+    margin-left: -11px;
+  }
+  .ol-popup-closer {
+    text-decoration: none;
+    position: absolute;
+    top: 2px;
+    right: 8px;
+  }
+  .ol-popup-closer:after {
+    content: "✖";
+  }
+</style>
+<script src="{% raw qiita_config.portal_dir %}/static/vendor/js/ol.js"></script>
+
+<script type="text/javascript">
+  // -> Borrowed from https://stackoverflow.com/q/32102584
+  // internal function to avoid duplication of code
+  function _generate_iconFeature(sid, lat, lng) {
+    var iconFeature = new ol.Feature({
+      geometry: new ol.geom.Point(ol.proj.transform([lng, lat], 'EPSG:4326', 'EPSG:3857')),
+      study_id: sid,
+    });
+    return iconFeature;
+  }
+  // adding features via the lat/long
+  var iconFeatures = [];
+  {% for sid, lat, lng in lat_longs %}
+    {% if lat > -90 and lat < 90 and lng > -180 and lng < 180 %}
+      iconFeatures.push(_generate_iconFeature({% raw sid %}, {% raw lat %}, {% raw lng %}));
+    {% end %}
+  {% end %}
+  // creating new verctor &layer for the markers
+  var vectorSource = new ol.source.Vector({ features: iconFeatures });
+  var vectorLayer = new ol.layer.Vector({ source: vectorSource });
+
+  $( document ).ready(function() {
+    // creating map
+    var map = new ol.Map({
+      target: 'map-canvas',
+      layers: [
+        new ol.layer.Tile({
+          source: new ol.source.OSM()
+        }),
+        vectorLayer
+      ],
+      view: new ol.View({
+        center: ol.proj.fromLonLat([{% raw qiita_config.stats_map_center_longitude %}, {% raw qiita_config.stats_map_center_latitude %}]),
+        zoom: 4
+      })
+    });
+
+    var closer = document.getElementById('map-canvas-popup-closer');
+    closer.onclick = function() {
+      overlay.setPosition(undefined);
+      closer.blur();
+      return false;
+    };
+    var container = document.getElementById('map-canvas-popup');
+    var overlay = new ol.Overlay({
+      element: container,
+      positioning: 'bottom-center',
+      autoPan: true,
+      offset: [0, 0],
+      autoPanAnimation: {
+        duration: 250
+      }
+    });
+    map.addOverlay(overlay);
+
+    map.on('click', function(evt) {
+      var feature = map.forEachFeatureAtPixel(evt.pixel,
+        function(feature) {
+          return feature;
+        });
+      if (feature) {
+        var coordinates = feature.getGeometry().getCoordinates();
+        var content = document.getElementById('map-canvas-popup-content');
+        var study_id = feature.get('study_id');
+        var text = 'Sample from study: ' + study_id;
+        {% if user is not None %}
+          content.innerHTML = '<a target="_blank" href="{% raw qiita_config.portal_dir %}/study/description/' + study_id + '">' + text + '</a>';
+        {% else %}
+          content.innerHTML = text;
+        {% end %}
+        overlay.setPosition(coordinates);
+      }
+    });
+  });
+
+</script>
+
+{% end %}
+{% block content %}
+  <div id="jumbotron" class="jumbotron">
+    <small>Generated on: {{time}}</small>
+    <br/><br/>
+    <table width="100%">
+    <thead>
+      <tr>
+        <th>Studies</th>
+        <th>Unique Samples per Visibility Status</th>
+        <th>Public Samples per Data Type</th>
+        <th>Users</th>
+        <th>Jobs</th>
+      </tr>
+    </thead>
+      <tr>
+        <td>
+          {% for k in number_studies %}
+            <i>{{k}}</i>: {{ "{:,}".format(int(number_studies[k])) }} <br/>
+          {% end %}
+          {% if num_studies_ebi and num_studies_ebi is not None %}
+            <i>submitted to EBI</i>: {{ "{:,}".format(int(num_studies_ebi)) }}
+          {% end %}
+        </td>
+        <td>
+          {% for k, v in number_of_samples.items() %}
+            <i>{{k}}</i>: {{ "{:,}".format(int(v)) }} <br/>
+          {% end %}
+          {% if num_samples_ebi and num_samples_ebi is not None %}
+            <i>submitted to EBI</i>: {{ "{:,}".format(int(num_samples_ebi)) }} <br/>
+          {% end %}
+          {% if number_samples_ebi_prep and number_samples_ebi_prep is not None %}
+            <i>submitted to EBI (prep)</i>: {{ "{:,}".format(int(number_samples_ebi_prep)) }}
+          {% end %}
+        </td>
+        <td>
+          {% for k, v in per_data_type_stats.items() %}
+            <i>{{k}}</i>: {{ "{:,}".format(int(v)) }} <br/>
+          {% end %}
+        </td>
+
+        {% if num_users and num_users is not None %}
+          <td>{{ "{:,}".format(int(num_users)) }}</td>
+        {% end %}
+
+        {% if num_processing_jobs and num_processing_jobs is not None %}
+          <td>{{ "{:,}".format(int(num_processing_jobs)) }}</td>
+        {% end %}
+      </tr>
+    </table>
+  </div>
+
+  <div id="map-canvas"></div>
+  <div id="map-canvas-popup" class="ol-popup">
+    <a href="#" id="map-canvas-popup-closer" class="ol-popup-closer"></a>
+    <div id="map-canvas-popup-content"></div>
+  </div>
+
+  {% if random_study_id is not None %}
+    <div id="jumbotron" class="jumbotron">
+      <h2>Check out this random public study from the database!</h2>
+      <h3>{{ random_study_title }}</h3>
+      <p align="justify">{{ random_study_info['study_abstract'] }}</p>
+      <p>
+      {% if user is not None %}
+          <a href="{% raw qiita_config.portal_dir %}/study/description/{{ random_study_id }}">Go to the study <span class="glyphicon glyphicon-arrow-right"></span></a>
+      {% else %}
+          <h4>Log in above to see this and other public studies</h4>
+      {% end %}
+      </p>
+    </div>
+  {% end %}
+
+  {% if img and img is not None %}
+    <div>
+      <h5>Data usage</h5>
+      <img height="100%" width="100%" src="{% raw img %}"/>
+    </div>
+  {% end %}
+
+{% end %}