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
To be filled in later...
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).
