Add siteinfo based status map (#506)

* started modifying the status page to use a leaflet map; removed link to neubot central server that is now offline

* start at converting status map to use open tiles & siteinfo

* WIP - basic mapbox replacement for status map

* WIP - clustered version of status map

* trying to get props of cluster children

* update new status map with basic clusters, show props of cluster leaves

* style cluster css

* make popups show/hide on hover, not click

* switching back to show/hide on click, removed cluster zoom on click

* replaced local copy of sitegeo.json with updated copy in GCS

* updates per reviewer's comments

* added local sitegeo file for previewing to avoid cors issues. will change on final commit before merging after review session2

* add missing semi-colon

* add notes on using the infrastructure map

* update url for siteinfo data

Author: critzo

_includes/head.html

@@ -33,12 +33,11 @@
   <!-- Styles -->
   <link href="{{ site.baseurl }}/css/base.css" rel="stylesheet" />
 
-  {% if page.audience == "observatory" %}
-  <!-- Observatory page styles -->
-  <link rel="stylesheet" href="{{ site.baseurl }}/mlab_observatory/static/js/observatory/vendor/bootstrap/bootstrap.min.css" />
-  <link rel="stylesheet" href="{{ site.baseurl }}/mlab_observatory/static/js/observatory/vendor/bootstrap/bootstrap-theme.css" />
-  <link rel="stylesheet" href="{{ site.baseurl }}/mlab_observatory/static/js/observatory/vendor/bootstrap/bootstrap-select.min.css" />
-  <link rel="stylesheet" href="{{ site.baseurl }}/mlab_observatory/static/css/observatory/mlabOpenInternet.css" />
+  {% if page.audience == "statusmap" %}
+  <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=yes' />
+  <script src='https://api.tiles.mapbox.com/mapbox-gl-js/v1.2.0/mapbox-gl.js'></script>
+  <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v1.2.0/mapbox-gl.css' rel='stylesheet' />
+  <link rel="stylesheet" href="{{ site.baseurl }}/css/mapbox.css"/>
   {% endif %}
 
   <!-- JS Libs -->

_includes/infrastructure-map.js

@@ -0,0 +1,139 @@
+<script>
+mapboxgl.accessToken = 'pk.eyJ1IjoibS1sYWIiLCJhIjoiY2p3eWtxOXZ4MDFkMzQ5cG95ODFhbWJieiJ9.9G1YGnkme4goR0Ly3kqovA';
+var map = new mapboxgl.Map({
+  container: 'map',
+  style: 'mapbox://styles/mapbox/dark-v10',
+  center: [12,25],
+  zoom: 0.8
+});
+
+var url = 'https://siteinfo.mlab-oti.measurementlab.net/v1/sites/geo.json';
+
+map.on('load', function () {
+
+  const tenG = ['==', ['get','uplink'], '10g'];
+  const oneG = ['==', ['get','uplink'], '1g'];
+
+  map.addSource("mlab-sites", {
+    type: "geojson",
+    data: url,
+    cluster: true,
+    clusterRadius: 10,
+    clusterMaxZoom: 15,
+    clusterProperties: {
+      'oneG': ['+', ['case', oneG, 1, 0]],
+      'tenG': ['+', ['case', tenG, 1, 0]],
+    }
+  });
+  map.addLayer({
+    "id": "clusters",
+    "type": "circle",
+    "source": "mlab-sites",
+    "filter": ["has", "point_count"],
+    "paint": {
+      "circle-radius": [
+        "step",
+        ["get", "point_count"],
+        5,
+        2,
+        10,
+        6,
+        15
+      ],
+      "circle-color": [
+        "step",
+          ["get","point_count"],
+          "#deebf7",
+          2,
+          "#9ecae1",
+          6,
+          "#3182bd"
+      ]}
+  });
+  map.addLayer({
+    "id": "cluster-count",
+    "type": "symbol",
+    "source": "mlab-sites",
+    "filter": ["has", "point_count"],
+    "layout": {
+      "text-field": "{point_count_abbreviated}",
+      "text-font": ["DIN Offc Pro Medium",
+        "Arial Unicode MS Bold"],
+        "text-size": 12
+    }
+  });
+  map.addLayer({
+    "id": "unclustered-point",
+    "type": "circle",
+    "source": "mlab-sites",
+    "filter": ["!", ["has", "point_count"]],
+    "paint": {
+      "circle-radius": 5,
+      "circle-color": "#deebf7",
+      "circle-stroke-width": 1,
+      "circle-stroke-color": "#000"
+    }
+  });
+
+  var clusterPopup = new mapboxgl.Popup({
+    className: 'cluster-popup'
+  });
+  var pointPopup = new mapboxgl.Popup({
+    className: 'point-popup'
+  });
+
+  map.on('click','clusters', function(e) {
+    var features = map.queryRenderedFeatures(e.point, { layers: ['clusters'] });
+    var clusterId = features[0].properties.cluster_id,
+    point_count = features[0].properties.point_count,
+    clusterSource = map.getSource('mlab-sites');
+    clusterNodes = clusterSource.getClusterLeaves(clusterId, point_count, 0, function(err, aFeatures){
+      var desc = "";
+      for (c=0; c < aFeatures.length; c++) {
+        desc += "<div class='pod-popup'><h4>"+aFeatures[c].properties.city+" - "+
+          aFeatures[c].properties.name+" - "+aFeatures[c].properties.uplink+"</h4>"+
+          aFeatures[c].properties.provider + " ("+aFeatures[c].properties.asn+")<br>"+
+          "IPv4 Prefix: "+aFeatures[c].properties.ipv4_prefix;
+        if (aFeatures[c].properties.ipv6_prefix != null) {
+          desc += "<br>IPv6 Prefix: "+aFeatures[c].properties.ipv6_prefix;
+        }
+        desc += "</div>";
+      }
+      var coordinates = e.lngLat;
+      while (Math.abs(e.lngLat.lng - coordinates[0]) > 180) {
+        coordinates[0] += e.lngLat.lng > coordinates[0] ? 360 : -360;
+      }
+      clusterPopup.setLngLat(coordinates).setHTML(desc).addTo(map);
+    });
+  });
+
+  map.on('click','unclustered-point', function(e) {
+    var coordinates = e.features[0].geometry.coordinates.slice();
+    var description = "<h4>" + e.features[0].properties.city + " - " +
+      e.features[0].properties.name + " - "+ e.features[0].properties.uplink +"</h4>" +
+      e.features[0].properties.provider + " ("+e.features[0].properties.asn + ")<br>" +
+      "IPv4 Prefix: " + e.features[0].properties.ipv4_prefix;
+      if (e.features[0].properties.ipv6_prefix != null ) {
+        description += "<br>IPv6 Prefix: " + e.features[0].properties.ipv6_prefix;
+      }
+
+    while (Math.abs(e.lngLat.lng - coordinates[0]) > 180) {
+      coordinates[0] += e.lngLat.lng > coordinates[0] ? 360 : -360;
+    }
+    pointPopup.setLngLat(coordinates).setHTML(description).addTo(map);
+  });
+
+  map.on('mouseenter','clusters', function (e) {
+    map.getCanvas().style.cursor = 'pointer';
+  });
+  map.on('mouseleave','clusters', function () {
+    map.getCanvas().style.cursor = '';
+  });
+  map.on('mouseenter','unclustered-point', function (e) {
+    map.getCanvas().style.cursor = 'pointer';
+  });
+  map.on('mouseleave','unclustered-point', function () {
+    map.getCanvas().style.cursor = '';
+  });
+});
+</script>

_pages/06-publications.md

@@ -134,7 +134,7 @@ This article investigates how infrastructure competition among broadband network
 {:.paper-author}
 Reza Rajabiun, Catherine Middleton
 
-[Download](http://www.sciencedirect.com/science/article/pii/S0308596117301143){:.download-link .paper-download target="_blank"}
+[Download](https://doi.org/10.1016/j.telpol.2017.08.001){:.download-link .paper-download target="_blank"}
 
 ### Regulatory Federalism and Broadband Divergence: Implications of Invoking Europe in the Making of Canadian Telecom Policy
 {:.no_toc}

_pages/datatools.md

@@ -26,8 +26,6 @@ Community tools are developed by other organizations or individuals, but which l
 * [I3 Connectivity Explorer](https://i3cex.internet-is-infrastructure.org/){:target="_blank"} - Part of the [Internet as Infrastructure Project](https://internet-is-infrastructure.org/){:target="_blank"}, "_I3 Connectivity Explorer pulls data from U.S. Government agencies — FCC, Census, EPA, USDA — and public sources including the Measurement Lab and the Pro Publica Congress API. It then combines the sources across the places we live: towns, counties and county subdivisions, tribal regions, school and congressional districts; and presents the data in both graphical (maps and charts) and tabular formats using multiple resolutions: block, block group, tract, county, and state._"
 * [Piecewise](https://github.com/opentechinstitute/piecewise){:target="_blank"} - _Piecewise_ is a tool for digesting and aggregating user-volunteered Internet performance test results data from Measurement Lab, and visualizing aggregate data on the web.
   * [Michigan](https://mi.broadbandtest.us/){:target="_blank"}
-  * [Pennsylvania](https://pa.broadbandtest.us/){:target="_blank"}
-  * [Ferry County, WA](https://ferrycountybroadband.com/){:target="_blank"}
 * [Speedup America](https://github.com/Hack4Eugene/SpeedUpAmerica){:target=:"_blank"} - _Speed Up America's_ project vision is an open source nation-wide map that pulls individual internet speed test data from M-Lab and breaking down the results on maps and charts by points, census blocks, ISP, date range, and speed. Census block data and FCC 477 data will used to supplement both the analysis and maps.
 
 ## M-Lab Integrations

_pages/status.md

@@ -2,20 +2,21 @@
 layout: page
 permalink: /status/
 title: "M-Lab Platform Status"
+audience: statusmap
 breadcrumb: data
 ---
 
 # M-Lab Platform Status
 
-M-Lab places server infrastructure for conductingt tests in diverse location around the world. Typically we seek hosting in well connected data centers where ISPs interconnect with one another. Each M-Lab "pod" consists of 3-4 servers and one switch, connected directly to an upstream provider. In large metro areas, we attempt to place multiple pods to obtain diversity in transit and routes.
+M-Lab places server infrastructure for conducting tests in diverse location around the world. Typically we seek hosting in well connected data centers where ISPs interconnect with one another. Each M-Lab "pod" consists of 3-4 servers and one switch, connected directly to an upstream provider. In large metro areas, we attempt to place multiple pods to obtain diversity in transit and routes.
 
 ## Infrastructure Map
+<p>
+The M-Lab infrastructure map displays information about our server pods around the world. Clusters of M-Lab pods are displayed as dark-blue and light-blue circles with a count of pods in the center. Clicking on a cluster will display a pop up with info about each pod in the cluster. Single small dots show locations with only one server. Clicking on a single pod will display a pop up with info about that pod. Double-click on the map to zoom in, or scroll in and out to zoom.
+<div id="map" class="map leaflet-container" style="height: 500px; width:100%; position:relative;"></div>
+</p>
 
-<p><iframe src="https://mlab-ns.appspot.com/admin/map/ipv4/all" width="100%" height="660" frameborder="0" marginwidth="0" marginheight="0" scrolling="no" align="left"></iframe></p>
-
-## Server Status
-
-<p><iframe src="https://mlab-ns.appspot.com/admin/sliver_tools" width="100%" height="400" frameborder="0" marginwidth="0" marginheight="0" scrolling="yes"></iframe></p>
+{% include infrastructure-map.js %}
 
 ## M-Lab Naming Service
 

css/mapbox.css

@@ -0,0 +1,27 @@
+div.pod-popup {
+	width: 175px;
+	display: block;
+	float: left;
+	padding: 5px;
+
+}
+.cluster-popup {
+	width: 400px;
+}
+.cluster-popup div.mapboxgl-popup-content {
+
+}
+div.mapboxgl-popup-content {
+	max-width: 400px;
+	max-height: 200px;
+	overflow-y: scroll;
+	overflow-x: scroll;
+	background: rgba(255,255,255,0.85);
+	border-radius: 10px;
+	color: black;
+}
+div.mapboxgl-popup-content h4 {
+	font-weight: bold;
+	font-size: 1.2em;
+	color: black;
+}