Template:Location map skew


Documentation icon Template documentation[view] [edit] [history] [purge]

Creates a location map as a composite image of an existing map in either equirectangular projection or skewed projection, with multiple (up to 4) markers and optional labels superimposed onto it. This template functions in the style of Template:Location map, but can auto-skew longitudes and allows 4 markers and labels (rather than just one marker). Note: For brevity, parameters "pos" & "bg" are aliases (for parameters "position" & "background").

Also see: For an unlimited list of markers/labels, see: Template:Location map+,
which specifies points as a coded template list of markers/labels.

Usage

{{Location map skew
|locname   (selected from templates named "Location_map_<locname>")
|skew    = number < 1.0 for narrow or > 1.0 for wider longitude
           (skews more towards top of map)
------------------------------------------- 1st label & marker
|label      = 1st label text
|label_size = 1st label font size, percent (such as "85")
|position   = pos = left or right or top or bottom – position of
              1st label relative to 1st mark (default: right)
|background = bg = background color for 1st label, defaults transparent
|lon_dir=W    1st longitude direction: W=west, E=east (default)
|lat_dir=S    1st latitude direction: S=south, N=north (default)
|lat_deg    = 1st latitude degrees
|lat_min    = 1st latitude minutes
|lat_sec    = 1st latitude seconds
|lon_deg    = 1st longitude degrees
|lon_min    = 1st longitude minutes
|lon_sec    = 1st longitude seconds
|lat        = 1st latitude (as decimal; negative for south latitude)
|long       = 1st longitude (as decimal; negative for west longitude)
|mark       = 1st marker image file name, a red dot by default
|marksize   = 1st marker size, default=8 (pixels wide/tall)
------------------------------------------- 2nd label & marker
|label2      = 2nd label text
|label2_size = 2nd label font size, percent (such as "85")
|position2   = pos2 = left or right or top or bottom – position of
               2nd label relative to 2nd mark (default: right)
|background2 = bg2 = background color for 2nd label, defaults transparent
|lon2_dir=W    2nd longitude direction: W=west, E=east (default)
|lat2_dir=S    2nd latitude direction: S=south, N=north (default)
|lat2_deg    = 2nd latitude degrees (or use combined lat2)
|lat2_min    = 2nd latitude minutes
|lat2_sec    = 2nd latitude seconds
|lon2_deg    = 2nd longitude degrees (or use combined long2)
|lon2_min    = 2nd longitude minutes
|lon2_sec    = 2nd longitude seconds
|lat2        = 2nd latitude (as decimal; negative for south latitude)
|long2       = 2nd longitude (as decimal; negative for west longitude)
|mark2       = 2nd marker image file name, a red dot by default
|mark2size   = 2nd marker size, default=8 (pixels wide/tall)
|skew2       = number < 1.0 for narrow or > 1.0 wider longitude.
------------------------------------------- 3rd label & marker
|label3      = 3rd label text
|label3_size = 3rd label font size, percent (such as "120")
   (... similar latitude/longitude parameters named "~3" ...)
|mark3       = 3rd marker image file name, a red dot by default
|mark3size   = 3rd marker size, default=8 (pixels wide/tall)
|pos3, bg3   = 3rd label position & background color
|skew3       = number < 1.0 for narrow or > 1.0 wider longitude.
   (...repeat until label4/mark4...)
-------------------------------------------
|border     = border color or none
|caption    = map caption; for no caption enter "caption=";
              if omitted, then the caption will be auto-generated
              as: "<marker #1 label> (<location map name>)"
|float      = left or right or center or none for map placement
|width      = map width for display size (pixels, omit "px")
|AlternativeMap = Alternative map image name (changes background map,
             border coordinates are determined based on the map name);
             can be any image (omit "Image:").
}}

Parameter locname refers to {Template:Location map locname} containing the image name and coordinates of a particular map.

BEWARE: Omit "px" from marksize or width or else the map might span entire screen. The MediaWiki-language coding of the template cannot detect "px" inside numeric parameters.

Available maps

List of live templates named Template:Location_map_skew_<locname> (without "Template:" prefix here):

Location_map_SwedenCIAx

Creating new maps

  1. Find an appropriate blank map in equirectangular projection (otherwise, coordinates will drift off, typically further north)
  2. Create a template named "Template:Location_map_locname" (copy the content of any other map template into it and enter appropriate values).
  3. Set default parameter values (using those parameter names), such as setting "mark" with image-file name and "marksize" for pixels wide/tall, or set default label font size ("label_size = 78" percent).
  4. Parameter names not used by "Template:Location map" will be ignored by it, and only used for multiple-markers (such as defaulting "label2_size = 78" percent, or "mark2size=7" pixels).

