From c19066ecb6b08d20d3acb4d3b7fbabbcc8b2c74f Mon Sep 17 00:00:00 2001
From: Eugene Ryoo <eugryooene@gmail.com>
Date: Sat, 6 Jul 2024 17:46:26 -0400
Subject: [PATCH 01/15] dockerize pt. 1

---
 docker-compose.yml | 9 +++++++++
 dockerfile         | 3 +++
 2 files changed, 12 insertions(+)
 create mode 100644 docker-compose.yml
 create mode 100644 dockerfile

diff --git a/docker-compose.yml b/docker-compose.yml
new file mode 100644
index 0000000..caa312b
--- /dev/null
+++ b/docker-compose.yml
@@ -0,0 +1,9 @@
+services:
+  jekyll:
+    # image: jekyll/jekyll
+    build: .
+    volumes:
+      - .:/srv/jekyll
+    ports:
+      - "4000:4000"
+    # command: jekyll serve --force_polling --drafts
\ No newline at end of file
diff --git a/dockerfile b/dockerfile
new file mode 100644
index 0000000..7c3f96d
--- /dev/null
+++ b/dockerfile
@@ -0,0 +1,3 @@
+# from my digging the github action uses jekyll 3.9.5 but that doesn't exist on dhub... 
+FROM jekyll/jekyll:3.8.5
+CMD jekyll serve --force_polling --drafts
\ No newline at end of file

From bcaa7f53e2878f1849c8ddf1b85795d51606c909 Mon Sep 17 00:00:00 2001
From: Eugene Ryoo <eugryooene@gmail.com>
Date: Sat, 6 Jul 2024 19:13:22 -0400
Subject: [PATCH 02/15] edit readme

---
 .gitignore | 3 +++
 README.md  | 5 +++++
 2 files changed, 8 insertions(+)
 create mode 100644 .gitignore

