My Festive 500 for 2016

Here's a map showing all the riding that I did over Christmas for Strava's Festive 500 challenge, plus some photos that I published on Instagram. The challenge is exceedingly popular and runs between Christmas Eve and New Years Eve (inclusive). I finished 7534th out of 68954, with a distance of 527km, and was also 753rd out of 9874 in the UK.

If you're interested in how I created this view, here's the process:

1. Grabbed all the polylines from the relevant activities, using My Strava Activity Analyser
2. Grabbed all the photo urls from Instagram
3. Grabbed all the photo locations from the Google Maps website - navigating to the location and getting the "latitude,longitude" values from the url
4. Created a new HTML page that references the Google Maps API - see the code template below
5. Added my polylines and photo urls to the HTML page

Here's the HTML code:

<style>
#map {
width: 700px;
height: 850px;
}
</style>
<script src="https://maps.googleapis.com/maps/api/js?sensor=false&libraries=geometry"></script>
<div id="map"></div>
<script>
function initialize() {
	var myLatlng = new google.maps.LatLng(52.4, 1.4);
	var myOptions = {
		zoom: 9,
		center: myLatlng,
		mapTypeId: google.maps.MapTypeId.ROADMAP
	}
	var mapCanvas = document.getElementById('map');
	var map = new google.maps.Map(mapCanvas, myOptions);
	var photos = [
		{
			url:"some-instagram-url",
			position: {lat:50.5, lng:1.5},
			anchor: new google.maps.Point(-40,120)
		},
		{
			url:"some-other-instagram-url",
			position: {lat:50.0, lng:1.0},
			anchor: new google.maps.Point(-50,-50)
		},
	];
	for( var i in photos ) {
		if( !photos[i].url ) { continue; }
		var icon = {
			anchor: photos[i].anchor,
			origin: new google.maps.Point(0, 0),
			scaledSize: new google.maps.Size(150,150),
			url: photos[i].url
		};
		new google.maps.Marker({
			position: photos[i].position,
			map: map,
			icon: icon,
			zIndex: 4
		});
	}
	var decodedPaths = [
		google.maps.geometry.encoding.decodePath("some-polyline"),
		google.maps.geometry.encoding.decodePath("some-other-polyline"),
	];
	var decodedLevels = decodeLevels("BBBBBBBBBBBBBBBBBBBBBBBBBBBBBBB");
	for( var i in decodedPaths ) {
		new google.maps.Polyline({
			path: decodedPaths[i],
			levels: decodedLevels,
			strokeColor: "#FF0000",
			strokeOpacity: 1.0,
			strokeWeight: 2,
			map: map
		});
	}
}
google.maps.event.addDomListener(window, 'load', initialize);
function decodeLevels(encodedLevelsString) {
	var decodedLevels = [];

	for (var i = 0; i < encodedLevelsString.length; ++i) {
		var level = encodedLevelsString.charCodeAt(i) - 63;
		decodedLevels.push(level);
	}
	return decodedLevels;
}
</script>

Comments

It's quiet in here...Add your comment

Get more out of your power meter!Free sign-up now

• Audax: long-distance cycling
• Bike Lights
• Bike Maintenance
• Bike Shelters
• Bikes
• BMX
• Child Trailers
• Crivit products
• Cycling Performance Programme
• Cyclocross
• Free-to-use Strava Tools
• Kids on Bikes
• Norfolk
• Performance Matters
• Recreation
• Search for Cycling Stuff
• Sports Gear: Under Test
• Staying Dry
• Strava Trends
• Tandems
• Time Trialling
• Where Else

Calendar

All Cycling events | All events

Related Reading

• West Suffolk Cross
• Stow Scramble inc Eastern Region Championships
• Iceni Old Buckenham Cross
• Neil Pears Memorial Cross
• VC Revolution Cross
• Riding the Rebellion Way
• Milton Cross
• Stow Scramble
• CANCELLED Iceni Velo Cross
• West Suffolk Cross