Now for actually integrating it, I've been wanting to rebuild my personal website (again) for a while now and @astro.build has looked interesting and content collections could work nicely for storing the JSON of the routes alongside a markdown file for the content

Ended up just going with expanding the bounds by a fixed amount for now, might look at detecting aspect ratio of the map and generating the bounds based on that at some point but this works pretty well

Started working on getting bounds working tonight so that you can't pan way away from the route, bbox in turfjs worked great for getting the bounding box, but because the window I'm previewing it in has a wide aspect ratio it was fixed super zoomed in, expanding the bounds fixed this but not ideal

And it worked, route now showing on the embed, now I just need to do some tidying up and to work out the best way to store the routes as they're arrays with hundreds of points

The data exported from geojson.io isn't quite what mapbox is expecting, the main data is in the "features" key out of geojson.io but the "data" key is expected, easy to change because the rest of the data is the same

Though saying that there isn't a snap to path option, it uses the existing snap to path that OS maps has done but isn't perfect, so the route (black) doesn't exactly follow the paths on the map which is annoying but not the end of the world

Now getting the routes to show on top of the map, OS Maps has GPX export and geojson.io imports those and gives GeoJSON back, and I can clean up the route in there too which is helpful

First step, how to embed any kind of map on my website, mapbox seems the obvious choice for this, it's a bit worrying that if too many people load the page I'll end up getting charged, but it's a pretty high limit so hopefully not an issue