lab07 - step 02

added bike routes

map.js

@@ -2,15 +2,49 @@ import mapboxgl from 'https://cdn.jsdelivr.net/npm/[email protected]/+esm';
 
 console.log("Mapbox GL JS Loaded:", mapboxgl);
 
- // Set your Mapbox access token here
- mapboxgl.accessToken = 'pk.eyJ1IjoiaWtydmIxIiwiYSI6ImNtN2w3dWpzZTA5MHcybnByZTl6NnZrOTIifQ.236I69H5F1YHv7EOUU-lug';
+// Set your Mapbox access token here
+mapboxgl.accessToken = 'pk.eyJ1IjoiaWtydmIxIiwiYSI6ImNtN2w3dWpzZTA5MHcybnByZTl6NnZrOTIifQ.236I69H5F1YHv7EOUU-lug';
 
- // Initialize the map
- const map = new mapboxgl.Map({
-   container: 'map', // ID of the div where the map will render
-   style: 'mapbox://styles/ikrvb1/cm7l9b1u6004o01ra50qa56jt', // Map style
-   center: [-71.09415, 42.36027], // [longitude, latitude]
-   zoom: 12, // Initial zoom level
-   minZoom: 5, // Minimum allowed zoom
-   maxZoom: 18 // Maximum allowed zoom
- });
+// Initialize the map
+const map = new mapboxgl.Map({
+    container: 'map', // ID of the div where the map will render
+    style: 'mapbox://styles/ikrvb1/cm7l9b1u6004o01ra50qa56jt', // Map style
+    center: [-71.09415, 42.36027], // [longitude, latitude]
+    zoom: 12, // Initial zoom level
+    minZoom: 5, // Minimum allowed zoom
+    maxZoom: 18 // Maximum allowed zoom
+});
+
+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',
+        source: 'boston_route',
+        paint: {
+            'line-color': '#CC5500',
+            'line-width': 2.5,
+            'line-opacity': 0.6
+        }
+    });
+
+    map.addSource('cambridge_route', {
+        type: 'geojson',
+        data: 'https://raw.githubusercontent.com/cambridgegis/cambridgegis_data/main/Recreation/Bike_Facilities/RECREATION_BikeFacilities.geojson'
+    });
+
+    map.addLayer({
+        id: 'cambridge-bike-lanes',
+        type: 'line',
+        source: 'cambridge_route',
+        paint: {
+            'line-color': '#CC5500', // Corrected color code
+            'line-width': 2.5,
+            'line-opacity': 0.6
+        }
+    });
+});