Examples

Map with label "Pag" and "Anytown" (degrees)

Pag (Croatia)
{{Location map skew
 |Croatia
 |label=Pag |marksize=8 |markhigh=8
   |pos=right    | bg=yellow
   |lat_deg=44   | lat_min=26
   |lon_deg=15   | lon_min=3
 |label2=Anytown_Anywhere
   |mark2size=45 | mark2high=30
   |mark2=
     Rouge-Admin JollyRoger.svg
   |pos2=top     | bg2=white
   |lat2_deg=46  | lat2_min=30
   |lon2_deg=17  | lon2_min=30
 |width=260
 |float=right
}}
Pag (Croatia)
Pag
Pag
Anytown_Anywhere -->
Anytown_Anywhere
Pag (Croatia)

Map with 3 aligned labels (decimal)

Pag (Croatia)
{{Location map skew | Croatia
 | label=Pag | position=right
      | lat=44.44  | long=15.05
      | marksize=8 | markhigh=8
 | label2=Anytown  | skew2=0.91
      | pos2=bottom | bg2=yellow
      | lat2=45.36  | long2=17.50
      | marksize=8 | markhigh=8
      | background2=yellow
 | label3=Anytown2  | skew3=0.83
      | pos3=left   | bg3=lightgreen
      | lat3=46.33 | long3=17.50
 | width=260 | float=right
}}
Pag (Croatia)
Pag
Pag
Anytown -->
Anytown
Anytown2 -->
Anytown2
Pag (Croatia)


Non-rectangular map of Sweden

Visby/Kiruna (Sweden)
{{Location map skew
 | SwedenCIAx
 | caption = Show Visby/Kiruna Sweden 
 | label = &nbsp;Visby&nbsp;
   | label_size = <!-- 0-900%--> 78
   | mark=Blue pog.svg | marksize=8
   | lat_deg=57 | lat_min=38
   | lon_deg=18 | lon_min=17
   | bg = <!--blue-->#9999EE | pos=right
 | label2=Stockholm
   | mark2=Blue pog.svg | mark2size=9
   | pos2=left   | label2_size=77
   | lat2_deg=59 | lat2_min=21
   | lon2_deg=18 | lon2_min=4
   | bg2=yellow        
 | label3=Kiruna  | skew3=0.67
   <!--Sweden longitudes 67% squeeze-->
   | mark3=X_sheer_red_17.gif
   | mark3size=17 | mark3high=17
   | pos3=left    | label3_size=144
   | lat3_deg=67 | lat3_min=51
   | lat3_sec=17
   | lon3_deg=20 | lon3_min=13
   | lon3_sec=22
   | bg3 = <!--gold-->#CCCC11
 | label4=Luleå  | skew4=0.67
   | pos4=bottom | label4_size=90
   | lat4_deg=65 | lat4_min=35
   | lon4_deg=22 | lon4_min=09
   | bg4=lightgreen | mark4size=17
   | mark4=Circle_sheer_red_33.gif
   | mark4=X_sheer_red_17.gif
 | label5=Arctic_Circle
   | pos5=left | label5_size=86
   | lat5=66.50 | long5=16.50
   | bg5=lightgreen | mark5size=7
   | mark5=Green pog.svg
 | label6=Anytown4
   | pos6=top | label6_size=120
   | lat6=63.00 | long6=14.50
   | bg6=darkorange | mark6size=7
   | mark6=Green pog.svg
 | label7=Anytown5
   | pos7=top | label7_size=87
   | lat7=56.00 | long7=14.50
   | bg7=lightgreen | mark7size=7
   | mark7=Green pog.svg
 | float = right
 | width = <!--show small--> 195
}}
[[image:Template:Location map SwedenCIAx|195px|195| Visby  (Template:Location map SwedenCIAx)]]
Expression error: Unrecognized punctuation character "[".

Expression error: Unrecognized punctuation character "[". Expression error: Unrecognized punctuation character "[". Expression error: Unrecognized punctuation character "[".

 <div style="position: absolute; z-index: 2;
top: Expression error: Unrecognized punctuation character "[".%; left: Expression error: Unexpected < operator.%; height: 0; width: 0; margin: 0; padding: 0;">
 Visby 
 Visby 
Expression error: Unrecognized punctuation character "[".

Expression error: Unrecognized punctuation character "[". Expression error: Unrecognized punctuation character "[". Expression error: Unrecognized punctuation character "[".

 <div style="position: absolute; z-index: 2;
top: Expression error: Unrecognized punctuation character "[".%; left: Expression error: Unrecognized punctuation character "[".%; height: 0; width: 0; margin: 0; padding: 0;">
Stockholm -->
Stockholm
Expression error: Unrecognized punctuation character "[".

