Gleipnir/nidus-sync
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Make checkboxes hide map layers

Browse source
This commit is contained in:
Eli Ribble 2026-02-04 23:57:44 +00:00
parent df58424dd7
commit af516242d3
No known key found for this signature in database
2 changed files with 26 additions and 4 deletions
Download patch file Download diff file Expand all files Collapse all files

5
html/static/js/map-multipoint.js
View file

@ -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);

25
rmo/template/status.html
View file

@ -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>