Template talk:TenTenMap
Description
An easy-to-use 10x10 map that can have almost any aspect of its style modified with minimal hassle.
Usage
Rather than explain it all in advance, let's start with an example and then work through the code for it.
The Code
Here's the code that you should copy/paste if you want to get started with something basic:
{{TenTenMap
|sty=background-color: #ddd; border: 1px solid #000
|00=sty|01=sty|02=sty|03=sty|04=sty|05=sty|06=sty|07=sty|08=sty|09=sty
|10=sty|11=sty|12=sty|13=sty|14=sty|15=sty|16=sty|17=sty|18=sty|19=sty
|20=sty|21=sty|22=sty|23=sty|24=sty|25=sty|26=sty|27=sty|28=sty|29=sty
|30=sty|31=sty|32=sty|33=sty|34=sty|35=sty|36=sty|37=sty|38=sty|39=sty
|40=sty|41=sty|42=sty|43=sty|44=sty|45=sty|46=sty|47=sty|48=sty|49=sty
|50=sty|51=sty|52=sty|53=sty|54=sty|55=sty|56=sty|57=sty|58=sty|59=sty
|60=sty|61=sty|62=sty|63=sty|64=sty|65=sty|66=sty|67=sty|68=sty|69=sty
|70=sty|71=sty|72=sty|73=sty|74=sty|75=sty|76=sty|77=sty|78=sty|79=sty
|80=sty|81=sty|82=sty|83=sty|84=sty|85=sty|86=sty|87=sty|88=sty|89=sty
|90=sty|91=sty|92=sty|93=sty|94=sty|95=sty|96=sty|97=sty|98=sty|99=sty
|00t=Dakerstown
|width=201px
|height=201px
|cellspacing=1px
|backgroundcolor=#fff
}}
The Example
If that code looked scary, let's walk through a quick example that breaks it down, step by step. Here's the example:
{{TenTenMap
|a=background-color: teal;
|b=background-color: red; border: 1px dotted white;
|c=background: yellow; border: 1px solid red;
|stuff=background-color: orange; border: 1px solid lime;
|00=a|01=a|02=a|03=a|04=a|05=a|06=a|07=a|08=a|09=a
|10=a|11=a|12=a|13=a|14=a|15=a|16=a|17=a|18=a|19=a
|20=a|21=a|22=a|23=a|24=a|25=a|26=a|27=a|28=a|29=a
|30=a|31=a|32=a|33=a|34=a|35=a|36=a|37=a|38=a|39=stuff
|40=a|41=a|42=a|43=c|44=a|45=a|46=a|47=a|48=a|49=a
|50=a|51=a|52=a|53=a|54=a|55=a|56=a|57=a|58=a|59=a
|60=a|61=a|62=a|63=a|64=a|65=a|66=a|67=a|68=a|69=a
|70=a|71=a|72=a|73=a|74=a|75=a|76=a|77=a|78=a|79=a
|80=a|81=a|82=a|83=a|84=a|85=a|86=a|87=a|88=a|89=a
|90=a|91=a|92=a|93=a|94=a|95=a|96=a|97=a|98=a|99=b
|09t=This is a teal square that looks like a lot of the others.
|39t=This cell is orange with a green border.
|43t=This one is yellow with a red border.
|99t=Red with a white border, this one is.
|width=151px
|height=151px
|cellspacing=2px
|backgroundcolor=black
}}
And it produces:
Part 1: The Styles
The first big chunk of code creates the styles that we'll be using for the squares in the map. Here's what it looked like:
|a=background-color: teal; |b=background-color: red; border: 1px dotted white; |c=background: yellow; border: 1px solid red; |stuff=background-color: orange; border: 1px solid lime;
What we see here is that we created four different styles. They are named a, b, c, and stuff. In practice, you can name them pretty much anything you want, so feel free to be descriptive, rather than sticking to single letters.
As for the styles we've made, any squares using the a style will have a teal background, any using b will have a red background with a white border that's dotted, and so on. We'll apply the styles to individual squares in the next section, but the nice thing about styles is that we can reuse them over and over again, which saves us a lot of hassle.
Part 2: The Squares
The second chunk of code is the biggest one, but it's the most important, since it's where you set the styles for each square.
|00=a|01=a|02=a|03=a|04=a|05=a|06=a|07=a|08=a|09=a |10=a|11=a|12=a|13=a|14=a|15=a|16=a|17=a|18=a|19=a |20=a|21=a|22=a|23=a|24=a|25=a|26=a|27=a|28=a|29=a |30=a|31=a|32=a|33=a|34=a|35=a|36=a|37=a|38=a|39=stuff |40=a|41=a|42=a|43=c|44=a|45=a|46=a|47=a|48=a|49=a |50=a|51=a|52=a|53=a|54=a|55=a|56=a|57=a|58=a|59=a |60=a|61=a|62=a|63=a|64=a|65=a|66=a|67=a|68=a|69=a |70=a|71=a|72=a|73=a|74=a|75=a|76=a|77=a|78=a|79=a |80=a|81=a|82=a|83=a|84=a|85=a|86=a|87=a|88=a|89=a |90=a|91=a|92=a|93=a|94=a|95=a|96=a|97=a|98=a|99=b
The numbers go from 00 to 99, with 00 being the top left square and 99 being the bottom right square. In this example, we're telling most of the squares that they should use the a style when they're displayed, which is why most of them show up with a teal background.
You'll also note that we set 39 to use the stuff style, 43 to use the c style, and 99 to use the b style, which is why each of them displays the colors that we looked at in the previous section.
Part 3: The Mouseover Text
The third chunk sets the mouseover text (i.e. the text that appears when your mouse hovers over the square). It looks like this:
|09t=This is a teal square that looks like a lot of the others. |39t=This square is orange with a green border. |43t=This one is yellow with a red border. |99t=Red with a white border, this one is.
You can set them up for as many or as few of the squares as you want. In our case, we chose to set text for each of the squares that was different from style a, so if you mouse over them in the example above, you should see this text appear. The top right square also will have text show up in it.
For the rest of the squares, they'll default to using the name of the suburb in Malton that shows up at that spot on the map. This is done to make city maps of Malton easy to build, that way you're not having to sit there typing in suburb names for 100 squares. Go ahead and mouse over them and you should see all of the text showing up.
Part 4: General Settings
The last section handles the overall settings for the map itself.
|width=151px |height=151px |cellspacing=2px |backgroundcolor=black
In our example, we chose to make the map 151px x 151px, with a gap of 2px between each square in the map and a background color of black. Most of these should be pretty self-explanatory. In practice, you can make your maps as large or small as you like. And if you're proficient with CSS and don't like the default values provided, there's an additional tablestyle variable that can be used to overwrite ALL of the CSS for the overall map.
Other Examples
Here are some quick examples of what it can be used to do. Click the edit link for a section to see the relevant code.
Smiley Face
We've eliminated cellspacing and the borders on the squares in order to squish them all together so they form a solid color.
Red Cross
Note the continuous white border that runs along the edge of the cross. We also used tablestyle so that we could add a border around the outside of the map.
Grayscale Gradient
A straightforward example showing a neat pattern that can be made.
Side-by-Side Maps
These ones use the float CSS property so that they can sit side-by-side easily. Note also that the sty style from one map does not interfere with the others, since all three have slightly different sty styles.
Big Bash 3 Map
Here's a practical example of an actual use of this template. Note that it's slightly larger than the others. In practice, these maps can be made as large or as small as you want.
Colorized District Map
Another practical example. Note that the borders of the squares in this example are thicker than in the other examples.
Additional Notes
This is a rather "heavy" template, so avoid using it multiple times on a single page. While efforts have been made to keep it as light as possible, it can add up in a hurry, potentially "breaking" pages (i.e. causing them to stop including templates).