Expression error: Unrecognized punctuation character "[". Expression error: Unrecognized punctuation character "[". Expression error: Unrecognized punctuation character "[".

 <div style="position: absolute; z-index: 2;
top: Expression error: Unrecognized punctuation character "[".%; left: Expression error: Unexpected < operator.%; height: 0; width: 0; margin: 0; padding: 0;">
Kiruna -->
Kiruna
Expression error: Unrecognized punctuation character "[".

Expression error: Unrecognized punctuation character "[". Expression error: Unrecognized punctuation character "[". Expression error: Unrecognized punctuation character "[".

 <div style="position: absolute; z-index: 2;
top: Expression error: Unrecognized punctuation character "[".%; left: Expression error: Unexpected < operator.%; height: 0; width: 0; margin: 0; padding: 0;">
Luleå -->
Luleå
Show Visby/Kiruna Sweden

Map with some labels outside map

Pag (Croatia)
{{Location map skew | Croatia
 | label=Pag | position=right
      | lat=44.44  | long=15.05
      | marksize=8 | markhigh=8
 | label2=Anytown
      | pos2=bottom | bg2=yellow
      | lat2=47.40  | long2=12.80
      | marksize=8 | markhigh=8
      | background2=yellow
 | label3=Anytown2
      | pos3=top   | bg3=lightgreen
      | lat3=41.98 | long3=18.43
 | width=260 | float=right
}}
Pag (Croatia)
Pag
Pag
Latitude#2 (47.40) > map max(46.8).

Longitude#2(12.80) < map min(13.1).

Anytown -->
Anytown
Latitude#3 (41.98) < map min(42.1).


Anytown2 -->
Anytown2
Pag (Croatia)

Unskewed Sweden: Location_map_many

Visby/Kiruna (Sweden)
{{Location map many
 | SwedenCIAx
 | label = Visby
 | label_size = 78
 | caption = Show Visby/Kiruna Sweden 
 | label = Visby
   | lat_deg=57 | lat_min=38
   | lon_deg=18 | lon_min=17
   | bg = #9999EE
 | label2=Anytown
   | pos2=right| label2_size=102
   | lat2=59.00 | long2=17.50
   | bg2=yellow
 | label3=Kiruna  | skew3=1.16
   | pos3=top | label3_size=85
   | lat3_deg=67 | lat3_min=51
   | lat3_sec=17
   | lon3_deg=20 | lon3_min=13
   | lon3_sec=22
   | bg3 = <!--gold-->#CCCC11
   | mark3size=6 | mark3high=7
 | label4=Anytown2
   | pos4=left  | label4_size=90
   | lat4=63.00 | long4=17.50
   | bg4=lightgreen
   | mark4size=33 | mark4high=33
   | mark4=
       Circle_sheer_red_33.gif
 | float = right
 | width = 195
}}

Unskewed label of Sweden

Kiruna (Sweden)
{{Location map
 | SwedenCIAx
 | label_size = <!-- 0-900%--> 78
 | caption = Show Kiruna in Sweden 
 | label = Kiruna
   | lat_deg=67 | lat_min=51
   | lat_sec=17
   | lon_deg=20 | lon_min=13
   | lon_sec=22
   | background = <!--blue-->#99BBEE
 | float = right
 | width = <!--show small--> 195
}}

Map with 9 markers (decimal)

Pag (Croatia)
{{Location map skew | Croatia
 | label=Pag | position=right
      | lat=44.44 | long=15.05
 | label2=Anytown
      | pos2=bottom| label2_size=110
      | lat2=45.86 | long2=17.50
      | background2=yellow
 | label3=Anytown2
      | pos3=top  | label3_size=210
      | lat3=46.23 | long3=18.43
      | background3=green
 | mark4=Diamond_sheer_black_20.gif
      | mark4size=19 | mark4high=17
      | label4=44.0 (latitude)
      | lat4=44.00 | long4=13.5
 | mark5=Diamond_sheer_black_20.gif
      | mark5size=20 | mark5high=20
      | label5=44.5
      | lat5=44.50 | long5=13.5
 | mark6=Diamond_sheer_black_20.gif
      | mark6size=20 | mark6high=20
      | label6=45.0
      | lat6=45.00 | long6=13.5
 | mark7=Diamond_sheer_black_20.gif
      | mark7size=20 | mark7high=20
      | label7=45.5
      | lat7=45.50 | long7=13.5
 | mark8=Diamond_sheer_black_20.gif
      | mark8size=20 | mark8high=20
      | label8=46.0
      | lat8=46.00 | long8=13.5
 | mark9=Diamond_sheer_black_20.gif
      | mark9size=20 | mark9high=20
      | label9=46.5
      | lat9=46.50 | long9=13.5
 | width=260 | float=right
}}
Pag (Croatia)
Pag
Pag
Anytown -->
Anytown
Anytown2 -->
Anytown2
44.0 (latitude) -->
44.0 (latitude)
Pag (Croatia)

