intial

BellaBeautiful4092023 · Feb 16, 2024 · 1f0a0d0 · 1f0a0d0
1 parent d64b71e
commit 1f0a0d0
Show file tree

Hide file tree

Showing 13 changed files with 101 additions and 58 deletions.
diff --git a/index.html → Advanced/index.html b/index.html → Advanced/index.html
@@ -4,25 +4,27 @@
   <meta charset="UTF-8">
   <title>Citi Bike</title>
 
-  <!-- D3 -->
+  <!-- D3 library -->
   <script src="https://d3js.org/d3.v7.min.js"></script>
 
+  <!-- MomentJS -->
+  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.15.1/moment.min.js"></script>
+
   <!-- Leaflet CSS -->
   <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css"
   integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY="
   crossorigin=""/>
 
-  <!-- polyfill.io is the library for using newer JavaScript features (such as Object.assign) in older browers. -->
-  <script src="https://cdn.polyfill.io/v2/polyfill.min.js"></script>
-
-  <!-- Google Fonts -->
-  <link href="https://fonts.googleapis.com/css?family=Sanchez" rel="stylesheet"> 
-
   <!-- Leaflet JavaScript code -->
   <script src="https://unpkg.com/[email protected]/dist/leaflet.js"
   integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo="
   crossorigin=""></script>
 
+  <!-- polyfill.io is the library for using newer JavaScript features (such as Object.assign) in older browers. -->
+  <script src="https://cdn.polyfill.io/v2/polyfill.min.js"></script>
+
+  <!-- Google Fonts -->
+  <link href="https://fonts.googleapis.com/css?family=Sanchez" rel="stylesheet">
 
   <!-- Icons -->
   <script src="static/js/leaflet.extra-markers.min.js"></script>
@@ -32,13 +34,15 @@
   <!-- Our CSS -->
   <link rel="stylesheet" type="text/css" href="static/css/style.css">
 </head>
+
 <body>
 
   <!-- The div that holds our map -->
   <div id="map-id"></div>
 
   <!-- Our JavaScript file -->
   <script type="text/javascript" src="static/js/logic.js"></script>
+
 </body>
 
 </html>
diff --git a/Advanced/static/css/leaflet.extra-markers.min.css b/Advanced/static/css/leaflet.extra-markers.min.css
diff --git a/Advanced/static/css/style.css b/Advanced/static/css/style.css
@@ -0,0 +1,39 @@
+html,
+body,
+#map-id {
+  height: 100%;
+  padding: 0;
+  margin: 0;
+}
+
+.legend {
+  padding: 10px;
+  font-family: Sanchez, serif;
+  font-size: 16px;
+  font-weight: bold;
+  line-height: 18px;
+  color: #555;
+  background-color: white;
+  border-radius: 5px;
+  box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);
+}
+
+.legend .low {
+  color: #ec8a2e;
+}
+
+.legend .empty {
+  color: #a0353a;
+}
+
+.legend .coming-soon {
+  color: #f4ba48;
+}
+
+.legend .healthy {
+  color: #1b904f;
+}
+
+.legend .out-of-order {
+  color: #007dff;
+}
diff --git a/Advanced/static/img/markers_default.png b/Advanced/static/img/markers_default.png
diff --git a/Advanced/static/img/[email protected] b/Advanced/static/img/[email protected]
diff --git a/Advanced/static/img/markers_shadow.png b/Advanced/static/img/markers_shadow.png
diff --git a/Advanced/static/img/[email protected] b/Advanced/static/img/[email protected]
diff --git a/static/js/leaflet.extra-markers.min.js → ...ed/static/js/leaflet.extra-markers.min.js b/static/js/leaflet.extra-markers.min.js → ...ed/static/js/leaflet.extra-markers.min.js
diff --git a/static/js/logic.js → Advanced/static/js/logic.js b/static/js/logic.js → Advanced/static/js/logic.js
@@ -1,6 +1,3 @@
-// let newYorkCoords = [40.73, -74.0059];
-// let mapZoomLevel = 12;
-
 // Create the tile layer that will be the background of our map.
 let streetmap = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
     attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
