Online gpx viewer google maps3/21/2024 We can switch it out really easily by changing the URL used in the L.tileLayer function. I managed to find Thunderforest, which is a company that offers a range of maps, and crucially an "Outdoors" map that has contour lines, forests, walking trails and hillshading-perfect for my hillwalking maps! They run their maps as a commercial product with API keys, but have a generous free "Hobby Project" tier that is perfect for my use. By finding a tile provider that is more focused on hiking and outdoor pursuits I could get a map that was a lot more suitable for my purpose. Turns out there's a bunch of different Tilelayers out there for all sorts of different purposes, and Leaflet supports lots of them! There's a mixture of open-source, free, and licensed tile providers, with many listed in the Open Street Map Wiki. That's just one option however, and anyone can use the data from OpenStreetMap to make their own map tiles looking however they'd like. In that example we used the tiles provided by OpenStreetMap, the, 'official' and recommended default of Leaflet. Ideally I'd have it highlight the different terrain, walking paths, fences, and feature contour lines at the very least! TilelayersĮarlier we added a Tilelayer to Leaflet, which I said was basically the images that made up the map. This is fantastic and is almost exactly what I'm looking for! How the map looks isn't ideal though, the default Open Street Map tiles aren't very relevant for hillwalking, prioritising roads and the golf course in this example. I upload my GPX file somewhere, include the plugin JS in a script tag and can then use new L.GPX to create the route: ![]() It turns out there's a plugin called leaflet-gpx that makes that really easy. ![]() The next step was getting the route onto my map. A lot better! Displaying the route on the map I chose that number by cranking it down until I started to lose some of the fidelity I wanted in the route line.Īfter reducing the points we got down to 36kB. I used the "Reduce number of tracking points" option (the two diagonal arrows) to reduce the number of tracking points from 2,300 to 390 which reduced the file size a lot. I found gpx studio to be handy for editing GPX files, it allows you to import and export, has some handy tools and importantly allows you to view the route on a map. My route tracker is set up to log every 5 seconds so I guess over a 4 hour walk that is a lot of data points, but in reality I don't need nearly that many to show the rough route online. Thankfully there are various tools to help reduce that filesize. I've exported a GPX file to try, and the first thing I notice is it's over 600kB! I'm pretty particular about web performance but I think it's fair to say that is far too large if I can do anything about it. It's pretty standard and many GPS and tracking apps will be able to export to it. GPX is short for "GPS Exchange", and it's an open standard that's used by lots of different GPS devices and programs for sharing data about routes. I can export my routes from OsmAnd in the format GPX. We then add a Tilelayer, which is basically the images that make up the map, along with credit details and then add it to the map. In the JavaScript we initialise a map on the #map element and set the starting co-ordinates and zoom level. In the CSS I'm just displaying that map fullscreen. In the HTML I'm loading the script and CSS for Leaflet and have an HTML element for the rendered map. Leaflet is pretty easy to get started with, I'm going to use the CDN url: Think of it like the Google Maps JS API but totally free, lacking the horrendous tracking, and more customisable. Leaflet is a fantastic open source JavaScript library for displaying and interacting with Open Street Maps on the web. I don't really do much else with them though, and with an itch to build a new site for myself I wondered if I could do something with the route files. I track my routes for posterity so I know how long particular walks have taken for if I come back to them again some time. OsmAnd uses Open Street maps for it's data which is fantastic, and has a set of map tiles that look pretty similar to Ordnance Survey maps and I like. ![]() I have a couple paper maps and a compass just in case, but for most walks my phone does great. ![]() I do a lot of hillwalking and use OsmAnd for maps on my phone and route tracking. 23rd January 2023 Displaying Hillwalking routes on the web with GPX files and Leaflet Tags: JavaScript Hobbies
0 Comments
Leave a Reply.AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |