My Festive 500 for 2016
Facebook
Twitter
Copy link
https://swinny.net/Cycling/-4893-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:
- Grabbed all the polylines from the relevant activities, using My Strava Activity Analyser
- Grabbed all the photo urls from Instagram
- Grabbed all the photo locations from the Google Maps website - navigating to the location and getting the "latitude,longitude" values from the url
- Created a new HTML page that references the Google Maps API - see the code template below
- 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 commentGet more out of your power meter!Free sign-up now
Calendar
All Cycling events | All events
Coming soon...
24 November 2024 (Sunday): Iceni Old Buckenham Cross
01 December 2024 (Sunday): Stow Scramble inc Eastern Region Championships
15 December 2024 (Sunday): West Suffolk Cross
Related Reading
About the author
My name is John Swindells and I'm a keen recreational cyclist with a preference for long one-day rides. I've also previously dabbled in time trialling and cyclo-cross. See more of what I get up to on Strava!