My Festive 500 for 2016

Strava Festive-500 badge

Strava Festive-500 badge


Copy the selected HTML code below,
and paste it into your own web page:

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:

#map {
width: 700px;
height: 850px;
<script src=""></script>
<div id="map"></div>
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 = [
			position: {lat:50.5, lng:1.5},
			anchor: new google.maps.Point(-40,120)
			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 = [
	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;
	return decodedLevels;


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


All Cycling events | All events

April 2017 7 events May 2017 1 event

Coming soon...

01 April 2017 (Saturday): Stowmarket & District CC 20-mile time trial

08 April 2017 (Saturday): Kings Lynn CC 25-mile time trial

09 April 2017 (Sunday): Fast Test Road Race

14 April 2017 (Friday): Gt Yarmouth CC 10-mile time trial

16 April 2017 (Sunday): Active Fakenham Crit Races

24 April 2017 (Monday): DAP CC Spring Road Race

Related Reading

You and Your Bike
How would a dedicated cycling facility most benefit you?

Survey Results For US
Learning basic skills :
Getting into shape :
Fun snd safe riding with others :
Training for races :
Racing! :
Not at all :
1 responses

Popular Searches