Overview of road types per route

[ptoews]

Hi,

I would like to have an overview for each route what road types they are made of and what their proportion is. So for example percentages for tarmac, brick, dirt etc.
I can of course click through all routes, but I want to filter or sort as well.
Since this is probably quite complicated for the GUI, is it possible to export this kind of data e.g. into a CSV?

Thanks in advance!

[andipaetzold]

Hi,

The different surfaces are for each world are defined here: https://github.com/andipaetzold/zwiftmap/tree/main/frontend/src/constants/worldConfigs. After running npm run prebuild:fetch-segments, all route data is stored in public/strava-segments. It's then "only" about piping the data through these two methods:

zwiftmap/frontend/src/components/SurfaceListItem/index.tsx

Lines 32 to 36 in c33696d

	const surfaceStream = getSurfaceStream(latLngStream, surfaces);
	const surfaceTypesWithDistance = getSurfaceStats(
	distancStream,
	surfaceStream
	);

I can try to find time over the weekend to extract the stats, but maybe you can try it yourself to also reexport the data after future map updates.

Just curious, which project are you planning to use the data for?

[ptoews]

I had a look at it, but I have no JS experience so I would probably have to learn some basics first.

It's (hopefully) not going to be a project, I just would like to have an overview of the routes so I can easily pick a nice route with no dirt. I really dislike dirt roads :D If I could have all of this in Excel, I might be able to do some kind of sorting + filtering based on road types, elevation and time since last riding to automatically suggest some routes. Because Tempus Fugit becomes boring eventually ;)

[Strajk]

I actually wanted the same, for exactly the same reason 🤣 (I love gravel&dirt outside, but not on zwift)

Initially, I wanted to use the Elevation chart for the surface, but I've noticed that it's already using colors for KOMs, see

So for a quick prototype, I've tried putting it bellow

---

I've never worked with Recharts and I failed to make it work for this "Single stacked bar chart", so I took inspiration from GitHub

---

What ya think? Should I polish it a little bit and make PR?

(btw the codebase is uber clean, nice work 👏)

[andipaetzold]

@ptoews Here you go: route-surfaces.csv
Scotland is currently all tarmac as I didn't have time to collect the data yet. (Is there actually dirt?)

Code in #1396

[andipaetzold]

@Strajk Awesome idea! I think this would be addition to ZwiftMap. Feel free to open a PR.

recharts is already installed, so it would be good to reuse the library and keep the bundle size small.
I tried to have a similar chart for the event power-ups (e.g. https://zwiftmap.com/events/3513873). Maybe you can reuse some code from that. Or you manage to build a prettier version as I am not quite happy with the power-up charts 😬 .

Would you build the chart to render the total route surface stats or show the surfaces along the route? Option 2 might look messy for the Temple KOM with many surface changes

[ptoews]

@andipaetzold Awesome, thank you so much!

@Strajk Good to hear I'm not the only dirt hater 😆 Your visualization look great! My only suggestion would be to consider that there are many bars with many colors in small space. GitHub solves this with a legend including values. Maybe the details could be shown on the map, as @andipaetzold suggests.

[andipaetzold]

@ptoews Not sure if you know, but the route surfaces can already be shown on the map via the menu on the top right. Quite hidden feature tbh.

Most changes happen between dirt and wood because of the bridges...

[Strajk]

@andipaetzold the "event power-ups" chart is exactly what I was trying to accomplish 👍 thx for the pointer!
I'm still kinda new to Zwift and actually never joined an event yet, so much to explore! (but I'm doing PRL Full next weekend and joining an event for that, looking forward!)

total surface / along the route

yea I totally agree with the potential messiness of "along the route", Komoot solves it by 2 charts – one small for a total overview and one large for along the route.

Right now, it's showing the total route, which I believe is clearer UI. But, the position right below the altitude could make users think it's "along the route" – so I'm not quite happy with that.

---

I'll use it for a few days and think about a better solution 💡
For now, it's here https://63eb52d1e61f626a0d6d634a--zwiftmap-fork.netlify.app/watopia