This one might get abit lengthy, but my goal is to avoid too many ‘cut and paste code snippets’ and just talk more about how this method could be applied in any project. Which should make it adaptable to anyone else’s work and also help show the amount of work that went into the creation of it. So don’t expect any react.js explanations hhere.
For those not hip enough to be playing a game from 2007, Old School Runescape is a re-relase of the popular MMORPG Runescape as it was in 2007, with constant updates and a growing community, I recommend it to anyone to this day.
This project is based of a few key base tools, to build the map and process the data.
- Leaflet (A js library for rendering maps)
- OSRS World Map surface layer
- OSRS Map Dungeon data from Explv’s Map
- React.js (A js framework for displaying the result)
My initial investigations were into coming up with a way to break down the world map image into tiles, which could then be displayed on leaflet. Thankfully, someone much smarter than me is way ahead, with gdal2tiles-leaflet. This is a python script that will take an image, then based off a zoom level and an original image file would generate the leaflet tiles.
./gdal2tiles-leaflet/gdal2tiles.py -l \
This command is basically just taking the downloaded osrsmap in
-z 0-9 just means do all renderings between zoom level 0-9,
-p raster says to use the raster cutting profile,
-w none is just saying generate no webview. The result of this command is a series of broken up tiles stored in
These tiles are fed into leaflet and hey preseto you have a map of Runescape!
Here is where things get more dicey, I wanted to apply the same logic as above, but couldn’t find a reliable source for a map containing all dungeons, that was until I found Explv’s Map. I do not promote botting or any other uses this map may have, but I will say the data it supplied openly was invaluable.
From this map I was able to write the following hacky bash script, that would get all the tiles generated from Exply’s Map and store them locally for futher processing, I did this at the highest level zoom level possible.
#Create a folder for each dungeon level (Basically runescape has map layers under the overall layers
Now I had my sources tiles I had to stitch together. This tool by far the longest time, but the resulting script looks like this essentially taking 5 parameters, an x y for the top left corner, an x y for the bottom right corner a label to name the map and a z index we need:
Below is a sample of what this looks like in the final file, see the full script here: known_spots.sh
./get_tiles.sh 196 203 76 84 zanaris 0
There is a script between this and the next that I won’t go into detail about but essentially it processes all the images to have a consistent black background and center the dungeon inside of it, ensure all dungeons are too the same scale in the final result.
The result of all of this means I have high resolution, blank images of every dungeon in Runescape. If you want to skip all the steps above, these are available here.
These are then all passed back through gdal2tiles-leaflet, which creates scaled tiles, these ensure that we can work with them in leaflet. See the script for regening the dungeon tiles here:
rm ./public/map/dungeons/generated/* -rf
Now we have everything we need to render a runescape map, obviously there is a lot more work on the react side to piece this all together but the base idea is here. You can always view the full source for RSMap here