27:null 28:["$","title",null,{"children":"GPX Tracks on Leaflet | Steve Kasica | Observable"}] 2d: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(); }); }2e:[{"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}] 2b:{"id":"7eafed7b869f2613","slug":null,"title":"GPX Tracks on Leaflet","thumbnail":"f4cc155e71294f72201e05afee78d6c154a44b36a0feff30bbc31e10d5623b4e","access_level":"public","create_time":"$D2024-08-01T14:17:59.251Z","update_time":"$D2024-08-01T14:38:20.751Z","view_time":null,"first_public_time":"$D2024-08-01T14:17:59.251Z","has_unpublished_edits":null,"fork":{"id":"09b25929cfa8736c","slug":"gpx-tracks-on-leaflet","title":"GPX Tracks on Leaflet","owner":{"id":"56ae77b65752301c","login":"danylaksono","name":"Dany Laksono"}},"stars":0,"starred":false,"owner":{"type":"team","id":"1cebfd5d1e47fa9b","login":"stvkas","name":"Steve Kasica","avatar_url":"https://avatars-next.observableusercontent.com/b10311feda71ac109d4c36f5ef7f30ba700e7c0f8160bc5750596e4c28d9e1ab","tier":"starter_2024"},"version":387,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"a483da0cdef190cc","login":"stvkas","name":"Steve Kasica","avatar_url":"https://avatars-next.observableusercontent.com/b10311feda71ac109d4c36f5ef7f30ba700e7c0f8160bc5750596e4c28d9e1ab","tier":null}],"members":[{"type":"team","id":"1cebfd5d1e47fa9b","login":"stvkas","name":"Steve Kasica","avatar_url":"https://avatars-next.observableusercontent.com/b10311feda71ac109d4c36f5ef7f30ba700e7c0f8160bc5750596e4c28d9e1ab","tier":"starter_2024","role":"editor"},{"type":"individual","id":"a483da0cdef190cc","login":"stvkas","name":"Steve Kasica","avatar_url":"https://avatars-next.observableusercontent.com/b10311feda71ac109d4c36f5ef7f30ba700e7c0f8160bc5750596e4c28d9e1ab","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"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","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":108,"value":"## Plot on map","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":322,"value":"Upload GPX data or use default, choose available tile basemap and choose GPX track color","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":268,"value":"viewof inputFile = localFileInput({\n accept: \".gpx\",\n value: FileAttachment(\"tracks.gpx\")\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":204,"value":"viewof trackColor = Inputs.color({ label: \"Track Color\", value: \"#fcba03\" })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":339,"value":"viewof paddingLeft = htl.html`Padding-Left`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":347,"value":"viewof paddingTop = htl.html`Padding-Top`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":8,"value":"$2d","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":112,"value":"## Functions","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":289,"value":"// read input text\ntracksUploaded = inputFile.text()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":377,"value":"gpxToGeoJson(tracksUploaded)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":133,"value":"Object.keys(tiles)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":110,"value":"## Dependencies","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":185,"value":"end_icon = FileAttachment(\"end_icon.png\").url()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":186,"value":"start_icon = FileAttachment(\"start_icon.png\").url()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":119,"value":"import { tileDictionary as tiles, tileProviders } from \"@danylaksono/quickmap\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":271,"value":"import { localFileInput } from \"@mbostock/localfile\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W2e","stdlib":"1","titling":"auto"}} 2c:"$2b:body"