2e:null 2f:["$","title",null,{"children":"GPX rides with Leaflet and OSM | Mark McClure | Observable"}] 34:Te03,map = { // 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], center: [35.6, -82.55], zoom: 12, minZoom: 10 // maxBounds: L.latLngBounds( // L.latLng(34.9737, -83.864136), // L.latLng(36.2021744, -81.243896) // ) }); // Add controls let baseLayers = { "USGS Topo": USGS_USTopo, "Open Street Map": OSM2 }; // Check to see 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; } // This Grouped Layer control is not standard, but an easily installed plugin. // There's only one group but we can tag it as "exclusive" to get radio buttons, // rather than checkboxes. L.control .groupedLayers(baseLayers, groupedOverlays.groups, { exclusiveGroups: ["Rides"] }) .addTo(map); //L.control.scale().addTo(map); // Try initial display based on query string. // Useful for sharing one-offs with friends. { if (params.get('gpx')) { try { let trk_pts = get_trkpts( await (await fetch( `https://marksmath.org/maps/GPXFiles/${params.get('gpx')}.gpx` )).text() ); let path = create_gpx_path(trk_pts); path.addTo(map); map.fitBounds(path.getLayers()[0].getBounds()); make_elevation_chart(trk_pts); global.gpx_path = path; } catch { ('pass'); } } } // On overlay, we want to fly to the new path, make the elevation chart, // and display any comments we might see. map.on("overlayadd", function(p) { if (global.gpx_path) { global.gpx_path.removeFrom(map); } global.gpx_path = p.layer; map.flyToBounds( groupedOverlays.groups.Rides[p.name].getLayers()[0].getBounds() ); make_elevation_chart(groupedOverlays.trkpts_list[p.name]); d3.select(comment).append(() => comments.get(p.name)); }); // Gotta clear some stuff, when we remove the overlay. map.on("overlayremove", function() { global.gpx_path = null; d3.select(elevation_chart_container) .select("svg") .remove(); d3.select(comment).html(""); }); // Do I really need to do this? invalidation.then(() => map.remove()); return map; }35:T7f0,groupedOverlays = { if(params.get('gpx')) return {}; const files = { "Road: 276": FileAttachment("276.reduced.gpx"), "Road: Bakery": FileAttachment("Bakery3.reduced.gpx"), "Road: Coxes Creek": FileAttachment("CoxesCreek.reduced.gpx"), "Road: Haw Creek Overlook": FileAttachment("HawcreekTownMtn.reduced.gpx"), "Road: Hookers Gap to Marshall": FileAttachment("HookersGapAndMarshall.reduced.gpx"), "Road: Lake Logan": FileAttachment("LakeLogan.reduced.gpx"), "Road: Up Ox Creek": FileAttachment("OxCreekBiltmoreForrest.reduced@1.gpx"), "GRVL: Curtis Creek": FileAttachment("FolkArtCurtisCreekParkway.reduced.gpx"), "GRVL: Bent Creek": FileAttachment("BCG6.reduced.gpx"), "GRVL: Bent Creek WVL": FileAttachment("BCGfromWVL.reduced.gpx"), "GRVL: Lynn Cove cut through": FileAttachment("LynnCoveCutThrough.reduced.gpx"), "GRVL: Three dirt too": FileAttachment("NorthAshevilleGravel.reduced.gpx"), "GRVL: Pisgah 470s": FileAttachment("PisgahGravel470s.reduced.gpx"), "GRVL: Stoney Fork": FileAttachment("StoneyFork.reduced.gpx"), "GRVL: Yellow Gap": FileAttachment("YellowGapTo276.reduced.gpx"), "MTN: A lotta Bent Creek": FileAttachment("AlottaBentCreek.reduced.gpx"), "MTN: Big Creek": FileAttachment("BIGBigCreek.reduced.gpx"), "MTN: Fish Hatch": FileAttachment("CoveCreekDanielButterCat.reduced.gpx"), "MTN: Jerdon Mountain": FileAttachment("JerdonMountain.reduced.gpx"), "MTN: Pink Beds to Bennett Gap": FileAttachment("PinkBedsBennettGap.reduced.gpx"), "MTN: Spencer Fletcher": FileAttachment("SpencerFletcherWithRob.reduced.gpx"), }; const routes = await Promise.all(Object.entries(files).map(async ([name, file]) => { const points = get_trkpts(await file.text()); return [name, {points, path: create_gpx_path(points)}]; })); return { groups: { Rides: Object.fromEntries(routes.map(([k, {path}]) => [k, path])) }, trkpts_list: Object.fromEntries(routes.map(([k, {points}]) => [k, points])), }; }36:T14ad,comments = { let comments = new Map(); comments.set( "GRVL: Curtis Creek", md`### Curtis Creek This ride is mostly road but has a serious six mile gravel climb from Old Fort (at 1500 ft) to the Parkway at over 4000 feet. It was 60 degrees in Asheville on this particular January day, but I rode through an inch of snow for several miles on the Parkway.` ); comments.set( "Road: 276", md`### 276 A version from UNCA appears on my old map as well - and I'm still doing it.` ); comments.set( "Road: Bakery", md`### The Bakery Ride This is a very fast group that that leaves from Fuddruckers on Saturday mornings. Don't get dropped, if you don't know Leicester! ` ); comments.set( "Road: Coxes Creek", md`### Coxes creek Coxes creek road is an innocent looking road that turns off of 19E as it meanders along the Cane River outside of Burnsville. Innocence turns deadly pretty soon, though as you hit a ramp of 20%. After a mile and a half or so, it bombs back down to Jack's Creek where you can turn right to complete a great little loop.` ); comments.set( "Road: Haw Creek Overlook", md`### Haw Creek Overlook There's this section of the Parkway between the Folk Art Center and Town Mountain Rd that's right outside of town and just great to go up or down. It opens up at the Haw Creek Overlook to give great views of the valley and mountains in the distance.` ); comments.set( "Road: Hookers Gap to Marshall", md`### Hooker's Gap to Marshall This is kind of a combination of Hooker's Gap and Rector's Corner, which are both featured on my old map.` ); comments.set( "Road: Lake Logan", md`### Lake Logan I got a crew I ride this with just about every Summer. Starting near Lake Logan cuts the 15 mile climb up 215 in half and gives you a good spot to swim when you're done.` ); comments.set( "Road: Up Ox Creek", md`### Up Ox Creek I've got a ride on my old map called The Ox Creek Plunge, which is a very popular ride. Going up Ox Creek is much harder` ); comments.set( "GRVL: Bent Creek", md`### Bent Creek Bent Creek is about 5 to 10 minute drive from my house, so I ride Gravel and Trail there a lot. This is a nice 20 miler with nothing but gravel` ); comments.set( "GRVL: Bent Creek WVL", md`### Bent Creek WVL Someties, I just ride the gravel bike to Bent Creek from home. This ride goes straight through Bent Creek to the Parkway and then boms down that to the Arboretum before heading back through Bent Creek to get to the secret Enka Lake exit to get home.` ); comments.set( "GRVL: Lynn Cove cut through", md`### Lynn Cove cut through So Dave tells me that the Strava heat map says there's a faint path from the back of Lynn Cove to the top of Elk Mountain. Sure - what the hell? :)` ); comments.set( "GRVL: Three dirt too", md`### Three dirt too There's a ride called Three Dirt on my old page. I think it's awesome that I was riding gravel on my titanium road bike years before everyone was into it. This ride hits the same three dirt roads via an entirely different route.` ); comments.set( "GRVL: Pisgah 470s", md`### Pisgah 470s I've mountain biked in Pisgah about a thousand times. This ride is the one time I've ever driven down there by myself to gravel ride. Not sure why I don't do it more!` ); comments.set( "GRVL: Stoney Fork", md`### Stoney Fork A wonderful ride - a lot like Curtis Creek in that it's spectacular in beauty and difficulty.` ); comments.set( "GRVL: Yellow Gap", md`### Yellow Gap You can turn your Bent Creek gravel ride into a *true* epic by riding up and *over* the Blue Ridge down into Mill River where you catch Yellow Gap Road to ride clear out to 276. You can then take the Parkway back.` ); comments.set( "MTN: A lotta Bent Creek", md`### A lotta Bent Creek I do a fair amount of 10-12 mile rides in Bent Creek. Almost 23 miles on this day, though!` ); comments.set( "MTN: Big Creek", md`### BIG Big Creek I would not have done this ride without Rob and Eric, as there's a lot of hike a bike. Big Creek is definitely an fun, fun, fun down hill, though.` ); comments.set( "MTN: Fish Hatch", md`### Fish Hatch I *love* riding out of the Fish Hatchery! This ride took in Cove Creek, Daniel Ridge, and Butter Gap before ending up coming down the waterfall filled Cat Gap trail behind the Fish Hatch.` ); comments.set( "MTN: Jerdon Mountain", md`### Jerdon Mountain Challenge I've done a fair amount of organized road races but this was the first time I did a mountain bike race - mainly to escort a friend's 13 year old son. My official time 3:00:18 and Wade's was 3:00:01 and it made me feel pretty good to be comfortably in the first half of the pack. Wade did it in 2:18 the following year!` ); comments.set( "MTN: Pink Beds to Bennett Gap", md`### Pink Beds and Bennett Gap This ride was on my old map and it's still one of my favorites.` ); comments.set( "MTN: Spencer Fletcher", md`### Spencer/Fletcher This is the right way to ride Spencer Gap and Fletcher Creek - from the bottom! Did this with Rob on his visit last Summer; hopefully, we'll do it again next week!` ); return comments; }37:Tf32,// Constructs the elevation chart function make_elevation_chart(trkpts) { let w = window.innerWidth < 600 ? window.innerWidth : 600; let h = w / 3; let pad_left = 40; let pad_bottom = 20; let svg = d3 .create("svg") .attr("class", "elevation_chart") .attr("width", w) .attr("height", h); svg .append('rect') .attr('width', w) .attr('height', h) .attr('fill', 'white') .attr('opacity', 0.5); let lngLats = trkpts.map(pt => [pt[1], pt[0]]); let elevation_path = []; let cummulative_length = 0; let R = 3; let distance_to_point_map = new Map(); for (let i = R; i < trkpts.length - R; i++) { cummulative_length = cummulative_length + d3.geoDistance(lngLats[i - 1], lngLats[i]) * 3958.8; let elevation = d3.mean(trkpts.slice(i - R, i + R).map(pt => pt.ele)); elevation_path.push([cummulative_length, elevation]); distance_to_point_map.set(cummulative_length, lngLats[i]); } let path_length = elevation_path.slice(-1)[0][0]; let elevations = trkpts.map(o => o.ele); let min_elevation = d3.min(elevations); let max_elevation = d3.max(elevations); let elevation_pad = 500; let elevation_path2 = [[0, min_elevation - elevation_pad]] .concat(elevation_path) .concat([[path_length, min_elevation - elevation_pad]]); let x_scale = d3 .scaleLinear() .domain([0, path_length]) .range([pad_left, w]); let y_scale = d3 .scaleLinear() .domain([min_elevation - elevation_pad, max_elevation + elevation_pad]) .range([h - pad_bottom, 0]); let pts_to_path = d3 .line() .x(d => x_scale(d[0])) .y(d => y_scale(d[1])); svg .append("path") .attr("d", pts_to_path(elevation_path2)) .style("stroke", "black") .style("stroke-width", "0px") .style("stroke-linejoin", "round") .style('opacity', 0.7) .style("fill", "#eee"); svg .append("path") .attr("d", pts_to_path(elevation_path)) .style("stroke", "black") .style("stroke-width", "3px") .style("stroke-linejoin", "round") .style("fill", "none"); svg .append("g") .attr("transform", `translate(0, ${h - pad_bottom})`) .call(d3.axisBottom(x_scale)); svg .append("g") .attr("transform", `translate(${pad_left})`) .call(d3.axisLeft(y_scale)); let position_marker = svg .append('g') .attr('class', 'position_marker') .style('opacity', 0); position_marker .append('line') .attr('stroke-width', '1px') .attr('stroke', 'black') .attr('y1', 0) .attr('y2', h) .attr('x1', w / 2) .attr('x2', w / 2); position_marker .append('circle') .attr('r', '5px') .attr('cx', w / 2) .attr('cy', h / 2) .attr('fill', '#0ff') .attr('stroke', 'black'); let lengths = elevation_path.map(pt => pt[0]); svg .on('mouseenter', function() { position_marker.style('opacity', 1); }) .on('mousemove', function(evt) { evt.preventDefault(); let distance = x_scale.invert(d3.pointer(evt)[0]); let i = binarySearch(lengths, distance); let x = x_scale(distance); let elevation = elevations[i]; let y = y_scale(elevation); position_marker .select('line') .attr('x1', x) .attr('x2', x); position_marker .select('circle') .attr('cx', x) .attr('cy', y); global.gpx_path.getLayers()[1].setLatLng(trkpts[i]); }) .on('mouseleave', function() { position_marker.style('opacity', 0); }); svg .append('text') .attr('x', 50) .attr('y', 20) .text(formatTime(trkpts[0].time)); svg .append('text') .attr('x', 50) .attr('y', 40) .text(`${d3.format('0.1f')(path_length)} miles`); d3.select(elevation_chart_container) .selectAll(".elevation_chart") .remove(); d3.select(elevation_chart_container).append(() => svg.node()); }38:[{"id":"055536c41f55604e9fa4d147261d5ced11fa9b0be8c870ab102722abacf22ccffe9882332a095065a980c55ea95b492ae5262675aac3d926835006bd1f6e6e86","href":"https://static.observableusercontent.com/files/055536c41f55604e9fa4d147261d5ced11fa9b0be8c870ab102722abacf22ccffe9882332a095065a980c55ea95b492ae5262675aac3d926835006bd1f6e6e86","name":"276.reduced.gpx","type":"application/xml","lastModified":1624849531585.486,"size":128695},{"id":"ef76d7ce623b5205116b3b5fd66d683ca3a6d908aa8f5e18c468b02483b4a997dd5e5d9d7e79dc67f43e48b54f57b919e5c63332124c633a1c4b200bc293fb1d","href":"https://static.observableusercontent.com/files/ef76d7ce623b5205116b3b5fd66d683ca3a6d908aa8f5e18c468b02483b4a997dd5e5d9d7e79dc67f43e48b54f57b919e5c63332124c633a1c4b200bc293fb1d","name":"FolkArtCurtisCreekParkway.reduced.gpx","type":"application/xml","lastModified":1624889823049.002,"size":173735},{"id":"3da71941b10d4980be5563d699e7e28a9571cb58245bb7d042ccf11b3bcfb10a22a60fb28e10d7173290d6cf2dd9e474dd6c6cc0995f28122a0d6cdc9b024537","href":"https://static.observableusercontent.com/files/3da71941b10d4980be5563d699e7e28a9571cb58245bb7d042ccf11b3bcfb10a22a60fb28e10d7173290d6cf2dd9e474dd6c6cc0995f28122a0d6cdc9b024537","name":"AlottaBentCreek.reduced.gpx","type":"application/xml","lastModified":1624889958825.869,"size":110124},{"id":"c14f969d89379a55650ce3c2a278f9f012532a349f3f9ae56363f400d29a82c677b57b102d48c4a18300763d2238bc5f0c08e8795b759097390a52d6fbdad7aa","href":"https://static.observableusercontent.com/files/c14f969d89379a55650ce3c2a278f9f012532a349f3f9ae56363f400d29a82c677b57b102d48c4a18300763d2238bc5f0c08e8795b759097390a52d6fbdad7aa","name":"Bakery3.reduced.gpx","type":"application/xml","lastModified":1624890209172.772,"size":117605},{"id":"5700f45dc18b66c625574ecffad198ad1951bf59e9b29c9688c326f2f79e8218212bc528438c614e781897157fd6161ae2fd46d8bbf1e4ffcf61a0df247df918","href":"https://static.observableusercontent.com/files/5700f45dc18b66c625574ecffad198ad1951bf59e9b29c9688c326f2f79e8218212bc528438c614e781897157fd6161ae2fd46d8bbf1e4ffcf61a0df247df918","name":"BCG6.reduced.gpx","type":"application/xml","lastModified":1624890720220.04,"size":169774},{"id":"df6660ee1e384c0f8ca248c603ae4c5d18f206c1283f129d5e61bbd2ad93075d8d1dab4b82088799b1a6347147ad121ca4b999b254f8c864ce8d0bae481847f1","href":"https://static.observableusercontent.com/files/df6660ee1e384c0f8ca248c603ae4c5d18f206c1283f129d5e61bbd2ad93075d8d1dab4b82088799b1a6347147ad121ca4b999b254f8c864ce8d0bae481847f1","name":"BCGfromWVL.reduced.gpx","type":"application/xml","lastModified":1624891407883.25,"size":133141},{"id":"e4e8fb89ad4348e3996ecc34d25fc3420284a62553b14c2c3940457a1b72b5c1ac0e81a28f83d78cf9c4b5474f3e982932009c0604058862834d8c3c951254d5","href":"https://static.observableusercontent.com/files/e4e8fb89ad4348e3996ecc34d25fc3420284a62553b14c2c3940457a1b72b5c1ac0e81a28f83d78cf9c4b5474f3e982932009c0604058862834d8c3c951254d5","name":"HookersGapAndMarshall.reduced.gpx","type":"application/xml","lastModified":1624901708720.518,"size":95061},{"id":"e96e9ef4000ad1965dc35975dff4e1880b9ff223ef72320175d3de4c2e5081e3af6a4459d8706ceda8428619d232396c7d07b1d3788921d68b7613d3bd259eb7","href":"https://static.observableusercontent.com/files/e96e9ef4000ad1965dc35975dff4e1880b9ff223ef72320175d3de4c2e5081e3af6a4459d8706ceda8428619d232396c7d07b1d3788921d68b7613d3bd259eb7","name":"BIGBigCreek.reduced.gpx","type":"application/xml","lastModified":1624902147302.265,"size":237073},{"id":"2a0c122dc76ca468a0be06ce07b3df770d87fe3b0743f3f77e3d057b97f4d4fc132c3ddbd2da6f2e2f92899c9b583c91a7573c2c92ac43b01933b02c374218b1","href":"https://static.observableusercontent.com/files/2a0c122dc76ca468a0be06ce07b3df770d87fe3b0743f3f77e3d057b97f4d4fc132c3ddbd2da6f2e2f92899c9b583c91a7573c2c92ac43b01933b02c374218b1","name":"CoveCreekDanielButterCat.reduced.gpx","type":"application/xml","lastModified":1624902674906.45,"size":136540},{"id":"fc68a303bf89458e03fe4e5f538f4b021a5d2bf07eb3acf5367a47c56f968b7755bb62d3bd8bde0e1357aff3901d5e337adff72e8b43910afe9fc4b3b839bbca","href":"https://static.observableusercontent.com/files/fc68a303bf89458e03fe4e5f538f4b021a5d2bf07eb3acf5367a47c56f968b7755bb62d3bd8bde0e1357aff3901d5e337adff72e8b43910afe9fc4b3b839bbca","name":"HawcreekTownMtn.reduced.gpx","type":"application/xml","lastModified":1624903137660.649,"size":72769},{"id":"b590ba75879274212471c360a6e150c6a124a1a969bf343405f06d23099fce3c50e2d1bbb420a0d698d8a15aefab27e0b920d98ac47694fce7d7c1aae136ef16","href":"https://static.observableusercontent.com/files/b590ba75879274212471c360a6e150c6a124a1a969bf343405f06d23099fce3c50e2d1bbb420a0d698d8a15aefab27e0b920d98ac47694fce7d7c1aae136ef16","name":"LynnCoveCutThrough.reduced.gpx","type":"application/xml","lastModified":1624906864026.1,"size":89246},{"id":"54ab253bb513f3fc2eea5105a8abd439ff97cad93cd02b2ae5cd99803ddaacdc946fcd94f01177e5b91f0dd0158bcbee78bc8707a6f5b78c2745ae63771d5739","href":"https://static.observableusercontent.com/files/54ab253bb513f3fc2eea5105a8abd439ff97cad93cd02b2ae5cd99803ddaacdc946fcd94f01177e5b91f0dd0158bcbee78bc8707a6f5b78c2745ae63771d5739","name":"CoxesCreek.reduced.gpx","type":"application/xml","lastModified":1624907233854.4,"size":67129},{"id":"8c92b833f68c0527ecc75066ffc8c790359063e149d4247dc3b91c2bb0f159baa91265584479617cedad339bf4bf6d75ee0ebe12ae25d325d9dc1763079efb01","href":"https://static.observableusercontent.com/files/8c92b833f68c0527ecc75066ffc8c790359063e149d4247dc3b91c2bb0f159baa91265584479617cedad339bf4bf6d75ee0ebe12ae25d325d9dc1763079efb01","name":"JerdonMountain.reduced.gpx","type":"application/xml","lastModified":1624907355102.606,"size":126080},{"id":"9c386a0c4dfa99288eb6d97dea897b3ca3b171559cf6937378558af908c25288657536f283d95d5383e04fbfcc5de790dcb59b6f20cd63bd30439d71db031d77","href":"https://static.observableusercontent.com/files/9c386a0c4dfa99288eb6d97dea897b3ca3b171559cf6937378558af908c25288657536f283d95d5383e04fbfcc5de790dcb59b6f20cd63bd30439d71db031d77","name":"NorthAshevilleGravel.reduced.gpx","type":"application/xml","lastModified":1624908159077.131,"size":147408},{"id":"977f8033c09ebc4ca784a383de15f507cf67d118df85edf020d252ffd4feed28402218d063c0d8b2f705ab813aeb2cdc15f3c5ff6f830c9ecc04067bf33bfa1f","href":"https://static.observableusercontent.com/files/977f8033c09ebc4ca784a383de15f507cf67d118df85edf020d252ffd4feed28402218d063c0d8b2f705ab813aeb2cdc15f3c5ff6f830c9ecc04067bf33bfa1f","name":"StoneyFork.reduced.gpx","type":"application/xml","lastModified":1624908380559.277,"size":104475},{"id":"e702c783a2a516a15e7f631e2f05e7874be7422256218c290753a303c32da71bd0eb95178d08310e14d62299195bcdfcc4bef7ac34c3c40d88c92c1f1d5e69a6","href":"https://static.observableusercontent.com/files/e702c783a2a516a15e7f631e2f05e7874be7422256218c290753a303c32da71bd0eb95178d08310e14d62299195bcdfcc4bef7ac34c3c40d88c92c1f1d5e69a6","name":"PinkBedsBennettGap.reduced.gpx","type":"application/xml","lastModified":1624909046956.597,"size":139784},{"id":"935b7d20224c6346591e76b4f225fa36f1922f23d704fba4c5cae8bd4a8d81fc1eac7967d0af28834cf93127f356646562f19be0640d1f4957791e443c6014a9","href":"https://static.observableusercontent.com/files/935b7d20224c6346591e76b4f225fa36f1922f23d704fba4c5cae8bd4a8d81fc1eac7967d0af28834cf93127f356646562f19be0640d1f4957791e443c6014a9","name":"SpencerFletcherWithRob.reduced.gpx","type":"application/xml","lastModified":1624909141202.009,"size":105983},{"id":"cc36de5836b547a737049e6e6d0e5ad869a4168aecc28ba2c61c113267a8f5a453d47c0361c8724bb4cd66f17c3713b8d7ec838af3e333e4f9464b860dd019e2","href":"https://static.observableusercontent.com/files/cc36de5836b547a737049e6e6d0e5ad869a4168aecc28ba2c61c113267a8f5a453d47c0361c8724bb4cd66f17c3713b8d7ec838af3e333e4f9464b860dd019e2","name":"YellowGapTo276.reduced.gpx","type":"application/xml","lastModified":1624909182238.835,"size":156748},{"id":"4c76da2cb9d063ab814af833c85749991fcb2022353faa074bf93ee913392c26f4f2814ae3ec6dd65dd20828c393af4737f437f450d23f78dc9668d09c5d0805","href":"https://static.observableusercontent.com/files/4c76da2cb9d063ab814af833c85749991fcb2022353faa074bf93ee913392c26f4f2814ae3ec6dd65dd20828c393af4737f437f450d23f78dc9668d09c5d0805","name":"OxCreekBiltmoreForrest.reduced@1.gpx","type":"application/xml","lastModified":1624909753320.739,"size":90553},{"id":"2e96c814cd23b21d3d45fa8f43c2f2cc30a9692b1a982099675f14210297a6f57f3c5441d4b3514b0cdd9249ff8bbdc48e01dd2f110c365ddfdacb7573d18d1b","href":"https://static.observableusercontent.com/files/2e96c814cd23b21d3d45fa8f43c2f2cc30a9692b1a982099675f14210297a6f57f3c5441d4b3514b0cdd9249ff8bbdc48e01dd2f110c365ddfdacb7573d18d1b","name":"PisgahGravel470s.reduced.gpx","type":"application/xml","lastModified":1624909101270.936,"size":115376},{"id":"997b09598fda1169f43b9e122e0f28c3103629837ff8a021e138cd496cbcbee30a8c53b2ae81a7668515fe82a687b15be4ce6753c4b9c51bafd2eea34a5a0cda","href":"https://static.observableusercontent.com/files/997b09598fda1169f43b9e122e0f28c3103629837ff8a021e138cd496cbcbee30a8c53b2ae81a7668515fe82a687b15be4ce6753c4b9c51bafd2eea34a5a0cda","name":"LakeLogan.reduced.gpx","type":"application/xml","lastModified":1624907781053.791,"size":113605}] 32:{"id":"a56371fe37d38c25","slug":"gpx-rides-with-leaflet","title":"GPX rides with Leaflet and OSM","thumbnail":"0d6c5c36aec8b87651b88ca93845d9f0ee614a28349cbd25bbae868befc58ba5","access_level":"public","create_time":"$D2021-06-22T21:46:31.894Z","update_time":"$D2024-01-11T22:33:43.501Z","view_time":null,"first_public_time":"$D2021-06-30T22:10:06.246Z","has_unpublished_edits":null,"fork":false,"stars":7,"starred":false,"owner":{"type":"team","id":"d771c8ae812d5130","login":"mcmcclur","name":"Mark McClure","avatar_url":"https://avatars-next.observableusercontent.com/e615e819ce83d43faef607e48c53c5ff63943aa0ba9f5848499bd02fef7396f4","tier":"starter_2024"},"version":1468,"publish_version":1468,"role":null,"authored":false,"authors":[{"type":"individual","id":"c3301e515dd08a41","login":"mcmcclur","name":"Mark McClure","avatar_url":"https://avatars-next.observableusercontent.com/e615e819ce83d43faef607e48c53c5ff63943aa0ba9f5848499bd02fef7396f4","tier":null}],"members":[{"type":"individual","id":"c3301e515dd08a41","login":"mcmcclur","name":"Mark McClure","avatar_url":"https://avatars-next.observableusercontent.com/e615e819ce83d43faef607e48c53c5ff63943aa0ba9f5848499bd02fef7396f4","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":true,"trashed":false,"lapsed":null,"subscribed":null,"forks":3,"collection":{"id":"f33b2a22ea06cbf0","slug":"maps","title":"Maps","owner":{"id":"d771c8ae812d5130","login":"mcmcclur","name":"Mark McClure"}},"type":"notebook","body":{"title":"GPX rides with Leaflet and OSM","cells":[{"id":0,"value":"# GPX rides with Leaflet and OSM","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1245,"value":"md`I've been biking in the mountains of Western North Carolina since 1998 and I started recording my rides to post them to my web page using the Google Maps API in 2004. You can see a reproduction of an old webpage illustrating some of those rides in [this notebook](https://observablehq.com/@mcmcclur/old-encoded-polyline-rides-with-leaflet).\n\nI lost interest in posting rides not long after Strava came around so that anyone could do it. I never stopped riding, though, and got a sleek new GPS a couple of years ago. Here are a few of the rides I've done since then displayed on a Leaflet map. You can use the layer control in the upper right corner of the map to select a ride to display and you can hover over the elevation profile to select points on the path.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1252,"value":"comment = {\n let comment = d3.create('div');\n return comment.node();\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":6,"value":"map_container = {\n let container = d3\n .create(\"div\")\n .style(\"width\", \"100%\")\n .style(\"height\", h);\n yield container.node();\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":507,"value":"elevation_chart_container = {\n let w = window.innerWidth < 600 ? window.innerWidth : 600;\n let h = w / 3;\n let container = d3\n .create(\"div\")\n .style(\"width\", `${w}px`)\n .style(\"height\", `${h}px`);\n\n return container.node();\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1293,"value":"md`Sometimes I use this page to view my GPX files after a ride, which is nice and easy with this upload button:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1113,"value":"{\n let file_input = d3\n .create(\"input\")\n .attr(\"type\", \"file\")\n .attr(\"accept\", \".gpx\")\n .on(\"change\", function() {\n let input_file = this.files[0];\n input_file.text().then(function(t) {\n let trkpts = get_trkpts(t);\n let gpx_path = create_gpx_path(trkpts);\n if (global.gpx_path) {\n global.gpx_path.removeFrom(map);\n }\n gpx_path.addTo(map);\n global.gpx_path = gpx_path;\n\n map.flyToBounds(gpx_path.getLayers()[0].getBounds());\n make_elevation_chart(trkpts);\n });\n });\n\n return file_input.node();\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1296,"value":"md`## Comment\n\nThis notebook might be contrasted with [this new notebook of old rides](https://observablehq.com/@mcmcclur/old-encoded-polyline-rides-with-leaflet). It looks like I don't do 100 mile rides any more but, then, I don't use Google Maps anymore either.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":951,"value":"md`## Code`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":178,"value":"$34","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1433,"value":"11975 / 60 ** 2","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1430,"value":"t2.getTime() - t1.getTime()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1417,"value":"t2 = groupedOverlays.trkpts_list[\"GRVL: Bent Creek WVL\"].slice(-1)[0].time","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1412,"value":"t1 = groupedOverlays.trkpts_list[\"GRVL: Bent Creek WVL\"][0].time","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1021,"value":"$35","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":980,"value":"$36","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":280,"value":"// Parse the GPX file and return a list of [lat,lon] points.\n// Each point optionally has a ele(vation) and time keys.\nfunction get_trkpts(file_string) {\n let parsed = parser.parseFromString(file_string, 'text/xml');\n let trkpts = parsed.getElementsByTagName('trkpt');\n let pts = [];\n for (let trkpt of trkpts) {\n let pt = [\n parseFloat(trkpt.getAttribute('lat')),\n parseFloat(trkpt.getAttribute('lon'))\n ];\n try {\n let ele = trkpt.getElementsByTagName('ele')[0].textContent;\n pt.ele = 3.28084 * parseFloat(ele);\n } catch (e) {\n ('pass');\n }\n try {\n let time = trkpt.getElementsByTagName('time')[0].textContent;\n pt.time = parseTime(time);\n } catch (e) {\n ('pass');\n }\n pts.push(pt);\n }\n return pts;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":284,"value":"// Take a list of [lat,lon] pairs and retun a layerGroup with\n// a polyline and start/stop markers.\nfunction create_gpx_path(trkpts, opts = {}) {\n let { group_or_fetch = 'group' } = opts;\n let polyline = L.polyline(trkpts, { color: 'blue' });\n let position_marker = L.marker(trkpts[0], {\n icon: L.divIcon({ className: 'markerIconShape positionIconColor' })\n });\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 position_marker,\n start_marker,\n end_marker\n ]);\n\n return gpx_path;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1204,"value":"$37","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1207,"value":"// Given an *ordered* array arr and a value t, this finds the index\n// of the laregest element of arr that is less than t.\n// Used when we hover over the elevation chart to quickly find the\n// corresponding point on the path.\n\nfunction binarySearch(arr, t, bail = 100) {\n let cnt = 0;\n let m = 0;\n let n = arr.length;\n let a = arr[0];\n let b = arr[n - 1];\n if (t <= a) {\n return 0;\n } else if (t >= b) {\n return n - 1;\n } else {\n let k;\n while (n - m > 1 && cnt++ < bail) {\n k = Math.floor((m + n) / 2);\n let c = arr[k];\n if (t <= c) {\n b = c;\n n = k;\n } else {\n a = c;\n m = k;\n }\n }\n return k;\n }\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1436,"value":"parseTime2 = d3.utcParse(\"%Y-%m-%dT%H:%M:%SZ\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":974,"value":"parseTime1 = d3.utcParse(\"%Y-%m-%dT%H:%M:%S.%LZ\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1446,"value":"function parseTime(s) {\n let t1 = parseTime1(s);\n let t2 = parseTime2(s);\n if (t1) {\n return t1;\n } else {\n return t2;\n }\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1071,"value":"formatTime = d3.timeFormat('%a, %b %e, %Y')","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":948,"value":"global = ({})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":163,"value":"parser = new DOMParser()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2,"value":"L = {\n const L = await require(\"leaflet@1/dist/leaflet.js\");\n\n // The following plugin allows the Exclusive radio buttons for the overlays\n await require(\"leaflet-groupedlayercontrol\").catch(\n () => L.Control.GroupedLayers\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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":538,"value":"style = html`\n \n`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1396,"value":"h = '550px'","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1326,"value":"params = new URLSearchParams(location.search)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1182,"value":"import { mb_token } from '@mcmcclur/mapbox-token'","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W38","stdlib":"1","titling":"auto"}} 33:"$32:body"