View source for User:Wookipan/Map overview

<includeonly>{| style="width:75%;" class="collapsible {{#if:{{{collapsed|}}}|collapsed}} navbox map-overview"
{{!}}-
! style="background:#F3A957;font-size:1.2em;"{{!}}{{{title}}}
|-
|
<div class="{{#switch:{{{placement}}}|left=floatleft|right=floatright|floatleft}}">
<div class="container"><!--
-->[[Image:{{{image}}}|800px|link=]]
{{#if:{{{area1|}}}|<div class="marker" style="left: {{{x1}}}; top: {{{y1}}};"><div>1</div><div class="label">{{{area1}}}</div></div>|}}{{#if:{{{area2|}}}|<div class="marker" style="left: {{{x2}}}; top: {{{y2}}};"><div>2</div><div class="label">{{{area2}}}</div></div>|}}{{#if:{{{area3|}}}|<div class="marker" style="left: {{{x3}}}; top: {{{y3}}};"><div>3</div><div class="label">{{{area3}}}</div></div>|}}{{#if:{{{area4|}}}|<div class="marker" style="left: {{{x4}}}; top: {{{y4}}};"><div>4</div><div class="label">{{{area4}}}</div></div>|}}{{#if:{{{area5|}}}|<div class="marker" style="left: {{{x5}}}; top: {{{y5}}};"><div>5</div><div class="label">{{{area5}}}</div></div>|}}{{#if:{{{area6|}}}|<div class="marker" style="left: {{{x6}}}; top: {{{y6}}};"><div>6</div><div class="label">{{{area6}}}</div></div>|}}{{#if:{{{area7|}}}|<div class="marker" style="left: {{{x7}}}; top: {{{y7}}};"><div>7</div><div class="label">{{{area7}}}</div></div>|}}{{#if:{{{area8|}}}|<div class="marker" style="left: {{{x8}}}; top: {{{y8}}};"><div>8</div><div class="label">{{{area8}}}</div></div>|}}{{#if:{{{area9|}}}|<div class="marker" style="left: {{{x9}}}; top: {{{y9}}};"><div>9</div><div class="label">{{{area9}}}</div></div>|}}{{#if:{{{area10|}}}|<div class="marker" style="left: {{{x10}}}; top: {{{y10}}};"><div>10</div><div class="label">{{{area10}}}</div></div>|}}{{#if:{{{area11|}}}|<div class="marker" style="left: {{{x11}}}; top: {{{y11}}};"><div>11</div><div class="label">{{{area11}}}</div></div>|}}{{#if:{{{area12|}}}|<div class="marker" style="left: {{{x12}}}; top: {{{y12}}};"><div>12</div><div class="label">{{{area12}}}</div></div>|}}{{#if:{{{area13|}}}|<div class="marker" style="left: {{{x13}}}; top: {{{y13}}};"><div>13</div><div class="label">{{{area13}}}</div></div>|}}{{#if:{{{area14|}}}|<div class="marker" style="left: {{{x14}}}; top: {{{y14}}};"><div>14</div><div class="label">{{{area14}}}</div></div>|}}{{#if:{{{area15|}}}|<div class="marker" style="left: {{{x15}}}; top: {{{y15}}};"><div>15</div><div class="label">{{{area15}}}</div></div>|}}{{#if:{{{area16|}}}|<div class="marker" style="left: {{{x16}}}; top: {{{y16}}};"><div>16</div><div class="label">{{{area16}}}</div></div>|}}{{#if:{{{area17|}}}|<div class="marker" style="left: {{{x17}}}; top: {{{y17}}};"><div>17</div><div class="label">{{{area17}}}</div></div>|}}{{#if:{{{area18|}}}|<div class="marker" style="left: {{{x18}}}; top: {{{y18}}};"><div>18</div><div class="label">{{{area18}}}</div></div>|}}{{#if:{{{area19|}}}|<div class="marker" style="left: {{{x19}}}; top: {{{y19}}};"><div>19</div><div class="label">{{{area19}}}</div></div>|}}{{#if:{{{area20|}}}|<div class="marker" style="left: {{{x20}}}; top: {{{y20}}};"><div>20</div><div class="label">{{{area20}}}</div></div>|}}

{{#if:{{{spawn1|}}}|<div class="marker {{#switch:{{{spawn-color1}}}|red=spawn-color red|blu=spawn-color blu|mix=spawn-color mix|spawn-color red}}" style="left: {{{xA}}}; top: {{{yA}}};"><div>A</div><div class="label">{{{spawn1}}}</div></div>|}}
{{#if:{{{spawn2|}}}|<div class="marker {{#switch:{{{spawn-color2}}}|red=spawn-color red|blu=spawn-color blu|mix=spawn-color mix|spawn-color red}}" style="left: {{{xB}}}; top: {{{yB}}};"><div>B</div><div class="label">{{{spawn2}}}
</div></div>|}}
{{#if:{{{spawn3|}}}|<div class="marker {{#switch:{{{spawn-color3}}}|red=spawn-color red|blu=spawn-color blu|mix=spawn-color mix|spawn-color red}}" style="left: {{{xC}}}; top: {{{yC}}};"><div>C</div><div class="label">{{{spawn3}}}</div></div>|}}
{{#if:{{{spawn4|}}}|<div class="marker {{#switch:{{{spawn-color4}}}|red=spawn-color red|blu=spawn-color blu|mix=spawn-color mix|spawn-color red}}" style="left: {{{xD}}}; top: {{{yD}}};"><div>D</div><div class="label">{{{spawn4}}}</div></div>|}}
{{#if:{{{spawn5|}}}|<div class="marker {{#switch:{{{spawn-color5}}}|red=spawn-color red|blu=spawn-color blu|mix=spawn-color mix|spawn-color red}}" style="left: {{{xE}}}; top: {{{yE}}};"><div>E</div><div class="label">{{{spawn5}}}</div></div>|}}
</div>
</div>

<div class="wrapper">
{{#if:{{{area1|}}}|
<div><!--
--><div style="margin-bottom:.5em;">[[File:Map marker locations icon.png|25px|link=]]<span style="padding:0 10px;font-weight:600;"><!--
-->{{lang
 | en = Locations
 | da = Steder
}} 
</span></div>
<div class="scroll-list">
*{{#if:{{{area1|}}}|{{{area1}}}|}}
*{{#if:{{{area2|}}}|{{{area2}}}|}}
*{{#if:{{{area3|}}}|{{{area3}}}|}}
*{{#if:{{{area4|}}}|{{{area4}}}|}}
*{{#if:{{{area5|}}}|{{{area5}}}|}}
*{{#if:{{{area6|}}}|{{{area6}}}|}}
*{{#if:{{{area7|}}}|{{{area7}}}|}}
*{{#if:{{{area8|}}}|{{{area8}}}|}}
*{{#if:{{{area9|}}}|{{{area9}}}|}}
*{{#if:{{{area10|}}}|{{{area10}}}|}}
*{{#if:{{{area11|}}}|{{{area11}}}|}}
*{{#if:{{{area12|}}}|{{{area12}}}|}}
*{{#if:{{{area13|}}}|{{{area13}}}|}}
*{{#if:{{{area14|}}}|{{{area14}}}|}}
*{{#if:{{{area15|}}}|{{{area15}}}|}}
*{{#if:{{{area16|}}}|{{{area16}}}|}}
*{{#if:{{{area17|}}}|{{{area17}}}|}}
*{{#if:{{{area18|}}}|{{{area18}}}|}}
*{{#if:{{{area19|}}}|{{{area19}}}|}}
*{{#if:{{{area20|}}}|{{{area20}}}|}}
</div>
</div>
|}}

{{#if:{{{spawn1|}}}|
<div style="margin-top:20px;"><!--
--><div style="margin-bottom:.5em;">[[File:Map marker spawn icon.png|25px|link=]]<span style="padding:0 10px;font-weight:600;"><!--
-->{{lang
 | en = Spawns
 | da = Baser
}}
</span></div>
<div class="list">
*{{#if:{{{spawn1|}}}|{{{spawn1}}}|}}
*{{#if:{{{spawn2|}}}|{{{spawn2}}}|}}
*{{#if:{{{spawn3|}}}|{{{spawn3}}}|}}
*{{#if:{{{spawn4|}}}|{{{spawn4}}}|}}
*{{#if:{{{spawn5|}}}|{{{spawn5}}}|}}
</div>
</div>
|}}
</div>
</div>
|}
</div>

</includeonly><noinclude>
== Usage ==
This template allows you to add markers to an image. When hovering over the marker, the name of the area will appear.

This template's parameters are:
* <code>title</code> - Title of the box.
* <code>collapsed</code> - Collapses the box on load. Off by default. Use <code>collapsed = yes</code> to collapse the box.
* <code>image</code> - Filename of the image to be used as the base for the map location template. The image will be automatically resized to be 800 pixels wide.
* <code>placement</code> - The placement of the image. Has 2 values: <code>left</code> and <code>right</code>. The image will be placed to the left by default.
* You can add up to 20 locations on the map. Every location is controlled by three main attributes. The locations will then automatically be added to a bulleted list in numeric order.
** <code>area''1''</code> - Name of a given area/location. Adds the respective number to the marker.
*** <code>x''1''</code> and <code>y''1''</code> - X and Y coordinates of the [[:File:Map marker circle.png|map marker]]. The number is to be replaced with a number from the range (1-20).
* You can add up to 5 spawn points on the map. Every spawn point is controlled by three main attributes. The spawn points will then automatically be added to a bulleted list in alphabetical order.
** <code>spawn''1''</code> - Name of a given spawn point. Adds the respective letter to the marker.
*** <code>x''A''</code> and <code>y''A''</code> - X and Y coordinates of the [[:File:Map marker red.png|spawn point marker]]. The secondary letter is to be replaced with a letter from the range (A-E), and that letter ''must'' be capitalized.
***<code>spawn-color''1'' = <value></code> - The marker color value of the given spawn point. There are 3 marker color values: <code>red</code> (default), <code>blu</code>, <code>mix</code>. The marker color value <code>mix</code> are only to be used to indicate shared spawn rooms, as in the case with [[Payload]] maps.

* The best way to get the coordinates is to copy a 800px wide version of the image you will be using, then copying the map marker file, adjusting them in the appropiate places, then getting the coordinates of the '''upper left corner''' of the marker.

=== Example ===
<pre>
{{Map overview
 | title = Pier - overview indicators
 | 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
}}
</pre>
will yield

{{User:Wookipan/Map overview
 | title = Pier - location indicators
 | 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
}}