Why?
When looking for DLCs, I noticed that SCS doesn't consistently show which areas will be unlocked. This is a problem when you're trying to decide which DLC to buy next, and whether it's worth the money.
I was able to find some outdated images on Reddit that people stitched together from a dozen of screenshots and a map on the german fan-made site eurotrucksimulator2.de, but it has a couple of shortcomings like not using the actual map from the game, not showing any cities or roads, and not being interactive.
So, I decided to make my own.
Technical stuff
Where should I begin? This project has turned into a bigger pile than expected.
The general website & UI
The website is built with HTML, CSS, and JavaScript. I'm using the semantic Pico CSS framework for the layout and some styling. No server-side logic, functions or dynamic content. The good old web.
The map
Quite a big topic. In general, the map is built with Leaflet, a JavaScript library for interactive maps. I've spent most of my time on finding the right configurations, only considering ditching Leaflet twice.
Getting the map
Tile Layers
| Level | Zoom | Map Editor Type | Original Size | Scale Method |
|---|---|---|---|---|
| A | 3 | Whole | 3788 x 3406 | 3x Upscayl Ultrasharp, ~2.2x Linear |
| B | 4, 5 | Whole | 3788 x 3406 | 3x Upscale Ultrasharp, ~2.2x Linear |
| C | 6 | Middle | 9215 x 8284 | None |
| D | 7, 8 | Closest | 34095 x 30652 | Leaflet tileSize shenanigans |
| E | 9+ | City Detail | ? | - |
Why scale the images?
This was the biggest challenge during development, taking up 80% of the time.
Leaflet doesn't seem to support different input image sizes for different tile layers. This results in zoom levels being misaligned. There is a horrible workaround by adjusting the tileSize of the tile layer, but it's not accurate and makes the tiles look very blurry.
The easiest solution I found is to upscale all input images to the size of the largest image before slicing them. I've done this for the A and B layer, as they're the ones where you're most likely to notice misalignment and want them to be accurate.
The D layer is using the horrible workaround to match the other layers, as it's not feasible to scale the other layers to its size. It would require a ~9x scale for the layer A, just for the alignment to work and not look blurry.
For the E layer, in addition to the above, during capture, the map editor stores the entire image data in RAM. And the 32 GB RAM in my computer aren't enough to store it in one go, so I'd need to capture it in parts and then stitch them manually. It's not hard or a lot of work, but you don't really need that level of detail here anyways.
The price data
Yeah, this is not my proudest creation. Instant Gaming does not offer an embed like Steam, nor do they give me an API to pull the prices. So, I've come up with a Github Action workflow that scrapes their website, puts everything into a neat JSON to then be fetched by JavaScript. Urgh.