diff --git a/.gitignore b/.gitignore
new file mode 100644
index 0000000..4c070ff
--- /dev/null
+++ b/.gitignore
@@ -0,0 +1,3 @@
+# ignore all reflected build files 
+_site/*
+.jekyll-cache/*
\ No newline at end of file
diff --git a/README.md b/README.md
index c56d0ec..0e8a6db 100644
--- a/README.md
+++ b/README.md
@@ -1,3 +1,8 @@
 # networkmap
 
 This map of PCW's network coverage is built with MapBox. 
+
+# Local Development 
+You can run this site locally in a container using Docker
+* clone the repo with `git clone`
+* `docker compose up -d`
\ No newline at end of file

From 161efe494980af597e0d606dae88e1c4e1d5fd8d Mon Sep 17 00:00:00 2001
From: Eugene Ryoo <eugryooene@gmail.com>
Date: Sat, 6 Jul 2024 20:03:41 -0400
Subject: [PATCH 03/15] use remote url for geojson data

---
 dockerfile | 1 +
 index.html | 3 ++-
 2 files changed, 3 insertions(+), 1 deletion(-)

diff --git a/dockerfile b/dockerfile
index 7c3f96d..97e1032 100644
--- a/dockerfile
+++ b/dockerfile
@@ -1,3 +1,4 @@
 # from my digging the github action uses jekyll 3.9.5 but that doesn't exist on dhub... 
+# https://github.com/jekyll/jekyll/issues/9066 - issue with webrick gem - downgrade version
 FROM jekyll/jekyll:3.8.5
 CMD jekyll serve --force_polling --drafts
\ No newline at end of file
diff --git a/index.html b/index.html
index 2389d50..114b0e0 100644
--- a/index.html
+++ b/index.html
@@ -229,7 +229,8 @@
 
         map.addSource('network-points', {
             type: 'geojson',
-            data: 'https://raw.githubusercontent.com/phillycommunitywireless/pcwnetworkmap/main/data/networkpoints.geojson'
+            // data: 'https://raw.githubusercontent.com/phillycommunitywireless/pcwnetworkmap/main/data/networkpoints.geojson'
+            data: 'https://script.google.com/macros/s/AKfycbx7XajzvU1BwQUqdKa4tLkdTNQjQ1GQjQFBjTH9wiNMTZO9GGzOWFgQVvhx_T-RCyKc/exec?get_geojson'
         });
 
         map.addSource('line', {

From 0085f0c86bdf5ff1d09631fb606ed50746a1dab0 Mon Sep 17 00:00:00 2001
From: Eugene Ryoo <eugryooene@gmail.com>
Date: Mon, 8 Jul 2024 21:09:51 -0400
Subject: [PATCH 04/15] update js to use data from appscript

---
 index.html | 15 +++++++++------
 1 file changed, 9 insertions(+), 6 deletions(-)

diff --git a/index.html b/index.html
index 114b0e0..35081ee 100644
--- a/index.html
+++ b/index.html
@@ -230,22 +230,25 @@
         map.addSource('network-points', {
             type: 'geojson',
             // data: 'https://raw.githubusercontent.com/phillycommunitywireless/pcwnetworkmap/main/data/networkpoints.geojson'
-            data: 'https://script.google.com/macros/s/AKfycbx7XajzvU1BwQUqdKa4tLkdTNQjQ1GQjQFBjTH9wiNMTZO9GGzOWFgQVvhx_T-RCyKc/exec?get_geojson'
-        });
+            data: 'https://script.google.com/macros/s/AKfycbydIK4vAGv4UcwHb9stDAdnnVuYXRZA_YIGQ-vSUgJZHLjgjAoYSd-Vg6G4ZMOBdAVuGA/exec?get_geojson'
+          });
 
         map.addSource('line', {
             type: 'geojson',
-            data: 'https://raw.githubusercontent.com/phillycommunitywireless/pcwnetworkmap/main/data/level1.geojson'
-        });
+            // data: 'https://raw.githubusercontent.com/phillycommunitywireless/pcwnetworkmap/main/data/level1.geojson'
+            data: 'https://script.google.com/macros/s/AKfycbydIK4vAGv4UcwHb9stDAdnnVuYXRZA_YIGQ-vSUgJZHLjgjAoYSd-Vg6G4ZMOBdAVuGA/exec?get_level1'
+          });
 
         map.addSource('new-line', {
             type: 'geojson',
-            data: 'https://raw.githubusercontent.com/phillycommunitywireless/pcwnetworkmap/main/data/level2.geojson'
+            // data: 'https://raw.githubusercontent.com/phillycommunitywireless/pcwnetworkmap/main/data/level2.geojson'
+            data: 'https://script.google.com/macros/s/AKfycbydIK4vAGv4UcwHb9stDAdnnVuYXRZA_YIGQ-vSUgJZHLjgjAoYSd-Vg6G4ZMOBdAVuGA/exec?get_level2'
           });
 
           map.addSource('new-line2', {
             type: 'geojson',
-            data: 'https://raw.githubusercontent.com/phillycommunitywireless/pcwnetworkmap/main/data/level3.geojson'
+            // data: 'https://raw.githubusercontent.com/phillycommunitywireless/pcwnetworkmap/main/data/level3.geojson'
+            data: 'https://script.google.com/macros/s/AKfycbydIK4vAGv4UcwHb9stDAdnnVuYXRZA_YIGQ-vSUgJZHLjgjAoYSd-Vg6G4ZMOBdAVuGA/exec?get_level3'
           });
 
 

From fa98640edf2b96d58d559512c0746b8c365c4142 Mon Sep 17 00:00:00 2001
From: Eugene Ryoo <eugryooene@gmail.com>
Date: Mon, 8 Jul 2024 21:17:33 -0400
Subject: [PATCH 05/15] stupid

---
 index.html | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/index.html b/index.html
index 35081ee..e7fa63a 100644
--- a/index.html
+++ b/index.html
@@ -230,25 +230,25 @@
         map.addSource('network-points', {
             type: 'geojson',
             // data: 'https://raw.githubusercontent.com/phillycommunitywireless/pcwnetworkmap/main/data/networkpoints.geojson'
-            data: 'https://script.google.com/macros/s/AKfycbydIK4vAGv4UcwHb9stDAdnnVuYXRZA_YIGQ-vSUgJZHLjgjAoYSd-Vg6G4ZMOBdAVuGA/exec?get_geojson'
+            data: 'https://script.google.com/macros/s/AKfycbwfmdSpYrkW_z3DFMO87yPzaplL5T6t8CuEeFXRKA6JRn4OGSzvFo-ynRPAGQ_aBMlu_Q/exec?get_geojson'
           });
 
         map.addSource('line', {
             type: 'geojson',
             // data: 'https://raw.githubusercontent.com/phillycommunitywireless/pcwnetworkmap/main/data/level1.geojson'
-            data: 'https://script.google.com/macros/s/AKfycbydIK4vAGv4UcwHb9stDAdnnVuYXRZA_YIGQ-vSUgJZHLjgjAoYSd-Vg6G4ZMOBdAVuGA/exec?get_level1'
+            data: 'https://script.google.com/macros/s/AKfycbwfmdSpYrkW_z3DFMO87yPzaplL5T6t8CuEeFXRKA6JRn4OGSzvFo-ynRPAGQ_aBMlu_Q/exec?get_level1'
           });
 
         map.addSource('new-line', {
             type: 'geojson',
             // data: 'https://raw.githubusercontent.com/phillycommunitywireless/pcwnetworkmap/main/data/level2.geojson'
-            data: 'https://script.google.com/macros/s/AKfycbydIK4vAGv4UcwHb9stDAdnnVuYXRZA_YIGQ-vSUgJZHLjgjAoYSd-Vg6G4ZMOBdAVuGA/exec?get_level2'
+            data: 'https://script.google.com/macros/s/AKfycbwfmdSpYrkW_z3DFMO87yPzaplL5T6t8CuEeFXRKA6JRn4OGSzvFo-ynRPAGQ_aBMlu_Q/exec?get_level2'
           });
 
           map.addSource('new-line2', {
             type: 'geojson',
             // data: 'https://raw.githubusercontent.com/phillycommunitywireless/pcwnetworkmap/main/data/level3.geojson'
-            data: 'https://script.google.com/macros/s/AKfycbydIK4vAGv4UcwHb9stDAdnnVuYXRZA_YIGQ-vSUgJZHLjgjAoYSd-Vg6G4ZMOBdAVuGA/exec?get_level3'
+            data: 'https://script.google.com/macros/s/AKfycbwfmdSpYrkW_z3DFMO87yPzaplL5T6t8CuEeFXRKA6JRn4OGSzvFo-ynRPAGQ_aBMlu_Q/exec?get_level3'
           });
 
 

From f088e02cbec0aae67883c0c81aa7f9769d03ae81 Mon Sep 17 00:00:00 2001
From: Eugene Ryoo <eugryooene@gmail.com>
Date: Tue, 9 Jul 2024 16:23:04 -0400
Subject: [PATCH 06/15] update readme with preview link

---
 README.md | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/README.md b/README.md
index 0e8a6db..41b9ae6 100644
--- a/README.md
+++ b/README.md
@@ -5,4 +5,7 @@ This map of PCW's network coverage is built with MapBox.
 # Local Development 
 You can run this site locally in a container using Docker
 * clone the repo with `git clone`
-* `docker compose up -d`
\ No newline at end of file
+* `docker compose up -d`
+
+# Demo Deploy Link
+* Check out a demo here - https://pcw-spreadsheet-geojson-eugene.netlify.app/
\ No newline at end of file

From 14ff837f31d342a236ff50976424e085d7c46c9d Mon Sep 17 00:00:00 2001
From: Eugene Ryoo <eugryooene@gmail.com>
Date: Tue, 9 Jul 2024 16:44:10 -0400
Subject: [PATCH 07/15] heatmap also use sheet

---
 index.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/index.html b/index.html
index e7fa63a..d4184f7 100644
--- a/index.html
+++ b/index.html
@@ -625,7 +625,7 @@ <h3>${nameProperty}</h3>
   visibility: 'none'
 };
 
-fetch('https://raw.githubusercontent.com/phillycommunitywireless/pcwnetworkmap/main/data/networkpoints.geojson')
+fetch('https://script.google.com/macros/s/AKfycbwfmdSpYrkW_z3DFMO87yPzaplL5T6t8CuEeFXRKA6JRn4OGSzvFo-ynRPAGQ_aBMlu_Q/exec?get_geojson')
     .then(response => response.json())
     .then(data => {
       // Filter features by the "type" property

From 706f911b733565b057ac7c3f4d6e27c8fda6bb94 Mon Sep 17 00:00:00 2001
From: Eugene Ryoo <eugryooene@gmail.com>
Date: Sat, 10 Aug 2024 16:41:53 -0400
Subject: [PATCH 08/15] simultaneously load data w/ promises

---
 index.html | 59 ++++++++++++++++++++++++++++++++++++++++++++++++++----
 1 file changed, 55 insertions(+), 4 deletions(-)

diff --git a/index.html b/index.html
index b9fa6b3..53e6e41 100644
--- a/index.html
+++ b/index.html
@@ -227,29 +227,80 @@
     // Add the GeoJSON layers to the map
     
     map.on('load', () => {
+        // fetch datasources
+        // networkpoints 
+        const networkpoints_url = 'https://script.google.com/macros/s/AKfycbwfmdSpYrkW_z3DFMO87yPzaplL5T6t8CuEeFXRKA6JRn4OGSzvFo-ynRPAGQ_aBMlu_Q/exec?get_geojson'
+        // layer1 
+        const level1_url = 'https://script.google.com/macros/s/AKfycbwfmdSpYrkW_z3DFMO87yPzaplL5T6t8CuEeFXRKA6JRn4OGSzvFo-ynRPAGQ_aBMlu_Q/exec?get_level1'
+        // layer2 
+        const level2_url = 'https://script.google.com/macros/s/AKfycbwfmdSpYrkW_z3DFMO87yPzaplL5T6t8CuEeFXRKA6JRn4OGSzvFo-ynRPAGQ_aBMlu_Q/exec?get_level2'
+        // layer3 
+        const level3_url = 'https://script.google.com/macros/s/AKfycbwfmdSpYrkW_z3DFMO87yPzaplL5T6t8CuEeFXRKA6JRn4OGSzvFo-ynRPAGQ_aBMlu_Q/exec?get_level3'
+    
+        // define promises for data to fetch
+        fetch_promises = [
+          fetch(networkpoints_url).then(
+            response => response.json()
+          ).then(
+            data => {
+              console.log(data)
+              return data
+            }
+          ),
+
+          fetch(level1_url).then(
+            response => response.json()
+          ).then(
+            data => {
+              console.log(data)
+              return data
+            }
+          ),
+
+          fetch(level2_url).then(
+            response => response.json()
+          ).then(
+            data => {
+              console.log(data)
+              return data
+            }
+          ),
+
+          fetch(level3_url).then(
+            response => response.json()
+          ).then(
+            data => {
+              console.log(data)
+              return data
+            }
+          )
+        ]
+
+        // wait for all promises to resolve before adding data to Sources
+        const [networkpoints_data, level1_data, level2_data, level3_data] = await Promise.all(fetch_promises)
 
         map.addSource('network-points', {
             type: 'geojson',
             // data: 'https://raw.githubusercontent.com/phillycommunitywireless/pcwnetworkmap/main/data/networkpoints.geojson'
-            data: 'https://script.google.com/macros/s/AKfycbwfmdSpYrkW_z3DFMO87yPzaplL5T6t8CuEeFXRKA6JRn4OGSzvFo-ynRPAGQ_aBMlu_Q/exec?get_geojson'
+            data: networkpoints_data
           });
 
         map.addSource('line', {
             type: 'geojson',
             // data: 'https://raw.githubusercontent.com/phillycommunitywireless/pcwnetworkmap/main/data/level1.geojson'
-            data: 'https://script.google.com/macros/s/AKfycbwfmdSpYrkW_z3DFMO87yPzaplL5T6t8CuEeFXRKA6JRn4OGSzvFo-ynRPAGQ_aBMlu_Q/exec?get_level1'
+            data: level1_data
           });
 
         map.addSource('new-line', {
             type: 'geojson',
             // data: 'https://raw.githubusercontent.com/phillycommunitywireless/pcwnetworkmap/main/data/level2.geojson'
-            data: 'https://script.google.com/macros/s/AKfycbwfmdSpYrkW_z3DFMO87yPzaplL5T6t8CuEeFXRKA6JRn4OGSzvFo-ynRPAGQ_aBMlu_Q/exec?get_level2'
+            data: level2_data
           });
 
           map.addSource('new-line2', {
             type: 'geojson',
             // data: 'https://raw.githubusercontent.com/phillycommunitywireless/pcwnetworkmap/main/data/level3.geojson'
-            data: 'https://script.google.com/macros/s/AKfycbwfmdSpYrkW_z3DFMO87yPzaplL5T6t8CuEeFXRKA6JRn4OGSzvFo-ynRPAGQ_aBMlu_Q/exec?get_level3'
+            data: level3_data
           });
 
 

From d00fec2048b91af25d04f896840f3aa224fb827a Mon Sep 17 00:00:00 2001
From: Eugene Ryoo <eugryooene@gmail.com>
Date: Sat, 10 Aug 2024 16:42:04 -0400
Subject: [PATCH 09/15] move styles to separate sheet

---
 index.html | 111 ++---------------------------------------------------
 style.css  | 105 ++++++++++++++++++++++++++++++++++++++++++++++++++
 2 files changed, 108 insertions(+), 108 deletions(-)
 create mode 100644 style.css

diff --git a/index.html b/index.html
index 53e6e41..27704de 100644
--- a/index.html
+++ b/index.html
@@ -5,118 +5,13 @@
   <title>Network Map | Philly Community Wireless</title>
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <link rel="icon" type="image/x-icon" href="/img/favicon.ico">
+  <!-- mapbox css -->
   <link href="https://api.mapbox.com/mapbox-gl-js/v3.4.0/mapbox-gl.css" rel="stylesheet">
   <link href='https://api.mapbox.com/mapbox-assembly/v1.5.1/assembly.min.css' rel='stylesheet'>
+  <!-- custom css -->
+  <link rel="stylesheet" href="style.css">
   <script src="https://api.mapbox.com/mapbox-gl-js/v3.4.0/mapbox-gl.js"></script>
   <script src='https://api.mapbox.com/mapbox-assembly/v1.5.1/assembly.js'></script>
-  <style>
-    body { margin: 0; padding: 0; }
-    #map { position: absolute; top: 0; bottom: 0; width: 100%; }
-
-    .layer-icon {
-        width: 20px;
-        height: 20px;
-        display: inline-block;
-        margin-right: 5px;
-      }
-
-    .bookmarks {
-      position:relative;
-      right: 10px;
-      background-color: rgb(227,229,230);
-      padding: 10px;
-      border-radius: 4px;
-      font-family: Arial, sans-serif;
-      z-index: 1;
-      width:100%;
-      height:100%;
-      font-size: 14px;
-    }
-
-    .switch-container {
-      display: flex;
-      align-items: center;
-      margin-right: 1px; /* Add margin to the right */
-    }
-
-    .switch-container div:last-child {
-      margin-left: 1px; /* Add margin to the left for the text */
-    }
-
-    .popup-image-container {
-      margin-top: 10px;
-      text-align: center;
-    }
-
-    .popup-image {
-      max-width: 100%;
-      height: auto;
-    }
-
-    .rounded-rect {
-        background: rgb(227,229,230);
-        border-radius: 10px;
-        box-shadow: 0 0 50px -25px black;
-        top:1px;
-    }
-
-    .flex-center {
-        position: absolute;
-        display: flex;
-        justify-content: center;
-        align-items: center;
-    }
-
-    .flex-center.right {
-        right: 0px;
-    }
-
-    .sidebar-content {
-        position: absolute;
-        width: 90%;
-        font-family: Arial, Helvetica, sans-serif;
-        color: gray;
-    }
-
-    .sidebar-toggle {
-        position: absolute;
-        width: 2em; /* Increased width */
-        height: 2.5em; /* Increased height */
-        font-size: 1.5em; /* Increased font size */
-        overflow: visible;
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        top:auto;
-        left:auto;
-    }
-
-    .sidebar-toggle.right {
-        left: -1.8em;
-    }
-
-    .sidebar-toggle:hover {
-        color: #0aa1cf;
-        cursor: pointer;
-    }
-
-    .sidebar {
-        transition: transform 1s;
-        z-index: 1;
-        width: 215px;
-        height: 300px;
-    }
-
-    .right.collapsed {
-        transform: translateX(215px);
-    }
-
-    .bookmarks div[style*="font-weight: bold"] {
-      margin-top: 10px; /* Adjust this value to increase/decrease the space */
-    }
-
-
-  </style>
 </head>
 <body>
   <div id="map">
