Lab 07 - Step 03

added bike station data
ikrvb1 · Feb 26, 2025 · 35257c8 · 35257c8
1 parent f6654e7
commit 35257c8
Show file tree

Hide file tree

Showing 3 changed files with 57 additions and 6 deletions.
diff --git a/global.css b/global.css
@@ -24,4 +24,13 @@ html, body {
   height: 100%;   /* Adjust height to your desired size */
   box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Optional: subtle shadow for effect */
   border-radius: 8px; /* Optional: rounded corners */
-}
+}
+
+#map svg {
+  position: absolute;
+  z-index: 1; /* Ensure it's above the map */
+  width: 100%;
+  height: 100%;
+  pointer-events: none; /* Allows interaction with the map below */
+  opacity: 100%; /* Makes the overlay semi-transparent */
+}
diff --git a/index.html b/index.html
@@ -11,6 +11,8 @@
 </head>
 <body>
     <h1>🚴🏼‍♀️Geospatial Study of Cycling Patterns</h1>
-    <div id="map"></div>
+    <div id="map">
+        <svg></svg>
+    </div>
 </body>
 </html>
diff --git a/map.js b/map.js
@@ -1,3 +1,4 @@
+import * as d3 from 'https://cdn.jsdelivr.net/npm/[email protected]/+esm';
 import mapboxgl from 'https://cdn.jsdelivr.net/npm/[email protected]/+esm';
 
 console.log("Mapbox GL JS Loaded:", mapboxgl);
@@ -15,12 +16,12 @@ const map = new mapboxgl.Map({
     maxZoom: 18 // Maximum allowed zoom
 });
 
-map.on('load', async () => { 
+map.on('load', async () => {
     map.addSource('boston_route', {
         type: 'geojson',
         data: 'https://bostonopendata-boston.opendata.arcgis.com/datasets/boston::existing-bike-network-2022.geojson'
     });
-    
+
     map.addLayer({
         id: 'bike-lanes',
         type: 'line',
@@ -42,9 +43,48 @@ map.on('load', async () => {
         type: 'line',
         source: 'cambridge_route',
         paint: {
-            'line-color': '#CC5500', // Corrected color code
+            'line-color': '#CC5500',
             'line-width': 2.5,
             'line-opacity': 0.6
         }
     });
-});
+
+    const jsonurl = 'https://dsc106.com/labs/lab07/data/bluebikes-stations.json';
+    const jsonData = await d3.json(jsonurl);
+
+    let stations = jsonData.data.stations;
+    console.log('Stations Array:', stations);
+
+    const svg = d3.select('#map').select('svg');
+
+    function getCoords(station) {
+        const point = new mapboxgl.LngLat(+station.lon, +station.lat);
+        const { x, y } = map.project(point);
+        return { cx: x, cy: y };
+    }
+
+    const circles = svg.selectAll('circle')
+        .data(stations)
+        .enter()
+        .append('circle')
+        .attr('r', 5)
+        .attr('fill', 'steelblue')
+        .attr('stroke', 'white')
+        .attr('stroke-width', 1)
+        .attr('opacity', 0.8);
+
+    function updatePositions() {
+        circles
+            .attr('cx', d => getCoords(d).cx)
+            .attr('cy', d => getCoords(d).cy);
+    }
+
+    updatePositions();
+
+    map.on('move', updatePositions);
+    map.on('zoom', updatePositions);
+    map.on('resize', updatePositions);
+    map.on('moveend', updatePositions);
+});
+
+