Map with a custom label and text background

Imotski
{{Location map skew | Croatia
 |label=Imotski
 |lat=43.44
 |long=17.21
 |position=right
 |width=280
 |float=right
 |background=#FFFFDD
 |caption=Imotski in Croatia
 }}
Imotsky (Croatia)
Imotsky
Imotsky
Imotski in Croatia

Map with no caption

Brčko (Bosnia and Herzegovina)
{{Location map skew
 |Bosnia
 |label=Brčko
 |position=left
 |width=150
 |lat=44.87
 |long=18.81
 |float=right
 |caption=
 }}

Western Hemisphere

Lockerbie (Scotland)
{{Location map skew
 |Scotland
 |label=Lockerbie
 | lat_dir=N
 | lat_deg=55 | lat_min=07 | lat_sec=16
 | lon_dir=W
 | lon_deg=03 | lon_min=21 | lon_sec=19
 |position=right
 |width=180
 |float=right
 |caption=Lockerbie in Scotland
}}
Lockerbie (Scotland )
Longitude#1(3) > map max(-0.4).
Lockerbie
Lockerbie
Lockerbie in Scotland

Country that crosses 180° meridian

Uelen (Russia)
{{Location map skew
 |Russia
 |label=Uelen
 |lat_deg=66|lat_min=09
 |lon_deg=169|lon_min=48|lon_dir=W
 |position=left
 |width=500
 |float=right
 |background=#FFFFDD
 }}
Uelen (Russia)
Expression error: Missing operand for <.

Expression error: Missing operand for >. Expression error: Missing operand for <. Expression error: Missing operand for >.

 <div style="position: absolute; z-index: 2;
top: Expression error: Missing operand for /.%; left: Expression error: Missing operand for *.%; height: 0; width: 0; margin: 0; padding: 0;">
Uelen
Uelen
Uelen (Russia)

Implementation notes

The map and markers are implemented using the typical wiki parser-functions ("{{#XXX ... }}"), described at: WikiMedia Help:ParserFunctions.

Explanation of skewing

The skewing of map coordinates, when placing markers/labels on the map image, is performed by a linear interpolation of the longitude relative to the height of the latitude (higher latitudes skew longitude more). A skew factor < 1.0 squeezes longitudes together near top, while a skew factor > 1.0 spreads longitudes apart near the top.

The formula is roughly:

To skew by latitude ratio (skewing longitude more towards top):
  • skew factor = ( (1 - skew) * lat_ratio + skew ), where:
  • lat_ratio = (maxlat - latitude) / (maxlat-minlat).

Use of HTML divisions

The map with markers/labels is implemented as nested HTML divisions. The map-image is in an HTML division, containing each point as a percent-locator division containing a marker-image sub-division plus a label sub-division. Each point is calculated (for a percent-locator division) with X or Y coordinate "XX.X%" or "YY.Y%" as follows:

  • The div-tag is "<div style="position: absolute; z-index: 2; top: XX.X%; left: YY.Y%; ...>"
  • For placing latitude, the calculation is:
  • XX.X% = 100 * (top - (lat_deg + latmin/60 +latsec/3600) ) / (top - bottom)
  • If lat_deg is empty, the combined decimal latitude is used from "lat".
  • If lat_dir is "S" (south), the latitude is multiplied by -1.
  • (Note latitude YY.Y% is reversed, with larger YY.Y% at bottom.)
  • For placing longitude, the calculation is:
  • YY.Y% = 100 * ( (lon_deg + lonmin/60 +lonsec/3600) - left ) / (right - left)
  • If lon_deg is empty, the combined decimal longitude is used as "long".
  • If lon_dir is "W" (west), the longitude is multiplied by -1.
  • The div-tag is ended as "height: 0; width: 0; margin: 0; padding: 0;">".
  • Within that division the marker/label sub-divisions are coded as:
  • <div style="position: relative text-align: center; ...">.
  • For label position, the options are shifted as:
  • when position=left, adds "left: -6.5em; text-align: right;"
  • when position=right, adds "left: 0.5em; text-align: left;"
  • when position=top, adds "top:-2.65em; left:-3em; text-align: center;"
  • when position=bottom, adds "top:-0.15em; left: -3em; text-align: center;" to div-tag.

Accuracy of numeric calculations depends on the particular wiki server handling the webpage.

Related pages