Adds a layer to display location-based groups

.gitignore

@@ -1,3 +1,5 @@
 Gemfile.lock
 _site
 __pycache__
+.bundle/
+vendor/

README.md

@@ -20,7 +20,7 @@ generate from the same data.
 
 We currently ask participants that fill out
 the form to provide a city, town location if they want to anonymously be included in the
-map. To minimize needing to use the geolocate API, we still write coordinates to the [locations data](_data/locations.csv) file. **You should not manually update this file** as it is done by a script (see below). 
+map. To minimize needing to use the geolocate API, we still write coordinates to the [locations data](_data/locations.csv) file. **You should not manually update this file** as it is done by a script (see below).
 
 #### June 2020 and Earlier
 
@@ -31,45 +31,52 @@ and then had matched latitude and longitude coordinates from the (now renamed)
 [locations institutions data](_data/locations-institutions.csv).
 
 
-### 1. How do I update the map?
+### 1. How do I add RSE members to the map?
 
 You don't! The automated workflow does. The workflow under [.github/workflows/update-map.yml](.github/workflows/update-map.yml)
-handles this for you. To add yourself (if you haven't yet) you can fill out the 
+handles this for you. To add yourself (if you haven't yet) you can fill out the
 institution field under the [join form](https://docs.google.com/forms/d/e/1FAIpQLSdJbPczGHFN8mfMFu_YQym508OzFtOZxfSzr1sOoINxaMmiaw/viewform).
 
 ### 2. How do update locations?
 
 The [locations lookup](_data/location-lookup.tsv) used to need monthly updating, but we don't
 use it anymore. Look at older versions of this file under the repository version control
-to see how this worked. 
+to see how this worked.
 
 ### 3. How do we run tests?
 
 Tests are run in a separate workflow at [.github/workflows/main.yml](.github/workflows/main.yml).
 Since a contribution will come down to updating the list of locations, we ensure that
 the fields and types are represented correctly.
 
+### 4. How do I add a regional/local group to the map?
+
+We expect new regional/local groups to be added much less frequently than new RSE members, so this portion is not automated. To add a regional/local group, update the [group locations](_data/group-locations.csv) file to include the new group.
+
 ## Google Sheet Issues
 
 The script [scripts/update_map.py](scripts/update_map.py) downloads a static export of a Google Sheet,
 which should be updating to generate a list of locations (cities and states) for generation here.
 This sheet that is labeled "Locations export for website." The cells are supposed to automatically
-update since they have been pre-populated with formulas, but in practice it often doesn't automatically 
+update since they have been pre-populated with formulas, but in practice it often doesn't automatically
 populate from the first, despite the formula being there. When this happens:
 
 1. You'll see a PR here that is empty. You should close and delete the branch
 2. You should open up the sheet, and click and drag down the last cell that is populated with a city/state to populate a new chunk of rows, up until the number of entries we have in the first (private) sheet with full informaiton.
 3. You should glance over the new names and look for spelling errors, or any other formatting issues. You can then go back to the first sheet to fix names. Other than spelling, we always need to change "CA" to "California" because most CA entries will show up somewhere in Canada.
 4. Once the sheet looks good, you can click the "Actions" tab here to re-run the job.
 
-The pull request should open again, with changes that time, and then you can approve or close and delete and branch and continue tweaking the sheet and running the action until it looks good. 
+The pull request should open again, with changes that time, and then you can approve or close and delete and branch and continue tweaking the sheet and running the action until it looks good.
 
 ### How could it be improved?
 
 For the long term, it might be less error prone to somehow use the Sheets API instead of the interface,
 or to debug why the sheet doesn't auto-populate with correct data as it should.
 
+### To run locally for testing:
+In a terminal window in the root project directory, install the gems specified in the gemfile (`bundle install`), then run the jekyll server with `bundle exec jekyll serve` (this will run the exact jekyll version specified in the gemfile, unlike `jekyll serve`). Navigate to [http://localhost:4000/usrse-map/](http://localhost:4000/usrse-map/) to view the page (be sure to include all the slashes).
+
 <!--- ## Join us! --->
 
 <a href="https://docs.google.com/forms/d/e/1FAIpQLScBQ6AYpYYK2wL21egcaVvH0ZEvtShU-0s-XbqnY3okUsyIZw/viewform">
-<img width="250px" alt="signup button" src="assets/img/signup.png"></a> 
+<img width="250px" alt="signup button" src="assets/img/signup.png"></a>

_data/group-locations.csv

@@ -0,0 +1,9 @@
+name,lat,lng,url
+"Front Range",39.7392,-104.9903,"https://usrse.slack.com/archives/C01FSJ1QYFR"
+"New England",42.3601,-71.0589,"https://usrse.slack.com/archives/C03H3V6157F"
+"NOLA",29.9511,-90.0715,"https://usrse.slack.com/archives/C01GD9HNVK6"
+"Chicago",41.8781,-87.6298,"https://usrse.slack.com/archives/C02PK0DA5NG"
+"Arizona",33.4255,-111.9400,"https://usrse.slack.com/archives/C01H1T40V7A"
+"California",34.1478,-118.1445,"https://usrse.slack.com/archives/C01FSVC247R"
+"New Mexico",35.0844,-106.6504,"https://usrse.slack.com/archives/C02P2338P55"
+"Pennsylvania",40.4406,-79.9959,"https://usrse.slack.com/archives/C02PA0SP32S"

pages/map.md

@@ -28,6 +28,12 @@ permalink: /
     border-radius: 50%;
     cursor: pointer;
   }
+  .grp_marker {
+    background-color: #FFC107;
+    opacity: .9;
+    border-radius: 50%;
+
+  }
   .mapboxgl-popup {
     max-width: 200px;
   }
@@ -36,10 +42,40 @@ permalink: /
     text-align: center;
     font-family: 'Open Sans', sans-serif;
   }
+  /* From https://docs.mapbox.com/help/tutorials/choropleth-studio-gl-pt-2/ */
+  .map-overlay {
+    position: fixed;
+    bottom: 0;
+    left: 5%;
+    background: #fff;
+    margin-right: 20px;
+    font-family: Arial, sans-serif;
+    overflow: auto;
+    border-radius: 3px;
+  }
+  #legend {
+    padding: 10px;
+    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
+    line-height: 18px;
+    height: 150px;
+    margin-bottom: 40px;
+    width: 200px;
+    height: auto;
+    width: auto;
+  }
+
+  .legend-key {
+    display: inline-block;
+    border-radius: 20%;
+    width: 10px;
+    height: 10px;
+    margin-right: 5px;
+  }
 </style>
 
 
 <div id="map"></div>
+<div class='map-overlay' id='legend'></div>
 
 <script src='https://api.tiles.mapbox.com/mapbox-gl-js/v1.3.1/mapbox-gl.js'></script>
 <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v1.3.1/mapbox-gl.css' rel='stylesheet' />
@@ -80,6 +116,29 @@ permalink: /
   }{% if forloop.last %}{% else %},{% endif %}{% endfor %}]
   };
 
