parkrun Events Map hack

A bookmarklet

Version 3.1, 7 October 2021
Ian Shepherd A392280

This is obviously completely unofficial, not endorsed by parkrun etc. This was originally an academic exercise for personal use, but I was asked by a couple of people to make it available. It's handy for parkrun tourists, modifying the parkrun events map to show which events you (or anyone else you like) have visited.

Scroll down for instructions, or first see what's new in this version...

Changelog:

• [v3.1] A list of completed events that have since been discontinued can now be viewed by clicking the text "of which x no longer exist"
• [v3.1] Some minor code tweaks to reflect layout and URL changes on parkrun websites
• [v3.0] Major reworking to make compatible with the updated parkrun map, which uses Mapbox instead of Google Maps. Please note some older features are no longer included, as they now have native equivalents, such as event name labelling
• [v3.0] Results caching to reduce demand on parkrun server and improve performance; after all, any athlete's results will typically only change once a week. To get a fresh copy, Ctrl+click the button or click the refresh link above the map
• [v3.0] Cow icons! Visited parkruns are now denoted by the very recognisable cow icon, designed by Kathy Brown for the UK parkrun tourists Facebook group
• [v2.7] Event names are now shown in tooltips when hovering over markers
• [v2.7] Added Link Preview option: when ticked, clicking a marker shows a popup with the event name instead of opening the event website. Click the popup to go to the site! (Great for mobile)
• [v2.7] Added link to this page and current version number
• [v2.7] Fixed that bloody Firefox bug again! (seems it gets reintroduced by the minifier, so I have to remember to intervene)
• [v2.6] incorporated tweaks introduced by parkrun website facelift on 12 June 2019, restoring functionality
• [v2.6] amended filters used to improve contrast between "done" (now green with drop shadow) and "to do" (now semi-transparent)
• [v2.5] thanks to a bug report from Graham Smith, now gracefully handles cases of "athlete not found" and athletes that have run no parkruns
• [v2.5] improved validation of athlete number, with visual feedback of invalid input. Also, now accepts numbers with or without initial A
• [v2.5] now checks for previous initialization, so multiple bookmark clicks no longer add multiple interfaces
• [v2.4] Fixed bug in fussy Firefox that was causing blank screen with [Object object] displayed in top corner
• [v2.4] Fixed bug that stopped data loading on non-UK parkrun websites due to CORS
• [v2.4] Fixed regression bug when cookies/LocalStorage disabled
• [v2.4] Added a check to reattempt map initialization if it didn't work on page load - seems to make the map work in Chrome for Android!!!
• [v2.3] Updated links to reflect parkrun site finally supporting https (well done!)
• [v2.3] Athlete ID and zoom-to-fit preference is now remembered. Athlete history is loaded automatically if an ID is saved
• [v2.3] Athlete ID box and button are disabled with a "Please wait..." message while processing, indicating that something is happening
• [v2.2] Added full-screen control (may not work exiting full screen, but try pressing Esc instead)
• [v2.1] Added "Zoom to fit" checkbox; if ticked, map will zoom to show all green markers
• [v2.0] works with the updated version of the parkrun events map, since they moved from Google Maps to OpenStreetMap
• [v2.0] now works with all 5k events worldwide
• [v2.0] turns the markers for visited events green instead of using the junior parkrun icon
• [v2.0] moves the visited markers up above the rest to make them easier to see in a clump
• [v2.0] no longer any need to press the button again after zooming (which means only one scrape per athlete)
• [v2.0] can press enter after entering an athlete number instead of having to click the button
• [v2.0] retains the original small/large icons depending on zoom level
• [v2.0] confirms which runner's data you're looking at under the athlete number box
• [v2.0] shows how many different events have been run, as well as how many of those don't exist any more, taking care to exclude junior events
• [v1.0] original, crude version, which worked with Google Maps and used a junior parkrun icon to differentiate which 5k events had been run

Instructions:

