Back

SS13WebMap

---

Project URL: https://affectedarc07.github.io/SS13WebMap/

The problem

I started this project back in November 2017, and it is still my most successful project to date, averaging 2000 unique users with 6000 page views each month. Space Station 13 (Shortened to SS13 from herein) is a complicated game to learn, especially with how complex the ingame map layouts can be. Faced with this challenge, I myself was also getting lost ingame and needed to find areas, and wanted to do something about it.

The solution

The solution seemed pretty obvious. Take a full size PNG of the map and make it display on a webpage, however this is easier said than done. The first issue was actually getting a map image. BYOND (The engine SS13 runs on) does not have a way to natively export full size images, so my first draft of this project involved me taking a lot of smaller screenshots and then stitching them together. This was good enough for an initial draft, but obviously needed to be automated at some point, which I ended up doing.

With an image, I then had to get it to display in a browser nicely. I could just link to a PNG of it, but that isnt that useful, or user friendly, so I stumbled upon LeafletJS. Leaflet is designed for interactive map panes on websites, but is designed for real world maps with geological data and other stuff, which a static PNG does not have. Thankfully, you can load images into it, which is what I ended up doing.

Over time the site grew in popularity as I added more servers to the site, and them promoting the system more. However, I eventually hit the point where I got tired of manually stitching images together every time I wanted to update the images on the site, so it was time to automate. I laid out the pieces of the problem, which were:

• The ability to check if a map has changed.
• Rendering the full size image of that map.
• Automatically update that image on the site.

All of this had to be fully automatic and require zero intervention from me.

Thankfully, the tools existed to do this. Update checking was fairly easy, as GitHub has a very well made API. Rendering maps wasn't too difficult, as someone had created a third party tool for rendering BYOND maps in full size, so it was a case of integrating that too, then finally I had to create a way to push these rendered images to the site, which led me to deploying a Linux VPS running NGINX as a webserver, then using RSYNC to move the images to it,

The end product is quite simple, yet very effective.

1. It runs on an hourly CRON job to ensure maps are always up to date, with an hour of being out of date at a maximum.
2. When the script starts, it does a GitHub API check to each of the server repositories, and it checks the last commit hash of the maps directory.
3. If this hash is different to the local cached copy, that server is added to the render queue.
4. Once all the hashes are checked, the render queue begins. This will update a local copy of the git repository to ensure the map is now the latest, and in sync with the remote repository.
5. Once all images have been rendered, RSYNC is invoked and all images are sent to the CDN server.