View source for Template:Location mark/doc

{{Documentation subpage}}
<!-- Categories go at the bottom of this page. -->

This template places a mark on an image, with an optional label. It is a simplified version of {{tl|Location mark+}}.

Other templates are more capable of superimposing one image on another. This template centers a mark over a location on any image using coordinate values that are relative. The size of the composite image can changed without changing the relative positions of the markers. The composite image can be displayed as a simple image, a bordered image or a thumbnail image.

If the geographic coordinates of the location are known and a [[Template:Location map+#Available map templates|location map template]] exists then one of the templates in the Location map family should be used. The [[#See also|See also]] section below lists alternative templates.

== Usage ==
{{Location mark
| image = Usa edcp location map.svg
| width = 300
| float = right
| caption = A location in the U.S.
| alt = Map of the U.S.
| type = thumb
| label = Four Corners
| label_alt = alt Four Corners
| label_link = Four Corners
| position = bottom
| background = #fefee9
| mark = Green pog.svg
| mark_width = 7
| x = 275
| y = 326
}}
{|
|- style="vertical-align:top;"
|<pre style="width:15em; margin-right:2em;">
{{Location mark
| image = 
| overlay = 
| width = 
| caption = 
| alt = 
| float = 
| type = 
| label = 
| position = 
| font_size = 
| background = 
| mark = 
| mark_width = 
| mark_alt = 
| mark_link = 
| x = 
| y = 
}}</pre>
|}

== Parameters ==

{| class="wikitable" style="font-size:90%; width:100%;"
|+ Parameters for Location map+
! Parameter
! Description
|-
|<code>image</code>
| Required. The name of an image file.
|-
|<code>overlay</code>
| The name of an image file to superimpose on the image. It should be the same size and have a transparent background.
|-
|<code>width</code>
| Determines the width of the image in [[pixel]]s. The default is 220px. For example, <code>width=240</code> and not <code>width=240px</code>.
|-
| <code>caption</code>
| The caption text displays below the image if the thumbnail option is used. See the [[#Examples|examples]].
|-
|<code>alt</code>
| Alt text for the map. See [[WP:ALT]]. If no <code>alt</code> text is provided the <code>caption</code> text will be used.
|-
| <code>type</code>
| Determines the display format. Valid values are <code>thumb</code>, and <code>border</code>. The <code>thumb</code> option generates output similar to <code><nowiki>[[File:|name|thumb]]</nowiki></code>, while the <code>border</code> option generates output similar to <code><nowiki>[[File:|name|border]]</nowiki></code>. If no valid value is assigned, the output will not be framed or bordered. See [[#The type parameter|below]] and [[wp:Extended image syntax#Type|this page]].
|-
|<code>float</code>
| Determines the position of the image on the page. Valid values are <code>left</code>, <code>right</code>, <code>center</code> and <code>none</code>. The default is <code>right</code>.
|-
|<code>label</code>
| Optional. The text of the label to display next to the mark. The text can be [[Wiki markup|wiki linked]].
|-
|<code>position</code>
| The position of the label relative to the mark. Valid values are <code>left</code>, <code>right</code>, <code>top</code> and <code>bottom</code>. The default is <code>right</code>. ''If none is assigned then the template will place the label either to the right or the left depending on the location of the mark.''
|-
|<code>font_size</code>
|  The font size to use for the label as a percentage. The default is 90%. For example, <code>font_size=80</code>.
|-
|<code>background</code>
| The background color to use for the label text. See [[Web colors]]. By default the background color is inherited from the image behind the label.
|-
|<code>mark</code>
| The name of an image to display as the mark. The default is [[:File:Red pog.svg|Red pog.svg]]. Go [[commons:Location markers|here]] and [[commons:Category:map icons|here]] for some examples.
|-
|<code>mark_width</code>
| The width of the mark in [[pixel]]s. The default is 8px. For example, <code>mark_width=7</code> and not <code>mark_width=7px</code>. Labels do not work well with large mark images. This template is not intended to generate overlays. See {{tl|Superimpose}}.
|-
|<code>mark_link</code>
| Specifies a [[Wiki markup|wiki link]] which will be followed if the reader clicks on the mark. The name of the linked article will be displayed as a tool tip when the mouse pointer hovers over the mark.
|-
|<code>mark_alt</code>
| Alt text for the mark image. See [[WP:ALT]]. If no <code>mark_alt</code> text is provided the <code>label</code> text will be used.
|-
|<code>x</code><br/><code>y</code> || Specifies the position of the marker on the image. The coordinates of the marker in pixels based on a map with a width of 1000 pixels. The template will scale these values for proper display. See [[#Place a mark on an image using the x and y parameters|below]].
|-
|<code>x%</code><br/><code>y%</code> || Specifies the position of the marker on the image. <code>x%</code> specifies the percentage of the distance across the image from the left edge and <code>y%</code> specifies the percentage of the distance down from the top edge.  See [[#Place a mark on an image using the x% and y% parameters|below]].
|}

== Mark placement parameters ==
There are two ways to generate a marker on a map.

=== Place a mark on an image using the <code>x</code> and <code>y</code> parameters ===
The values for the <code>x</code> and <code>y</code> parameters are the pixel coordinates of the location mark when the image is scaled to a width of 1000 pixels. 

:<code>x</code> is the pixel offset for the mark from the left edge of an image 1000px wide.
:<code>y</code> is the pixel offset for the mark from the top edge of an image 1000px wide.

There are at least two ways of obtaining these values:

#Download the image from the image's [[Help:file page|file page]] to your computer. Open the image in a [[graphics software|graphics editor]], such as [[GIMP]] or [[XnView]]. Scale (resize) the image to a width of 1000px and then note the x, y coordinates when the [[mouse cursor|cursor]] points to the desired location. Use these values directly.
#Download the image from the image's [[Help:file page|file page]] to your computer. Open the image in any [[image viewer]] that displays the coordinates of the cursor position, such as [[Paint (software)|Paint]] from Microsoft. Note the x, y coordinates when the [[mouse cursor|cursor]] points to the location. Then:

::{{math|size=14pt|{{sfrac|1000{{·}}x'|w}} {{=}} {{math|size=13pt|x}}}}&nbsp; and&nbsp; {{math|size=14pt|{{sfrac|1000{{·}}y'|w}} {{=}} {{math|size=13pt|y}}}}

::where {{math|size=13pt|x'}} and {{math|size=13pt|y'}} are the cursor coordinates, {{math|size=13pt|w}} is the width of the image displayed on your computer and {{math|size=13pt|x}} and {{math|size=13pt|y}} are the values to assign to the <code>x</code> and <code>y</code> parameters.

=== Place a mark on an image using the <code>x%</code> and <code>y%</code> parameters ===
:x% specifies the percent of the distance across the image from the left edge.
:y% specifies the percent of the distance down from the top edge.

== The '''<code>type</code>''' parameter ==
<div class="center">
{| style="float: none;"
! <code>type=</code>
! <code>type=border</code>
! <code>type=thumb</code>
|- style="vertical-align:top;padding-left: 10em;" 
| width = "280px" | {{Location mark
| width = 200
| image = Scottish infobox template map.png
| caption = Rattray Head in Scotland
| float = none
| type = 
| label = '''Rattray Head'''
| position = left
| mark_width = 7
| x = 850 | y = 714
}}
| width = "280px" | {{Location mark
| width = 200
| image = Scottish infobox template map.png
| caption = Rattray Head in Scotland
| float = none
| type = border
| marks = 
| label = '''Rattray Head'''
| position = left
| mark_width = 7
| x = 850 | y = 714
}}
| width = "280px" | {{Location mark
| width = 200
| image = Scottish infobox template map.png
| caption = Rattray Head in Scotland
| float = none 
| type = thumb
| label = '''Rattray Head'''
| position = left
| mark_width = 7
| x = 850 | y = 714
}}
|}
</div>

== Examples ==
The first two examples could be duplicated using {{tl|Location map+}}.

=== Using mostly default values ===
{{Location mark
| width = 
| image = Scotland relief location map.jpg
| caption = Scotland
| float = 
| type = 
| label = '''Cape Wrath'''
| position = 
| x = 452 | y = 480
}}
<pre style="width: 50em;">
{{Location mark
| width = 
| image = Scotland relief location map.jpg
| caption = Scotland
| float = 
| type = 
| label = '''Cape Wrath'''
| position = 
| x = 452 | y = 480
}}
</pre>
{{clear}}

=== Using background color for labels ===
{{Location mark
| image = North Rhine-Westphalia location map 05.svg
| width = 300
| caption = Location of Düsseldorf in [[North Rhine-Westphalia]]
| type = thumb
| label = Düsseldorf
| position = left
| background = #a7cb9d
| x = 267 | y = 574
}}
<pre style="width: 50em;">
{{Location mark
| image = North Rhine-Westphalia location map 05.svg
| width = 300
| caption = Location of Düsseldorf in [[North Rhine-Westphalia]]
| type = thumb
| label = Düsseldorf
| position = left
| background = #a7cb9d
| x = 267 | y = 574
}}
</pre>
{{clear}}

=== Using an invisible mark ===
{{Location mark
| image = Take five.jpg
| caption = A cute chick
| type = thumb
| label = Rachel
| position = top
| background = #ae9074
| mark = Blanksvg.svg
| x = 433 | y = 295
}}
<pre style="width: 50em;">
{{Location mark
| image = Take five.jpg
| caption = A cute chick
| type = thumb
| label = Rachel
| position = top
| background = #ae9074
| mark = Blanksvg.svg
| x = 433 | y = 295
}}
</pre>
{{clear}}

== See also ==
* {{tl|Location mark+}}
* {{tl|Location map}}
* {{tl|Location map+}}
* {{tl|Superimpose}}
* {{tl|Superimpose2}}
* {{tl|Overlay}}
* {{tl|Annotated image}}
* {{tl|Image label}}

<includeonly>{{Sandbox other||
<!-- Categories below this line, please; interwikis at Wikidata -->
[[Category:Graphics templates]]
}}</includeonly>