diff --git a/style.css b/style.css
new file mode 100644
index 0000000..5d16223
--- /dev/null
+++ b/style.css
@@ -0,0 +1,105 @@
+body { margin: 0; padding: 0; }
+#map { position: absolute; top: 0; bottom: 0; width: 100%; }
+
+.layer-icon {
+    width: 20px;
+    height: 20px;
+    display: inline-block;
+    margin-right: 5px;
+  }
+
+.bookmarks {
+  position:relative;
+  right: 10px;
+  background-color: rgb(227,229,230);
+  padding: 10px;
+  border-radius: 4px;
+  font-family: Arial, sans-serif;
+  z-index: 1;
+  width:100%;
+  height:100%;
+  font-size: 14px;
+}
+
+.switch-container {
+  display: flex;
+  align-items: center;
+  margin-right: 1px; /* Add margin to the right */
+}
+
+.switch-container div:last-child {
+  margin-left: 1px; /* Add margin to the left for the text */
+}
+
+.popup-image-container {
+  margin-top: 10px;
+  text-align: center;
+}
+
+.popup-image {
+  max-width: 100%;
+  height: auto;
+}
+
+.rounded-rect {
+    background: rgb(227,229,230);
+    border-radius: 10px;
+    box-shadow: 0 0 50px -25px black;
+    top:1px;
+}
+
+.flex-center {
+    position: absolute;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+.flex-center.right {
+    right: 0px;
+}
+
+.sidebar-content {
+    position: absolute;
+    width: 90%;
+    font-family: Arial, Helvetica, sans-serif;
+    color: gray;
+}
+
+.sidebar-toggle {
+    position: absolute;
+    width: 2em; /* Increased width */
+    height: 2.5em; /* Increased height */
+    font-size: 1.5em; /* Increased font size */
+    overflow: visible;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    top:auto;
+    left:auto;
+}
+
+.sidebar-toggle.right {
+    left: -1.8em;
+}
+
+.sidebar-toggle:hover {
+    color: #0aa1cf;
+    cursor: pointer;
+}
+
+.sidebar {
+    transition: transform 1s;
+    z-index: 1;
+    width: 215px;
+    height: 300px;
+}
+
+.right.collapsed {
+    transform: translateX(215px);
+}
+
+.bookmarks div[style*="font-weight: bold"] {
+  margin-top: 10px; /* Adjust this value to increase/decrease the space */
+}
+

From fe62532b9b07add1841bad3a40aa7d20d3667afa Mon Sep 17 00:00:00 2001
From: Eugene Ryoo <eugryooene@gmail.com>
Date: Sat, 10 Aug 2024 16:43:36 -0400
Subject: [PATCH 10/15] forgot to stage async()

---
 index.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/index.html b/index.html
index 27704de..6d85989 100644
--- a/index.html
+++ b/index.html
@@ -121,7 +121,7 @@
 
     // Add the GeoJSON layers to the map
     
-    map.on('load', () => {
+    map.on('load', async() => {
         // fetch datasources
         // networkpoints 
         const networkpoints_url = 'https://script.google.com/macros/s/AKfycbwfmdSpYrkW_z3DFMO87yPzaplL5T6t8CuEeFXRKA6JRn4OGSzvFo-ynRPAGQ_aBMlu_Q/exec?get_geojson'

From a47b9406e6f8dce8e2d30a6b311989c9e3fa7850 Mon Sep 17 00:00:00 2001
From: Eugene Ryoo <eugryooene@gmail.com>
Date: Sat, 10 Aug 2024 16:59:19 -0400
Subject: [PATCH 11/15] don't show heatmap until datasource loaded

---
 index.html | 146 ++++++++++++++++++++++++++---------------------------
 1 file changed, 73 insertions(+), 73 deletions(-)

diff --git a/index.html b/index.html
index 6d85989..6091cd0 100644
--- a/index.html
+++ b/index.html
@@ -138,7 +138,6 @@
             response => response.json()
           ).then(
             data => {
-              console.log(data)
               return data
             }
           ),
@@ -147,7 +146,6 @@
             response => response.json()
           ).then(
             data => {
-              console.log(data)
               return data
             }
           ),
@@ -156,7 +154,6 @@
             response => response.json()
           ).then(
             data => {
-              console.log(data)
               return data
             }
           ),
@@ -165,7 +162,6 @@
             response => response.json()
           ).then(
             data => {
-              console.log(data)
               return data
             }
           )
@@ -212,6 +208,8 @@
                 //'line-opacity': 0.4
             //}
         //});
+
+        // Add Network Points Layer
         map.addLayer({
         'id': 'network-points-layer',
         'type': 'symbol',
@@ -237,6 +235,8 @@
               'text-halo-blur': 0.5,
             },
         });
+
+        // Level 1
         // add a line layer with line-dasharray set to the first value in dashArraySequence
         map.addLayer({
             type: 'line',
@@ -265,6 +265,7 @@
             //}
           //});
 
+          // Level 2
           // Add a line layer with line-dasharray set to the first value in dashArraySequence for the new layer
           map.addLayer({
             type: 'line',
@@ -279,6 +280,7 @@
             }
           });
 
+          // Level 3
           map.addLayer({
             type: 'line',
             source: 'new-line2',
@@ -293,6 +295,70 @@
             }
           });
 
+      // Don't add heatmap source/layer until data is loaded and source created
+
+      // Filter features by the "type" property
+      const filteredData = networkpoints_data.features.filter(feature => feature.properties.type === 'RH' || feature.properties.type === 'MN' || feature.properties.type === 'LB');
+
+      // Create a new GeoJSON object with the filtered features
+      const filteredGeoJSON = {
+        type: 'FeatureCollection',
+        features: filteredData
+      };
+
+      map.addSource('heatmap-source', {
+        type: 'geojson',
+        data: filteredGeoJSON // Use the filtered GeoJSON data
+      });
+
+        const heatmapLayer = {
+          id: 'heatmap-layer',
+          type: 'heatmap',
+          source: 'heatmap-source',
+          minzoom: 12,
+          maxzoom: 20,
+          paint: {
+
+            'heatmap-weight': 5,
+            // Heatmap intensity range
+            'heatmap-intensity': 1,
+            // Heatmap color gradient
+            'heatmap-color': [
+              'interpolate',
+              ['linear'],
+              ['heatmap-density'],
+              0, 'rgba(0, 0, 255, 0)', // adjust the color gradient as needed
+              0.2, 'rgba(255, 0, 0, 1)',
+              0.4, 'rgba(255, 165, 0, 1)',
+              0.6, 'rgba(255, 255, 0, 1)',
+              0.8, 'rgba(0, 255, 0, 1)'
+            ],
+            // Heatmap radius
+            'heatmap-radius': {
+                stops: [
+                  [9, 2],
+                  [11, 10],
+                  [13, 20],
+                  [15, 100],
+                  [17, 200],
+                  [19, 500],
+                  [23, 1000]
+                ]
+              },
+            // Heatmap opacity
+            'heatmap-opacity': {
+                default: 1,
+                stops: [
+                  [14, 0.5],
+                  [20, 0.2]
+                ]
+            }
+          },
+          visibility: 'none'
+        };
+
+        map.addLayer(heatmapLayer);
+
         // technique based on https://jsfiddle.net/2mws8y3q/
         // an array of valid line-dasharray values, specifying the lengths of the alternating dashes and gaps that form the dash pattern
         const dashArraySequence = [
@@ -411,7 +477,7 @@ <h3>${nameProperty}</h3>
             popup.remove();
         });
 
-    });
+  }); //end map.on('load')
 
 // Add event listener to the checkbox input
 const toggleCheckbox = document.getElementById('toggleNetworkLinks');
@@ -526,72 +592,6 @@ <h3>${nameProperty}</h3>
       
     }
 
-  const heatmapLayer = {
-  id: 'heatmap-layer',
-  type: 'heatmap',
-  source: 'heatmap-source',
-  minzoom: 12,
-  maxzoom: 20,
-  paint: {
-
-    'heatmap-weight': 5,
-    // Heatmap intensity range
-    'heatmap-intensity': 1,
-    // Heatmap color gradient
-    'heatmap-color': [
-      'interpolate',
-      ['linear'],
-      ['heatmap-density'],
-      0, 'rgba(0, 0, 255, 0)', // adjust the color gradient as needed
-      0.2, 'rgba(255, 0, 0, 1)',
-      0.4, 'rgba(255, 165, 0, 1)',
-      0.6, 'rgba(255, 255, 0, 1)',
-      0.8, 'rgba(0, 255, 0, 1)'
-    ],
-    // Heatmap radius
-    'heatmap-radius': {
-        stops: [
-          [9, 2],
-          [11, 10],
-          [13, 20],
-          [15, 100],
-          [17, 200],
-          [19, 500],
-          [23, 1000]
-        ]
-      },
-    // Heatmap opacity
-    'heatmap-opacity': {
-        default: 1,
-        stops: [
-          [14, 0.5],
-          [20, 0.2]
-        ]
-    }
-  },
-  visibility: 'none'
-};
-
-fetch('https://script.google.com/macros/s/AKfycbwfmdSpYrkW_z3DFMO87yPzaplL5T6t8CuEeFXRKA6JRn4OGSzvFo-ynRPAGQ_aBMlu_Q/exec?get_geojson')
-    .then(response => response.json())
-    .then(data => {
-      // Filter features by the "type" property
-      const filteredData = data.features.filter(feature => feature.properties.type === 'RH' || feature.properties.type === 'MN' || feature.properties.type === 'LB');
-
-      // Create a new GeoJSON object with the filtered features
-      const filteredGeoJSON = {
-        type: 'FeatureCollection',
-        features: filteredData
-      };
-
-      map.addSource('heatmap-source', {
-        type: 'geojson',
-        data: filteredGeoJSON // Use the filtered GeoJSON data
-      });
-
-      map.addLayer(heatmapLayer);
-    });
-
 
 map.on('style.load', () => {
 // Insert the layer beneath any symbol layer.
@@ -722,9 +722,9 @@ <h3>${nameProperty}</h3>
 
 function toggleHeatmapLayer() {
   if (layer5Checkbox.checked) {
-    map.setLayoutProperty(heatmapLayer.id, 'visibility', 'visible');
+    map.setLayoutProperty('heatmap-layer', 'visibility', 'visible');
   } else {
-    map.setLayoutProperty(heatmapLayer.id, 'visibility', 'none');
+    map.setLayoutProperty('heatmap-layer', 'visibility', 'none');
   }
 }
 

From 8044d8c42f1b6ca96acb616df7f813f0d5febd2c Mon Sep 17 00:00:00 2001
From: Eugene Ryoo <eugryooene@gmail.com>
Date: Sat, 10 Aug 2024 17:08:15 -0400
Subject: [PATCH 12/15] adjust formatting

---
 index.html | 1198 +++++++++++++++++++++++++++-------------------------
 1 file changed, 611 insertions(+), 587 deletions(-)

diff --git a/index.html b/index.html
index 6091cd0..1217678 100644
--- a/index.html
+++ b/index.html
@@ -1,5 +1,6 @@
 <!DOCTYPE html>
 <html>
+
 <head>
   <meta charset="utf-8">
   <title>Network Map | Philly Community Wireless</title>
@@ -13,6 +14,7 @@
   <script src="https://api.mapbox.com/mapbox-gl-js/v3.4.0/mapbox-gl.js"></script>
   <script src='https://api.mapbox.com/mapbox-assembly/v1.5.1/assembly.js'></script>
 </head>
+
 <body>
   <div id="map">
     <div id="right" class="sidebar flex-center right collapsed">
@@ -21,46 +23,67 @@
           <div style="font-weight: bold">Select layers:</div>
           <div class='relative bg-gray-lighter mx6 my6 w180 round'>
             <label class='checkbox-container'>
-              <input type='checkbox' id="layer1" checked/>
+              <input type='checkbox' id="layer1" checked />
               <div class='checkbox mr6 checkbox--s-label'>
-                <svg class='icon'><use xlink:href='#icon-check' /></svg>
+                <svg class='icon'>
+                  <use xlink:href='#icon-check' />
+                </svg>
               </div>
-              <img class="layer-icon" src="https://raw.githubusercontent.com/phillycommunitywireless/pcwnetworkmap/main/icons/high_sites.png"> High Sites
+              <img class="layer-icon"
+                src="https://raw.githubusercontent.com/phillycommunitywireless/pcwnetworkmap/main/icons/high_sites.png">
+              High Sites
             </label>
             <label class='checkbox-container'>
-              <input type='checkbox' id="layer4" checked/>
+              <input type='checkbox' id="layer4" checked />
               <div class='checkbox mr6 checkbox--s-label'>
-                <svg class='icon'><use xlink:href='#icon-check' /></svg>
+                <svg class='icon'>
+                  <use xlink:href='#icon-check' />
+                </svg>
               </div>
-              <img class="layer-icon" src="https://raw.githubusercontent.com/phillycommunitywireless/pcwnetworkmap/main/icons/Rooftophubs2.png"> Main Router
+              <img class="layer-icon"
+                src="https://raw.githubusercontent.com/phillycommunitywireless/pcwnetworkmap/main/icons/Rooftophubs2.png">
+              Main Router
             </label>
             <label class='checkbox-container'>
-              <input type='checkbox' id="layer2" checked/>
+              <input type='checkbox' id="layer2" checked />
               <div class='checkbox mr6 checkbox--s-label'>
-                <svg class='icon'><use xlink:href='#icon-check' /></svg>
+                <svg class='icon'>
+                  <use xlink:href='#icon-check' />
+                </svg>
               </div>
-              <img class="layer-icon" src="https://raw.githubusercontent.com/phillycommunitywireless/pcwnetworkmap/main/icons/RooftopHub.png"> Access Points
+              <img class="layer-icon"
+                src="https://raw.githubusercontent.com/phillycommunitywireless/pcwnetworkmap/main/icons/RooftopHub.png">
+              Access Points
             </label>
             <label class='checkbox-container'>
-              <input type='checkbox' id="layer3" checked/>
+              <input type='checkbox' id="layer3" checked />
               <div class='checkbox mr6 checkbox--s-label'>
-                <svg class='icon'><use xlink:href='#icon-check' /></svg>
+                <svg class='icon'>
+                  <use xlink:href='#icon-check' />
+                </svg>
               </div>
-              <img class="layer-icon" src="https://raw.githubusercontent.com/phillycommunitywireless/pcwnetworkmap/main/icons/icon1.png"> Mesh Nodes
+              <img class="layer-icon"
+                src="https://raw.githubusercontent.com/phillycommunitywireless/pcwnetworkmap/main/icons/icon1.png"> Mesh
+              Nodes
             </label>
             <label class='checkbox-container'>
               <input type='checkbox' id="layer5" />
               <div class='checkbox mr6 checkbox--s-label'>
-                <svg class='icon'><use xlink:href='#icon-check' /></svg>
+                <svg class='icon'>
+                  <use xlink:href='#icon-check' />
+                </svg>
               </div>
               Heatmap
             </label>
           </div>
           <div style="font-weight: bold">Navigate to:</div>
           <div class="inline-flex flex--column">
-          <button class="btn btn--gray btn--pill-vt" onclick="navigateToBookmark(1, 67, -120.83)">Norris Square Park</button>
-          <button class="btn btn--gray btn--pill-vc" onclick="navigateToBookmark(2, 64, -168.84)">Fairhill Square Park</button>
-          <button class="btn btn--gray btn--pill-vb" onclick="navigateToBookmark(3, 69, -124.80)">McPherson Square Park</button>
+            <button class="btn btn--gray btn--pill-vt" onclick="navigateToBookmark(1, 67, -120.83)">Norris Square
+              Park</button>
+            <button class="btn btn--gray btn--pill-vc" onclick="navigateToBookmark(2, 64, -168.84)">Fairhill Square
+              Park</button>
+            <button class="btn btn--gray btn--pill-vb" onclick="navigateToBookmark(3, 69, -124.80)">McPherson Square
+              Park</button>
           </div>
           <div style="font-weight: bold">Animate Network:</div>
           <label class="switch-container">
@@ -79,13 +102,13 @@
             <div>Level 3</div>
           </label>
         </div>
-          <div class="sidebar-toggle rounded-rect right" onclick="toggleSidebar('right')">
-            &larr;
+        <div class="sidebar-toggle rounded-rect right" onclick="toggleSidebar('right')">
+          &larr;
         </div>
-      
+
+      </div>
     </div>
   </div>
-</div>
 
   <script src="https://api.mapbox.com/mapbox-gl-js/v2.13.0/mapbox-gl.js"></script>
   <script>
@@ -99,201 +122,201 @@
       pitch: 0,
       bearing: 0,
     });
