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.

Part 5: Power User Settings

If you're proficient with CSS and want to customize things more heavily, the tablestyle variable can be used to overwrite ALL of the CSS for the overall map, effectively replacing the height, width, and background variables while also allowing you to do anything you'd like, like add borders around it. It's extremely versatile, but only should be used by those who understand what they're doing.

Even more powerful is the prefix variable. Effectively, when you give the prefix variable a value, it will insert that value before the names of all the variables affecting styling, allowing you to create multiple styles (e.g. if your prefix was called "dark" and you had used the width variable, you'd need to create a darkwidth variable to set the width when your prefix is set). This sort of thing could be used to create two different versions of a map, one that's minimap-sized and another that's full page, while being able to use the same code for both. Or perhaps you want to use the same map on different pages, but have it show up with a green color scheme on one and a gray color scheme on another. An example of how this works is provided below.

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.

Using Prefixes to Create Multiple Maps

As a power user feature for people who may want to reuse the same map while displaying it differently in different places, a single TenTenMap can look vastly different by using a prefix variable. The following two examples are the exact same code, except that we told one to use the "faded" prefix that we had set up for the template:

and

Click edit and also check the code at Template:TenTenMap/WrapperExample for the details of how this functionality works. As for where you might use something like this, Big Bash 4 was able to use the same map for the minimap displayed on their main wiki page, as well as the large one displayed on the Location page, simply by providing different prefixes to each.

Please note that you have to create duplicate variables for anything stylistic, even if its settings are the exact same between prefixes (e.g. even though the width is the same for both maps above, you need to set one with the prefix's name, otherwise the width will go unset when the prefix is used). Since this is a power user feature, no additional support will be provided. Please study the provided example and the code here to understand how to use this functionality.

Additional Notes

This is a somewhat "heavy" template, so, when possible, avoid using it multiple times on a single page (like what we've done here). While every effort has been made to trim it reasonably, excessive usage of it on a single page may result in the page "breaking", thus preventing it from including any additional templates.