update rides, adjust opacity/thickness of polylines on map, build ins…

…tructions

README.md

@@ -6,40 +6,47 @@ Vanilla javascript and CSS with no 3rd party libraries (except Maps).
 
 The site is designed to be as small as possible so it will load quickly and smoothly on even the shittiest internet connections. You only download **60kb** of data on page load (yes, including fonts).
 
-Around of 250kb of img assets are lazyloaded as you cycle through all the sections. Thumbnails (~ 800kb), photos(~ 35mb if you open every single one) and maps (850kb+) are loaded on demand only.
+Using [MapboxGL JS](https://www.mapbox.com/) to display some shmancy vector maps with my Strava data for "fun" visualisations of my one and only hobby.
 
-Using [MapboxGL](https://www.mapbox.com/) to build some shmancy vector maps with geoJSONs. Connects to Firebase Storage to pull latest rides from Strava.
+---
 
-Using a smaller 3rd party package called [ga-lite](https://github.com/jehna/ga-lite), a subset of Google Analytics without any of the bloat I dont use or need.
+### Build
+Server
+````
+python3 -m http.server
+````
 
+Styles  
+````
+sass --watch scss/main.scss:css/style.min.css --style compressed
+````
 
----
+Scripts
+````
+terser js/photos.js js/map.js js/bucket.js js/script.js --source-map -m -o js/script.terser.js
+````
 
 
 
+### Color List
 <div align="center">
-	<h3>Color List</h3>
 	<img src="https://raw.githubusercontent.com/rohanb10/rohan.xyz/gh-pages/assets/color-list.png" alt="color list">
 </div>
 
 ---
 
 
 
-**Resources**
+### Resources
 Things I used during the development process.
  - [svgo-cli](https://github.com/svg/svgo) - svg optimisation
  - [sqip](https://github.com/axe312ger/sqip#CLI) - svg based polygonal placeholders for photos
  - [Clippy](https://bennettfeely.com/clippy/) - CSS `clip-path` playground
- - Rides scraped from the [Strava API](https://developers.strava.com) using Python.
- - Encoded polyline [algorithm](https://developers.google.com/maps/documentation/utilities/polylinealgorithm) by Google - reduced file size of all GPS coordinates by over 97%.
+ - Rides scraped via the [Strava API](https://developers.strava.com).
+ - Encoded polyline [algorithm](https://developers.google.com/maps/documentation/utilities/polylinealgorithm) to reduce size of all coordinates by over 95%.
  - [Sqoosh](https://squoosh.app/) - A better png compressor to strip unused colours out of images
  - [Easings](https://easings.net/en)
 
 SASS source files in the `scss` directory. All JS files in the `js` directory, then combined and minified for production.
 
 Map related functions are in `js/maps.js` but the request to get latest versions of MapboxGL from the CDN is in `js/scriptj.s`.
-
-All colour related files are named  `bucket.*`.
-
-Feel free to reach out if you have any questions about my code. Happy to help - [[email protected]](mailto:[email protected])

js/map.js

@@ -3,6 +3,7 @@ var active_city = document.querySelector('h2.active').getAttribute('data-city');
 const CITIES = {
 	SF: [37.791, -122.448],
 	BOM: [18.982, 72.833],
+	LDN: [51.5073, -0.127647]
 };
 
 const MAP_LAYERS = {
@@ -21,7 +22,7 @@ function initializeMap() {
 		style: MAP_LAYERS[currentLayer],
 		center: flip(CITIES[active_city]),
 		zoom: 12,
-		maxZoom: 16,
+		// maxZoom: 16,
 		minZoom: 9,
 		attributionControl: false,
 	});
@@ -64,8 +65,8 @@ function addStyleLayer(name, opacity) {
 		source: name,
 		paint: {
 			'line-color': document.documentElement.style.getPropertyValue('--c-3'),
-			'line-width': ['interpolate', ['linear'], ['zoom'], 11, 1, 12, 2],
-			'line-opacity': opacity || ['interpolate', ['linear'], ['zoom'], 11, .4, 15, .8]
+			'line-width': ['interpolate', ['linear'], ['zoom'], 10, 1, 12, 2.5, 15, 3],
+			'line-opacity': opacity || ['interpolate', ['linear'], ['zoom'], 11, .5, 15, .8]
 		}
 	});
 }
@@ -86,7 +87,7 @@ function drawSingle(pathID, noAnimation) {
 
 	sources.push('active-snake')
 	map.addSource('active-snake', {type: 'geojson', data: geo});
-	addStyleLayer('active-snake', .9);
+	addStyleLayer('active-snake', 1);
 
 	if (noAnimation) return dist.innerText = (getDistance(pathID)/1000).toFixed(1);