• Either: Drag this button to your bookmarks bar above: Events map hack v3.1
• Or: If you're on a mobile, try long-pressing the button above. On Firefox, for example, you should get a "Bookmark link" option. On Chrome, you can at least "Copy link address" in order to create the bookmark manually, as follows
• Or: Manually create a new bookmark, call it "Events map hack" or whatever you like, and paste the code below into the URL field
  javascript:var clearVisited=function(){jQuery(parkruns.features).each(function(){delete this.properties.visited})},getAthleteHistory=function(e){var t,a={};if(void 0!==e&&Number.isInteger(e)){a.eventsRun=[],map.setZoom(0);try{t=JSON.parse(localStorage.getItem("imsCache_"+e))}catch(e){}null!==t?(console.debug("using cached result"),processResult(t),toggleForm(!1)):jQuery.ajax({url:"/results/athleteresultshistory/?athleteNumber="+e,dataType:"html",success:function(e){var t=jQuery("<html />").html(e);a.eventCount=0;var r=jQuery("h2",t);if(0==r[0].childNodes.length)a={status:"error",message:"Athlete not found"};else{var i=jQuery("h2~h3",t);a.athleteName=r.text().trim()+" ("+i.text().trim()+")",jQuery("table#results:eq(1) tbody tr",t).each(function(e,t){var r=jQuery("td",t).map(function(e,t){if(0===e){var a=jQuery("a",t).attr("href").match("/([^/]*)/results$")[1],r=map.querySourceFeatures("parkruns",{sourceLayer:"parkruns",filter:["==","eventname",a]});return[r.length>0?r[0].id:void 0,a,jQuery(t).text()]}if(e<5)return jQuery(t).text()}).get();" junior parkrun"!=r[2].substr(-15)&&(a.eventCount++,a.eventsRun.push(r))}),t=void 0,a.status="OK"}a.timestamp=Date.now()},complete:function(){processResult(a),toggleForm(!1);try{localStorage.setItem("imsCache_"+e,JSON.stringify(a))}catch(e){}}})}},processResult=function(e){if(console.debug(e),e.hasOwnProperty("status"))if("OK"==e.status){clearVisited();var t,a=[];if(jQuery(e.eventsRun).each(function(){if(null==this[0])a.push(this[2]);else{var e=this[0],r=parkruns.features.findIndex(function(t){return t.id==e});-1!=r&&(parkruns.features[r].properties.visited="_v",void 0===t?t=new mapboxgl.LngLatBounds(parkruns.features[r].geometry.coordinates,parkruns.features[r].geometry.coordinates):t.extend(parkruns.features[r].geometry.coordinates))}}),map.getSource("parkruns").setData(parkruns),jQuery("#filter_series_2").click(),jQuery("#filter_series_1").click(),jQuery("span#imsDisplay").text(e.athleteName),e.eventCount>0){var r="<br />"+e.eventCount+" different 5k events";a.length>0&&(r+=', <span style="cursor:help;text-decoration:underline;" onclick="alert(\''+a.join("\\n")+"');\">of which "+a.length+" no longer exist</span>"),jQuery("span#imsDisplay").append(r),window.setTimeout(function(){map.fitBounds(t,{padding:30,maxZoom:10})},500)}var i=new Date(e.timestamp);jQuery("span#imsDisplay").append('<div id="imsCacheText" style="cursor:pointer;font-size:0.69em;">Athlete data fetched '+i+" - click to refresh</div>"),jQuery("div#imsCacheText").click(function(){purgeCache(),doMagic()})}else jQuery("span#imsDisplay").text(e.message);else jQuery("span#imsDisplay").text("Something went wrong :(")},doMagic=function(){void 0!==window.event&&window.event.ctrlKey&&purgeCache();var e=jQuery("input#imsAthleteID").val().match(/^A?(\d+)$/i);if(null===e)jQuery("#imsAthleteID").animate({left:"+=10px"},100).animate({left:"-=20px"},100).animate({left:"+=20px"},100).animate({left:"-=20px"},100).animate({left:"+=20px"},100).animate({left:"-=10px"},100);else{var t=parseInt(e[1]);try{localStorage.setItem("imsAthleteID",t)}catch(e){}jQuery("#imsDisplay").text(""),toggleForm(!0),getAthleteHistory(t)}};function toggleForm(e){jQuery("#imsAthleteID").prop("disabled",e),jQuery("#imsButton").val(e?"Please wait...":"Show completed").prop("disabled",e)}function purgeCache(){var e=/^imsCache_[0-9]*$/;Object.keys(localStorage).forEach(function(t){e.test(t)&&localStorage.removeItem(t)})}function init(){if("true"!==jQuery("body").data("IMShack"))if(void 0!==map.getSource("parkruns")&&map.isSourceLoaded("parkruns")){jQuery("body").data("IMShack","true"),jQuery('<div id="ims"><form onsubmit="doMagic();return false;">A<input type="text" id="imsAthleteID" style="position:relative"><input type="button" id="imsButton" onclick="doMagic();" value="Show completed"></form><br /><span id="imsDisplay"></span><div class="IMSvtext" style="font-size:0.69em;">[<a href="https://ishep.co.uk/parkrun/eventmaphack/" target="_blank">parkrun Event Map hack</a> v3.1]</div></div>').insertBefore("div#map");try{jQuery("#imsAthleteID").val(localStorage.getItem("imsAthleteID"))}catch(e){}map.loadImage("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABkBAMAAACCzIhnAAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAAAwUExURQAAAP//AP//AP//AP//AP//AImJA///AQAAAP39+P//Y///uF9fX5OTk8vLyzAwMD6Cm68AAAAHdFJOUwDUGZRcL6LMexocAAADjElEQVRYw62Yu04bQRSGiSG9AUVuHSURLUSJaFFSpEVpeA7bWCOvX2CQAJcwGC/lauEBrMUStS2Z1KCY0DoyoV6kkGQvs3Of2fEqp/GuvN9czznzn1lYUNi7zxvLACyvfvi6YGdvNwCx1U8WwEsGSKDt3C4qQLBaTkdvgMLez00A8FFPLAKNaftZquiQ2paaKGmJiKkqkS/AYLtzTSS19fmGpRnaa5BjryQ/qeQhNdFzdkCuNYVOgIVt58zk3DN3Iy3XBUJdkEHOIHoRF+2FQDjuJLxFCL8Fvyajo/ihzCCbAhIMIYTXT/3kxX+AsHMSPzUYfxQ7OYWxHSRN+734OUEA9c41AfGnCZI07bhh9ghAnSDi5K9garPouZXg+0fpdurGBXoYeep6wGXGSEcmbkr7DCOdaxSkYzxMVwKsmNYrtX0UJr+3eI8aamdpn0LR9k+yP6vK2ApCCRn1+UhbY7wE9YGv6KRL2qtzU/Hdyfi66/TkTvZIJ+lkShmRfPsHDaGMXNJhV+mutHHrY5mI1i1ybI/uDPbilqJ1Yp3f4x94M8s0hI0IdZkkzvDs21M7pEF90unZITW6YMAfWiHRkhE3zhkZQbYYd+FH1rnXIOtMpvBv2E/unzVImQlix2UaPoCdoRqps5m1jR5CisBQjTS5g8hBbkgRzcB2hZAk8xnd6JCGgLSyL0OoR/iEpPe0LMdE288jfjg3cgUtEFUyViIkmHnE4Gc6xODNhxpEPxUWqajytwnhV8w50yN7asQUZXseQTatNpJBeB8zZYwnijDO3z42ICOqzHZsfJJFmuxpHEAbpM6kC4ODxUcfIOliUZNhRPtOzzGS+nIy7AyQ1EcSbGtqh1SptAigFVKjh4XJv6juSQ8LvDHOsR3SpAefLVJmRI9xVzJ1lR6vpfyIZJEqIxV81Yd/VUclESQtKVieHxGaCkidlT2SHz+jwTlxiSzzpbKnpI7iA+QxsilDqqyEc7KzZeTeEIK4EU4wDV4oXvSGqZK6cO/uHhHOKLghHPorghz1USyvfvYjYTYYZKHun7ERtiWKXicWcZdKOTvjRa8kreUjR5LWSyYkWYDDI0HAS7KXrzKiVRl5QpkgFSOCCO586wKxGDFXiAFWiXydaCwRHY9X74XLtwJFYpFSNL/gXfkfZXWB4r3IFUGRi4gC1x3aaxjNRIpe3RS5ICpyDVXksqvIlVr+xd0/YA/AM0dLLe4AAAAASUVORK5CYII=",function(e,t){if(e)throw e;map.addImage("parkrun_tree_1_v",t),map.getLayer("parkruns").setLayoutProperty("icon-image","parkrun_tree_{seriesid}{visited}"),doMagic()}),map.addControl(new mapboxgl.FullscreenControl)}else console.debug("half a sec..."),window.setTimeout(init,500)}void jQuery(function(){init()});
• Go to the parkrun events map
• On desktop:After the map has loaded, click your new bookmark
• On mobile:After the map has loaded, click in the address bar and type a few letters of your bookmark name, e.g. "hack". When you see it in the list below, click it. Note that it doesn't work if you go via your browser's Bookmarks function!
• Enter a barcode number in the new box that has appeared above the map and press Enter or click the button
• After a moment or two, all events visited by that athlete should be highlighted with cow icons in yellow circles

This is provided for free, no warranties etc... let me know if you have any issues and I'll see what I can do. If you would like to buy me a beer or something, you can - it would be most appreciated! :-)