Guild Wars Wiki:Projects/Interactive Maps/Format

{| cellpadding="0" cellspacing="0" style="width: 100%; border: 2px solid #BFB1A3;"  Interactive Maps Format
 * colspan="2" style="background: #F2E6CE; border-bottom: 1px solid #BFB1A3; padding: 2px;" |
 * colspan="2" style="background: #F2E6CE; border-bottom: 1px solid #BFB1A3; padding: 2px;" |

This is a guide on how to build interactive maps for the wiki. This process uses two templates and a lot of manual guess work.
 * style="padding: 8px 8px 0px 8px; background: #FFFCF5;" |
 * style="padding: 8px 8px 0px 8px; background: #FFFCF5;" |

Instructions

 * 1) Copy formatting from a completed map or the example below.
 * 2) Create the map's page according to the Naming Format.
 * 3) Copy the formatting for however outposts, explorable areas, missions, etc. there are on the map and insert the correct names and icons.
 * 4) Move the icons and links across the map to the right places - this takes ages. Note: It is a good practice to save progress on the page periodically. It also provides a prime place to complain about how long it takes.
 * 5) If necessary, add the  addition to make the text clear against the background (explained in the syntax below).
 * 6) Score out the completed zone on the project page.

Naming Format
Generally, map pages are a subpage of the main article they represent. For instance, the map for the Ascalon region would be Ascalon/Map, and the map for Archipelagos would be Archipelagos/Map. For boss pages and their maps, however, we don't create another map, but just link back to the zone's map. For instance, Siska Scalewand's location map has a link back to the main Archipelagos map.

Code Syntax
This is the basic format we use for creating the map:

It may look complex, but it can be fairly easy to use once you are familiar with it. For each label to be made, there are two label codes that need to be placed: one for the text (top) and one for the icon (bottom). The icon label should always be placed as near to it's placement in-game as possible and the text right below it (unless it doesn't fit, in which case the text can be moved around).

Here, we'll look at the syntax for the code to give an idea of how it works. For the most part, everything not following an equals sign or in quotes is static and can be left alone.

Under the      template:
 *  "image="  defines the picture that will become the background of the map. This should almost always be a clean or blank map of the area.
 *  "width="  tag defines how large (in pixel width) the image will be. This is generally close to the background images dimensions, but should be rounded off to the nearest hundred (500, 600, 700...).
 *  "link="  is there to define what clicking the image will do, and in this case we want to leave it blank otherwise it could be clicked accidentally and will take the user to the image file.

The     tag is used for organizational purposes and usually helps divide the code into manageable sections such as Outposts, Explorable Zones, Missions, Collectors, and Portals to other zones.

  {| class="expandable"   sets what sections will be shown by default. Outposts/Towns, Missions, and Portals should be shown while Explorable Areas, Bosses, and Collectors are hidden. Everything else in this line is static and can be left alone.
 * Shown by default: collapsible
 * Hidden by default: expandable

  |' ' 'Name of section' ' '   defines the name of the label on the toggle feature for that section, and is named the same as above.

  {{Image label|    First, the text (top) label:
 * "x=" is used to express where on the image the label should begin. The label uses an X and Y coordinate system to place the labels.  The label's numerical value is basically a decimal percentage of how far into the image the label starts.  (0,0) is located in the upper-left corner, so an X value of 0.4 means that the label will start 40% across the image.  If the map requires it, it is safe to go above 1.00.
 * "y=" is just like above, but defines where the label begins vertically.
 * A simple way to look at the coordinate system is:
 * To move the label Right: increase the X value
 * Left: decrease the X value
 * Down: increase the Y value
 * Up: decrease the Y value
 * "scale=" defines what scale (in pixel width) the label is placed with. This number should always be the same as the width of the image used.
 * Inside this template is the template that alters the look of the label. (See the template page for more info.)
 *  "label = "  changes the text to display on the map.
 *  "labeltype = "  sets what type of label it is in order to apply the correct formatting.  Use: outpost, explorable, portal, pvpoutpost, boss, landmark, other
 *  "maptype = "  {{grey|(optional)}} allows for variations depending on the overall look of the map. Exclude for default look or use: light, dark, green, desert if needed.

The second label is used to place the icon for that reference. It has a much simpler syntax:
 * "x=", "y=", and "scale=" operate just like above for the text.
 * '" Map Icon Image.png. For missions, primary quests, and dungeons, use the Normal Mode incomplete'' icon.
 * " |00px| " {{grey|(optional)}} defines the size in pixels of the image. The size can vary depending on the map, use your judgement or another map as an example.
 * " link=Name of Reference " changes what the icon links to. It should be the same as the text label, so no matter which they click, they're taken to the same article.

  is needed at the end of the map code to close it off, but it doesn't need anything done to it.

 Category: labelled maps  adds the map to the list of labelled maps so they can be kept track of.

 {{Interactive Maps nav|factions}}  adds the navigation table for the interactive maps.