Update hex json

LibrariesHacked · Oct 15, 2024 · d3e354c · d3e354c
1 parent ac6e084
commit d3e354c
Show file tree

Hide file tree

Showing 5 changed files with 35 additions and 36 deletions.
diff --git a/README.md b/README.md
@@ -1,10 +1,10 @@
 # Green libraries
 
-A single page website for public library services who have signed the Green Library Manifesto
+A single page website to display public library services who have signed the Green Library Manifesto
 
 ## Deployment
 
-The project is deployed using GitHub pages. Github should automatically build and then deploy the site on any changes made to the main branch.
+The project is deployed using GitHub pages. When any changes are made to the `main` branch Github should automatically build and then deploy the site.
 
 ## Built With
 

diff --git a/css/site.css b/css/site.css
@@ -10,7 +10,7 @@
 
 #btn-sign {
   display: inline-block;
-  margin: 10px;
+  margin: 8px 8px 8px 0px;
   text-transform: none;
   font-weight: bolder;
 }

diff --git a/index.html b/index.html
@@ -18,13 +18,13 @@
   <body>
     <div class="c">
       <div>
-        <h1 class="success">green libraries</h1>
+        <h1 class="success">Green Libraries</h1>
       </div>
 
       <p class="subtitle">
-        These are the public library services who have signed the Green
-        Libraries Manifesto. Green Libraries is a collaboration between CILIP,
-        Arts Council England, British Library, Libraries Connected and Julie’s
+        These are public library services who have signed the Green Libraries
+        Manifesto. Green Libraries is a collaboration between CILIP, Arts
+        Council England, British Library, Libraries Connected, and Julie’s
         Bicycle.
       </p>
 
@@ -34,13 +34,12 @@ <h1 class="success">green libraries</h1>
           class="btn primary"
           href="https://www.cilip.org.uk/page/GreenLibrariesManifesto"
           target="_blank"
+          rel="noopener"
           >Sign the manifesto</a
         >
       </p>
 
-      <p class="subtitle" id="p-data-loading">
-        Please wait while data loads...
-      </p>
+      <p class="subtitle" id="p-data-loading">Data loading...</p>
 
       <div id="div-library-hexmap"></div>
 
@@ -56,6 +55,6 @@ <h1 class="success">green libraries</h1>
     <script src="https://unpkg.com/[email protected]/dist/tippy-bundle.umd.min.js"></script>
     <script src="js/oi.hexmap.min.js"></script>
     <script src="js/helpers.js"></script>
-    <script src="js/map.js"></script>
+    <script src="js/map.js" defer></script>
   </body>
 </html>
diff --git a/js/helpers.js b/js/helpers.js
@@ -1,6 +1,6 @@
 var greenLibraries = {
   hexJson:
-    'https://raw.githubusercontent.com/LibrariesHacked/uk-libraries-hexmap/main/services.hexjson',
+    'https://raw.githubusercontent.com/LibrariesHacked/uk-libraries-hexmap/main/uk-utla-2023.hexjson',
   services:
     'https://api.librarydata.uk/services/airtable?fields=Code,Green%20library'
 }
diff --git a/js/map.js b/js/map.js
@@ -1,38 +1,38 @@
-const fetchHexJson = fetch(greenLibraries.hexJson).then(res => res.json())
-const fetchServicesData = fetch(greenLibraries.services).then(res => res.json())
-const allData = Promise.all([fetchHexJson, fetchServicesData])
-const hexMapElement = document.getElementById('div-library-hexmap')
+const fetchHex = fetch(greenLibraries.hexJson).then(res => res.json())
+const fetchServices = fetch(greenLibraries.services).then(res => res.json())
+const allData = Promise.all([fetchHex, fetchServices])
+const hexMapEl = document.getElementById('div-library-hexmap')
 
 let storedData = null
 
 const buildHexMap = () => {
-  hexMapElement.innerHTML = ''
-  var hexdata = storedData[0]
-  var serviceData = storedData[1]
+  hexMapEl.innerHTML = ''
+  const hexdata = storedData[0]
+  const serviceData = storedData[1]
 
-  Object.keys(hexdata.hexes).forEach(hexCode => {
-    var service = serviceData.find(x => x.Code === hexCode)
+  Object.keys(hexdata.hexes).forEach(code => {
+    const service = serviceData.find(x => x.Code === code)
     if (service) {
-      var greenLibrary = service['Green library']
-      hexdata.hexes[hexCode].greenLibrary = greenLibrary === true
-      hexdata.hexes[hexCode].colour = greenLibrary ? '#e3f3e2' : '#f2f2f2'
+      const greenLibrary = service['Green library']
+      hexdata.hexes[code].greenLibrary = greenLibrary === true
+      hexdata.hexes[code].colour = greenLibrary ? '#e3f3e2' : '#f2f2f2'
     }
   })
 
-  new OI.hexmap(hexMapElement, {
+  new OI.hexmap(hexMapEl, {
     label: {
       show: true,
       clip: true,
       format: function (txt, attr) {
-        var greenLibrary = attr.hex.greenLibrary
-        var service = attr.hex.n
+        const greenLibrary = attr.hex.greenLibrary
+        const service = attr.hex.n
 
         var data_attrs = `data-service="${service}" data-green="${
           greenLibrary === true
         }"`
 
-        var greenHex = `<tspan ${data_attrs} class="hexdata green">&check;</tspan>`
-        var nonGreenHex = `<tspan ${data_attrs} class="hexdata">&nbsp;</tspan>`
+        const greenHex = `<tspan ${data_attrs} class="hexdata green">&check;</tspan>`
+        const nonGreenHex = `<tspan ${data_attrs} class="hexdata">&nbsp;</tspan>`
 
         return greenLibrary ? greenHex : nonGreenHex
       }
@@ -43,13 +43,13 @@ const buildHexMap = () => {
   tippy('#div-library-hexmap .hexmap-inner svg g', {
     trigger: 'click',
     content: reference => {
-      var span = reference.querySelector('.hexdata')
+      const span = reference.querySelector('.hexdata')
       if (span && span.dataset.green) {
-        var greenLibrary = span.dataset.green === 'true'
-        var service = span.dataset.service
+        const greenLibrary = span.dataset.green === 'true'
+        const service = span.dataset.service
 
-        var greenPopup = `<div class="popup"><span class="popup-title">${service}</span><br/>Signed up</div>`
-        var nonGreenPopup = `<div class="popup"><span class="popup-title">${service}</span><br/>Not yet signed up</div>`
+        const greenPopup = `<div class="popup"><span class="popup-title">${service}</span><br/>Signed</div>`
+        const nonGreenPopup = `<div class="popup"><span class="popup-title">${service}</span><br/>Not yet signed</div>`
         return greenLibrary ? greenPopup : nonGreenPopup
       }
       return null
@@ -60,7 +60,7 @@ const buildHexMap = () => {
   document.getElementById('p-data-loading').style.display = 'none'
 }
 
-allData.then(res => {
-  storedData = res
+allData.then(r => {
+  storedData = r
   buildHexMap()
 })