musa-611-fall-2022 · ShengaoYi · Oct 24, 2022 · Oct 26, 2022 · Oct 26, 2022 · Oct 26, 2022
diff --git a/__tests__/test-filters.js b/__tests__/test-filters.js
@@ -325,4 +325,4 @@ describe('The school grade level filters', () => {
     });
     expect(finalLength).toBeCloseTo(325, -1);
   });
-});
+});
diff --git a/site/css/styles.css b/site/css/styles.css
@@ -0,0 +1,46 @@
+html,
+body {
+  height: 100%;
+  overflow-y: hidden;
+}
+
+.container-fluid {
+  height: 100%;
+  width: 100%;
+}
+
+.row {
+  float: left;
+  width: 50%;
+  height: 100%;
+  margin-left: 0;
+}
+
+.school-name {
+  height: 50%;
+  overflow: auto;
+}
+
+.input-box {
+  padding-bottom: 10px;
+}
+
+#school-map {
+  position: relative;
+  float: right;
+  height: 100%;
+  width: 50%;
+}
+
+ul {
+  padding: 0;
+  flex: auto;
+  flex-wrap: wrap;
+  overflow: auto;
+}
+
+ul,
+li {
+  font-size: 13px;
+  text-align: center;
+}
diff --git a/site/index.html b/site/index.html
@@ -0,0 +1,66 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>Schools in the Philadelphia</title>
+    <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css"
+   integrity="sha512-hoalWLoI8r4UszCkZ5kL8vayOGVae1oxXe/2A4AO6J9+580uKHDO3JdHb7NzwwzK5xr/Fs0W40kiNHxM9vyTtQ=="
+   crossorigin=""/>
+    <!--Introduce Bootstrap-->
+    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
+
+     <!-- Make sure you put this AFTER Leaflet's CSS -->
+    <link href="css/styles.css" rel="stylesheet" type="text/css"/>
+
+</head>
+
+<body>
+    <div class="container-fluid">
+
+        <div id="school-map"></div>
+
+        <div class="row">
+            <h1>This is a map of schools in Philadelphia</h1>
+            <div class="school-name">
+
+                <h2>Filter by Name</h2>
+
+                <div class="input-box">
+                    <input type="text" class="text-input" id="school-name-input" placeholder="Enter School Name">
+                </div>
+                <div class="list-container">
+                    <ul id="school-list" class="list-group"></ul>
+                </div>
+
+            </div>
+
+            <div class="Grade">
+                <h2>Filter by Grade</h2>
+                <div id="grade-select">
+                    <label><input type = "checkbox" class ="Grade-checkbox" value="Grade K"> Kindergarten </label>
+                    <label><input type = "checkbox" class ="Grade-checkbox" value="Grade 1"> 1st Grade </label>
+                    <label><input type = "checkbox" class ="Grade-checkbox" value="Grade 2"> 2nd Grade </label>
+                    <label><input type = "checkbox" class ="Grade-checkbox" value="Grade 3"> 3rd Grade </label>
+                    <label><input type = "checkbox" class ="Grade-checkbox" value="Grade 4" > 4th Grade </label>
+                    <label><input type = "checkbox" class ="Grade-checkbox" value="Grade 5" > 5th Grade </label>
+                    <label><input type = "checkbox" class ="Grade-checkbox" value="Grade 6"> 6th Grade </label>
+                    <label><input type = "checkbox" class ="Grade-checkbox" value="Grade 7"> 7th Grade</label>
+                    <label><input type = "checkbox" class ="Grade-checkbox" value="Grade 8"> 8th Grade </label>
+                    <label><input type = "checkbox" class ="Grade-checkbox" value="Grade 9"> 9th Grade </label>
+                    <label><input type = "checkbox" class ="Grade-checkbox" value="Grade 10"> 10th Grade </label>
+                    <label><input type = "checkbox" class ="Grade-checkbox" value="Grade 11"> 11th Grade </label>
+                    <label><input type = "checkbox" class ="Grade-checkbox" value="Grade 12"> 12th Grade </label>
+                </div>
+            </div>
+
+        </div>
+    </div>
+</body>
+
+<!-- Leaflet JavaScript -->
+<script src="https://unpkg.com/[email protected]/dist/leaflet.js"  integrity="sha256-NDI0K41gVbWqfkkaHj15IzU7PtMoelkzyKp8TOaFQ3s="  crossorigin=""></script>
+
+<!-- My Project JS modules-->
+<script type="module" src="js/main.js"></script>
+
+</html>
diff --git a/site/js/main.js b/site/js/main.js
@@ -0,0 +1,63 @@
+import schools from '../data/schools.js';
+import { initializeSchoolMap, showSchoolsOnMap } from './school-map.js';
+import { showSchoolsInList } from './school-list.js';
+
+
+let schoolMap = initializeSchoolMap();
+
+showSchoolsOnMap(schools, schoolMap);
+
+let schoolList = document.querySelector('#school-list');
+
+showSchoolsInList(schools, schoolList);
+
+let schoolNameFilter = document.querySelector('#school-name-input');
+let schoolGradeFilters = document.querySelectorAll('.Grade-checkbox');
+
+function getFilteredSchools(){
+    let filteredSchools = schools;
+
+    //Filter through school name
+    const text = schoolNameFilter.value;
+    filteredSchools = schools.filter(function (school) {
+        const name = school['name'].toLowerCase ();
+        const hasText = name.includes(text);
+        return hasText;
+    });
+
+    //Filter through grade
+    for (const checkbox of schoolGradeFilters) {
+        if (checkbox.checked) {
+            filteredSchools = filteredSchools.filter(function (school) {
+            const grade = checkbox.value;
+            if (school[grade] === "1") {
+                return true;
+            } else {
+                return false;
+            }
+        });
+    }
+}
+
+return filteredSchools;
+}
+
+for (const cb of schoolGradeFilters){
+    cb.addEventListener('change', () => {
+        const filteredSchools = getFilteredSchools();
+        showSchoolsOnMap(filteredSchools, schoolMap);
+        showSchoolsInList(filteredSchools, schoolList);
+    });
+}
+
+schoolNameFilter.addEventListener('input', () => {
+    const filteredSchools = getFilteredSchools();
+    showSchoolsOnMap(filteredSchools, schoolMap);
+    showSchoolsInList(filteredSchools, schoolList);
+    window.schools = filteredSchools;
+});
+
+window.schoolMap = schoolMap;
+window.schoolGradeFilters = schoolGradeFilters;
+window.schoolNameFilter = schoolNameFilter;
+window.schoolList = schoolList;
diff --git a/site/js/school-list.js b/site/js/school-list.js
@@ -0,0 +1,17 @@
+import { htmlToElement } from './template-tools.js';
+
+function showSchoolsInList(schoolsToShow, schoolList) {
+    schoolList.innerHTML = '';
+
+  for (const school of schoolsToShow) {
+    const html = `
+      <li class="list-group-item">${school['name']} (Grades: ${school['Current Grade Span Served']})</li>
+    `;
+    const li = htmlToElement(html);
+    schoolList.append(li);
+  }
+}
+
+export {
+  showSchoolsInList,
+};
diff --git a/site/js/school-map.js b/site/js/school-map.js
@@ -0,0 +1,92 @@
+function initializeSchoolMap () {
+    let schoolMap = L.map ('school-map').setView([39.952436849966794, -75.16356820883757], 11);
+
+    const mapboxAccount = 'mapbox';
+    const mapboxStyle = 'light-v10';
+    const mapboxToken = 'pk.eyJ1IjoieWVzZW5pYW8iLCJhIjoiY2tlZjAyM3p5MDNnMjJycW85bmpjenFkOCJ9.TDYe7XRNP8CnAto0kLA5zA';
+    L.tileLayer(`https://api.mapbox.com/styles/v1/${mapboxAccount}/${mapboxStyle}/tiles/256/{z}/{x}/{y}@2x?access_token=${mapboxToken}`, {
+    maxZoom: 19,
+    attribution: '© <a href="https://www.mapbox.com/about/maps/">Mapbox</a> © <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a> <strong><a href="https://www.mapbox.com/map-feedback/" target="_blank">Improve this map</a></strong>',
+}).addTo(schoolMap);
+
+    return schoolMap;
+}
+
+// Create a function to transform one of the school elements into a GeoJSON-like feature
+function makeSchoolFeature(school) {
+    return {
+      "type": "Feature",
+      "id": school['sdp_id'],
+      "properties": {
+
+        "Fax Number": school['Fax Number'],
+        "Federal Accountability Designation": school['Federal Accountability Designation'],
+        "Governance": school['Governance'],
+        "Grade 1": school['Grade 1'],
+        "Grade 2": school['Grade 2'],
+        "Grade 3": school['Grade 3'],
+        "Grade 4": school['Grade 4'],
+        "Grade 5": school['Grade 5'],
+        "Grade 6": school['Grade 6'],
+        "Grade 7": school['Grade 7'],
+        "Grade 8": school['Grade 8'],
+        "Grade 9": school['Grade 9'],
+        "Grade 10": school['Grade 10'],
+        "Grade 11": school['Grade 11'],
+        "Grade 12": school['Grade 12'],
+        "Grade k": school['Grade K'],
+        "Grade Span at Scale": school['Grade Span at Scale'],
+        "Learning Network": school['Learning Network'],
+        "Major Intervention": school['Major Intervention'],
+        "Major Intervention Year": school['Major Intervention Year'],
+        "Management Organization": school['Management Organization'],
+        "Multiple Addresses": school['Multiple Addresses'],
+        "Phasing-In": school['Phasing-In'],
+        "Phasing-Out": school['Phasing-Out'],
+        "Phone Number": school ['Phone Number'],
+        "School Leader Name": school['School Leader Name'],
+        "School Level": school['School Level'],
+        "School Reporting Category": school['School Reporting Category'],
+        "State": school['State'],
+        "Street Address": school['Street Address'],
+        "Title I Designation": school['Title I Designation'],
+        "Website": school['Website'],
+        "Year Opened": school['Year Opened'],
+        "Zip Code": school['Zip Code'],
+        "abbr_name": school['abbr_name'],
+        "name": school['name'],
+        "sdp_id": school['sdp_id'],
+        "sort_name": school['sort_name'],
+    },
+      "geometry": school['geom'],
+    };
+}
+
+//  Use the function to display all the schools data on the map
+function showSchoolsOnMap(schoolsToShow, schoolMap) {
+    if (schoolMap.schoolLayers !== undefined) {
+    schoolMap.removeLayer(schoolMap.schoolLayers);
+}
+
+    const schoolFeatureCollection = {
+        "type": "FeatureCollection",
+        "features": schoolsToShow.map(makeSchoolFeature),
+    };
+
+    //  Create a function to show an array of schools on the map.
+    schoolMap.schoolLayers = L.geoJSON(schoolFeatureCollection, {
+    pointToLayer: (geoJsonPoint, latlng) => L.circleMarker(latlng),
+    style: {
+        stroke: null,
+        fillOpacity: 0.9,
+        radius: 3,
+     },
+    })
+    .bindTooltip(Layer => Layer.feature.properties['name'])
+    .addTo(schoolMap);
+}
+
+export {
+   initializeSchoolMap,
+   showSchoolsOnMap,
+};
-Original file line number
+Diff line change
@@ Expand Up / @@ -325,4 +325,4 @@ describe('The school grade level filters', () => { @@
         });
         expect(finalLength).toBeCloseTo(325, -1);
       });
-    });
+    });