Adding new heatmap! (#87)

* adding new heatmap!
* call it a heatmap not GL

Signed-off-by: vsoch <vsoch@users.noreply.github.com>
Co-authored-by: vsoch <vsoch@users.noreply.github.com>

README.md

@@ -2,10 +2,18 @@
 
 [![GitHub actions status](https://github.com/USRSE/usrse-map/workflows/CI/badge.svg?branch=master)](https://github.com/USRSE/usrse-map/actions?query=branch%3Amaster+workflow%3ACI)
 
-This repository contains static files and workflows to generate the US-RSE map.
+This repository contains static files and workflows to generate the US-RSE map. We have two versions! A standard map where dots for sizes represent population of RSEng:
 
 ![assets/img/usrse-map.png](assets/img/usrse-map.png)
 
+And a new heatmap that can better represent the density of an area!
+
+![assets/img/heatmap.png](assets/img/heatmap.png)
+
+The latter will better support showing our community as it gets larger. The problem with having the points
+is that they get very large in some areas and it makes it hard to see.  Both maps
+generate from the same data.
+
 ## How does it work?
 
 #### Latest

_includes/nav.html

@@ -35,6 +35,8 @@
         {% endif %}
         {% endfor %}
        <li><a href="https://github.com/{{ site.github_url }}" class="no-after" target="_blank"> GitHub</i></a></li>
+       {% if page.url == "/heatmap/" %}<li><a href="{{ site.baseurl }}/" class="no-after">Back to Map</a></li>{% endif %}
+       {% if page.url == "/" %}<li><a href="{{ site.baseurl }}/heatmap/" class="no-after">Heatmap</a></li>{% endif %}
        <li><a href="{{ site.url }}/search" class="no-after" id="search-toggle"> <i class="fa fa-search" style="margin-right:20px"></i></a></li>
       </ul>
     </div>

assets/css/main.css

@@ -755,6 +755,10 @@ td.gutter {
   background-color: initial;
 }
 
+.navbar-default {
+  border-color: #741755 !important
+}
+
 .navbar-default button.navbar-toggle[aria-expanded="true"] {
   background-color: rgba(0, 0, 0, 0.2);
 }

pages/heatmap.md

@@ -0,0 +1,83 @@
+---
+layout: page
+title: US-RSE Heatmap
+subtitle: The US Research Software Engineer Association HeatMap
+use-site-title: true
+permalink: /heatmap/
+---
+
+<style>
+  a {
+    color: #08f;
+  }
+
+  #info {
+    font-family: Helvetica, Arial, sans-serif;
+    position: fixed;
+    top: 0;
+    left: 0;
+    margin: 12px;
+  }
+
+  #map {
+    position: absolute; 
+    top: 20px; 
+    width: 100%;
+    min-height:900px;
+    bottom:0px;
+  }
+  body { margin: 0; padding: 0;}
+
+  .container {
+    width:100% !important; 
+    height:100% !important;
+    bottom:0px !important;
+    }
+  .marker {
+    background-color: #99266e;
+    opacity: 0.5;
+    background-size: cover;
+    border-radius: 50%;
+    cursor: pointer;
+  }
+  .mapboxgl-popup {
+    max-width: 200px;
+  }
+
+  .mapboxgl-popup-content {
+    text-align: center;
+    font-family: 'Open Sans', sans-serif;
+  }
+</style>
+<div id="map"></div>
+<script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.53.1/mapbox-gl.js'></script>
+<script src='https://unpkg.com/deck.gl@7.3.3/dist.min.js'></script>
+<script>
+const data = [{% for loc in site.data.locations %}[{{ loc.lng }}, {{ loc.lat }}, Math.sqrt({{ loc.count }})*15]{% if forloop.last %}{% else %},{% endif %}{% endfor %}]
+
+new deck.DeckGL({
+  container: "map",
+  mapboxApiAccessToken: '{{ site.mapbox }}',
+  mapStyle: 'mapbox://styles/mapbox/dark-v9',
+  longitude: -55,
+  latitude: 40,
+  zoom: 2,
+  maxZoom: 16,
+  layers: [
+    new deck.HeatmapLayer({
+      data,
+      id: 'heatmap',
+      opacity: 1,
+      pickable: true,
+      getPosition: d => [d[0], d[1]],
+      getWeight:d => d[2],
+      radiusPixels:10,
+      intensity:1,
+      threshold:0.03
+    })
+  ]
+});
+</script>
+
+</body>
+</html>