From 23b70cd7af36037cf9362ac6e782fdc81cee3e2c Mon Sep 17 00:00:00 2001 From: Abbey Date: Fri, 22 Jul 2022 08:45:30 -0400 Subject: [PATCH 1/3] Initial pass at adding local/regional groups to map --- README.md | 21 ++++++--- _data/group-locations.csv | 5 ++ pages/map.md | 96 +++++++++++++++++++++++++++++++++++++++ 3 files changed, 115 insertions(+), 7 deletions(-) create mode 100644 _data/group-locations.csv diff --git a/README.md b/README.md index c46d194..aa363d4 100644 --- a/README.md +++ b/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,17 +31,17 @@ 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? @@ -49,12 +49,16 @@ Tests are run in a separate workflow at [.github/workflows/main.yml](.github/wor 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 @@ -62,14 +66,17 @@ populate from the first, despite the formula being there. When this happens: 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). + -signup button +signup button diff --git a/_data/group-locations.csv b/_data/group-locations.csv new file mode 100644 index 0000000..56030ec --- /dev/null +++ b/_data/group-locations.csv @@ -0,0 +1,5 @@ +name,lat,lng,url +"Front Range, CO",39.74038961347636,-105.16881982867378,"https://www.nrel.gov/" +"Boston, MA",42.37699495351603,-71.1166815593672,"https://harvard.edu/" +"New Orleans, LA",30.002591268182442,-90.0929437170825,"https://www.neworleans.com/" +"Chicago, IL",41.868714592069836,-87.64790964430526,"https://www.uic.edu/" \ No newline at end of file diff --git a/pages/map.md b/pages/map.md index 5d040ad..8a648d2 100644 --- a/pages/map.md +++ b/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; + }
+
@@ -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( + '
' + + '

' + + '' + marker.data.name + ' Regional RSE Group' + + '

' + + '
' + ); + 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(); From 955225dc1a01a27d15e7350d3c654d8e43a289d6 Mon Sep 17 00:00:00 2001 From: Rafael M Mudafort Date: Fri, 5 Aug 2022 12:03:24 -0500 Subject: [PATCH 2/3] Git-ignore build files --- .gitignore | 2 ++ 1 file changed, 2 insertions(+) diff --git a/.gitignore b/.gitignore index f11cb9a..681c9a4 100644 --- a/.gitignore +++ b/.gitignore @@ -1,3 +1,5 @@ Gemfile.lock _site __pycache__ +.bundle/ +vendor/ \ No newline at end of file From 2a70ba0072671a0fa7fec352c8b240e44f5b49cc Mon Sep 17 00:00:00 2001 From: Rafael M Mudafort Date: Fri, 5 Aug 2022 12:03:43 -0500 Subject: [PATCH 3/3] Expand group list and update data --- _data/group-locations.csv | 12 ++++++++---- 1 file changed, 8 insertions(+), 4 deletions(-) diff --git a/_data/group-locations.csv b/_data/group-locations.csv index 56030ec..050fa05 100644 --- a/_data/group-locations.csv +++ b/_data/group-locations.csv @@ -1,5 +1,9 @@ name,lat,lng,url -"Front Range, CO",39.74038961347636,-105.16881982867378,"https://www.nrel.gov/" -"Boston, MA",42.37699495351603,-71.1166815593672,"https://harvard.edu/" -"New Orleans, LA",30.002591268182442,-90.0929437170825,"https://www.neworleans.com/" -"Chicago, IL",41.868714592069836,-87.64790964430526,"https://www.uic.edu/" \ No newline at end of file +"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" \ No newline at end of file