leaflet-environmental-layers
Version:
[](https://gitpod.io/#https://github.com/publiclab/leaflet-environmental-layers/) [](http
381 lines (365 loc) • 19.2 kB
HTML
<html>
<head>
<title>Mockup table for layers</title>
<meta charset="utf-8">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link rel="stylesheet" href="styles.css">
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script>
/* global $ */
$(document).ready(function() {
console.log("ready!");
$('.collapse_expand_justicemap').on('click',function() {
var i = $(this).find('i');
if ($(".jm_collapse").is(':visible')) {
i.removeClass('fa-chevron-up').addClass('fa-chevron-down');
$(".jm_collapse").hide();
} else {
i.removeClass('fa-chevron-down').addClass('fa-chevron-up');
$(".jm_collapse").show();
}
});
$('.collapse_expand_weather').on('click',function() {
var i = $(this).find('i');
if ($(".weather_collapse").is(':visible')) {
i.removeClass('fa-chevron-up').addClass('fa-chevron-down');
$(".weather_collapse").hide();
} else {
i.removeClass('fa-chevron-down').addClass('fa-chevron-up');
$(".weather_collapse").show();
}
});
});
</script>
</head>
<body>
<img class="mx-auto d-block" style="max-height: 75px; max-width: 75px;" src="https://static.thenounproject.com/png/257237-200.png" alt="building expelling pollution">
<div class="mx-auto" style="width: 540px;">
<h1>Environmental data near here</h1>
<br>
<p class="text-center">A range of groups publish environmental data near here. <a style="text-decoration: underline;" href="#">Read more</a> or <a style="text-decoration: underline;" href="#">share your own map data.</a></p>
<br>
</div>
<div class="mx-auto" style="width: 850px; height: 300px; overflow:auto;">
<table class="table">
<tbody>
<tr class="fractracker">
<!--CHECKBOX-->
<td>
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="frac_toggle">
<label class="custom-control-label" for="frac_toggle"></label>
</div>
</td>
<!--COLORED MARKER-->
<td>
<div class="fractracker_marker marker_size rounded-circle"></div>
</td>
<!--"ADD A REPORT BUTTON"-->
<td>
<form action="#" method="get">
<button style="line-height: 8px;" type="submit" class="btn btn-default btn-outline-secondary">Add a report</button>
</form>
</td>
<!--LINK FOR LAYER-->
<td>
<a class="font-weight-bold" href="#">Frac Tracker</a>
</td>
<!--LAYER DESCRIPTION-->
<td class="description">Oil and gas infrastructure</td>
</tr>
<!--COLLAPSIBLE ROW - GROUP OF LAYERS-->
<tr>
<td>
<a class="collapse_expand_justicemap" data-toggle="collapse" href="#collapse-section" aria-expanded="false" aria-controls="collapse-section">
<i class="fa fa-chevron-down" aria-hidden="true"></i>
</a>
</td>
<td>
<div class="justicemap_marker marker_size rounded-circle"></div>
</td>
<td></td>
<td>
<a class="font-weight-bold" href="#">Justice Map</a>
</td>
<td class="description">Race, ethnicity, & demographic data</td>
</tr>
<!--JUSTICE MAP GROUP OF LAYERS - COLLAPSE-->
<section>
<tbody class="jm_collapse" id="collapse-section" style="display:none">
<tr>
<td>
<div class="custom-control custom-checkbox">
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="justicemap_income">
<label class="custom-control-label" for="justicemap_income"></label>
</div>
</div>
</td>
<td></td>
<td></td>
<td><a class="font-weight-bold" href="#">Income</a></td>
<td class="description">By income</td>
</tr>
<td>
<div class="custom-control custom-checkbox">
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="jm_american_indian">
<label class="custom-control-label" for="jm_american_indian"></label>
</div>
</div>
</td>
<td></td>
<td></td>
<td><a class="font-weight-bold" href="#">American Indian</a></td>
<td class="description">By ethnicity</td>
</tr>
<td>
<div class="custom-control custom-checkbox">
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="jm_asian">
<label class="custom-control-label" for="jm_asian"></label>
</div>
</div>
</td>
<td></td>
<td></td>
<td><a class="font-weight-bold" href="#">Asian</a></td>
<td class="description">By ethnicity</td>
</tr>
</tbody>
</section>
<!--WEATHER COLLAPSIBLE ROW - GROUP OF LAYERS-->
<tr>
<td>
<a class="collapse_expand_weather" data-toggle="collapse" href="#collapse-section" aria-expanded="false" aria-controls="collapse-section">
<i class="fa fa-chevron-down" aria-hidden="true"></i>
</a>
</td>
<td>
<i class="fa fa-cloud" aria-hidden="true"></i>
</td>
<td></td>
<td>
<a class="font-weight-bold" href="#">Weather</a>
</td>
<td class="description">Weather data</td>
</tr>
<!--WEATHER GROUP OF LAYERS - COLLAPSE-->
<tbody class="weather_collapse" id="collapse-section" style="display:none">
<tr>
<td>
<div class="custom-control custom-checkbox">
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="rain">
<label class="custom-control-label" for="rain"></label>
</div>
</div>
</td>
<td></td>
<td></td>
<td><a class="font-weight-bold" href="#">Rain</a></td>
<td class="description">By weather</td>
</tr>
<td>
<div class="custom-control custom-checkbox">
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="snow">
<label class="custom-control-label" for="snow"></label>
</div>
</div>
</td>
<td></td>
<td></td>
<td><a class="font-weight-bold" href="#">Snow</a></td>
<td class="description">By weather</td>
</tr>
<td>
<div class="custom-control custom-checkbox">
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="pressure">
<label class="custom-control-label" for="pressure"></label>
</div>
</div>
</td>
<td></td>
<td></td>
<td><a class="font-weight-bold" href="#">Pressure</a></td>
<td class="description">By weather</td>
</tr>
</tbody>
<tr class="odor_log">
<td>
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="odor_toggle">
<label class="custom-control-label" for="odor_toggle"></label>
</div>
</td>
<td>
<div class="odor_log_marker marker_size rounded-circle"></div>
</td>
<td>
<form action="#" method="get">
<button style="line-height: 8px;" type="submit" class="btn btn-default btn-outline-secondary">Add a report</button>
</form>
</td>
<td><a class="font-weight-bold" href="#">OdorLog.com</a></td>
<td class="description">Community reports of odors</td>
</tr>
<tr class="openaq">
<td>
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="openaq_toggle">
<label class="custom-control-label" for="openaq_toggle"></label>
</div>
</td>
<td>
<div class="openaq_marker marker_size rounded-circle"></div>
</td>
<td>
<form action="#" method="get">
<button style="line-height: 8px;" type="submit" class="btn btn-default btn-outline-secondary">Get a sensor</button>
</form>
</td>
<td><a class="font-weight-bold" href="#">OpenAQ</a></td>
<td class="description">Air quality data from various sources</td>
</tr>
<tr class="toxic_release">
<td>
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="toxic_toggle">
<label class="custom-control-label" for="toxic_toggle"></label>
</div>
</td>
<td>
<div class="toxic_release_marker marker_size rounded-circle"></div>
</td>
<td>
<!--Add a Report button here if needed-->
</td>
<td><a class="font-weight-bold" href="#">Toxic Release Inventory</a></td>
<td class="description">US gov't collected data from polluting industry</td>
</tr>
<tr class="skytruth">
<td>
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="skytruth_toggle">
<label class="custom-control-label" for="skytruth_toggle"></label>
</div>
</td>
<td>
<div class="skytruth_marker marker_size rounded-circle"></div>
</td>
<td>
<form action="#" method="get">
<button style="line-height: 8px;" type="submit" class="btn btn-default btn-outline-secondary">File a report</button>
</form>
</td>
<td><a class="font-weight-bold" href="#">Sky Truth Alerts</a></td>
<td class="desription">Recent state-level reports of pollution</td>
</tr>
<tr>
<td>
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="openaq_toggle1">
<label class="custom-control-label" for="openaq_toggle1"></label>
</div>
</td>
<td>
<div class="openaq_marker marker_size rounded-circle"></div>
</td>
<td>
<!--Add a Report button here if needed-->
</td>
<td><a class="font-weight-bold" href="#">OpenAQ</a></td>
<td class="description">Air quality data from various sources</td>
</tr>
<tr class="openaq2">
<td>
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="openaq_toggle2">
<label class="custom-control-label" for="openaq_toggle2"></label>
</div>
</td>
<td>
<div class="openaq_marker marker_size rounded-circle"></div>
</td>
<td>
<!--Add a Report button here if needed-->
</td>
<td><a class="font-weight-bold" href="#">OpenAQ</a></td>
<td class="description">Air quality data from various sources</td>
</tr>
<tr class="openaq3">
<td>
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="openaq_toggle3">
<label class="custom-control-label" for="openaq_toggle3"></label>
</div>
</td>
<td>
<div class="openaq_marker marker_size rounded-circle"></div>
</td>
<td>
<!--Add a Report button here if needed-->
</td>
<td><a class="font-weight-bold" href="#">OpenAQ</a></td>
<td class="description">Air quality data from various sources</td>
</tr>
<tr class="openaq4">
<td>
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="openaq_toggle4">
<label class="custom-control-label" for="openaq_toggle4"></label>
</div>
</td>
<td>
<div class="openaq_marker marker_size rounded-circle"></div>
</td>
<td>
<!--Add a Report button here if needed-->
</td>
<td><a class="font-weight-bold" href="#">OpenAQ</a></td>
<td class="description">Air quality data from various sources</td>
</tr>
<tr class="openaq5">
<td>
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="openaq_toggle5">
<label class="custom-control-label" for="openaq_toggle5"></label>
</div>
</td>
<td>
<div class="openaq_marker marker_size rounded-circle"></div>
</td>
<td>
<!--Add a Report button here if needed-->
</td>
<td><a class="font-weight-bold" href="#">OpenAQ</a></td>
<td class="description">Air quality data from various sources</td>
</tr>
<tr class="openaq6">
<td>
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="openaq_toggle6">
<label class="custom-control-label" for="openaq_toggle6"></label>
</div>
</td>
<td>
<div class="openaq_marker marker_size rounded-circle"></div>
</td>
<td>
<!--Add a Report button here if needed-->
</td>
<td><a class="font-weight-bold" href="#">OpenAQ</a></td>
<td class="description">Air quality data from various sources</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>