@@ -50,7 +47,7 @@ let info = L.control({
 
 // When the layer control is added, insert a div with the class of "legend".
 info.onAdd = function() {
-  var div = L.DomUtil.create("div", "legend");
+  let div = L.DomUtil.create("div", "legend");
   return div;
 };
 // Add the info legend to the map.
@@ -166,4 +163,4 @@ function updateLegend(time, stationCount) {
     "<p class='low'>Low Stations: " + stationCount.LOW + "</p>",
     "<p class='healthy'>Healthy Stations: " + stationCount.NORMAL + "</p>"
   ].join("");
-}
+}
diff --git a/Basic/index.html b/Basic/index.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <title>Citi Bike</title>
+
+  <!-- D3 library -->
+  <script src="https://d3js.org/d3.v7.min.js"></script>
+
+  <!-- Leaflet CSS -->
+  <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css"
+  integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY="
+  crossorigin=""/>
+
+  <!-- Leaflet JavaScript code -->
+  <script src="https://unpkg.com/[email protected]/dist/leaflet.js"
+  integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo="
+  crossorigin=""></script>
+
+  <!-- Our CSS -->
+  <link rel="stylesheet" type="text/css" href="static/css/style.css">
+</head>
+<body>
+
+  <!-- The div that holds our map -->
+  <div id="map-id"></div>
+
+  <!-- Our JavaScript file -->
+  <script type="text/javascript" src="static/js/logic.js"></script>
+</body>
+
+</html>
diff --git a/static/css/style.css → Basic/static/css/style.css b/static/css/style.css → Basic/static/css/style.css
diff --git a/static/js/logic (1).js → Basic/static/js/logic.js b/static/js/logic (1).js → Basic/static/js/logic.js
@@ -1,16 +1,12 @@
-// var newYorkCoords = [40.73, -74.0059];
-// var mapZoomLevel = 12;
-
-// Create the createMap function.
 function createMap(bikeStations) {
 
-
   // Create the tile layer that will be the background of our map.
   let streetmap = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
-    attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
+      attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
   });
 
-  // Create a baseMaps object to hold the lightmap layer.
+
+  // Create a baseMaps object to hold the streetmap layer.
   let baseMaps = {
     "Street Map": streetmap
   };
@@ -31,33 +27,32 @@ function createMap(bikeStations) {
   L.control.layers(baseMaps, overlayMaps, {
     collapsed: false
   }).addTo(map);
-
 }
-// Create the createMarkers function.
+
 function createMarkers(response) {
 
   // Pull the "stations" property from response.data.
   let stations = response.data.stations;
 
-  // Initialize an array to hold the bike markers.
-  let bikeMarkers =[];
+  // Initialize an array to hold bike markers.
+  let bikeMarkers = [];
 
   // Loop through the stations array.
+  for (let index = 0; index < stations.length; index++) {
+    let station = stations[index];
+
     // For each station, create a marker, and bind a popup with the station's name.
-    for (let i = 0; i < stations.length; index++) {
-      let station = stations[index];
-
-      let bikeMarker = L.marker([station.lat, station.lon])
+    let bikeMarker = L.marker([station.lat, station.lon])
       .bindPopup("<h3>" + station.name + "<h3><h3>Capacity: " + station.capacity + "</h3>");
-
-
+
     // Add the marker to the bikeMarkers array.
-    bikeMarkers.push(bikeMarkers);
-  }    
+    bikeMarkers.push(bikeMarker);
+  }
+
   // Create a layer group that's made from the bike markers array, and pass it to the createMap function.
   createMap(L.layerGroup(bikeMarkers));
 }
-let bikeurl = "https://gbfs.citibikenyc.com/gbfs/en/station_information.json";
+
 
 // Perform an API call to the Citi Bike API to get the station information. Call createMarkers when it completes.
-d3.json(bikeurl).then(createMarkers);
+d3.json("https://gbfs.citibikenyc.com/gbfs/en/station_information.json").then(createMarkers);
diff --git a/static/js/style.js b/static/js/style.js