Misanthropy's Map Toolbox
Cartography 101First up, in order to create a map, we're going to need a basic framework grid to use as a starting point. Thanks to the design of Malton, a map of either the entire city, or any individual suburb, is always going to be a 10x10 square. As such, standardised blank maps can be found here (for larger maps) and here (for smaller ones). Our first step is to pick one of these samples, and copy the code for it from the relevant page. Having pasted this into our edit box, for wherever your map is destined to go, we can now work on sizing. All these maps have been prepared with the same 9:8 ratio in order to seem more square (strange, I know, but trial and error has shown this to work best, due to foreshortening with angled monitors and the like. If you find this ratio to be unsatisfactory, feel free to change it - it's your map, after all). As such, in order to maintain this ratio, it is advisable to keep the width and height multiplied by the same amount. Lets start with one of the smaller map skeletons to begin with, only we'll make it a tad bigger - say, twice the size, leaving it halfway between the larger and smaller sizes. The first line of code in the skeleton is where we need to head, specifically the bolded part here: In order to double the size of our map, we'll need to change the numbers here - specifically, changing the value of the width from 225 to 450, and the value of the height from 200 to 400, which will end up leaving us with the following line of code instead: This will then leave us with a larger map, demonstrated below. Now, if we had chosen to use the bevelled corner map as a basis, the line we've been working with would have had an extra snippet in it (border-radius: 5px; -webkit-border-radius: 5px; -moz-border-radius: 5px;). We can ignore this for now, as it will be addressed later, but don't be alarmed by it if you're not familiar with it. At present, here is our map:
A Touch of Colour
Now comes the painstaking process of colouring-in the map template using the colour codes from here. Of course, this key is only an example, and the colours can be used to represent anything you wish instead. A new key is easily created using the code from Template:MisMapGuide, simply replacing the legend with new meanings for each colour. Now, to add these colours to our map, we need to go line by line and add them in one at a time. While a seemingly painstaking process, remember that the map, as standard, is already using MisMapWhite in each square, so it's simply a case of locating the template call on each line, and replacing the colour word as a appropriate. For example, our first row in this map will need to represent four open squares, a hospital, three dark buildings and two other buildings. As such, we need to replace the appropriate instance of {{MisMapWhite}} with either {{MisMapNull}}, {{MisMapBlack}} or {{MisMapRed}}. Now, in coding the map, remember that each horizontal row is represented by a ten-line block of text - the first row being the first ten-line block, and so on. Within each block of text, the first line is the left-most square, moving to the right with each line down. As such, in order to reflect this, the first block of text needs to be edited to show this. To do this, we need to change the fit instance of this: | style="{{MisMapWhite}}" align=center width=10% height=10% | To instead read like this: | style="{{MisMapWhite}}" align=center width=10% height=10% | Continuing on like this in order to finish the remainder of the map, we end up with a grid that will look like the one below. Of particular note is the four-square Stickling Mall, which, if you view the code for this page, you will see is spread over two blocks of text within the code for the map. Multi-block structures (or any other cross-square arrangement) are trickier to align than just regular squares, so pay attention if you're trying to colour one. Frequent use of the Preview function is your friend here. Now, at present, our map looks like this: Finishing TouchesNow that we have our map coloured, there's a few things we can add to give it that final polish. One thing that's going to be both commonly used and easily achieved is adding text, links or images to individual squares. For the sake of example, let's add one of each to the first few squares in the the top row. In order to add content to a square, just add the code after the final pipe in a line - so, for example, in order to mark the top-left corner with | style="{{MisMapWhite}}" align=center width=10% height=10% | {{Tongue}} In addition to this, we can add text to the squares to signify anything at all. Let's add some text to the next square along, placing the text in the same location as last time: | style="{{MisMapNull}}" align=center width=10% height=10% | '''[[Example page|TEXT]]''' In addition, we can also bevel the corners of the map (or any individual square) to give it a more rounded and softer appearance. This is achieved in the overall first line of code, by adding the text border-radius: 5px; -webkit-border-radius: 5px; -moz-border-radius: 5px; after the specifications for width and height (or, alternatively, by starting with one of the already-bevelled maps from the outset). The level of curvature can be adjusted by changing the number - higher for a more dramatically curved edge, lower for a slighter curvature. Alternatively, individual squares can be bevelled, too. To achieve this, the same code is pasted in after the template, but within the the speech marks - so as to read, for example: | style="{{MisMapRed}}; -moz-border-radius:5px;" align=center width=10% height=10% | Of course, we do not need to rely on the standard palette of colours, either. The colour gallery also features a useful set of red-bordered colours, too - perhaps useful for marking ruining buildings, or to highlight one specific grid square for emphasis - so let's add one of those to our first line, too. We'll make it the fifth square across, on the top line. Just put an R after the colour you wish to use, and it'll bring up the red border for you. For example, we'll be changing MisMapWhite to MisMapWhiteR. We'll also add a bevelled red border to the sixth square along, too. So our lines of code will read: | style="{{MisMapWhiteR}}" align=center width=10% height=10% | | style="{{MisMapWhiteR}}; -moz-border-radius:5px;" align=center width=10% height=10% | So, with all of these minor finishing touches added to the first line, this is what our map currently looks like:
The Future?Of course, in order for any set of tools to be useful, they need to provide an actual use. As such, any questions, queries, ideas or requests you may have regarding these templates and frameworks, are all welcome. In addition, I'm always keen to see how people are using these templates, so don't be afraid to get in touch to show off your own spin on things. And if you choose to add your own colours, keys, or anything else to the mix, don't forget to add them to Category:MisMap to let others benefit as well. I would also recommend reading the help section on how to construct tables, to give you further insight into the code that goes into these maps, which are essentially tables with a hundred even cells. Happy cartography! Also this... |
