diff --git a/data/HighSites.geojson b/data/HighSites.geojson
new file mode 100644
index 0000000..ccb2c9f
--- /dev/null
+++ b/data/HighSites.geojson
@@ -0,0 +1,8 @@
+{
+"type": "FeatureCollection",
+"name": "HighSites",
+"crs": { "type": "name", "properties": { "name": "urn:ogc:def:crs:OGC:1.3:CRS84" } },
+"features": [
+{ "type": "Feature", "properties": { "fid": 1, "qc_id": 0, "name": "Gotham Tower", "description": "2000 N 2nd St", "hs_id": "00001" }, "geometry": { "type": "MultiPoint", "coordinates": [ [ -75.1373393, 39.9813486, 0.0 ] ] } }
+]
+}
diff --git a/data/MeshNodes.geojson b/data/MeshNodes.geojson
new file mode 100644
index 0000000..32d00fd
--- /dev/null
+++ b/data/MeshNodes.geojson
@@ -0,0 +1,16 @@
+{
+"type": "FeatureCollection",
+"name": "MeshNodes",
+"crs": { "type": "name", "properties": { "name": "urn:ogc:def:crs:OGC:1.3:CRS84" } },
+"features": [
+{ "type": "Feature", "properties": { "fid": 1, "qc_id": 0, "name": "Downed - 2246 N Howard St - Eracenia", "description": null, "rt_id": "00001" }, "geometry": { "type": "MultiPoint", "coordinates": [ [ -75.1334818, 39.984494, 0.0 ] ] } },
+{ "type": "Feature", "properties": { "fid": 4, "qc_id": 3, "name": "2151 N Howard Street - Petronilla ", "description": null, "rt_id": "00007" }, "geometry": { "type": "MultiPoint", "coordinates": [ [ -75.1335692, 39.9832503, 0.0 ] ] } },
+{ "type": "Feature", "properties": { "fid": 5, "qc_id": 4, "name": "2244 N Howard St - Neftali", "description": null, "rt_id": "00007" }, "geometry": { "type": "MultiPoint", "coordinates": [ [ -75.1336229, 39.983092, 0.0 ] ] } },
+{ "type": "Feature", "properties": { "fid": 6, "qc_id": 5, "name": "2141 Howard St. - NSNP Basement\n", "description": null, "rt_id": "00007" }, "geometry": { "type": "MultiPoint", "coordinates": [ [ -75.1336658, 39.9829523, 0.0 ] ] } },
+{ "type": "Feature", "properties": { "fid": 7, "qc_id": 6, "name": "2116 N Hancock - Crystal NSCA ", "description": null, "rt_id": "00011" }, "geometry": { "type": "MultiPoint", "coordinates": [ [ -75.1359296, 39.9828454, 0.0 ] ] } },
+{ "type": "Feature", "properties": { "fid": 8, "qc_id": 7, "name": "2263 N Howard St - Leonardo Grocery Store", "description": null, "rt_id": "00001" }, "geometry": { "type": "MultiPoint", "coordinates": [ [ -75.1331725, 39.9848118, 0.0 ] ] } },
+{ "type": "Feature", "properties": { "fid": 9, "qc_id": 8, "name": "Las Parcelas Mesh", "description": null, "rt_id": "00009" }, "geometry": { "type": "MultiPoint", "coordinates": [ [ -75.1358091, 39.9851417, 0.0 ] ] } },
+{ "type": "Feature", "properties": { "fid": 10, "qc_id": 9, "name": "Colobo Gardens Solar Mesh ", "description": null, "rt_id": "00009" }, "geometry": { "type": "MultiPoint", "coordinates": [ [ -75.1354577, 39.9848971, 0.0 ] ] } },
+{ "type": "Feature", "properties": { "fid": 11, "qc_id": 10, "name": "GALAEI", "description": null, "rt_id": "00004" }, "geometry": { "type": "MultiPoint", "coordinates": [ [ -75.1343264, 39.9813831, 0.0 ] ] } }
+]
+}
diff --git a/data/RoofTops.geojson b/data/RoofTops.geojson
new file mode 100644
index 0000000..834b204
--- /dev/null
+++ b/data/RoofTops.geojson
@@ -0,0 +1,27 @@
+{
+"type": "FeatureCollection",
+"name": "RoofTops",
+"crs": { "type": "name", "properties": { "name": "urn:ogc:def:crs:OGC:1.3:CRS84" } },
+"features": [
+{ "type": "Feature", "properties": { "fid": 1, "qc_id": 0, "name": "104 W Dauphin St. Free Library Kensington South West corner", "description": null, "hs_id": "00001", "rt_id": "00001" }, "geometry": { "type": "MultiPoint", "coordinates": [ [ -75.1327857, 39.9844695, 0.0 ] ] } },
+{ "type": "Feature", "properties": { "fid": 2, "qc_id": 1, "name": "104 W Dauphin St. Free Library Kensington North West corner", "description": null, "hs_id": "00001", "rt_id": "00002" }, "geometry": { "type": "MultiPoint", "coordinates": [ [ -75.1327066, 39.9847953, 0.0 ] ] } },
+{ "type": "Feature", "properties": { "fid": 3, "qc_id": 2, "name": "114 Diamond St - Dave", "description": null, "hs_id": "00001", "rt_id": "00003" }, "geometry": { "type": "MultiPoint", "coordinates": [ [ -75.1337363, 39.9815949, 0.0 ] ] } },
+{ "type": "Feature", "properties": { "fid": 4, "qc_id": 3, "name": "120 Diamond St - Tony's bar Halftime Goodtimes\n", "description": null, "hs_id": "00001", "rt_id": "00004" }, "geometry": { "type": "MultiPoint", "coordinates": [ [ -75.134091, 39.9817505, 0.0 ] ] } },
+{ "type": "Feature", "properties": { "fid": 5, "qc_id": 4, "name": "2119 N 2nd St - Sarah from Free Library Kensington branch\n", "description": null, "hs_id": "00001", "rt_id": "00005" }, "geometry": { "type": "MultiPoint", "coordinates": [ [ -75.136555, 39.9826455, 0.0 ] ] } },
+{ "type": "Feature", "properties": { "fid": 6, "qc_id": 5, "name": "2136 N Hancock St - Adan at West Kensington Ministries\n", "description": null, "hs_id": "00001", "rt_id": "00006" }, "geometry": { "type": "MultiPoint", "coordinates": [ [ -75.1356421, 39.9832236, 0.0 ] ] } },
+{ "type": "Feature", "properties": { "fid": 7, "qc_id": 6, "name": "2141 N Howard St - NSNP", "description": null, "hs_id": "00001", "rt_id": "00007" }, "geometry": { "type": "MultiPoint", "coordinates": [ [ -75.1336166, 39.9828483, 0.0 ] ] } },
+{ "type": "Feature", "properties": { "fid": 8, "qc_id": 7, "name": "2311 N Howard St. - Liz", "description": null, "hs_id": "00001", "rt_id": "00008" }, "geometry": { "type": "MultiPoint", "coordinates": [ [ -75.1331022, 39.9852239, 0.0 ] ] } },
+{ "type": "Feature", "properties": { "fid": 9, "qc_id": 8, "name": "2248 Palethorp St - NSNP Las Parcelas", "description": null, "hs_id": "00001", "rt_id": "00009" }, "geometry": { "type": "MultiPoint", "coordinates": [ [ -75.135861, 39.9847664, 0.0 ] ] } },
+{ "type": "Feature", "properties": { "fid": 10, "qc_id": 9, "name": "147 Susquehannah - NSCA ", "description": null, "hs_id": "00001", "rt_id": "00010" }, "geometry": { "type": "MultiPoint", "coordinates": [ [ -75.1347376, 39.9836238, 0.0 ] ] } },
+{ "type": "Feature", "properties": { "fid": 11, "qc_id": 10, "name": "2114-2116 Hancock St - NSCA ", "description": null, "hs_id": "00001", "rt_id": "00011" }, "geometry": { "type": "MultiPoint", "coordinates": [ [ -75.1359509, 39.9826405, 0.0 ] ] } },
+{ "type": "Feature", "properties": { "fid": 12, "qc_id": 11, "name": "2130 N Hancock St - PW customer", "description": "This access point Mark Steckel created as a first node of wifi to the park. Not sure if it will mesh with our APs well", "hs_id": "00001", "rt_id": "00012" }, "geometry": { "type": "MultiPoint", "coordinates": [ [ -75.1357024, 39.9830628, 0.0 ] ] } },
+{ "type": "Feature", "properties": { "fid": 13, "qc_id": 12, "name": "2024 N 4th St", "description": null, "hs_id": "00001", "rt_id": "00013" }, "geometry": { "type": "MultiPoint", "coordinates": [ [ -75.1406587, 39.9818499, 0.0 ] ] } },
+{ "type": "Feature", "properties": { "fid": 14, "qc_id": 13, "name": "2141 N 2nd St", "description": null, "hs_id": "00001", "rt_id": "00014" }, "geometry": { "type": "MultiPoint", "coordinates": [ [ -75.1364818, 39.9831307, 0.0 ] ] } },
+{ "type": "Feature", "properties": { "fid": 15, "qc_id": 14, "name": "1425 N American St", "description": null, "hs_id": "00001", "rt_id": "00015" }, "geometry": { "type": "MultiPoint", "coordinates": [ [ -75.1395357, 39.97352, 0.0 ] ] } },
+{ "type": "Feature", "properties": { "fid": 16, "qc_id": 15, "name": "1941 N Lawrence St - Iglesias Gardens / Angel\n", "description": null, "hs_id": "00001", "rt_id": "00016" }, "geometry": { "type": "MultiPoint", "coordinates": [ [ -75.141518, 39.980842, 0.0 ] ] } },
+{ "type": "Feature", "properties": { "fid": 17, "qc_id": 16, "name": "137 Susquehannah", "description": null, "hs_id": "00001", "rt_id": "00017" }, "geometry": { "type": "MultiPoint", "coordinates": [ [ -75.1342331, 39.9837666, 0.0 ] ] } },
+{ "type": "Feature", "properties": { "fid": 18, "qc_id": 17, "name": "1030 Mascher St", "description": null, "hs_id": "00001", "rt_id": "00018" }, "geometry": { "type": "MultiPoint", "coordinates": [ [ -75.135146, 39.9812819, 0.0 ] ] } },
+{ "type": "Feature", "properties": { "fid": 19, "qc_id": 18, "name": "Lillian Marrero Library", "description": null, "hs_id": "00001", "rt_id": "00019" }, "geometry": { "type": "MultiPoint", "coordinates": [ [ -75.142415, 39.9927833, 0.0 ] ] } },
+{ "type": "Feature", "properties": { "fid": 20, "qc_id": 19, "name": "Prevention Point", "description": null, "hs_id": "00001", "rt_id": "00029" }, "geometry": { "type": "MultiPoint", "coordinates": [ [ -75.119823944060386, 39.992792016516518, 0.0 ] ] } }
+]
+}
diff --git a/data/level1.geojson b/data/level1.geojson
new file mode 100644
index 0000000..d6bfd4e
--- /dev/null
+++ b/data/level1.geojson
@@ -0,0 +1,27 @@
+{
+"type": "FeatureCollection",
+"name": "level1",
+"crs": { "type": "name", "properties": { "name": "urn:ogc:def:crs:OGC:1.3:CRS84" } },
+"features": [
+{ "type": "Feature", "properties": { "fid": 1, "qc_id": 0, "name": "Gotham Tower", "description": "2000 N 2nd St", "hs_id": "00001", "fid_2": 1, "qc_id_2": 0, "name_2": "104 W Dauphin St. Free Library Kensington South West corner", "description_2": null, "hs_id_2": "00001", "rt_id": "00001" }, "geometry": { "type": "LineString", "coordinates": [ [ -75.1373393, 39.9813486, 0.0 ], [ -75.1327857, 39.9844695, 0.0 ] ] } },
+{ "type": "Feature", "properties": { "fid": 1, "qc_id": 0, "name": "Gotham Tower", "description": "2000 N 2nd St", "hs_id": "00001", "fid_2": 2, "qc_id_2": 1, "name_2": "104 W Dauphin St. Free Library Kensington North West corner", "description_2": null, "hs_id_2": "00001", "rt_id": "00002" }, "geometry": { "type": "LineString", "coordinates": [ [ -75.1373393, 39.9813486, 0.0 ], [ -75.1327066, 39.9847953, 0.0 ] ] } },
+{ "type": "Feature", "properties": { "fid": 1, "qc_id": 0, "name": "Gotham Tower", "description": "2000 N 2nd St", "hs_id": "00001", "fid_2": 3, "qc_id_2": 2, "name_2": "114 Diamond St - Dave", "description_2": null, "hs_id_2": "00001", "rt_id": "00003" }, "geometry": { "type": "LineString", "coordinates": [ [ -75.1373393, 39.9813486, 0.0 ], [ -75.1337363, 39.9815949, 0.0 ] ] } },
+{ "type": "Feature", "properties": { "fid": 1, "qc_id": 0, "name": "Gotham Tower", "description": "2000 N 2nd St", "hs_id": "00001", "fid_2": 4, "qc_id_2": 3, "name_2": "120 Diamond St - Tony's bar Halftime Goodtimes\n", "description_2": null, "hs_id_2": "00001", "rt_id": "00004" }, "geometry": { "type": "LineString", "coordinates": [ [ -75.1373393, 39.9813486, 0.0 ], [ -75.134091, 39.9817505, 0.0 ] ] } },
+{ "type": "Feature", "properties": { "fid": 1, "qc_id": 0, "name": "Gotham Tower", "description": "2000 N 2nd St", "hs_id": "00001", "fid_2": 5, "qc_id_2": 4, "name_2": "2119 N 2nd St - Sarah from Free Library Kensington branch\n", "description_2": null, "hs_id_2": "00001", "rt_id": "00005" }, "geometry": { "type": "LineString", "coordinates": [ [ -75.1373393, 39.9813486, 0.0 ], [ -75.136555, 39.9826455, 0.0 ] ] } },
+{ "type": "Feature", "properties": { "fid": 1, "qc_id": 0, "name": "Gotham Tower", "description": "2000 N 2nd St", "hs_id": "00001", "fid_2": 6, "qc_id_2": 5, "name_2": "2136 N Hancock St - Adan at West Kensington Ministries\n", "description_2": null, "hs_id_2": "00001", "rt_id": "00006" }, "geometry": { "type": "LineString", "coordinates": [ [ -75.1373393, 39.9813486, 0.0 ], [ -75.1356421, 39.9832236, 0.0 ] ] } },
+{ "type": "Feature", "properties": { "fid": 1, "qc_id": 0, "name": "Gotham Tower", "description": "2000 N 2nd St", "hs_id": "00001", "fid_2": 7, "qc_id_2": 6, "name_2": "2141 N Howard St - NSNP", "description_2": null, "hs_id_2": "00001", "rt_id": "00007" }, "geometry": { "type": "LineString", "coordinates": [ [ -75.1373393, 39.9813486, 0.0 ], [ -75.1336166, 39.9828483, 0.0 ] ] } },
+{ "type": "Feature", "properties": { "fid": 1, "qc_id": 0, "name": "Gotham Tower", "description": "2000 N 2nd St", "hs_id": "00001", "fid_2": 8, "qc_id_2": 7, "name_2": "2311 N Howard St. - Liz", "description_2": null, "hs_id_2": "00001", "rt_id": "00008" }, "geometry": { "type": "LineString", "coordinates": [ [ -75.1373393, 39.9813486, 0.0 ], [ -75.1331022, 39.9852239, 0.0 ] ] } },
+{ "type": "Feature", "properties": { "fid": 1, "qc_id": 0, "name": "Gotham Tower", "description": "2000 N 2nd St", "hs_id": "00001", "fid_2": 9, "qc_id_2": 8, "name_2": "2248 Palethorp St - NSNP Las Parcelas", "description_2": null, "hs_id_2": "00001", "rt_id": "00009" }, "geometry": { "type": "LineString", "coordinates": [ [ -75.1373393, 39.9813486, 0.0 ], [ -75.135861, 39.9847664, 0.0 ] ] } },
+{ "type": "Feature", "properties": { "fid": 1, "qc_id": 0, "name": "Gotham Tower", "description": "2000 N 2nd St", "hs_id": "00001", "fid_2": 10, "qc_id_2": 9, "name_2": "147 Susquehannah - NSCA ", "description_2": null, "hs_id_2": "00001", "rt_id": "00010" }, "geometry": { "type": "LineString", "coordinates": [ [ -75.1373393, 39.9813486, 0.0 ], [ -75.1347376, 39.9836238, 0.0 ] ] } },
+{ "type": "Feature", "properties": { "fid": 1, "qc_id": 0, "name": "Gotham Tower", "description": "2000 N 2nd St", "hs_id": "00001", "fid_2": 11, "qc_id_2": 10, "name_2": "2114-2116 Hancock St - NSCA ", "description_2": null, "hs_id_2": "00001", "rt_id": "00011" }, "geometry": { "type": "LineString", "coordinates": [ [ -75.1373393, 39.9813486, 0.0 ], [ -75.1359509, 39.9826405, 0.0 ] ] } },
+{ "type": "Feature", "properties": { "fid": 1, "qc_id": 0, "name": "Gotham Tower", "description": "2000 N 2nd St", "hs_id": "00001", "fid_2": 12, "qc_id_2": 11, "name_2": "2130 N Hancock St - PW customer", "description_2": "This access point Mark Steckel created as a first node of wifi to the park. Not sure if it will mesh with our APs well", "hs_id_2": "00001", "rt_id": "00012" }, "geometry": { "type": "LineString", "coordinates": [ [ -75.1373393, 39.9813486, 0.0 ], [ -75.1357024, 39.9830628, 0.0 ] ] } },
+{ "type": "Feature", "properties": { "fid": 1, "qc_id": 0, "name": "Gotham Tower", "description": "2000 N 2nd St", "hs_id": "00001", "fid_2": 13, "qc_id_2": 12, "name_2": "2024 N 4th St", "description_2": null, "hs_id_2": "00001", "rt_id": "00013" }, "geometry": { "type": "LineString", "coordinates": [ [ -75.1373393, 39.9813486, 0.0 ], [ -75.1406587, 39.9818499, 0.0 ] ] } },
+{ "type": "Feature", "properties": { "fid": 1, "qc_id": 0, "name": "Gotham Tower", "description": "2000 N 2nd St", "hs_id": "00001", "fid_2": 14, "qc_id_2": 13, "name_2": "2141 N 2nd St", "description_2": null, "hs_id_2": "00001", "rt_id": "00014" }, "geometry": { "type": "LineString", "coordinates": [ [ -75.1373393, 39.9813486, 0.0 ], [ -75.1364818, 39.9831307, 0.0 ] ] } },
+{ "type": "Feature", "properties": { "fid": 1, "qc_id": 0, "name": "Gotham Tower", "description": "2000 N 2nd St", "hs_id": "00001", "fid_2": 15, "qc_id_2": 14, "name_2": "1425 N American St", "description_2": null, "hs_id_2": "00001", "rt_id": "00015" }, "geometry": { "type": "LineString", "coordinates": [ [ -75.1373393, 39.9813486, 0.0 ], [ -75.1395357, 39.97352, 0.0 ] ] } },
+{ "type": "Feature", "properties": { "fid": 1, "qc_id": 0, "name": "Gotham Tower", "description": "2000 N 2nd St", "hs_id": "00001", "fid_2": 16, "qc_id_2": 15, "name_2": "1941 N Lawrence St - Iglesias Gardens / Angel\n", "description_2": null, "hs_id_2": "00001", "rt_id": "00016" }, "geometry": { "type": "LineString", "coordinates": [ [ -75.1373393, 39.9813486, 0.0 ], [ -75.141518, 39.980842, 0.0 ] ] } },
+{ "type": "Feature", "properties": { "fid": 1, "qc_id": 0, "name": "Gotham Tower", "description": "2000 N 2nd St", "hs_id": "00001", "fid_2": 17, "qc_id_2": 16, "name_2": "137 Susquehannah", "description_2": null, "hs_id_2": "00001", "rt_id": "00017" }, "geometry": { "type": "LineString", "coordinates": [ [ -75.1373393, 39.9813486, 0.0 ], [ -75.1342331, 39.9837666, 0.0 ] ] } },
+{ "type": "Feature", "properties": { "fid": 1, "qc_id": 0, "name": "Gotham Tower", "description": "2000 N 2nd St", "hs_id": "00001", "fid_2": 18, "qc_id_2": 17, "name_2": "1030 Mascher St", "description_2": null, "hs_id_2": "00001", "rt_id": "00018" }, "geometry": { "type": "LineString", "coordinates": [ [ -75.1373393, 39.9813486, 0.0 ], [ -75.135146, 39.9812819, 0.0 ] ] } },
+{ "type": "Feature", "properties": { "fid": 1, "qc_id": 0, "name": "Gotham Tower", "description": "2000 N 2nd St", "hs_id": "00001", "fid_2": 19, "qc_id_2": 18, "name_2": "Lillian Marrero Library", "description_2": null, "hs_id_2": "00001", "rt_id": "00019" }, "geometry": { "type": "LineString", "coordinates": [ [ -75.1373393, 39.9813486, 0.0 ], [ -75.142415, 39.9927833, 0.0 ] ] } },
+{ "type": "Feature", "properties": { "fid": 1, "qc_id": 0, "name": "Gotham Tower", "description": "2000 N 2nd St", "hs_id": "00001", "fid_2": 20, "qc_id_2": 19, "name_2": "Prevention Point", "description_2": null, "hs_id_2": "00001", "rt_id": "00029" }, "geometry": { "type": "LineString", "coordinates": [ [ -75.1373393, 39.9813486, 0.0 ], [ -75.119823944060386, 39.992792016516518, 0.0 ] ] } }
+]
+}
diff --git a/data/level2.geojson b/data/level2.geojson
new file mode 100644
index 0000000..5f61971
--- /dev/null
+++ b/data/level2.geojson
@@ -0,0 +1,16 @@
+{
+"type": "FeatureCollection",
+"name": "level2",
+"crs": { "type": "name", "properties": { "name": "urn:ogc:def:crs:OGC:1.3:CRS84" } },
+"features": [
+{ "type": "Feature", "properties": { "fid": 1, "qc_id": 0, "name": "104 W Dauphin St. Free Library Kensington South West corner", "description": null, "hs_id": "00001", "rt_id": "00001", "fid_2": 1, "qc_id_2": 0, "name_2": "Downed - 2246 N Howard St - Eracenia", "description_2": null, "rt_id_2": "00001" }, "geometry": { "type": "LineString", "coordinates": [ [ -75.1327857, 39.9844695, 0.0 ], [ -75.1334818, 39.984494, 0.0 ] ] } },
+{ "type": "Feature", "properties": { "fid": 1, "qc_id": 0, "name": "104 W Dauphin St. Free Library Kensington South West corner", "description": null, "hs_id": "00001", "rt_id": "00001", "fid_2": 8, "qc_id_2": 7, "name_2": "2263 N Howard St - Leonardo Grocery Store", "description_2": null, "rt_id_2": "00001" }, "geometry": { "type": "LineString", "coordinates": [ [ -75.1327857, 39.9844695, 0.0 ], [ -75.1331725, 39.9848118, 0.0 ] ] } },
+{ "type": "Feature", "properties": { "fid": 4, "qc_id": 3, "name": "120 Diamond St - Tony's bar Halftime Goodtimes\n", "description": null, "hs_id": "00001", "rt_id": "00004", "fid_2": 11, "qc_id_2": 10, "name_2": "GALAEI", "description_2": null, "rt_id_2": "00004" }, "geometry": { "type": "LineString", "coordinates": [ [ -75.134091, 39.9817505, 0.0 ], [ -75.1343264, 39.9813831, 0.0 ] ] } },
+{ "type": "Feature", "properties": { "fid": 7, "qc_id": 6, "name": "2141 N Howard St - NSNP", "description": null, "hs_id": "00001", "rt_id": "00007", "fid_2": 4, "qc_id_2": 3, "name_2": "2151 N Howard Street - Petronilla ", "description_2": null, "rt_id_2": "00007" }, "geometry": { "type": "LineString", "coordinates": [ [ -75.1336166, 39.9828483, 0.0 ], [ -75.1335692, 39.9832503, 0.0 ] ] } },
+{ "type": "Feature", "properties": { "fid": 7, "qc_id": 6, "name": "2141 N Howard St - NSNP", "description": null, "hs_id": "00001", "rt_id": "00007", "fid_2": 5, "qc_id_2": 4, "name_2": "2244 N Howard St - Neftali", "description_2": null, "rt_id_2": "00007" }, "geometry": { "type": "LineString", "coordinates": [ [ -75.1336166, 39.9828483, 0.0 ], [ -75.1336229, 39.983092, 0.0 ] ] } },
+{ "type": "Feature", "properties": { "fid": 7, "qc_id": 6, "name": "2141 N Howard St - NSNP", "description": null, "hs_id": "00001", "rt_id": "00007", "fid_2": 6, "qc_id_2": 5, "name_2": "2141 Howard St. - NSNP Basement\n", "description_2": null, "rt_id_2": "00007" }, "geometry": { "type": "LineString", "coordinates": [ [ -75.1336166, 39.9828483, 0.0 ], [ -75.1336658, 39.9829523, 0.0 ] ] } },
+{ "type": "Feature", "properties": { "fid": 9, "qc_id": 8, "name": "2248 Palethorp St - NSNP Las Parcelas", "description": null, "hs_id": "00001", "rt_id": "00009", "fid_2": 9, "qc_id_2": 8, "name_2": "Las Parcelas Mesh", "description_2": null, "rt_id_2": "00009" }, "geometry": { "type": "LineString", "coordinates": [ [ -75.135861, 39.9847664, 0.0 ], [ -75.1358091, 39.9851417, 0.0 ] ] } },
+{ "type": "Feature", "properties": { "fid": 9, "qc_id": 8, "name": "2248 Palethorp St - NSNP Las Parcelas", "description": null, "hs_id": "00001", "rt_id": "00009", "fid_2": 10, "qc_id_2": 9, "name_2": "Colobo Gardens Solar Mesh ", "description_2": null, "rt_id_2": "00009" }, "geometry": { "type": "LineString", "coordinates": [ [ -75.135861, 39.9847664, 0.0 ], [ -75.1354577, 39.9848971, 0.0 ] ] } },
+{ "type": "Feature", "properties": { "fid": 11, "qc_id": 10, "name": "2114-2116 Hancock St - NSCA ", "description": null, "hs_id": "00001", "rt_id": "00011", "fid_2": 7, "qc_id_2": 6, "name_2": "2116 N Hancock - Crystal NSCA ", "description_2": null, "rt_id_2": "00011" }, "geometry": { "type": "LineString", "coordinates": [ [ -75.1359509, 39.9826405, 0.0 ], [ -75.1359296, 39.9828454, 0.0 ] ] } }
+]
+}
diff --git a/index.html b/index.html
new file mode 100644
index 0000000..6afeaa7
--- /dev/null
+++ b/index.html
@@ -0,0 +1,634 @@
+
+<!--This code implements animated lines for the network nodes-->
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8">
+  <title>PhillyCommunity Wireless Network</title>
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <link href="https://api.mapbox.com/mapbox-gl-js/v2.13.0/mapbox-gl.css" rel="stylesheet">
+  <link href='https://api.mapbox.com/mapbox-assembly/v1.3.0/assembly.min.css' rel='stylesheet'>
+  <script src='https://api.mapbox.com/mapbox-assembly/v1.3.0/assembly.js'></script>
+  <style>
+    body { margin: 0; padding: 0; }
+    #map { position: absolute; top: 0; bottom: 0; width: 100%; }
+
+    .map-overlay {
+      position: absolute;
+      top: 10px;
+      right: 10px;
+      background-color: rgb(227,229,230);
+      padding: 0px;
+      border-radius: 10px;
+      font-family: Arial, sans-serif;
+      z-index: 1;
+    }
+
+    .layer-icon {
+        width: 20px;
+        height: 20px;
+        display: inline-block;
+        margin-right: 5px;
+      }
+
+    .bookmarks {
+      position: absolute;
+      top: 20px;
+      right: 20px;
+      background-color: rgb(227,229,230);
+      padding: 10px;
+      border-radius: 4px;
+      font-family: Arial, sans-serif;
+      z-index: 1;
+    }
+
+    .switch-container {
+      display: flex;
+      align-items: center;
+      margin-right: 10px; /* Add margin to the right */
+    }
+
+    .switch-container div:last-child {
+      margin-left: 10px; /* Add margin to the left for the text */
+    }
+
+
+
+  </style>
+</head>
+<body>
+  <div id="map"></div>
+    <div class="map-overlay">
+
+
+  </div>
+  
+  <div class="bookmarks">
+    <div>Select layers:</div>
+    <div class='relative bg-gray-lighter mx6 my6 w180 round'>
+      <label class='checkbox-container'>
+        <input type='checkbox' id="layer1" checked/>
+        <div class='checkbox mr6 checkbox--s-label'>
+          <svg class='icon'><use xlink:href='#icon-check' /></svg>
+        </div>
+        <img class="layer-icon" src="https://raw.githubusercontent.com/fmvaldezg/PCWmap/main/icons/high_sites.png"> High Sites
+      </label>
+      <label class='checkbox-container'>
+        <input type='checkbox' id="layer2" checked/>
+        <div class='checkbox mr6 checkbox--s-label'>
+          <svg class='icon'><use xlink:href='#icon-check' /></svg>
+        </div>
+        <img class="layer-icon" src="https://raw.githubusercontent.com/fmvaldezg/PCWmap/main/icons/RooftopHub.png"> Rooftop Hubs
+      </label>
+      <label class='checkbox-container'>
+        <input type='checkbox' id="layer3" checked/>
+        <div class='checkbox mr6 checkbox--s-label'>
+          <svg class='icon'><use xlink:href='#icon-check' /></svg>
+        </div>
+        <img class="layer-icon" src="https://raw.githubusercontent.com/fmvaldezg/PCWmap/main/icons/icon1.png"> Mesh Nodes
+      </label>
+      <label class='checkbox-container'>
+        <input type='checkbox' id="layer4" />
+        <div class='checkbox mr6 checkbox--s-label'>
+          <svg class='icon'><use xlink:href='#icon-check' /></svg>
+        </div>
+        Heatmap
+      </label>
+    </div>
+    <div>Navigate to:</div>
+    <div class="inline-flex flex--column">
+    <button class="btn btn--gray btn--pill-vt" onclick="navigateToBookmark(1, 0, 0)">Norris Square Park</button>
+    <button class="btn btn--gray btn--pill-vc" onclick="navigateToBookmark(2, 0, 90)">Existing Network</button>
+    <button class="btn btn--gray btn--pill-vb" onclick="navigateToBookmark(3, 60, 180)">3D View</button>
+    </div>
+    <div>Animate Network:</div>
+    <label class="switch-container">
+      <input type="checkbox" id="toggleNetworkLinks" />
+      <div class="switch"></div>
+      <div>Level 1</div>
+    </label>
+    <label class="switch-container">
+      <input type="checkbox" id="toggleNetworkLinks2" />
+      <div class="switch"></div>
+      <div>Level 2</div>
+    </label>
+  </div>
+
+  <script src="https://api.mapbox.com/mapbox-gl-js/v2.13.0/mapbox-gl.js"></script>
+  <script>
+    mapboxgl.accessToken = 'pk.eyJ1IjoiZm12YWxkZXpnODQiLCJhIjoiY2xqajJzZXZ2MDU3ZTNybHBrdHo4OWo4aSJ9.ENnejUYGtJT-74gG0opSQA';
+
+    const map = new mapboxgl.Map({
+      container: 'map',
+      style: 'mapbox://styles/mapbox/dark-v11',
+      zoom: 14,
+      center: [-75.1405, 39.9839],
+      pitch: 0,
+      bearing: 0,
+    });
+
+    // Define an array of GeoJSON layer URLs and their associated icons
+    const layers = [
+      {
+        url: 'https://raw.githubusercontent.com/fmvaldezg/PCWmap/main/data/high_sites.geojson',
+        icon: 'https://raw.githubusercontent.com/fmvaldezg/PCWmap/main/icons/high_sites.png',
+        id: 'high-sites-layer',
+        name: 'High Sites',
+        popup: '<h3>High Sites</h3><p>{name}</p>'
+      },
+      {
+        url: 'https://raw.githubusercontent.com/fmvaldezg/PCWmap/main/data/rooftop_hubs.geojson',
+        icon: 'https://raw.githubusercontent.com/fmvaldezg/PCWmap/main/icons/RooftopHub.png',
+        id: 'rooftop-hubs-layer',
+        name: 'Rooftop Hubs',
+        popup: '<h3>Rooftop Hubs</h3><p>{name}</p>'
+      },
+      {
+        url: 'https://raw.githubusercontent.com/fmvaldezg/PCWmap/main/data/mesh_nodes.geojson',
+        icon: 'https://raw.githubusercontent.com/fmvaldezg/PCWmap/main/icons/icon1.png',
+        id: 'mesh-nodes-layer',
+        name: 'Mesh Nodes',
+        popup: '<h3>Mesh Nodes</h3><p>{name}</p>'
+      },
+      {
+        url: 'https://raw.githubusercontent.com/fmvaldezg/PCWmap/main/data/network-points.geojson',
+        icon: 'https://raw.githubusercontent.com/fmvaldezg/PCWmap/main/icons/icon1.png',
+        id: 'mesh-nodes-layer',
+        name: 'Mesh Nodes',
+        popup: '<h3>Mesh Nodes</h3><p>{name}</p>'
+      },
+    ];
+
+    // Add the GeoJSON layers to the map
+    layers.forEach(layer => {
+      map.on('load', () => {
+        map.loadImage(layer.icon, (error, image) => {
+          if (error) throw error;
+          map.addImage(layer.icon, image);
+          map.addSource(layer.id, {
+            type: 'geojson',
+            data: layer.url
+          });
+          map.addLayer({
+            id: layer.id,
+            type: 'symbol',
+            source: layer.id,
+            layout: {
+              'icon-image': layer.icon,
+              'icon-size': ['interpolate', ['linear'], ['zoom'], 0, 0.01, 17, 0.7],
+              'icon-allow-overlap': true,
+              'icon-ignore-placement': true,
+              'text-field': ['get','names'],
+              'text-size': ['interpolate', ['linear'], ['zoom'], 0, 12, 17, 16],
+              'text-anchor': 'left',
+              'text-justify': 'left',
+              'text-offset': [1.2,0],
+            },
+            paint: {
+              'icon-opacity': 0.9,
+              'text-halo-color': 'rgb(255, 255, 255)',
+              'text-halo-width': 2,
+              'text-halo-blur': 0.5,
+            },
+            sourceLayer: 'default',
+            minzoom: 12,
+            maxzoom: 22,
+            visible: layer.visible // Set the initial visibility to true
+          });
+        });
+      });
+    });
+    
+    map.on('load', () => {
+        map.addSource('line', {
+            type: 'geojson',
+            data: 'https://raw.githubusercontent.com/fmvaldezg/PCW_animatedlines/main/data/level1.geojson'
+        });
+
+        map.addSource('new-line', {
+            type: 'geojson',
+            data: 'https://raw.githubusercontent.com/fmvaldezg/PCW_animatedlines/main/data/level2.geojson'
+          });
+
+
+        // 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 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': 4,
+                'line-dasharray': [0, 4, 3]
+            }
+        });
+
+        //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
+            //}
+          //});
+
+          // 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-dasharray': [0, 4, 3]
+            }
+          });
+
+        // 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],
+            [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 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);
+        }
+
+        // Start the animations
+        animateDashArray(0);
+        animateNewLine(0);
+
+
+    });
+
+// 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();
+});
+
+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);
+  }
+}
+
+    // Toggle layer visibility based on checkbox state
+    const toggleLayer = (layerId, checked) => {
+      const visibility = checked ? 'visible' : 'none';
+      map.setLayoutProperty(layerId, 'visibility', visibility);
+      if (layerId === heatmapLayer.id) {
+    // Toggle heatmap layer visibility
+        map.setLayoutProperty('heatmap-layer', 'visibility', visibility);
+      } else {
+        map.setLayoutProperty(layerId, 'visibility', visibility);
+      }
+    };
+
+
+    // Attach event listeners to layer checkboxes
+    const layer1Checkbox = document.getElementById('layer1');
+    layer1Checkbox.addEventListener('change', () => {
+      toggleLayer(layers[0].id, layer1Checkbox.checked);
+    });
+
+    const layer2Checkbox = document.getElementById('layer2');
+    layer2Checkbox.addEventListener('change', () => {
+      toggleLayer(layers[1].id, layer2Checkbox.checked);
+    });
+
+    const layer3Checkbox = document.getElementById('layer3');
+    layer3Checkbox.addEventListener('change', () => {
+      toggleLayer(layers[2].id, layer3Checkbox.checked);
+    });
+
+    const layer4Checkbox = document.getElementById('layer4');
+    layer4Checkbox.addEventListener('change', () => {
+      toggleLayer(heatmapLayer.id, layer4Checkbox.checked);
+    });
+
+    // Add popup functionality
+    const popup = new mapboxgl.Popup({ closeButton: false, closeOnClick: false });
+
+    map.on('mouseenter', 'high-sites-layer', (e) => {
+      map.getCanvas().style.cursor = 'pointer';
+      const coordinates = e.features[0].geometry.coordinates.slice();
+      const layerIndex = layers.findIndex(layer => layer.url === 'https://raw.githubusercontent.com/fmvaldezg/PCWmap/main/data/high_sites.geojson');
+      const nameProperty = e.features[0].properties.name;
+      const popupContent = layers[layerIndex].popup.replace('{name}', nameProperty);
+      popup.setLngLat(coordinates).setHTML(popupContent).addTo(map);
+    });
+
+    map.on('mouseenter', 'mesh-nodes-layer', (e) => {
+      map.getCanvas().style.cursor = 'pointer';
+      const coordinates = e.features[0].geometry.coordinates.slice();
+      const layerIndex = layers.findIndex(layer => layer.url === 'https://raw.githubusercontent.com/fmvaldezg/PCWmap/main/data/mesh_nodes.geojson');
+      const nameProperty = e.features[0].properties.name;
+      const popupContent = layers[layerIndex].popup.replace('{name}', nameProperty);
+      popup.setLngLat(coordinates).setHTML(popupContent).addTo(map);
+    });
+
+    map.on('mouseenter', 'rooftop-hubs-layer', (e) => {
+      map.getCanvas().style.cursor = 'pointer';
+      const coordinates = e.features[0].geometry.coordinates.slice();
+      const layerIndex = layers.findIndex(layer => layer.url === 'https://raw.githubusercontent.com/fmvaldezg/PCWmap/main/data/rooftop_hubs.geojson');
+      const nameProperty = e.features[0].properties.name;
+      const popupContent = layers[layerIndex].popup.replace('{name}', nameProperty);
+      popup.setLngLat(coordinates).setHTML(popupContent).addTo(map);
+    });
+
+    map.on('mouseleave', 'high-sites-layer', () => {
+      map.getCanvas().style.cursor = '';
+      popup.remove();
+    });
+
+    map.on('mouseleave', 'mesh-nodes-layer', () => {
+      map.getCanvas().style.cursor = '';
+      popup.remove();
+    });
+
+    map.on('mouseleave', 'rooftop-hubs-layer', () => {
+      map.getCanvas().style.cursor = '';
+      popup.remove();
+    });
+
+    // Function to navigate to a bookmark
+    function navigateToBookmark(bookmarkId, pitch, bearing) {
+      switch (bookmarkId) {
+          case 1:
+            map.flyTo({
+              center: [-75.13537, 39.98299],
+              zoom: 16.7,
+              pitch: pitch,
+              bearing: bearing,
+              speed: 0.8,
+              curve: 1.2,
+            });
+            break;
+          case 2:
+            map.flyTo({
+              center: [-75.1300, 39.9825],
+              zoom: 13.7,
+              pitch: pitch,
+              bearing: bearing,
+              speed: 0.8,
+              curve: 1.2,
+            });
+            break;
+          case 3:
+            map.flyTo({
+              center: [-75.1358, 39.9840],
+              zoom: 17,
+              pitch: pitch,
+              bearing: bearing,
+              speed: 0.8,
+              curve: 1.2,
+            });
+            break;
+          default:
+            break;
+        }
+      
+      //map.flyTo({ center, zoom });
+    }
+
+  
+  const heatmapLayer = {
+  id: 'heatmap-layer',
+  type: 'heatmap',
+  source: 'heatmap-source',
+  minzoom: 12,
+  maxzoom: 20,
+  paint: {
+    // Heatmap intensity range
+    'heatmap-intensity': {
+      stops: [
+        [10, 0.5],
+        [20, 10]
+      ]
+    },
+    // 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: [
+        [14, 30],
+        [18, 100]
+      ]
+    },
+    // Heatmap opacity
+    'heatmap-opacity': {
+        default: 1,
+        stops: [
+          [14, 0.5],
+          [20, 0.2]
+        ]
+    }
+  },
+  visibility: 'none'
+};
+
+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
+  );
+  });
+
+
+fetch('https://raw.githubusercontent.com/fmvaldezg/PCWmap/main/data/network-points.geojson')
+  .then(response => response.json())
+  .then(data => {
+    map.addSource('heatmap-source', {
+        type: 'geojson',
+        data: data
+    });
+
+    map.addLayer(heatmapLayer);
+    
+    map.setLayoutProperty(heatmapLayer.id, 'visibility', 'none');
+
+    map.on('load', () => {
+      map.setLayoutProperty(heatmapLayer.id, 'visibility', 'none');
+      map.setLayoutProperty('line-background', 'visibility', 'none');
+      map.setLayoutProperty('line-dashed', 'visibility', 'none');
+      map.setLayoutProperty('new-line-background', 'visibility', 'none');
+      map.setLayoutProperty('new-line-dashed', 'visibility', 'none');
+    });
+
+
+    map.getSource('heatmap-source').setData(data);
+    
+  });
+
+const nav = new mapboxgl.NavigationControl({
+visualizePitch: true
+});
+map.addControl(nav, 'bottom-right');
+  </script>
+</body>
+</html>