31:T498,md`I've been biking around Asheville since 1998. Around 2004, I started recording my rides using a Garmin GPS so I could display them using the (then new) Google Map API. You can still find [that old page on the WebArchive](https://web.archive.org/web/20090130031448/http://facstaff.unca.edu/mcmcclur/GoogleMaps/Biking/) and (remarkably) it sometimes still works, though it's quite slow and buggy. Unfortunately, I've lost the GPX data from back then, but the WebArchive version contains the encoded polylines for the paths and static images of the elevation profile. I thought it might be fun to try to use that archived data to reproduce the webpage; that's the purpose of this notebook. Note that the design decisions here were largely driven by the type of data available on the Archive and by a desire to mimic the look and feel of that old web page. I've got [another notebook](https://observablehq.com/@mcmcclur/gpx-rides-with-leaflet) using recent GPX data that's more sensible given the tools we have now. Some of the commentary below describes Google maps during versions 1 and 2 of the API and the capabilities that encoded polylines added to maps at that time. `32:T14b0,{ let w = width < 1000 ? width : 1000; let h = 0.625 * w; let map_container = html`

`; yield map_container; let markers = []; function GLatLng(lat, lng) { return L.latLng(lat, lng); } function GMarker(latLng, opts) { markers.push(L.marker(latLng, opts)); } GMarker(GLatLng(35.453608, -82.733745), { icon: markerR, title: "151" }); GMarker(GLatLng(35.401364, -82.81459), { icon: markerR, title: "276" }); GMarker(GLatLng(35.16117, -82.55538), { icon: markerR, title: "AOTC" }); GMarker(GLatLng(35.67556, -82.466812), { icon: markerR, title: "Elk Mountain/Ox Creek area" }); GMarker(GLatLng(35.226550551891116, -82.25738525390625), { icon: markerR, title: "Fabulous Fourth Metric" }); GMarker(GLatLng(35.40388, -82.53582), { icon: markerR, title: "Fletcher Flyer" }); GMarker(GLatLng(35.4431, -82.49), { icon: markerR, title: "The Hilly" }); GMarker(GLatLng(35.59, -82.70627), { icon: markerR, title: "Hookers Gap" }); GMarker(GLatLng(35.82226734114509, -82.57461547851562), { icon: markerR, title: "Hot Doggett Hundred" }); GMarker(GLatLng(35.633860507136994, -82.63229370117188), { icon: markerR, title: "Marty's signature ride" }); GMarker(GLatLng(35.61289504125945, -82.44810104370117), { icon: markerR, title: "Marty's Riceville ride" }); GMarker(GLatLng(35.76873101871279, -82.26373672485352), { icon: markerR, title: "Mount Mitchell" }); GMarker(GLatLng(35.41633, -82.74919), { icon: markerR, title: "Mt. Pisgah" }); GMarker(GLatLng(35.785303981889356, -82.67834186553955), { icon: markerR, title: "Rector's Corner" }); GMarker(GLatLng(35.73188, -82.65512), { icon: markerR, title: "River/Marshall" }); GMarker(GLatLng(36.01800375871414, -82.16949462890625), { icon: markerR, title: "Roan Moan Metric" }); GMarker(GLatLng(35.6529, -82.495136), { icon: markerR, title: "3 Dirt" }); GMarker(GLatLng(35.65520405072724, -82.59761810302734), { icon: markerR, title: "Tuesday night race" }); GMarker(GLatLng(35.328150940701946, -82.73014068603516), { icon: markerM, title: "Black Mountain to Bennett Gap" }); GMarker(GLatLng(35.48569394240189, -82.62491226196289), { icon: markerM, title: "Bent Creek" }); GMarker(GLatLng(35.3669, -82.76288), { icon: markerM, title: "Clawhammer/Pink Beds" }); GMarker(GLatLng(35.66479, -82.234597), { icon: markerM, title: "Heartbreak" }); GMarker(GLatLng(35.62043, -82.257986), { icon: markerM, title: "Kitsuma" }); GMarker(GLatLng(35.38880506285692, -82.72293090820312), { icon: markerM, title: "Laurel Mountain" }); GMarker(GLatLng(35.431931690277345, -82.68293380737305), { icon: markerM, title: "North Mills River area" }); GMarker(GLatLng(35.3105, -82.81537), { icon: markerM, title: "Seinard/Caney" }); GMarker(GLatLng(35.67654189203809, -82.19670295715332), { icon: markerM, title: "Snook's Nose" }); GMarker(GLatLng(35.748288595751596, -82.36892223358154), { icon: markerM, title: "Stair Creek" }); // Setup some base layers let USGS_USTopo = L.tileLayer( "https://basemap.nationalmap.gov/arcgis/rest/services/USGSTopo/MapServer/tile/{z}/{y}/{x}", { maxZoom: 16, attribution: 'Tiles courtesy of the U.S. Geological Survey' } ); let OSM2 = L.tileLayer( "https://{s}.tile.openstreetmap.fr/hot/{z}/{x}/{y}.png", { maxZoom: 19, attribution: '© OpenStreetMap contributors, Tiles style by Humanitarian OpenStreetMap Team hosted by OpenStreetMap France' } ); let mapbox_outdoors = L.tileLayer( `https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token=${mb_token}`, { attribution: 'Map data © OpenStreetMap contributors, Imagery © Mapbox', maxZoom: 18, id: "mapbox/outdoors-v11", tileSize: 512, zoomOffset: -1 } ); // Set the map itself, centered on Asheville with the USGS Topo baseLayer let map = L.map(map_container, { layers: [USGS_USTopo], minZoom: 8, maxBounds: L.latLngBounds( L.latLng(34.7, -83.864136), L.latLng(36.5, -81.243896) ) }); // Add controls let baseLayers = { "USGS Topo": USGS_USTopo, "Open Street Map": OSM2 }; // We only add the Mapbox layer if we've still got Mapbox credit! if ( (await fetch( `https://api.mapbox.com/styles/v1/mapbox/outdoors-v11/tiles/11/554/807?access_token=${mb_token}` )).status == 200 ) { baseLayers["Mapbox Outdoors"] = mapbox_outdoors; } L.control.layers(baseLayers).addTo(map); if (ride_selector == 'overview') { map.setView({ lat: 35.69522525, lng: -82.554016 }, 9); markers.forEach(o => o.addTo(map)); } else { let gpx_path = create_gpx_path(ride_info.trkpts); gpx_path.addTo(map); map.fitBounds(gpx_path.getLayers()[0].getBounds()); } }33:T586,viewof ride_selector = { let div = d3.create("div"); let div_node = div.node(); div_node.value = "overview"; // Place the reset button. div .append("div") .style("color", "#aaa") .style("cursor", "pointer") .on("click", function () { div_node.value = "overview"; div_node.dispatchEvent(new CustomEvent("input")); }) .text("(reset)"); // Setup a place to display links for the road rides let roads = div.append("div"); roads.append("h2").text("Road Rides"); let road_rides = roads.append("ul"); // Setup a place to display links for the mountain bike rides let mtns = div.append("div"); mtns.append("h2").text("Mountain Bike Rides"); let mtn_rides = mtns.append("ul"); // Add links to the rides old_bike_rides.forEach(function (o) { if (o.type == "road") { road_rides .append("li") .append("span") .attr("class", "link") .on("click", function () { div_node.value = o.name; div_node.dispatchEvent(new CustomEvent("input")); }) .text(o.title); } else if (o.type == "mtn") { mtn_rides .append("li") .append("span") .attr("class", "link") .on("click", function () { div_node.value = o.name; div_node.dispatchEvent(new CustomEvent("input")); }) .text(o.title); } }); return div_node; }34:T69d,md`## Comments My first attempts to display my rides on an interactive map were around late 2004 using the Google Maps API which, as I recall, was in version 1.3 but soon to transition to version 2.0 at the time. It was quite challenging to do a decent job then because the API would choke on paths with around 400 or more points. Of course, a GPX route of a 100 mile bike ride can easily be tens of thousands of points; even a frequently done casual ride can be a few thousand. Being a mathematician, I thought out a simple point reduction algorithm and applied it with reasonable, but not spectacular, success. So I read up a bit on computational geometry and discovered the [Douglas-Peucker algorithm](https://en.wikipedia.org/wiki/Ramer%E2%80%93Douglas%E2%80%93Peucker_algorithm), which does a great job of removing lots of points in the region where the path is relatively straight but removing relatively few points where the path needs them to maintain its shape. Applying this algorithm was a big improvement over my simple one, though 400 points was still a pretty serious limitation. My recollection is that version 2 of the Google Maps API came out very shortly after I had coded up the Douglas-Peucker algorithm and with V2 came the advent of the so-called *encoded polyline*. Google's documentation on the encoded polyline was a bit dense but it turned out that my experience with the Douglas-Peucker algorithm put me in perfect position to use Google's new tool properly. More details than you want are provided on [this archived version of my encoded polyline page](https://web.archive.org/web/20080213173848/http://facstaff.unca.edu/mcmcclur/GoogleMaps/EncodePolyline/).`35:[{"id":"afe52d23ba9d98df14986682388e3e33fe5c33e685f98523fb1506e74cee930d864ee0c6455741b477f74c90553810cb2382536cd26ff0cb943da73785e58091","href":"https://static.observableusercontent.com/files/afe52d23ba9d98df14986682388e3e33fe5c33e685f98523fb1506e74cee930d864ee0c6455741b477f74c90553810cb2382536cd26ff0cb943da73785e58091","name":"markerM.png","type":"image/png","lastModified":1625001752886.166,"size":956},{"id":"a35375fd4bcc41377b22c4734233df05220c3ce80e14f88b5a95069c403d3da49b8bd11958530723b67fd3b504292755b25bbe9660c71afcae51b2d24ec4e7a9","href":"https://static.observableusercontent.com/files/a35375fd4bcc41377b22c4734233df05220c3ce80e14f88b5a95069c403d3da49b8bd11958530723b67fd3b504292755b25bbe9660c71afcae51b2d24ec4e7a9","name":"old_polylines@3.json","type":"application/json","lastModified":1625024405397.182,"size":200358},{"id":"bbfbd7ec468c32ebc29e70095583d68b468c0ac37ca37e854fdd98a04e1b416430a598858f03f615816f2f3e940e145fa9e29b6ef52408adbed77c047d4c7624","href":"https://static.observableusercontent.com/files/bbfbd7ec468c32ebc29e70095583d68b468c0ac37ca37e854fdd98a04e1b416430a598858f03f615816f2f3e940e145fa9e29b6ef52408adbed77c047d4c7624","name":"markerR.png","type":"image/png","lastModified":1625001833897.489,"size":933}] 2f:{"title":"Old encoded polyline rides with Leaflet","cells":[{"id":0,"value":"# Old encoded polyline rides with Leaflet","pinned":false,"hidden":false,"mode":"md"},{"id":298,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":243,"value":"comment = {\n if (ride_selector == \"overview\") {\n return md``;\n } else {\n return md`## ${ride_info.title}\n${ride_info.comment}`;\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":21,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":238,"value":"elevation_chart = {\n if (ride_selector != 'overview') {\n return html`

`;\n } else {\n return html``;\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":67,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":302,"value":"$34","pinned":false,"hidden":false,"mode":"ojs"},{"id":281,"value":"md`## Code`","pinned":false,"hidden":false,"mode":"ojs"},{"id":23,"value":"ride_info = {\n if (ride_selector != 'overview') {\n let ride_info = old_bike_rides.filter(o => o.name == ride_selector)[0];\n let trkpts = decodeLine(ride_info.polyline);\n return {\n trkpts: trkpts,\n elevation_chart: ride_info.elevation_chart,\n title: ride_info.title,\n comment: ride_info.comment\n };\n }\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":35,"value":"function create_gpx_path(trkpts) {\n let polyline = L.polyline(trkpts, { color: 'blue' });\n let start_marker = L.marker(trkpts[0], {\n icon: L.divIcon({ className: 'markerIconShape startIconColor' })\n });\n let end_marker = L.marker(trkpts.slice(-1)[0], {\n icon: L.divIcon({ className: 'markerIconShape endIconColor' })\n });\n let gpx_path = L.layerGroup([\n polyline,\n start_marker,\n end_marker\n ]);\n\n return gpx_path;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":2,"value":"function decodeLine(encoded) {\n var len = encoded.length;\n var index = 0;\n var array = [];\n var lat = 0;\n var lng = 0;\n\n while (index < len) {\n var b;\n var shift = 0;\n var result = 0;\n do {\n b = encoded.charCodeAt(index++) - 63;\n result |= (b & 0x1f) << shift;\n shift += 5;\n } while (b >= 0x20);\n var dlat = result & 1 ? ~(result >> 1) : result >> 1;\n lat += dlat;\n\n shift = 0;\n result = 0;\n do {\n b = encoded.charCodeAt(index++) - 63;\n result |= (b & 0x1f) << shift;\n shift += 5;\n } while (b >= 0x20);\n var dlng = result & 1 ? ~(result >> 1) : result >> 1;\n lng += dlng;\n\n array.push([lat * 1e-5, lng * 1e-5]);\n }\n\n return array;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":142,"value":"markerR = L.icon({\n iconUrl: await FileAttachment(\"markerR.png\").url(),\n iconSize: [20, 34],\n iconAnchor: [20, 34],\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":139,"value":"markerM = L.icon({\n iconUrl: await FileAttachment(\"markerM.png\").url(),\n iconSize: [20, 34],\n iconAnchor: [20, 34]\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":9,"value":"old_bike_rides = FileAttachment(\"old_polylines@3.json\").json()","pinned":true,"hidden":false,"mode":"ojs"},{"id":37,"value":"style = html`\n \n`","pinned":true,"hidden":false,"mode":"ojs"},{"id":318,"value":"import { mb_token } from \"@mcmcclur/mapbox-token\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":12,"value":"L = {\n const L = await require(\"leaflet@1/dist/leaflet.js\");\n\n if (!L._style) {\n const href = await require.resolve(\"leaflet@1/dist/leaflet.css\");\n document.head.appendChild(\n (L._style = html``)\n );\n }\n return L;\n}","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W35","stdlib":"1","titling":"auto"}