I was sidetracked.
This was supposed to be a website about learning maps... think about Duolingo, but for maps. Turns out, it was proven almost impossible to render the base map into one without labels, and the road segments proved too hard to sort and manage.
Then the project turned into a little quiz site where, given coordinate and zoom-level of a city, district etc., you can figure out where the map is based in. Labels are chosen to be symbolic and abstract (e.g. only motorways and major trunk roads are included), but much more chosen detailed levels are provided as a hint.
I used OpenLayers, an open-source platform that provides codes to render multiple layers of map and vector data. OSM data was queried via Overpass API, a powerful query language on the large OSM databases. Plenty boiler-plate codes were used, but that's the way it works.
Plus, I will think about making a project related to maps twice before I get started. But I am neither depressed about this project, nor doesn't mean I will abandon this.
To see how terrible my website was made, look no further than below.