-    
-    const images =[
-        {imageUrl: 'https://raw.githubusercontent.com/phillycommunitywireless/pcwnetworkmap/main/icons/high_sites.png', id: 'HS_icon'},
-        {imageUrl: 'https://raw.githubusercontent.com/phillycommunitywireless/pcwnetworkmap/main/icons/RooftopHub.png', id: 'RH_icon'},
-        {imageUrl: 'https://raw.githubusercontent.com/phillycommunitywireless/pcwnetworkmap/main/icons/icon1.png', id: 'MN_icon'},
-        {imageUrl: 'https://raw.githubusercontent.com/phillycommunitywireless/pcwnetworkmap/main/icons/Rooftophubs2.png', id: 'LB_icon'},
-        ]
-
-        Promise.all(
-            images.map(img => new Promise((resolve, reject) => {
-                map.loadImage(img.imageUrl, function (error, res) {
-                    if (error) throw error;
-                    map.addImage(img.id, res);
-                    resolve();
-                });
-            }))
-        ).then(() => {
-            console.log("Images Loaded");
+
+    const images = [
+      { imageUrl: 'https://raw.githubusercontent.com/phillycommunitywireless/pcwnetworkmap/main/icons/high_sites.png', id: 'HS_icon' },
+      { imageUrl: 'https://raw.githubusercontent.com/phillycommunitywireless/pcwnetworkmap/main/icons/RooftopHub.png', id: 'RH_icon' },
+      { imageUrl: 'https://raw.githubusercontent.com/phillycommunitywireless/pcwnetworkmap/main/icons/icon1.png', id: 'MN_icon' },
+      { imageUrl: 'https://raw.githubusercontent.com/phillycommunitywireless/pcwnetworkmap/main/icons/Rooftophubs2.png', id: 'LB_icon' },
+    ]
+
+    Promise.all(
+      images.map(img => new Promise((resolve, reject) => {
+        map.loadImage(img.imageUrl, function (error, res) {
+          if (error) throw error;
+          map.addImage(img.id, res);
+          resolve();
         });
+      }))
+    ).then(() => {
+      console.log("Images Loaded");
+    });
 
     // Add the GeoJSON layers to the map
-    
-    map.on('load', async() => {
-        // fetch datasources
-        // networkpoints 
-        const networkpoints_url = 'https://script.google.com/macros/s/AKfycbwfmdSpYrkW_z3DFMO87yPzaplL5T6t8CuEeFXRKA6JRn4OGSzvFo-ynRPAGQ_aBMlu_Q/exec?get_geojson'
-        // layer1 
-        const level1_url = 'https://script.google.com/macros/s/AKfycbwfmdSpYrkW_z3DFMO87yPzaplL5T6t8CuEeFXRKA6JRn4OGSzvFo-ynRPAGQ_aBMlu_Q/exec?get_level1'
-        // layer2 
-        const level2_url = 'https://script.google.com/macros/s/AKfycbwfmdSpYrkW_z3DFMO87yPzaplL5T6t8CuEeFXRKA6JRn4OGSzvFo-ynRPAGQ_aBMlu_Q/exec?get_level2'
-        // layer3 
-        const level3_url = 'https://script.google.com/macros/s/AKfycbwfmdSpYrkW_z3DFMO87yPzaplL5T6t8CuEeFXRKA6JRn4OGSzvFo-ynRPAGQ_aBMlu_Q/exec?get_level3'
-    
-        // define promises for data to fetch
-        fetch_promises = [
-          fetch(networkpoints_url).then(
-            response => response.json()
-          ).then(
-            data => {
-              return data
-            }
-          ),
-
-          fetch(level1_url).then(
-            response => response.json()
-          ).then(
-            data => {
-              return data
-            }
-          ),
-
-          fetch(level2_url).then(
-            response => response.json()
-          ).then(
-            data => {
-              return data
-            }
-          ),
-
-          fetch(level3_url).then(
-            response => response.json()
-          ).then(
-            data => {
-              return data
-            }
-          )
-        ]
-
-        // wait for all promises to resolve before adding data to Sources
-        const [networkpoints_data, level1_data, level2_data, level3_data] = await Promise.all(fetch_promises)
-
-        map.addSource('network-points', {
-            type: 'geojson',
-            // data: 'https://raw.githubusercontent.com/phillycommunitywireless/pcwnetworkmap/main/data/networkpoints.geojson'
-            data: networkpoints_data
-          });
 
-        map.addSource('line', {
-            type: 'geojson',
-            // data: 'https://raw.githubusercontent.com/phillycommunitywireless/pcwnetworkmap/main/data/level1.geojson'
-            data: level1_data
-          });
+    map.on('load', async () => {
+      // fetch datasources
+      // networkpoints 
+      const networkpoints_url = 'https://script.google.com/macros/s/AKfycbwfmdSpYrkW_z3DFMO87yPzaplL5T6t8CuEeFXRKA6JRn4OGSzvFo-ynRPAGQ_aBMlu_Q/exec?get_geojson'
+      // layer1 
+      const level1_url = 'https://script.google.com/macros/s/AKfycbwfmdSpYrkW_z3DFMO87yPzaplL5T6t8CuEeFXRKA6JRn4OGSzvFo-ynRPAGQ_aBMlu_Q/exec?get_level1'
+      // layer2 
+      const level2_url = 'https://script.google.com/macros/s/AKfycbwfmdSpYrkW_z3DFMO87yPzaplL5T6t8CuEeFXRKA6JRn4OGSzvFo-ynRPAGQ_aBMlu_Q/exec?get_level2'
+      // layer3 
+      const level3_url = 'https://script.google.com/macros/s/AKfycbwfmdSpYrkW_z3DFMO87yPzaplL5T6t8CuEeFXRKA6JRn4OGSzvFo-ynRPAGQ_aBMlu_Q/exec?get_level3'
+
+      // define promises for data to fetch
+      fetch_promises = [
+        fetch(networkpoints_url).then(
+          response => response.json()
+        ).then(
+          data => {
+            return data
+          }
+        ),
+
+        fetch(level1_url).then(
+          response => response.json()
+        ).then(
+          data => {
+            return data
+          }
+        ),
+
+        fetch(level2_url).then(
+          response => response.json()
+        ).then(
+          data => {
+            return data
+          }
+        ),
+
+        fetch(level3_url).then(
+          response => response.json()
+        ).then(
+          data => {
+            return data
+          }
+        )
+      ]
+
+      // wait for all promises to resolve before adding data to Sources
+      const [networkpoints_data, level1_data, level2_data, level3_data] = await Promise.all(fetch_promises)
+
+      map.addSource('network-points', {
+        type: 'geojson',
+        // data: 'https://raw.githubusercontent.com/phillycommunitywireless/pcwnetworkmap/main/data/networkpoints.geojson'
+        data: networkpoints_data
+      });
 
-        map.addSource('new-line', {
-            type: 'geojson',
-            // data: 'https://raw.githubusercontent.com/phillycommunitywireless/pcwnetworkmap/main/data/level2.geojson'
-            data: level2_data
-          });
+      map.addSource('line', {
+        type: 'geojson',
+        // data: 'https://raw.githubusercontent.com/phillycommunitywireless/pcwnetworkmap/main/data/level1.geojson'
+        data: level1_data
+      });
 
-          map.addSource('new-line2', {
-            type: 'geojson',
-            // data: 'https://raw.githubusercontent.com/phillycommunitywireless/pcwnetworkmap/main/data/level3.geojson'
-            data: level3_data
-          });
+      map.addSource('new-line', {
+        type: 'geojson',
+        // data: 'https://raw.githubusercontent.com/phillycommunitywireless/pcwnetworkmap/main/data/level2.geojson'
+        data: level2_data
+      });
+
+      map.addSource('new-line2', {
+        type: 'geojson',
+        // data: 'https://raw.githubusercontent.com/phillycommunitywireless/pcwnetworkmap/main/data/level3.geojson'
+        data: level3_data
+      });
 
 
-        // add a line layer without line-dasharray defined to fill the gaps in the dashed line
-        //map.addLayer({
-            //type: 'line',
-            //source: 'line',
-            //id: 'line-background',
-            //visibility: 'none',
-            //minzoom: 13,
-            //paint: {
-                //'line-color': 'lime',
-                //'line-width': 4,
-                //'line-opacity': 0.4
-            //}
-        //});
-
-        // Add Network Points Layer
-        map.addLayer({
+      // add a line layer without line-dasharray defined to fill the gaps in the dashed line
+      //map.addLayer({
+      //type: 'line',
+      //source: 'line',
+      //id: 'line-background',
+      //visibility: 'none',
+      //minzoom: 13,
+      //paint: {
+      //'line-color': 'lime',
+      //'line-width': 4,
+      //'line-opacity': 0.4
+      //}
+      //});
+
+      // Add Network Points Layer
+      map.addLayer({
         'id': 'network-points-layer',
         'type': 'symbol',
         'source': 'network-points',
         'layout': {
-            'icon-image': [
-                'match',
-                ['get','type'],
-                'HS', 'HS_icon',
-                'RH', 'RH_icon',
-                'MN','MN_icon',
-                'LB','LB_icon',
-                'default-icon'
-            ],
-            'icon-size': ['interpolate', ['linear'], ['zoom'], 0, 0.01, 17, 0.45],
-            'icon-allow-overlap': false,
-            'icon-ignore-placement': true,        
-            },
+          'icon-image': [
+            'match',
+            ['get', 'type'],
+            'HS', 'HS_icon',
+            'RH', 'RH_icon',
+            'MN', 'MN_icon',
+            'LB', 'LB_icon',
+            'default-icon'
+          ],
+          'icon-size': ['interpolate', ['linear'], ['zoom'], 0, 0.01, 17, 0.45],
+          'icon-allow-overlap': false,
+          'icon-ignore-placement': true,
+        },
         'paint': {
-              'icon-opacity': 0.85,
-              'text-halo-color': 'rgb(255, 255, 255)',
-              'text-halo-width': 2,
-              'text-halo-blur': 0.5,
-            },
-        });
+          'icon-opacity': 0.85,
+          'text-halo-color': 'rgb(255, 255, 255)',
+          'text-halo-width': 2,
+          'text-halo-blur': 0.5,
+        },
+      });
 
-        // Level 1
-        // add a line layer with line-dasharray set to the first value in dashArraySequence
-        map.addLayer({
-            type: 'line',
-            source: 'line',
-            id: 'line-dashed',
-            visibility: 'none',
-            minzoom: 13,
-            paint: {
-                'line-color': 'lime',
-                'line-width': 2,
-                'line-dasharray': [0, 4, 3],
-                'line-opacity':0.65,
-            }
-        });
+      // Level 1
+      // add a line layer with line-dasharray set to the first value in dashArraySequence
+      map.addLayer({
+        type: 'line',
+        source: 'line',
+        id: 'line-dashed',
+        visibility: 'none',
+        minzoom: 13,
+        paint: {
+          'line-color': 'lime',
+          'line-width': 2,
+          'line-dasharray': [0, 4, 3],
+          'line-opacity': 0.65,
+        }
+      });
 
-        //map.addLayer({
-            //type: 'line',
-            //source: 'new-line',
-            //id: 'new-line-background',
-            //visibility: 'none',
-            //minzoom: 13,
-            //paint: {
-              //'line-color': 'magenta',
-              //'line-width': 4,
-              //'line-opacity': 0.4
-            //}
-          //});
-
-          // Level 2
-          // Add a line layer with line-dasharray set to the first value in dashArraySequence for the new layer
-          map.addLayer({
-            type: 'line',
-            source: 'new-line',
-            id: 'new-line-dashed',
-            visibility: 'none',
-            minzoom: 13,
-            paint: {
-              'line-color': 'magenta',
-              'line-width': 4,
-              'line-opacity':0.65,
-            }
-          });
+      //map.addLayer({
+      //type: 'line',
+      //source: 'new-line',
+      //id: 'new-line-background',
+      //visibility: 'none',
+      //minzoom: 13,
+      //paint: {
+      //'line-color': 'magenta',
+      //'line-width': 4,
+      //'line-opacity': 0.4
+      //}
+      //});
+
+      // Level 2
+      // Add a line layer with line-dasharray set to the first value in dashArraySequence for the new layer
+      map.addLayer({
+        type: 'line',
+        source: 'new-line',
+        id: 'new-line-dashed',
+        visibility: 'none',
+        minzoom: 13,
+        paint: {
+          'line-color': 'magenta',
+          'line-width': 4,
+          'line-opacity': 0.65,
+        }
+      });
 
-          // Level 3
-          map.addLayer({
-            type: 'line',
-            source: 'new-line2',
-            id: 'new-line-dashed2',
-            visibility: 'none',
-            minzoom: 13,
-            paint: {
-              'line-color': 'yellow',
-              'line-width': 3,
-              'line-dasharray': [0, 4, 3],
-              'line-opacity':0.65,
-            }
-          });
+      // Level 3
+      map.addLayer({
+        type: 'line',
+        source: 'new-line2',
+        id: 'new-line-dashed2',
+        visibility: 'none',
+        minzoom: 13,
+        paint: {
+          'line-color': 'yellow',
+          'line-width': 3,
+          'line-dasharray': [0, 4, 3],
+          'line-opacity': 0.65,
+        }
+      });
 
       // Don't add heatmap source/layer until data is loaded and source created
 
@@ -311,144 +334,144 @@
         data: filteredGeoJSON // Use the filtered GeoJSON data
       });
 
-        const heatmapLayer = {
-          id: 'heatmap-layer',
-          type: 'heatmap',
-          source: 'heatmap-source',
-          minzoom: 12,
-          maxzoom: 20,
-          paint: {
-
-            'heatmap-weight': 5,
-            // Heatmap intensity range
-            'heatmap-intensity': 1,
-            // Heatmap color gradient
-            'heatmap-color': [
-              'interpolate',
-              ['linear'],
-              ['heatmap-density'],
-              0, 'rgba(0, 0, 255, 0)', // adjust the color gradient as needed
-              0.2, 'rgba(255, 0, 0, 1)',
-              0.4, 'rgba(255, 165, 0, 1)',
-              0.6, 'rgba(255, 255, 0, 1)',
-              0.8, 'rgba(0, 255, 0, 1)'
-            ],
-            // Heatmap radius
-            'heatmap-radius': {
-                stops: [
-                  [9, 2],
-                  [11, 10],
-                  [13, 20],
-                  [15, 100],
-                  [17, 200],
-                  [19, 500],
-                  [23, 1000]
-                ]
-              },
-            // Heatmap opacity
-            'heatmap-opacity': {
-                default: 1,
-                stops: [
-                  [14, 0.5],
-                  [20, 0.2]
-                ]
-            }
+      const heatmapLayer = {
+        id: 'heatmap-layer',
+        type: 'heatmap',
+        source: 'heatmap-source',
+        minzoom: 12,
+        maxzoom: 20,
+        paint: {
+
+          'heatmap-weight': 5,
+          // Heatmap intensity range
+          'heatmap-intensity': 1,
+          // Heatmap color gradient
+          'heatmap-color': [
+            'interpolate',
+            ['linear'],
+            ['heatmap-density'],
+            0, 'rgba(0, 0, 255, 0)', // adjust the color gradient as needed
+            0.2, 'rgba(255, 0, 0, 1)',
+            0.4, 'rgba(255, 165, 0, 1)',
+            0.6, 'rgba(255, 255, 0, 1)',
+            0.8, 'rgba(0, 255, 0, 1)'
+          ],
+          // Heatmap radius
+          'heatmap-radius': {
+            stops: [
+              [9, 2],
+              [11, 10],
+              [13, 20],
+              [15, 100],
+              [17, 200],
+              [19, 500],
+              [23, 1000]
+            ]
           },
-          visibility: 'none'
-        };
-
-        map.addLayer(heatmapLayer);
-
-        // technique based on https://jsfiddle.net/2mws8y3q/
-        // an array of valid line-dasharray values, specifying the lengths of the alternating dashes and gaps that form the dash pattern
-        const dashArraySequence = [
-            [0, 4, 3],
-            [0.5, 4, 2.5],
-            [1, 4, 2],
-            [1.5, 4, 1.5],
-            [2, 4, 1],
-            [2.5, 4, 0.5],
-            [3, 4, 0],
-            [0, 0.5, 3, 3.5],
-            [0, 1, 3, 3],
-            [0, 1.5, 3, 2.5],
-            [0, 2, 3, 2],
-            [0, 2.5, 3, 1.5],
-            [0, 3, 3, 1],
-            [0, 3.5, 3, 0.5]
-        ];
-
-        let step = 0;
-
-        function animateDashArray(timestamp) {
-            // Update line-dasharray using the next value in dashArraySequence. The
-            // divisor in the expression `timestamp / 100` controls the animation speed.
-            const newStep = parseInt((timestamp / 100) % dashArraySequence.length);
-
-            if (newStep !== step) {
-                map.setPaintProperty('line-dashed', 'line-dasharray', dashArraySequence[step]);
-                step = newStep;
-            }
-
-            // Request the next frame of the animation.
-            requestAnimationFrame(animateDashArray);
+          // Heatmap opacity
+          'heatmap-opacity': {
+            default: 1,
+            stops: [
+              [14, 0.5],
+              [20, 0.2]
+            ]
+          }
+        },
+        visibility: 'none'
+      };
+
+      map.addLayer(heatmapLayer);
+
+      // technique based on https://jsfiddle.net/2mws8y3q/
+      // an array of valid line-dasharray values, specifying the lengths of the alternating dashes and gaps that form the dash pattern
+      const dashArraySequence = [
+        [0, 4, 3],
+        [0.5, 4, 2.5],
+        [1, 4, 2],
+        [1.5, 4, 1.5],
+        [2, 4, 1],
+        [2.5, 4, 0.5],
+        [3, 4, 0],
+        [0, 0.5, 3, 3.5],
+        [0, 1, 3, 3],
+        [0, 1.5, 3, 2.5],
+        [0, 2, 3, 2],
+        [0, 2.5, 3, 1.5],
+        [0, 3, 3, 1],
+        [0, 3.5, 3, 0.5]
+      ];
+
+      let step = 0;
+
+      function animateDashArray(timestamp) {
+        // Update line-dasharray using the next value in dashArraySequence. The
+        // divisor in the expression `timestamp / 100` controls the animation speed.
+        const newStep = parseInt((timestamp / 100) % dashArraySequence.length);
+
+        if (newStep !== step) {
+          map.setPaintProperty('line-dashed', 'line-dasharray', dashArraySequence[step]);
+          step = newStep;
         }
 
-        const dashArraySequence2 = [
-            [0, 4, 3],
-        ];
+        // Request the next frame of the animation.
+        requestAnimationFrame(animateDashArray);
+      }
 
-        let step2 = 0;
+      const dashArraySequence2 = [
+        [0, 4, 3],
+      ];
 
-        function animateNewLine(timestamp) {
-             //Update line-dasharray using the next value in dashArraySequence for the new layer.
-            const newStep2 = parseInt((timestamp / 200) % dashArraySequence2.length);
+      let step2 = 0;
 
-            if (newStep2 !== step2) {
-                map.setPaintProperty('new-line-dashed', 'line-dasharray', dashArraySequence2[step2]);
-                step2 = newStep2;
-            }
+      function animateNewLine(timestamp) {
+        //Update line-dasharray using the next value in dashArraySequence for the new layer.
+        const newStep2 = parseInt((timestamp / 200) % dashArraySequence2.length);
 
-             // Request the next frame of the animation.
-            requestAnimationFrame(animateNewLine);
+        if (newStep2 !== step2) {
+          map.setPaintProperty('new-line-dashed', 'line-dasharray', dashArraySequence2[step2]);
+          step2 = newStep2;
         }
 
-        const dashArraySequence3 = [
-            [0, 4, 3],
-            [0.5, 4, 2.5],
-            [1, 4, 2],
-            [1.5, 4, 1.5],
-            [2, 4, 1],
-            [2.5, 4, 0.5],
-            [3, 4, 0],
-            [0, 0.5, 3, 3.5],
-            [0, 1, 3, 3],
-            [0, 1.5, 3, 2.5],
-            [0, 2, 3, 2],
-            [0, 2.5, 3, 1.5],
-            [0, 3, 3, 1],
-            [0, 3.5, 3, 0.5]
-        ];
-
-        let step3 = 0;
-
-        function animateNewLine2(timestamp) {
-            // Update line-dasharray using the next value in dashArraySequence for the new layer.
-            const newStep3 = parseInt((timestamp / 200) % dashArraySequence3.length);
-
-            if (newStep3 !== step3) {
-                map.setPaintProperty('new-line-dashed2', 'line-dasharray', dashArraySequence3[step3]);
-                step3 = newStep3;
-            }
-
-            // Request the next frame of the animation.
-            requestAnimationFrame(animateNewLine2);
+        // Request the next frame of the animation.
+        requestAnimationFrame(animateNewLine);
+      }
+
+      const dashArraySequence3 = [
+        [0, 4, 3],
+        [0.5, 4, 2.5],
+        [1, 4, 2],
+        [1.5, 4, 1.5],
+        [2, 4, 1],
+        [2.5, 4, 0.5],
+        [3, 4, 0],
+        [0, 0.5, 3, 3.5],
+        [0, 1, 3, 3],
+        [0, 1.5, 3, 2.5],
+        [0, 2, 3, 2],
+        [0, 2.5, 3, 1.5],
+        [0, 3, 3, 1],
+        [0, 3.5, 3, 0.5]
+      ];
+
+      let step3 = 0;
+
+      function animateNewLine2(timestamp) {
+        // Update line-dasharray using the next value in dashArraySequence for the new layer.
+        const newStep3 = parseInt((timestamp / 200) % dashArraySequence3.length);
+
+        if (newStep3 !== step3) {
+          map.setPaintProperty('new-line-dashed2', 'line-dasharray', dashArraySequence3[step3]);
+          step3 = newStep3;
         }
 
-        // Start the animations
-        animateDashArray(0);
-        animateNewLine(0);
-        animateNewLine2(0);
+        // Request the next frame of the animation.
+        requestAnimationFrame(animateNewLine2);
+      }
+
+      // Start the animations
+      animateDashArray(0);
+      animateNewLine(0);
+      animateNewLine2(0);
 
       map.setLayoutProperty(heatmapLayer.id, 'visibility', 'none');
       map.setLayoutProperty('line-background', 'visibility', 'none');
@@ -460,297 +483,298 @@
 
 
       map.on('mouseenter', 'network-points-layer', (e) => {
-            map.getCanvas().style.cursor = 'pointer';
-            const coordinates = e.features[0].geometry.coordinates.slice();
-            const nameProperty = e.features[0].properties.name; // Make sure this property exists in your data
-            const imageLink = e.features[0].properties.image; // Make sure this property exists in your data
-            const popupContent = `
+        map.getCanvas().style.cursor = 'pointer';
+        const coordinates = e.features[0].geometry.coordinates.slice();
+        const nameProperty = e.features[0].properties.name; // Make sure this property exists in your data
+        const imageLink = e.features[0].properties.image; // Make sure this property exists in your data
+        const popupContent = `
             <div class="popup-image-container">
                 <h3>${nameProperty}</h3>
                 <!--<img src="${imageLink}" alt="Image" class="popup-image"> uncomment once images exist in img folder-->
             </div>`;
-            popup.setLngLat(coordinates).setHTML(popupContent).addTo(map);
-        });
+        popup.setLngLat(coordinates).setHTML(popupContent).addTo(map);
+      });
 
-        map.on('mouseleave', 'network-points-layer', () => {
-            map.getCanvas().style.cursor = '';
-            popup.remove();
-        });
+      map.on('mouseleave', 'network-points-layer', () => {
+        map.getCanvas().style.cursor = '';
+        popup.remove();
+      });
 
-  }); //end map.on('load')
-
-// Add event listener to the checkbox input
-const toggleCheckbox = document.getElementById('toggleNetworkLinks');
-toggleCheckbox.addEventListener('change', () => {
-  toggleAnimateNetworkLinks();
-});
-
-function toggleAnimateNetworkLinks() {
-  const lineBackgroundLayer = map.getLayer('line-background');
-  const lineDashedLayer = map.getLayer('line-dashed');
-
-  // If the checkbox is checked, make both layers visible
-  if (toggleCheckbox.checked) {
-    map.setLayoutProperty('line-background', 'visibility', 'visible');
-    map.setLayoutProperty('line-dashed', 'visibility', 'visible');
-  } else {
-    // Otherwise, make both layers invisible
-    map.setLayoutProperty('line-background', 'visibility', 'none');
-    map.setLayoutProperty('line-dashed', 'visibility', 'none');
-  }
-}
-
-  // Add event listener to the checkbox input for the new layer
-const newLayerCheckbox = document.getElementById('toggleNetworkLinks2');
-newLayerCheckbox.addEventListener('change', () => {
-  toggleNewLine();
-});
-
-// Add event listener to the checkbox input for level 3 layer
-const newLayerCheckbox2 = document.getElementById('toggleNetworkLinks3');
-newLayerCheckbox2.addEventListener('change', () => {
-  toggleNewLine2();
-});
-
-
-function toggleNewLine() {
-  const newLineBackgroundLayer = map.getLayer('new-line-background');
-  const newLineDashedLayer = map.getLayer('new-line-dashed');
-
-  // If the checkbox is checked, make both layers visible and start the animation
-  if (newLayerCheckbox.checked) {
-    map.setLayoutProperty('new-line-background', 'visibility', 'visible');
-    map.setLayoutProperty('new-line-dashed', 'visibility', 'visible');
-    step2 = 0;
-    animateNewLine(0); // Start the animation
-  } else {
-    // Otherwise, make both layers invisible
-    map.setLayoutProperty('new-line-background', 'visibility', 'none');
-    map.setLayoutProperty('new-line-dashed', 'visibility', 'none');
-    cancelAnimationFrame(animateNewLine);
-  }
-}
-
-function toggleNewLine2() {
-  const newLineBackgroundLayer2 = map.getLayer('new-line-background2');
-  const newLineDashedLayer2 = map.getLayer('new-line-dashed2');
-
-  // If the checkbox is checked, make both layers visible and start the animation
-  if (newLayerCheckbox2.checked) {
-    map.setLayoutProperty('new-line-background2', 'visibility', 'visible');
-    map.setLayoutProperty('new-line-dashed2', 'visibility', 'visible');
-    step2 = 0;
-    animateNewLine2(0); // Start the animation
-  } else {
-    // Otherwise, make both layers invisible
-    map.setLayoutProperty('new-line-background2', 'visibility', 'none');
-    map.setLayoutProperty('new-line-dashed2', 'visibility', 'none');
-    cancelAnimationFrame(animateNewLine2);
-  }
-}
-
-
-const popup = new mapboxgl.Popup({ closeButton: false, closeOnClick: false });
+    }); //end map.on('load')
+
+    // Add event listener to the checkbox input
+    const toggleCheckbox = document.getElementById('toggleNetworkLinks');
+    toggleCheckbox.addEventListener('change', () => {
+      toggleAnimateNetworkLinks();
+    });
+
+    function toggleAnimateNetworkLinks() {
+      const lineBackgroundLayer = map.getLayer('line-background');
+      const lineDashedLayer = map.getLayer('line-dashed');
+
+      // If the checkbox is checked, make both layers visible
+      if (toggleCheckbox.checked) {
+        map.setLayoutProperty('line-background', 'visibility', 'visible');
+        map.setLayoutProperty('line-dashed', 'visibility', 'visible');
+      } else {
+        // Otherwise, make both layers invisible
+        map.setLayoutProperty('line-background', 'visibility', 'none');
+        map.setLayoutProperty('line-dashed', 'visibility', 'none');
+      }
+    }
+
+    // Add event listener to the checkbox input for the new layer
+    const newLayerCheckbox = document.getElementById('toggleNetworkLinks2');
+    newLayerCheckbox.addEventListener('change', () => {
+      toggleNewLine();
+    });
+
+    // Add event listener to the checkbox input for level 3 layer
+    const newLayerCheckbox2 = document.getElementById('toggleNetworkLinks3');
+    newLayerCheckbox2.addEventListener('change', () => {
+      toggleNewLine2();
+    });
+
+
+    function toggleNewLine() {
+      const newLineBackgroundLayer = map.getLayer('new-line-background');
+      const newLineDashedLayer = map.getLayer('new-line-dashed');
+
+      // If the checkbox is checked, make both layers visible and start the animation
+      if (newLayerCheckbox.checked) {
+        map.setLayoutProperty('new-line-background', 'visibility', 'visible');
+        map.setLayoutProperty('new-line-dashed', 'visibility', 'visible');
+        step2 = 0;
+        animateNewLine(0); // Start the animation
+      } else {
+        // Otherwise, make both layers invisible
+        map.setLayoutProperty('new-line-background', 'visibility', 'none');
+        map.setLayoutProperty('new-line-dashed', 'visibility', 'none');
+        cancelAnimationFrame(animateNewLine);
+      }
+    }
+
+    function toggleNewLine2() {
+      const newLineBackgroundLayer2 = map.getLayer('new-line-background2');
+      const newLineDashedLayer2 = map.getLayer('new-line-dashed2');
+
+      // If the checkbox is checked, make both layers visible and start the animation
+      if (newLayerCheckbox2.checked) {
+        map.setLayoutProperty('new-line-background2', 'visibility', 'visible');
+        map.setLayoutProperty('new-line-dashed2', 'visibility', 'visible');
+        step2 = 0;
+        animateNewLine2(0); // Start the animation
+      } else {
+        // Otherwise, make both layers invisible
+        map.setLayoutProperty('new-line-background2', 'visibility', 'none');
+        map.setLayoutProperty('new-line-dashed2', 'visibility', 'none');
+        cancelAnimationFrame(animateNewLine2);
+      }
+    }
+
+
+    const popup = new mapboxgl.Popup({ closeButton: false, closeOnClick: false });
 
 
     // Function to navigate to a bookmark
     function navigateToBookmark(bookmarkId, pitch, bearing) {
       switch (bookmarkId) {
-          case 1:
-            map.flyTo({
-              center: [-75.13430, 39.98393],
-              zoom: 16.50,
-              pitch: pitch,
-              bearing: bearing,
-              speed: 0.8,
-              curve: 1.2,
-            });
-            break;
-          case 2:
-            map.flyTo({
-              center: [-75.14355, 39.99292],
-              zoom: 15.20,
-              pitch: pitch,
-              bearing: bearing,
-              speed: 0.8,
-              curve: 1.2,
-            });
-            break;
-          case 3:
-            map.flyTo({
-              center: [-75.11241, 39.99722],
-              zoom: 15.94,
-              pitch: pitch,
-              bearing: bearing,
-              speed: 0.8,
-              curve: 1.2,
-            });
-            break;
-          default:
-            break;
-        }
-      
+        case 1:
+          map.flyTo({
+            center: [-75.13430, 39.98393],
+            zoom: 16.50,
+            pitch: pitch,
+            bearing: bearing,
+            speed: 0.8,
+            curve: 1.2,
+          });
+          break;
+        case 2:
+          map.flyTo({
+            center: [-75.14355, 39.99292],
+            zoom: 15.20,
+            pitch: pitch,
+            bearing: bearing,
+            speed: 0.8,
+            curve: 1.2,
+          });
+          break;
+        case 3:
+          map.flyTo({
+            center: [-75.11241, 39.99722],
+            zoom: 15.94,
+            pitch: pitch,
+            bearing: bearing,
+            speed: 0.8,
+            curve: 1.2,
+          });
+          break;
+        default:
+          break;
+      }
+
     }
 
 
-map.on('style.load', () => {
-// Insert the layer beneath any symbol layer.
-  const layers = map.getStyle().layers;
-  const labelLayerId = layers.find(
-  (layer) => layer.type === 'symbol' && layer.layout['text-field']
-  ).id;
-  
-  // The 'building' layer in the Mapbox Streets
-  // vector tileset contains building height data
-  // from OpenStreetMap.
-  map.addLayer(
-    {
-    'id': 'add-3d-buildings',
-    'source': 'composite',
-    'source-layer': 'building',
-    'filter': ['==', 'extrude', 'true'],
-    'type': 'fill-extrusion',
-    'minzoom': 15,
-    'visibility': 'none',
-    'paint': {
-      'fill-extrusion-color': '#aaa',
-      
-      // Use an 'interpolate' expression to
-      // add a smooth transition effect to
-      // the buildings as the user zooms in.
-      'fill-extrusion-height': [
-        'interpolate',
-        ['linear'],
-        ['zoom'],
-        15,
-        0,
-        15.05,
-        ['get', 'height']
-      ],
-      'fill-extrusion-base': [
-        'interpolate',
-        ['linear'],
-        ['zoom'],
-        15,
-        0,
-        15.05,
-        ['get', 'min_height']
-      ],
-      'fill-extrusion-opacity': 0.6
-      }
-    },
-  labelLayerId
-  );
-  });
+    map.on('style.load', () => {
+      // Insert the layer beneath any symbol layer.
+      const layers = map.getStyle().layers;
+      const labelLayerId = layers.find(
+        (layer) => layer.type === 'symbol' && layer.layout['text-field']
+      ).id;
+
+      // The 'building' layer in the Mapbox Streets
+      // vector tileset contains building height data
+      // from OpenStreetMap.
+      map.addLayer(
+        {
+          'id': 'add-3d-buildings',
+          'source': 'composite',
+          'source-layer': 'building',
+          'filter': ['==', 'extrude', 'true'],
+          'type': 'fill-extrusion',
+          'minzoom': 15,
+          'visibility': 'none',
+          'paint': {
+            'fill-extrusion-color': '#aaa',
+
+            // Use an 'interpolate' expression to
+            // add a smooth transition effect to
+            // the buildings as the user zooms in.
+            'fill-extrusion-height': [
+              'interpolate',
+              ['linear'],
+              ['zoom'],
+              15,
+              0,
+              15.05,
+              ['get', 'height']
+            ],
+            'fill-extrusion-base': [
+              'interpolate',
+              ['linear'],
+              ['zoom'],
+              15,
+              0,
+              15.05,
+              ['get', 'min_height']
+            ],
+            'fill-extrusion-opacity': 0.6
+          }
+        },
+        labelLayerId
+      );
+    });
+
 
 
 
+    // Create an object to track the visibility status of each layer
+    const visibilityStatus = {
+      HS: true,
+      RH: true,
+      MN: true,
+      LB: true
+    };
 
-// Create an object to track the visibility status of each layer
-const visibilityStatus = {
-  HS: true,
-  RH: true,
-  MN: true,
-  LB: true
-};
+    // Create an object to store the filter expressions for each layer
+    const layerFilters = {
+      HS: ['==', ['get', 'type'], 'HS'],
+      RH: ['==', ['get', 'type'], 'RH'],
+      MN: ['==', ['get', 'type'], 'MN'],
+      LB: ['==', ['get', 'type'], 'LB']
+    };
 
-// Create an object to store the filter expressions for each layer
-const layerFilters = {
-  HS: ['==', ['get', 'type'], 'HS'],
-  RH: ['==', ['get', 'type'], 'RH'],
-  MN: ['==', ['get', 'type'], 'MN'],
-  LB: ['==', ['get', 'type'], 'LB']
-};
+    // Function to update the visibility of points based on filters
+    function updatePointsVisibility() {
+      const filters = ['any'];
 
-// Function to update the visibility of points based on filters
-function updatePointsVisibility() {
-  const filters = ['any'];
+      for (const type in layerFilters) {
+        if (visibilityStatus[type]) {
+          filters.push(layerFilters[type]);
+        }
+      }
 
-  for (const type in layerFilters) {
-    if (visibilityStatus[type]) {
-      filters.push(layerFilters[type]);
+      map.setFilter('network-points-layer', filters);
     }
-  }
 
-  map.setFilter('network-points-layer', filters);
-}
 
+    // Function to update the visibility of points based on filters
+    function updatePointsVisibility() {
+      const filters = ['any'];
 
-// Function to update the visibility of points based on filters
-function updatePointsVisibility() {
-  const filters = ['any'];
+      for (const type in layerFilters) {
+        if (visibilityStatus[type]) {
+          filters.push(layerFilters[type]);
+        }
+      }
 
-  for (const type in layerFilters) {
-    if (visibilityStatus[type]) {
-      filters.push(layerFilters[type]);
+      map.setFilter('network-points-layer', filters);
     }
-  }
-
-  map.setFilter('network-points-layer', filters);
-}
-
-// Add event listeners to the checkbox inputs for each layer
-const layer1Checkbox = document.getElementById('layer1');
-layer1Checkbox.addEventListener('change', () => {
-  visibilityStatus.HS = layer1Checkbox.checked;
-  updatePointsVisibility();
-});
-
-const layer2Checkbox = document.getElementById('layer2');
-layer2Checkbox.addEventListener('change', () => {
-  visibilityStatus.RH = layer2Checkbox.checked;
-  updatePointsVisibility();
-});
-
-const layer3Checkbox = document.getElementById('layer3');
-layer3Checkbox.addEventListener('change', () => {
-  visibilityStatus.MN = layer3Checkbox.checked;
-  updatePointsVisibility();
-});
-
-const layer4Checkbox = document.getElementById('layer4');
-layer4Checkbox.addEventListener('change', () => {
-  visibilityStatus.LB = layer4Checkbox.checked;
-  updatePointsVisibility();
-});
-
-// Add event listener to the checkbox input for heatmap layer
-const layer5Checkbox = document.getElementById('layer5');
-layer5Checkbox.addEventListener('change', () => {
-  toggleHeatmapLayer();
-});
-
-function toggleHeatmapLayer() {
-  if (layer5Checkbox.checked) {
-    map.setLayoutProperty('heatmap-layer', 'visibility', 'visible');
-  } else {
-    map.setLayoutProperty('heatmap-layer', 'visibility', 'none');
-  }
-}
-
-const nav = new mapboxgl.NavigationControl({
-visualizePitch: true
-});
-map.addControl(nav, 'bottom-right');
-
-function toggleSidebar(id) {
-        const elem = document.getElementById(id);
-        // Add or remove the 'collapsed' CSS class from the sidebar element.
-        // Returns boolean "true" or "false" whether 'collapsed' is in the class list.
-        const collapsed = elem.classList.toggle('collapsed');
-        const padding = {};
-        // 'id' is 'right' or 'left'. When run at start, this object looks like: '{left: 300}';
-        padding[id] = collapsed ? 0 : 300; // 0 if collapsed, 300 px if not. This matches the width of the sidebars in the .sidebar CSS class.
-        // Use `map.easeTo()` with a padding option to adjust the map's center accounting for the position of sidebars.
-        map.easeTo({
-            padding: padding,
-            duration: 1000 // In ms. This matches the CSS transition duration property.
-        });
+
+    // Add event listeners to the checkbox inputs for each layer
+    const layer1Checkbox = document.getElementById('layer1');
+    layer1Checkbox.addEventListener('change', () => {
+      visibilityStatus.HS = layer1Checkbox.checked;
+      updatePointsVisibility();
+    });
+
+    const layer2Checkbox = document.getElementById('layer2');
+    layer2Checkbox.addEventListener('change', () => {
+      visibilityStatus.RH = layer2Checkbox.checked;
+      updatePointsVisibility();
+    });
+
+    const layer3Checkbox = document.getElementById('layer3');
+    layer3Checkbox.addEventListener('change', () => {
+      visibilityStatus.MN = layer3Checkbox.checked;
+      updatePointsVisibility();
+    });
+
+    const layer4Checkbox = document.getElementById('layer4');
+    layer4Checkbox.addEventListener('change', () => {
+      visibilityStatus.LB = layer4Checkbox.checked;
+      updatePointsVisibility();
+    });
+
+    // Add event listener to the checkbox input for heatmap layer
+    const layer5Checkbox = document.getElementById('layer5');
+    layer5Checkbox.addEventListener('change', () => {
+      toggleHeatmapLayer();
+    });
+
+    function toggleHeatmapLayer() {
+      if (layer5Checkbox.checked) {
+        map.setLayoutProperty('heatmap-layer', 'visibility', 'visible');
+      } else {
+        map.setLayoutProperty('heatmap-layer', 'visibility', 'none');
+      }
+    }
+
+    const nav = new mapboxgl.NavigationControl({
+      visualizePitch: true
+    });
+    map.addControl(nav, 'bottom-right');
+
+    function toggleSidebar(id) {
+      const elem = document.getElementById(id);
+      // Add or remove the 'collapsed' CSS class from the sidebar element.
+      // Returns boolean "true" or "false" whether 'collapsed' is in the class list.
+      const collapsed = elem.classList.toggle('collapsed');
+      const padding = {};
+      // 'id' is 'right' or 'left'. When run at start, this object looks like: '{left: 300}';
+      padding[id] = collapsed ? 0 : 300; // 0 if collapsed, 300 px if not. This matches the width of the sidebars in the .sidebar CSS class.
+      // Use `map.easeTo()` with a padding option to adjust the map's center accounting for the position of sidebars.
+      map.easeTo({
+        padding: padding,
+        duration: 1000 // In ms. This matches the CSS transition duration property.
+      });
     }
 
     map.on('load', () => {
-        toggleSidebar('right');
+      toggleSidebar('right');
     });
   </script>
 </body>
-</html>
+
+</html>
\ No newline at end of file

From dd6e1e703f58e78d7890e5fa0d30e27de41db19e Mon Sep 17 00:00:00 2001
From: Eugene Ryoo <eugryooene@gmail.com>
Date: Sat, 10 Aug 2024 17:11:03 -0400
Subject: [PATCH 13/15] move functions animateNewLine and newLine2 out of
 map.on('load') to stop undefined error while toggling lines

---
 index.html | 173 +++++++++++++++++++++++++++--------------------------
 1 file changed, 87 insertions(+), 86 deletions(-)

diff --git a/index.html b/index.html
index 1217678..c14f7a7 100644
--- a/index.html
+++ b/index.html
@@ -382,92 +382,6 @@
 
       map.addLayer(heatmapLayer);
 
-      // technique based on https://jsfiddle.net/2mws8y3q/
-      // an array of valid line-dasharray values, specifying the lengths of the alternating dashes and gaps that form the dash pattern
-      const dashArraySequence = [
-        [0, 4, 3],
-        [0.5, 4, 2.5],
-        [1, 4, 2],
-        [1.5, 4, 1.5],
-        [2, 4, 1],
-        [2.5, 4, 0.5],
-        [3, 4, 0],
-        [0, 0.5, 3, 3.5],
-        [0, 1, 3, 3],
-        [0, 1.5, 3, 2.5],
-        [0, 2, 3, 2],
-        [0, 2.5, 3, 1.5],
-        [0, 3, 3, 1],
-        [0, 3.5, 3, 0.5]
-      ];
-
-      let step = 0;
-
-      function animateDashArray(timestamp) {
-        // Update line-dasharray using the next value in dashArraySequence. The
-        // divisor in the expression `timestamp / 100` controls the animation speed.
-        const newStep = parseInt((timestamp / 100) % dashArraySequence.length);
-
-        if (newStep !== step) {
-          map.setPaintProperty('line-dashed', 'line-dasharray', dashArraySequence[step]);
-          step = newStep;
-        }
-
-        // Request the next frame of the animation.
-        requestAnimationFrame(animateDashArray);
-      }
-
-      const dashArraySequence2 = [
-        [0, 4, 3],
-      ];
-
-      let step2 = 0;
-
-      function animateNewLine(timestamp) {
-        //Update line-dasharray using the next value in dashArraySequence for the new layer.
-        const newStep2 = parseInt((timestamp / 200) % dashArraySequence2.length);
-
-        if (newStep2 !== step2) {
-          map.setPaintProperty('new-line-dashed', 'line-dasharray', dashArraySequence2[step2]);
-          step2 = newStep2;
-        }
-
-        // Request the next frame of the animation.
-        requestAnimationFrame(animateNewLine);
-      }
-
-      const dashArraySequence3 = [
-        [0, 4, 3],
-        [0.5, 4, 2.5],
-        [1, 4, 2],
-        [1.5, 4, 1.5],
-        [2, 4, 1],
-        [2.5, 4, 0.5],
-        [3, 4, 0],
-        [0, 0.5, 3, 3.5],
-        [0, 1, 3, 3],
-        [0, 1.5, 3, 2.5],
-        [0, 2, 3, 2],
-        [0, 2.5, 3, 1.5],
-        [0, 3, 3, 1],
-        [0, 3.5, 3, 0.5]
-      ];
-
-      let step3 = 0;
-
-      function animateNewLine2(timestamp) {
-        // Update line-dasharray using the next value in dashArraySequence for the new layer.
-        const newStep3 = parseInt((timestamp / 200) % dashArraySequence3.length);
-
-        if (newStep3 !== step3) {
-          map.setPaintProperty('new-line-dashed2', 'line-dasharray', dashArraySequence3[step3]);
-          step3 = newStep3;
-        }
-
-        // Request the next frame of the animation.
-        requestAnimationFrame(animateNewLine2);
-      }
-
       // Start the animations
       animateDashArray(0);
       animateNewLine(0);
@@ -502,6 +416,93 @@ <h3>${nameProperty}</h3>
 
     }); //end map.on('load')
 
+
+    // technique based on https://jsfiddle.net/2mws8y3q/
+    // an array of valid line-dasharray values, specifying the lengths of the alternating dashes and gaps that form the dash pattern
+    const dashArraySequence = [
+      [0, 4, 3],
+      [0.5, 4, 2.5],
+      [1, 4, 2],
+      [1.5, 4, 1.5],
+      [2, 4, 1],
+      [2.5, 4, 0.5],
+      [3, 4, 0],
+      [0, 0.5, 3, 3.5],
+      [0, 1, 3, 3],
+      [0, 1.5, 3, 2.5],
+      [0, 2, 3, 2],
+      [0, 2.5, 3, 1.5],
+      [0, 3, 3, 1],
+      [0, 3.5, 3, 0.5]
+    ];
+
+    let step = 0;
+
+    function animateDashArray(timestamp) {
+      // Update line-dasharray using the next value in dashArraySequence. The
+      // divisor in the expression `timestamp / 100` controls the animation speed.
+      const newStep = parseInt((timestamp / 100) % dashArraySequence.length);
+
+      if (newStep !== step) {
+        map.setPaintProperty('line-dashed', 'line-dasharray', dashArraySequence[step]);
+        step = newStep;
+      }
+
+      // Request the next frame of the animation.
+      requestAnimationFrame(animateDashArray);
+    }
+
+    const dashArraySequence2 = [
+      [0, 4, 3],
+    ];
+
+    let step2 = 0;
+
+    function animateNewLine(timestamp) {
+      //Update line-dasharray using the next value in dashArraySequence for the new layer.
+      const newStep2 = parseInt((timestamp / 200) % dashArraySequence2.length);
+
+      if (newStep2 !== step2) {
+        map.setPaintProperty('new-line-dashed', 'line-dasharray', dashArraySequence2[step2]);
+        step2 = newStep2;
+      }
+
+      // Request the next frame of the animation.
+      requestAnimationFrame(animateNewLine);
+    }
+
+    const dashArraySequence3 = [
+      [0, 4, 3],
+      [0.5, 4, 2.5],
+      [1, 4, 2],
+      [1.5, 4, 1.5],
+      [2, 4, 1],
+      [2.5, 4, 0.5],
+      [3, 4, 0],
+      [0, 0.5, 3, 3.5],
+      [0, 1, 3, 3],
+      [0, 1.5, 3, 2.5],
+      [0, 2, 3, 2],
+      [0, 2.5, 3, 1.5],
+      [0, 3, 3, 1],
+      [0, 3.5, 3, 0.5]
+    ];
+
+    let step3 = 0;
+
+    function animateNewLine2(timestamp) {
+      // Update line-dasharray using the next value in dashArraySequence for the new layer.
+      const newStep3 = parseInt((timestamp / 200) % dashArraySequence3.length);
+
+      if (newStep3 !== step3) {
+        map.setPaintProperty('new-line-dashed2', 'line-dasharray', dashArraySequence3[step3]);
+        step3 = newStep3;
+      }
+
+      // Request the next frame of the animation.
+      requestAnimationFrame(animateNewLine2);
+    }
+
     // Add event listener to the checkbox input
     const toggleCheckbox = document.getElementById('toggleNetworkLinks');
     toggleCheckbox.addEventListener('change', () => {

From 583f0394893fbb11204b3788fba3fa8b2a20ba97 Mon Sep 17 00:00:00 2001
From: Eugene Ryoo <eugryooene@gmail.com>
Date: Sat, 10 Aug 2024 17:23:57 -0400
Subject: [PATCH 14/15] adjust favico again

---
 img/favicon.ico => favicon.ico | Bin
 index.html                     |   2 +-
 2 files changed, 1 insertion(+), 1 deletion(-)
 rename img/favicon.ico => favicon.ico (100%)

diff --git a/img/favicon.ico b/favicon.ico
similarity index 100%
rename from img/favicon.ico
rename to favicon.ico
diff --git a/index.html b/index.html
index c14f7a7..094424c 100644
--- a/index.html
+++ b/index.html
@@ -5,7 +5,7 @@
   <meta charset="utf-8">
   <title>Network Map | Philly Community Wireless</title>
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <link rel="icon" type="image/x-icon" href="/img/favicon.ico">
+  <link rel="icon" type="image/x-icon" href="favicon.ico">
   <!-- mapbox css -->
   <link href="https://api.mapbox.com/mapbox-gl-js/v3.4.0/mapbox-gl.css" rel="stylesheet">
   <link href='https://api.mapbox.com/mapbox-assembly/v1.5.1/assembly.min.css' rel='stylesheet'>

From d6731457f4c3c0b46150af6751c7854a42442814 Mon Sep 17 00:00:00 2001
From: Eugene Ryoo <eugryooene@gmail.com>
Date: Tue, 20 Aug 2024 14:13:45 -0400
Subject: [PATCH 15/15] update readme

---
 README.md | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/README.md b/README.md
index 41b9ae6..05c1e71 100644
--- a/README.md
+++ b/README.md
@@ -1,11 +1,12 @@
 # networkmap
 
-This map of PCW's network coverage is built with MapBox. 
+This map of PCW's network coverage is built with MapBox via Jekyll.
 
 # Local Development 
 You can run this site locally in a container using Docker
 * clone the repo with `git clone`
 * `docker compose up -d`
+* `jekyll` will serve at `localhost:4000`
 
-# Demo Deploy Link
-* Check out a demo here - https://pcw-spreadsheet-geojson-eugene.netlify.app/
\ No newline at end of file
+# Editing map contents
+* As of 8/20/24, the map **no longer uses the geosjon files in `/data`**. It is now linked to a Google Apps Script that generates GeoJSON files dynamically based of the content of a spreadsheet - **please contact a PCW staff member for access.**