add broadband UI elements

index.html

@@ -117,6 +117,27 @@
                 Show Popup
               </label>
             </div>
+            <div>
+              <label class='checkbox-container'>
+                <input type='checkbox' id="broadband-blocks" />
+                <div class='checkbox mr6 checkbox--s-label'>
+                  <svg class='icon'>
+                    <use xlink:href='#icon-check' />
+                  </svg>
+                </div>
+                Broadband Percentage
+              </label>
+
+              <label class='checkbox-container ml24'>
+                <input type='checkbox' id="show-broadband-popup" checked />
+                <div class='checkbox mr6 checkbox--s-label'>
+                  <svg class='icon'>
+                    <use xlink:href='#icon-check' />
+                  </svg>
+                </div>
+                Show Popup
+              </label>
+            </div>
           </div>
           <div style="font-weight: bold">Navigate to</div>
           <div class="inline-flex flex--column">

js/bind-elements.js

@@ -1,4 +1,5 @@
 import {
+	setBroadbandLayer,
 	setIncomeLayer,
 	setNeighborhoodLayer,
 	setNeighborhoodOutline,
@@ -89,6 +90,20 @@ export default () => {
 			}
 		});
 
+	document
+		.getElementById('broadband-blocks')
+		.addEventListener('change', function () {
+			setBroadbandLayer(this.checked);
+		});
+
+	document
+		.getElementById('show-broadband-popup')
+		.addEventListener('change', function () {
+			if (!this.checked) {
+				map.fire('close-broadband-popup');
+			}
+		});
+
 	// navigation bindings
 	const norrisSq = 'norris_square';
 	const norrisSqBtn = document.getElementById(norrisSq);

js/bind-elements.util.js

@@ -47,6 +47,13 @@ const setIncomeVisibility = (visible) => {
 		visible ? 'visible' : 'none'
 	);
 };
+const setBroadbandVisibility = (visible) => {
+	map.setLayoutProperty(
+		'no-broadband-layer',
+		'visibility',
+		visible ? 'visible' : 'none'
+	);
+};
 
 /**
  * internally checks 'outline' checked state. could be passed, but eh.
@@ -107,3 +114,23 @@ export const setIncomeLayer = (showLayer) => {
 		map.fire('close-income-popup');
 	}
 };
+
+/**
+ * @param {boolean} showLayer
+ */
+export const setBroadbandLayer = (showLayer) => {
+	setBroadbandVisibility(showLayer);
+
+	const showNeighborhoods = document.getElementById(
+		'neighborhood-boundaries'
+	).checked;
+
+	if (showLayer && showNeighborhoods) {
+		document.getElementById('neighborhood-outline-only').checked = true;
+		setNeighborhoodOutline();
+	}
+
+	if (!showLayer) {
+		map.fire('close-broadband-popup');
+	}
+};