2f:T5fd,{ await visibility(); let container = DOM.element("div", { style: `width:${width * 0.75}px;height:${width * 0.75}px` }); yield container; const map = L.map(container, { renderer: L.canvas() }); // basemap tile tileProviders(selectedTile).addTo(map); //gpx layer let geojsonlayer = L.geoJson(gpxToGeoJson(tracksUploaded), { // change the style style: function (feature) { return { color: trackColor, weight: 3 // dashArray: "10, 5" }; }, // add icons onEachFeature: function (feature, layer) { // Create a custom icon let endIcon = L.icon({ iconUrl: end_icon, iconSize: [50, 50] }); let startIcon = L.icon({ iconUrl: start_icon, iconSize: [50, 50] }); let firstPoint = feature.geometry.coordinates[0]; let lastPoint = feature.geometry.coordinates[feature.geometry.coordinates.length - 1]; L.marker([firstPoint[1], firstPoint[0]], { icon: startIcon }).addTo(map); L.marker([lastPoint[1], lastPoint[0]], { icon: endIcon }).addTo(map); } }); geojsonlayer.addTo(map); map.fitBounds(geojsonlayer.getBounds()); map.zoomOut(1); // legend let legend = L.control({ position: "bottomleft" }); legend.onAdd = function (map) { let div = L.DomUtil.create("div", "legend"); // Append the SVG from Plot to the div div.appendChild(graph); return div; }; legend.addTo(map); invalidation.then(() => { map.remove(); }); }30:[{"id":"d4ff12756e6a35fd44ffc4e0cbb1827d6dc09913c327382dce6f5b6b2aa921d9a024eac6158b4b86bf8e8223896c949e25f62a12bab028d94da8aee344c469c9","href":"https://static.observableusercontent.com/files/d4ff12756e6a35fd44ffc4e0cbb1827d6dc09913c327382dce6f5b6b2aa921d9a024eac6158b4b86bf8e8223896c949e25f62a12bab028d94da8aee344c469c9","name":"tracks.gpx","type":"application/xml","lastModified":1722521879251.067,"size":34034},{"id":"8ffdd402d8c25ca3f835eaa0faab43a031693e3ac209ec29728db2f622d6ecfff135ac0b1d6192ea7c70a9987cbfc903154948bfd1148cade7e0609f9274a9fd","href":"https://static.observableusercontent.com/files/8ffdd402d8c25ca3f835eaa0faab43a031693e3ac209ec29728db2f622d6ecfff135ac0b1d6192ea7c70a9987cbfc903154948bfd1148cade7e0609f9274a9fd","name":"end_icon.png","type":"image/png","lastModified":1722521879251.067,"size":1256},{"id":"ffbc9fde98582736f31644943c6da976c32fac8eac7f0775adca8ce1a69b45b4f62e1066cecf51d07ea52e06edd3788c3b600aec194473a27ba601f58eec44b2","href":"https://static.observableusercontent.com/files/ffbc9fde98582736f31644943c6da976c32fac8eac7f0775adca8ce1a69b45b4f62e1066cecf51d07ea52e06edd3788c3b600aec194473a27ba601f58eec44b2","name":"start_icon.png","type":"image/png","lastModified":1722521879251.067,"size":1320}] 2d:{"title":"GPX Tracks on Leaflet","cells":[{"id":0,"value":"# GPX Tracks on Leaflet\n## No `` elements\nThis fork plots GPX routes without `` data in each `` element, like routes that come from [Ride with GPS](https://ridewithgps.com)","pinned":false,"hidden":false,"mode":"md"},{"id":108,"value":"## Plot on map","pinned":false,"hidden":false,"mode":"md"},{"id":322,"value":"Upload GPX data or use default, choose available tile basemap and choose GPX track color","pinned":false,"hidden":false,"mode":"md"},{"id":268,"value":"viewof inputFile = localFileInput({\n accept: \".gpx\",\n value: FileAttachment(\"tracks.gpx\")\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":155,"value":"viewof selectedTile = Inputs.select(Object.keys(tiles), {\n value: \"Stadia Stamen Toner\",\n label: \"Select Tiles\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":204,"value":"viewof trackColor = Inputs.color({ label: \"Track Color\", value: \"#fcba03\" })","pinned":false,"hidden":false,"mode":"ojs"},{"id":339,"value":"viewof paddingLeft = htl.html`Padding-Left`","pinned":false,"hidden":false,"mode":"ojs"},{"id":347,"value":"viewof paddingTop = htl.html`Padding-Top`","pinned":false,"hidden":false,"mode":"ojs"},{"id":8,"value":"$2f","pinned":true,"hidden":false,"mode":"ojs"},{"id":239,"value":"// use observable plot to get elevation chart\ngraph = Plot.plot({\n x: {\n ticks: 0,\n label: null\n },\n\n width: 300,\n height: 100,\n marks: [Plot.ruleY([140]), Plot.lineY(data, { x: \"index\", y: \"elevation\" })]\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":112,"value":"## Functions","pinned":false,"hidden":false,"mode":"md"},{"id":289,"value":"// read input text\ntracksUploaded = inputFile.text()","pinned":false,"hidden":false,"mode":"ojs"},{"id":230,"value":"// extract chart data from geojson\ndata = {\n let geoJsonData = gpxToGeoJson(tracksUploaded);\n\n // Extract the data\n let data = geoJsonData.features[0].properties.elevations.map(\n (elevation, i) => {\n return {\n index: i,\n elevation: elevation\n };\n }\n );\n return data;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":377,"value":"gpxToGeoJson(tracksUploaded)","pinned":true,"hidden":false,"mode":"ojs"},{"id":75,"value":"// extract GPX data to geojson\nfunction gpxToGeoJson(gpxFile) {\n const parser = new DOMParser();\n const gpx = parser.parseFromString(gpxFile, \"application/xml\");\n\n const geojson = {\n type: \"FeatureCollection\",\n features: []\n };\n\n const trkpts = gpx.documentElement.getElementsByTagName(\"trkpt\");\n const coordinates = [];\n const elevations = [];\n for (let i = 0; i < trkpts.length; i++) {\n const trkpt = trkpts[i];\n const lat = trkpt.getAttribute(\"lat\");\n const lon = trkpt.getAttribute(\"lon\");\n\n const eleTag = trkpt.getElementsByTagName(\"ele\")[0];\n const ele = eleTag ? eleTag.childNodes[0].nodeValue : null;\n\n coordinates.push([parseFloat(lon), parseFloat(lat)]);\n elevations.push(ele ? parseFloat(ele) : null);\n }\n\n const feature = {\n type: \"Feature\",\n geometry: {\n type: \"LineString\",\n coordinates: coordinates\n },\n properties: {\n elevations: elevations,\n }\n };\n geojson.features.push(feature);\n\n return geojson;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":133,"value":"Object.keys(tiles)","pinned":false,"hidden":false,"mode":"ojs"},{"id":110,"value":"## Dependencies","pinned":false,"hidden":false,"mode":"md"},{"id":185,"value":"end_icon = FileAttachment(\"end_icon.png\").url()","pinned":false,"hidden":false,"mode":"ojs"},{"id":186,"value":"start_icon = FileAttachment(\"start_icon.png\").url()","pinned":false,"hidden":false,"mode":"ojs"},{"id":119,"value":"import { tileDictionary as tiles, tileProviders } from \"@danylaksono/quickmap\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":271,"value":"import { localFileInput } from \"@mbostock/localfile\"","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W30","stdlib":"1","titling":"auto"}