+  var groupgeo = {
+    type: 'FeatureCollection',
+    features: [{% for grp in site.data.group-locations %}{
+      type: 'Feature',
+      geometry: {
+        type: 'Point',
+        coordinates: [{{ grp.lng }}, {{ grp.lat }}]
+      },
+      properties: {
+        title: '{{ grp.name }}',
+        description: '{{ grp.name }}',
+      },
+      size: {
+        width: 15,
+        height: 15,
+      },
+      data: {
+        name: '{{ grp.name }}',
+        url: '{{ grp.url }}'
+      },
+    }{% if forloop.last %} {% else %},{% endif %}{% endfor %}]
+  };
+
   geojson.features.forEach(function(marker) {
     var el = document.createElement('div');
     el.className = 'marker';
@@ -102,6 +161,43 @@ permalink: /
     .addTo(map);
   });
 
+  groupgeo.features.forEach(function(marker) {
+    var el = document.createElement('div');
+    el.className = 'grp_marker';
+    el.setAttribute('style', 'width: ' + marker.size.width + 'px; height: ' + marker.size.height + 'px;');
+
+    var popup = new mapboxgl.Popup({ offset: 25 })
+      .setHTML(
+        '<div style="padding-top: 15px; padding-bottom: 5px;">' +
+          '<p style="margin: 0; padding: 0;">' +
+            '<a href=' + marker.data.url +' target="_blank">' + marker.data.name + ' Regional RSE Group</a>' +
+          '</p>' +
+        '</div>'
+      );
+    new mapboxgl.Marker(el)
+    .setLngLat(marker.geometry.coordinates)
+    .setPopup(popup)
+    .addTo(map);
+  });
+
+  // create legend: from https://docs.mapbox.com/help/tutorials/choropleth-studio-gl-pt-2/
+  const legend = document.getElementById('legend');
+  const colors = ['#99266E', '#FFC107']
+  const layers = ['US-RSE Members','Local/Regional RSE Groups'];
+  layers.forEach((layer, i) => {
+    const color = colors[i];
+    const item = document.createElement('div');
+    const key = document.createElement('span');
+    key.className = 'legend-key';
+    key.style.backgroundColor = color;
+
+    const value = document.createElement('span');
+    value.innerHTML = `${layer}`;
+    item.appendChild(key);
+    item.appendChild(value);
+    legend.appendChild(item);
+  });
+
   // Might help with making full height, doesn't seem to
   map.on('load', function () {
     map.resize();