User:Wookipan/Map overview
Documentation for Wookipan/Map overview
Usage
This template allows you to add markers to an image. When hovering over the marker, the name of the area will appear, accompanied by a scrollable list with each location.
- In order to avoid cluttering articles, ALWAYS create the template as a subpage of the source article and then include the template. If you are new to using templates, see Wikipedia's A quick guide to templates.
- The map example used here is the map Pier. The naming convention would then be: Template:Pier/Map locations. It is important that you prefix the page as
Template:
to avoid interfering with the naming of language subpages.
- The map example used here is the map Pier. The naming convention would then be: Template:Pier/Map locations. It is important that you prefix the page as
This template's parameters are:
- (required)
title
- Title of the box. Please keep titles consistent. - (optional)
collapsed
- Collapses the box on load. Off by default. Usecollapsed = yes
to collapse the box. - (required)
image
- File name of the image to be used as the base for the map location template. The image will automatically be resized to a width of 800 pixels. - (optional)
placement
- The placement of the image. Has 2 values:left
andright
. The image will be placed to the left by default. Please only use this to invert the image placement if there is more than one map overview present. - You can add up to 20 locations on the map. Every location is controlled by three main attributes. Each location will then automatically be added to a bulleted list in numeric order.
- (required)
area1
- Name of a given area/location. Adds the respective number to the marker automatically.- (required if area is set)
x1
andy1
- X and Y coordinates of the map marker. The number is to be replaced with a number from the range (1-20).
- (required if area is set)
- (required)
- You can add up to 5 spawn points on the map. Every spawn point is controlled by three main attributes. Each spawn point will then automatically be added to a bulleted list in alphabetical order.
- (optional)
spawn1
- Name of a given spawn point. Adds the respective letter to the marker automatically.- (required if spawn is set)
xA
andyA
- X and Y coordinates of the spawn point marker. The secondary letter is to be replaced with a letter from the range (A-E), and that letter must be capitalized, as it is case-sensitive. - (required if spawn is set)
spawn-color1 = <value>
- The marker color value of the given spawn point. There are 3 marker color values:red
(default),blu
andmix
. The marker color valuemix
are only to be used to indicate shared spawn rooms, as in the case with some Payload maps.
- (required if spawn is set)
- (optional)
Getting the coordinates
To make the process as easy and simple as possible without the need of image editing software, it is highly recommended to use the built-in developer tools in various browsers, to ajust the marker placements with ease.
- Once an area or spawn point has been defined with both its X and Y parameters, the marker will be placed at the very bottom of the box, simply because it has not yet been given any coordinate values. You can ajust the coordinates while editing by using the Show preview feature. Use the guide below accustomed to your browser.
For Google Chrome/Chromium & Firefox users
- Right-click on the marker and select 'Inspect' (usually at the bottom). Once the inspector is open, select the parent element of the marker if not already selected. The element in question is:
<div class="marker" style="left: ; top: ;"></div>
- In the right side is a window divided into sections, with the first being
element.style
(orelement
in Firefox) which contains the coordinate values. In this guide, it is assumed that no values have been added, and to add them you must click on bothleft
andtop
individually and press tab. Once done, simply add a value like120px
and see if the marker changes position. It is important that you addpx
at the end of the value without a space, as it is used to define the unit type, which must be in pixels in this case. You can click on the value and use the up/down arrow keys to rapidly increase/decrease the pixel value. Once the marker is at a fitting position, copy the entire value and add it to the proper parameter.- Remember:
left
is for X coordinates, andtop
is for Y coordinates.
- Remember:
Example
{{User:Wookipan/Map overview | title = Pier - Locations | image = Pier overview.png |- | spawn1 = BLU first spawn | spawn-color1 = blu | xA = 335px | yA = 150px | spawn2 = BLU second spawn | spawn-color2 = blu | xB = 193px | yB = 230px | spawn3 = RED first spawn / BLU third spawn | spawn-color3 = mix | xC = 245px | yC = 400px | spawn4 = RED final spawn | spawn-color4 = red | xD = 608px | yD = 512px |- | area1 = Beach | x1 = 210px | y1 = 120px | area2 = Caves | x2 = 285px | y2 = 230px | area3 = Minivan parking space | x3 = 280px | y3 = 290px | area4 = Cliff | x4 = 240px | y4 = 220px | area5 = Bridge | x5 = 200px | y5 = 320px | area6 = Red carpet building | x6 = 160px | y6 = 350px | area7 = Wine cellar | x7 = 90px | y7 = 390px | area8 = Docks | x8 = 135px | y8 = 520px | area9 = Warehouse | x9 = 305px | y9 = 480px | area10 = Kitchen | x10 = 340px | y10 = 410px | area11 = Sandy beach | x11 = 425px | y11 = 460px | area12 = Barn bridge | x12 = 430px | y12 = 400px | area13 = Small barn | x13 = 468px | y13 = 425px | area14 = Building adjacent to the barn | x14 = 505px | y14 = 460px | area15 = Target range | x15 = 600px | y15 = 460px }}
will yield
Pier - Locations |
---|
Mouseover the markers to see the name of the location
1 Beach 2 Caves 3 Minivan parking space 4 Cliff 5 Bridge 6 Red carpet building 7 Wine cellar 8 Docks 9 Warehouse 10 Kitchen 11 Sandy beach 12 Barn bridge 13 Small barn 14 Building adjacent to the barn 15 Target range A BLU first spawn B BLU second spawn C RED first spawn / BLU third spawn D RED final spawn Locations
Spawns
|