Toggle on/off focus area

MAPC · May 26, 2020 · e198f82 · e198f82
1 parent a686485
commit e198f82
Show file tree

Hide file tree

Showing 3 changed files with 25 additions and 2 deletions.
diff --git a/index.html b/index.html
@@ -18,6 +18,10 @@
     </main>
     <aside class="sidebar">
       <form class="layers">
+        <h3 class="layers__subtitle">Map features</h3>
+        <input type="checkbox" id="focus-area" autocomplete="off">
+        <label for="focus-area">Focus area and buffer</label><br>
+
         <input type="checkbox" id="mbta-lines" autocomplete="off">
         <label for="mbta-lines">MBTA + ferry lines</label><br>
 
@@ -27,6 +31,7 @@
         <input type="checkbox" id="massbuilds" autocomplete="off">
         <label for="massbuilds">MassBuilds developments</label><br>
 
+        <h3 class="layers__subtitle">Demographic choropleths</h3>
         <input type="radio" id="population" name="layer__radio-options" autocomplete="off">
         <label for="population">Total population</label><br>
 
@@ -51,6 +56,7 @@
         <input type="radio" id="basic" name="layer__radio-options" autocomplete="off">
         <label for="basic">Basic employment (%)</label><br>
 
+        <h3 class="layers__subtitle">Focus area travel patterns</h3>
         <input type="radio" id="trips_all" name="layer__radio-options" autocomplete="off">
         <label for="trips_all">Trips to focus area</label><br>
 

diff --git a/map.js b/map.js
@@ -25,6 +25,8 @@ map.on('load', () => {
   map.setLayoutProperty('massbuilds', 'visibility', 'none');
   map.setLayoutProperty('mbta-stops', 'visibility', 'none');
   map.setLayoutProperty('mbta-routes', 'visibility', 'none');
+  map.setLayoutProperty('focus-area', 'visibility', 'none');
+  map.setLayoutProperty('focus-area-buffer', 'visibility', 'none');
   map.on('click', function(e) {
     const selectedFeature = draw.getSelected();
     if (selectedFeature.features.length > 0) {
@@ -156,8 +158,14 @@ document.querySelector('.layers').addEventListener('click', (e) => {
       map.setLayoutProperty('mbta-routes', 'visibility', 'none');
       map.setLayoutProperty('massbuilds', 'visibility', 'none');
       map.setLayoutProperty('taz', 'visibility', 'none');
+      map.setLayoutProperty('focus-area', 'visibility', 'none');
+      map.setLayoutProperty('focus-area-buffer', 'visibility', 'none');
       break;
-
+    case 'focus-area':
+      toggleLayer('focus-area');
+      toggleLayer('focus-area-buffer');
+      break;
+
     case 'mbta-lines':
       toggleLayer('mbta-routes');
       break;
@@ -167,7 +175,11 @@ document.querySelector('.layers').addEventListener('click', (e) => {
       break;
 
     case 'massbuilds':
-      massbuildsLegend.style.display = "inline";
+      if (massbuildsLegend.style.display === "inline") {
+        massbuildsLegend.style.display = "none";
+      } else {
+        massbuildsLegend.style.display = "inline";
+      }
       toggleLayer('massbuilds');
       break;
 

diff --git a/style.css b/style.css
@@ -29,6 +29,11 @@ p {
   padding: 15px;
 }
 
+.layers__subtitle {
+  margin-bottom: 4px;
+  margin-top: 8px;
+}
+
 .popup__title {
   font-family: 'Open Sans';
   font-size: 14px;