From af516242d3bbab52f4ee24812263bcf6c2545f8a Mon Sep 17 00:00:00 2001
From: Eli Ribble <eli@gleipnir.technology>
Date: Wed, 4 Feb 2026 23:57:44 +0000
Subject: [PATCH] Make checkboxes hide map layers

---
 html/static/js/map-multipoint.js |  5 +++++
 rmo/template/status.html         | 25 +++++++++++++++++++++----
 2 files changed, 26 insertions(+), 4 deletions(-)

diff --git a/html/static/js/map-multipoint.js b/html/static/js/map-multipoint.js
index 1e15b108..6b45572d 100644
--- a/html/static/js/map-multipoint.js
+++ b/html/static/js/map-multipoint.js
@@ -215,6 +215,11 @@ class MapMultipoint extends HTMLElement {
 		});
 		this._markers = [marker];
 	}
+
+	SetLayoutProperty(layout, property, value) {
+		return this._map.setLayoutProperty(layout, property, value);
+	}
+
 }
 
 customElements.define('map-multipoint', MapMultipoint);
diff --git a/rmo/template/status.html b/rmo/template/status.html
index 86ec8c25..a7068f97 100644
--- a/rmo/template/status.html
+++ b/rmo/template/status.html
@@ -56,6 +56,8 @@ function renderReports(features) {
 }
 function onLoad() {
 	const map = document.querySelector("map-multipoint");
+	const checkboxNuisance = document.getElementById("checkboxNuisance");
+	const checkboxWater = document.getElementById("checkboxWater");
 	map.addEventListener("load", (event) => {
 		map.addSource('tegola-mosquito', {
 			'type': 'vector',
@@ -87,6 +89,21 @@ function onLoad() {
 				'circle-stroke-color': "#024AB6"
 			}
 		});
+		map.on("idle", () => {
+			function _addCheckboxClick(checkbox, layer_id) {
+				checkbox.onclick = function(e) {
+					if (checkbox.checked) {
+						map.SetLayoutProperty(layer_id, "visibility", "visible");
+					} else {
+						map.SetLayoutProperty(layer_id, "visibility", "none");
+					}
+				}
+			}
+			_addCheckboxClick(checkboxNuisance, "nuisance");
+			_addCheckboxClick(checkboxWater, "pool");
+			checkboxNuisance.onclick()
+			checkboxWater.onclick()
+		});
 		map.on('render', () => {
 			const nuisances = map.queryRenderedFeatures({target: {layerId: 'nuisance'}});
 			const pools = map.queryRenderedFeatures({target: {layerId: 'pool'}});
@@ -137,13 +154,13 @@ document.addEventListener('DOMContentLoaded', onLoad);
 				</div>
 				<div class="col-12">
 					<div class="form-check custom-circle-checkbox">
-						<input class="form-check-input" type="checkbox" id="poiRestaurants" data-color="danger">
-						<label class="form-check-label" for="poiRestaurants">Mosquito Nuisance</label>
+						<input class="form-check-input" type="checkbox" id="checkboxNuisance" data-color="danger">
+						<label class="form-check-label" for="checkboxNuisance">Mosquito Nuisance</label>
 					</div>
 
 					<div class="form-check custom-circle-checkbox">
-						<input class="form-check-input" type="checkbox" id="poiParks" data-color="success">
-						<label class="form-check-label" for="poiParks">Standing Water</label>
+						<input class="form-check-input" type="checkbox" id="checkboxWater" data-color="success">
+						<label class="form-check-label" for="checkboxWater">Standing Water</label>
 					</div>
 				</div>
 			</form>