Charnwood Wards Toggle Google Drive Options

by alhashashin

HTML

<div id="map"></div>
<!-- Load Google Maps API once -->
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDz2_riX2TSyE-u-niJyVTizyyUcu3Kuu4"></script>

CSS

/* Full-page map */
html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}
#map {
  height: 100vh;
  width: 100%;
}

#controls {
  padding-top: 10px;
  padding-right: 10px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.switch {
  display: block;
  margin: 12px auto;
  position: relative;
  display: inline-block;
  vertical-align: top;
  width: 115px;
  height: 30px;
  padding: 3px;
  background-color: white;
  -moz-border-radius: 18px;
  -webkit-border-radius: 18px;
  border-radius: 18px;
  cursor: pointer;
}

.switch-input {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
}

.switch-label {
  position: relative;
  display: block;
  height: inherit;
  font-size: 10px;
  text-transform: uppercase;
  background: #1e4b85;
  -moz-border-radius: inherit;
  -webkit-border-radius: inherit;
  border-radius: inherit;
  -webkit-transition: 0.15s ease-out;
  -moz-transition: 0.15s ease-out;
  -o-transition: 0.15s ease-out;
  transition: 0.15s ease-out;
  -webkit-transition-property: opacity background border;
  -moz-transition-property: opacity background border;
  -o-transition-property: opacity background border;
  transition-property: opacity background border;
}
.switch-label:before,
.switch-label:after {
  position: absolute;
  top: 50%;
  margin-top: -0.5em;
  line-height: 1;
  -webkit-transition: inherit;
  -moz-transition: inherit;
  -o-transition: inherit;
  transition: inherit;
  font-size: 13px;
}
.switch-label:before {
  content: attr(data-off);
  right: 10px;
  color: #f9f9f9;
}
.switch-label:after {
  content: attr(data-on);
  left: 10px;
  color: white;
  opacity: 0;
}
.switch-input:checked ~ .switch-label {
  background: #286076;
}
.switch-input:checked ~ .switch-label:before {
  opacity: 0;
}
.switch-input:checked ~ .switch-label:after {
  opacity: 1;
}
.switch-handle {
  position: absolute;
  top: 9px;
  left: 10px;
  width: 18px;
 ...

JavaScript

let polygons = [];
let map;
let clients = {};
let issues = {};
let housing = {};
let debt = {};
let benefits = {};
let charity = {};

async function loadSheetData() {
  const url =
    'https://docs.google.com/spreadsheets/d/e/2PACX-1vSM0Nnl81un0dL8rfV520RT9HigBnD4g9-JTtpnvFZGO-PWlL8sFWIum1H8YxnSBperqoYbAvLg_Yqe/pub?output=csv';
  const response = await fetch(url);
  const csv = await response.text();
  const rows = csv.split('\n').map((row) => row.split(','));

  for (let i = 1; i < rows.length; i++) {
    const ward = rows[i][0];
    clients[ward] = Number(rows[i][16]);
    issues[ward] = Number(rows[i][19]);
    housing[ward] = Number(rows[i][11]);
    debt[ward] = Number(rows[i][5]);
    benefits[ward] = Number(rows[i][1]);
    charity[ward] = Number(rows[i][3]);
  }
  return { clients, issues, housing, debt, benefits, charity };
}

function initMap() {
  // Center map over Charnwood (approx)
  map = new google.maps.Map(document.getElementById('map'), {
    zoom: 11,
    center: { lat: 52.749043, lng: -1.187349 },
    mapId: 'e24be52dc09afe4a7e46dfb2',
    disableDefaultUI: true,
    draggable: false,
    scrollwheel: false,
    disableDoubleClickZoom: true,
    keyboardShortcuts: false,
  });

  // Create the control container
  const controlsDiv = document.createElement('div');
  controlsDiv.id = 'controls';

  // Add checkbox and label
  controlsDiv.innerHTML = `
    <label class="switch" style="margin:0px;">
        <input type="checkbox" class="switch-input" checked>
            <span class="switch-label" data-on="Absolute" data-off="Per Client"></span>
            <span class="switch-handle"></span>
    </label>
    <nav id="nav">
    <ul>
      <li>All issues  <input type="checkbox" data-dataset="issues" checked="checked"> </li>
      <li>Housing <input type="checkbox" data-dataset="housing"></li>
      <li>Debt <input type="checkbox" data-dataset="debt"></li>
      <li>Benefits & tax credits...