View source for Template:OSM Location map/cssmapping

{{#ifexpr:{{{x1|0}}}<{{{width|400}}} and {{{y1|0}}}<{{{height|250}}}| {{#switch:{{Str left |{{{label-line|0}}}| 1}}
| 1|3|4 = {{OSM Location map/cssline| x1={{{x1|30}}}| y1={{{y1|40}}}
  | x2={{#expr:{{{x1|30}}}+{{{ldx|10}}} }}| y2={{#expr:{{{y1|40}}}+{{{ldy|50}}} }}
  |outline-width=2| outline-style=solid| shape-outline={{#ifeq:{{Str left |{{{label-line|}}}| 1}} |3 |{{{label-color|blue}}}|{{{shape-color|blue}}} }} }}
|2= {{#ifeq:{{{shape|}}}|panel|{{OSM Location map/cssline
  | x1={{#expr:{{{x1|30}}}+{{{mark-width|30}}}/2}}| y1={{#expr:{{{y1|40}}}+{{{mark-height|30}}}/2}}
  | x2={{{x2|50}}}| y2={{{y2|60}}}
  | outline-width={{#invoke:String2 |split |txt={{{label-line|}}}|sep=,|idx=2}}
  | outline-style={{#invoke:String2 |split |txt={{{label-line|}}}|sep=,|idx=3}}
  | shape-outline={{{shape-outline|darkgrey}}} | double={{#invoke:String2 |split |txt={{{label-line|}}}|sep=,|idx=4}} }}
 |{{OSM Location map/cssline| x1={{{x1|30}}}| y1={{{y1|40}}} 
  | x2={{{x2|50}}}| y2={{{y2|60}}}
  | outline-width={{#invoke:String2 |split |txt={{{label-line|}}}|sep=,|idx=2}}
  | outline-style={{#invoke:String2 |split |txt={{{label-line|}}}|sep=,|idx=3}}
  | shape-outline={{{shape-outline|darkgrey}}} | double={{#invoke:String2 |split |txt={{{label-line|}}}|sep=,|idx=4}} }} }} }}
{{#ifeq:{{Str left |{{{label-line|0}}}| 1}}|3| <!-- draw photo-panel -->
  <div style="display:inline-block; position: absolute;
  top: {{#expr:{{{y1|40}}}+{{{ldy|20}}}-{{#invoke:String2 |split |txt={{{label-line|}}}|sep=!|idx=5}}/2}}px; 
  left: {{#expr:{{{x1|40}}}+{{{ldx|20}}}-{{#invoke:String2 |split |txt={{{label-line|}}}|sep=!|idx=4}}/2}}px;  
  width: {{#invoke:String2 |split |txt={{{label-line|}}}|sep=!|idx=4}}px; 
  height: {{#invoke:String2 |split |txt={{{label-line|}}}|sep=!|idx=5}}px; border-radius: 2px;
  background-color: #E8E8D6; 
  outline: 2px solid {{{label-color|blue}}};"></div>{{#ifeq:{{#invoke:String2 |split |txt={{{label-line|}}}|sep=!|idx=2}}|0||<div style="display:inline-block; position: absolute; <!-- place image inside the photo-panel -->
  top: {{#expr:{{{y1|40}}}+{{{ldy|20}}}-({{#invoke:String2 |split |txt={{{label-line|}}}|sep=!|idx=5}}/2)}}px; 
  {{#ifeq:{{{label-pos|left}}}|left
    |left: {{#expr:{{{x1|40}}}+{{{ldx|20}}}-{{#invoke:String2 |split |txt={{{label-line|}}}|sep=!|idx=4}}/2}}px;
    |left: {{#expr:{{{x1|40}}}+{{{ldx|20}}}+{{#invoke:String2 |split |txt={{{label-line|}}}|sep=!|idx=4}}/2-( {{#invoke:String2 |split |txt={{{label-line|}}}|sep=!|idx=5}}*{{#invoke:String2 |split |txt={{{label-line|}}}|sep=!|idx=2}} ) }}px;}}
  background-color:transparent; color:inherit; border-radius: 2px;">[[file:{{#invoke:String2 |split |txt={{{label-line|}}}|sep=!|idx=3}}{{!}}x{{#invoke:String2 |split |txt={{{label-line|}}}|sep=!|idx=5}}px]]</div>}}<div style="display:inline-block; position: absolute;
  top: {{#expr:{{{y1|40}}}+{{{ldy|20}}}-{{#invoke:String2 |split |txt={{{label-line|}}}|sep=!|idx=5}}/2}}px; 
  left: {{#expr:{{{x1|40}}}+{{{ldx|20}}}-{{#invoke:String2 |split |txt={{{label-line|}}}|sep=!|idx=4}}/2}}px;  
  width: {{#invoke:String2 |split |txt={{{label-line|}}}|sep=!|idx=4}}px; 
  height: {{#invoke:String2 |split |txt={{{label-line|}}}|sep=!|idx=5}}px; border-radius: 2px;
  background-color: transparent; color:inherit; box-shadow: 4px 4px #16591644; 
  outline: 2px solid {{{label-color|blue}}};"></div> }}{{#ifeq:{{{mark-width|1}}}|0||{{#switch:{{{shape|}}}
 |curveA= {{OSM Location map/cssline|option=curveA
  |x1={{{x1|150}}}|y1={{{y1|150}}}|w={{{mark-width|55}}}|cw=0| outline-width={{{outline-width|6}}}| angle={{{shape-angle|0}}}| shape-outline={{{shape-outline|black}}}| outline-style={{{outline-style|solid}}} }} 
 |curveC={{OSM Location map/cssline|option=curveA
  |x1={{{x1|150}}}|y1={{{y1|150}}}|w={{{mark-width|55}}}|cw=1| outline-width={{{outline-width|6}}}| angle={{{shape-angle|0}}}| shape-outline={{{shape-outline|black}}}| outline-style={{{outline-style|solid}}} }} 
 |ruleA= {{OSM Location map/cssline|option=ruleA
  |x1={{{x1|150}}}|y1={{{y1|150}}}|w={{{mark-width|85}}}| outline-width={{{outline-width|6}}}| angle={{{shape-angle|0}}}| shape-outline={{{shape-outline|black}}}| outline-style={{{outline-style|solid}}} }} 
|}}<div style="display:inline-block; position: absolute;
outline-width: {{{outline-width|0}}}px;
outline-style: {{{outline-style|solid}}};
outline-color: {{{shape-outline|blue}}};
{{#switch:{{{shape|image}}}
|line = left:{{#expr:{{{x1|40}}}+( ( {{{x2|80}}}-{{{x1|40}}} )/2) - (sqrt( ( {{{x2|80}}}-{{{x1|40}}} )^2 + ( {{{y2|60}}}-{{{y1|30}}} )^2 )/2)+( {{{outline-width|2}}}/2)-1  }}px; 
  top: {{#expr:{{{y1|30}}}+( ( {{{y2|60}}}-{{{y1|30}}} )/2)-( {{{outline-width|2}}} /2) }}px;  
  width: {{#expr:sqrt( ({{{x2|80}}}-{{{x1|40}}} )^2 + ( {{{y2|60}}}-{{{y1|30}}} )^2)-1 }}px;
  height: 1px;  background-color: transparent; color:inherit;
  outline-width: 0; border-bottom: {{{outline-width|2}}}px {{{outline-style|solid}}} {{{shape-outline|blue}}};
  transform: rotate({{#ifeq:{{{x1|40}}}|{{{x2|80}}}|90|{{#expr:atan(( {{{y2|60}}}-{{{y1|30}}} )/( {{{x2|80}}}-{{{x1|40}}} ) )*180/pi }} }}deg);"></div>
|rule = top: {{#expr:{{{y1|120}}}-( {{{outline-width|2}}} /2) }}px;
  left: {{#expr:{{{x1|40}}}-({{{mark-width|50}}}/2) }}px;
  width: {{{mark-width|50}}}px;
  height: 1px;  background-color: transparent; color:inherit;
  outline-width: 0; border-bottom: {{{outline-width|12}}}px {{{outline-style|solid}}} {{{shape-outline|blue}}};
  transform: rotate( {{{shape-angle|20}}}deg);"></div>
|circle = top: {{#expr:{{{y1|140}}}-({{{mark-width|15}}}/2)}}px; 
  left: {{#expr:{{{x1|240}}}-(({{{mark-width|15}}}-1)/2)}}px;  
  width: {{{mark-width|15}}}px;
  height: {{{mark-width|15}}}px;
  border-radius: 50%;
  background-color: {{{shape-color|lightblue}}}; color:inherit;"></div>
|square = top: {{#expr:{{{y1|40}}}-({{{mark-width|50}}}/2)}}px; 
  left: {{#expr:{{{x1|40}}}-({{{mark-width|50}}}/2)}}px;  
  width: {{{mark-width|50}}}px;
  height: {{{mark-width|50}}}px; transform: rotate({{{shape-angle|0}}}deg);
  background-color: {{{shape-color|lightblue}}}; color:inherit;"></div>
|diamond = top: {{#expr:{{{y1|40}}}-({{{mark-width|50}}}/2*0.8)}}px; 
  left: {{#expr:{{{x1|40}}}-({{{mark-width|50}}}/2*0.8)}}px;  
  width: {{#expr:{{{mark-width|50}}}*0.8}}px;
  height: {{#expr:{{{mark-width|50}}}*0.8}}px; transform: rotate(45deg);
  background-color: {{{shape-color|lightblue}}}; color:inherit;"></div>
|triangle|trangle-up|up = top: {{#expr:{{{y1|40}}}-({{{mark-width|50}}}/2)}}px; 
  left: {{#expr:{{{x1|40}}}-({{{mark-width|50}}}/2)}}px;  
  transform: rotate({{{shape-angle|0}}}deg);
  width: 0; height: 0; outline-width: 0px;
  border-left: {{#expr:{{{mark-width|14}}}/2}}px solid transparent;
  border-right: {{#expr:{{{mark-width|14}}}/2}}px solid transparent;
  border-bottom: {{{mark-width|14}}}px solid {{{shape-color|lightblue}}};"></div>
|itriangle = top: {{#expr:{{{y1|40}}}-({{{mark-height|50}}}/2)}}px; 
  left: {{#expr:{{{x1|40}}}-({{{mark-width|50}}}/2)}}px;  
  transform: rotate({{{shape-angle|0}}}deg);
  width: 0; height: 0; outline-width: 0px;
  border-left: {{#expr:{{{mark-width|28}}}/2}}px solid transparent;
  border-right: {{#expr:{{{mark-width|28}}}/2}}px solid transparent;
  border-bottom: {{{mark-height|45}}}px solid {{{shape-color|lightblue}}};"></div>
|box = top: {{#expr:{{{y1|40}}}-({{{mark-height|50}}}/2)}}px; 
  left: {{#expr:{{{x1|40}}}-({{{mark-width|50}}}/2)}}px;  
  width: {{{mark-width|50}}}px;
  height: {{{mark-height|50}}}px; transform: rotate({{{shape-angle|0}}}deg);
  border-radius: {{{mark-corner|0}}}px;
  background-color: {{{shape-color|lightblue}}}; color:inherit;"></div>
|ellipse= top: {{#expr:{{{y1|40}}}-({{{mark-height|50}}}/2)}}px; 
  left: {{#expr:{{{x1|40}}}-(({{{mark-width|50}}}-1)/2)}}px;  
  width: {{{mark-width|50}}}px;
  height: {{{mark-height|50}}}px;
  border-radius: 50%;
  background-color: {{{shape-color|lightblue}}}; color:inherit;"></div>
|panel= top: {{{y1|40}}}px; 
  left: {{{x1|40}}}px;  
  width: {{{mark-width|65}}}px; 
  height: {{{mark-height|18}}}px; 
  border-radius: {{{mark-corner|3}}}px;
  transform: rotate({{{shape-angle|0}}}deg);
  background-color: {{{shape-color|lightblue}}}; color:inherit;"></div>
|image= top: {{#expr:{{{y1|140}}}-({{{mark-height|14}}}/2)+{{min|({{{mark-height|14}}}*0.5)-12|0}} }}px; 
  left: {{#expr:{{{x1|240}}}-({{{mark-width|14}}}-1)/2}}px;
  background-color:transparent; color:inherit;
  transform: rotate({{{shape-angle|0}}}deg);">[[file:{{{mark|Red pog.svg}}}{{!}}{{#expr:{{{mark-width|14}}}+2}}px{{!}}alt={{{mark-title|}}}{{!}}link=]]</div>
|#default=outline-width: 0px;"></div>}} }}<div style="display:inline-block; position: absolute; line-height: 0.98;<!-- After shape, print the label, if any ------ -->
{{#ifexpr:{{Str find|{{{shape|}}}|panel}}=1 and {{Str left |{{{label-line|0}}}| 1}} != 3   <!-- if its a panel, but not photo-panel -->
|  {{#switch:{{{label-pos|top}}}
|left= 
  top: {{#expr:{{{ldy|0}}}+{{{y1|30}}}+( {{Str number/trim|{{{label-size|12}}} }}/3) }}px; 
  left: {{#expr:{{{ldx|0}}}+{{{x1|30}}}+3}}px; text-align: left;
  width: {{{mark-width|350}}}px;
|right= 
  top: {{#expr:{{{ldy|0}}}+{{{y1|30}}}+( {{Str number/trim|{{{label-size|12}}} }}/3) }}px;  
  left: {{#expr:{{{x1|240}}}+{{{ldx|0}}}+{{{mark-width|12}}}-3}}px;
  width: fit-content;
  text-align: right;
  transform: translateX(-100%);
| top = 
  top: {{#expr:{{{ldy|0}}}+{{{y1|30}}}+( {{Str number/trim|{{{label-size|12}}} }}/3) }}px;
  left: {{#expr:{{{ldx|0}}}+{{{x1|240}}}+2 }}px; 
  width: {{{mark-width|350}}}px;
  text-align: center;
| bottom =
  top: {{#expr:{{{ldy|0}}}+{{{y1|0}}}+( {{{mark-height|12}}} )-3-( ({{str count|{{{label|}}}|pattern=<br>|plain=1}}+1 )*{{Str number/trim|{{{label-size|12}}} }}*1.1) }}px; 
  left: {{#expr:{{{ldx|0}}}+{{{x1|240}}}+2 }}px; 
  width: {{{mark-width|350}}}px;
  text-align: center; 
| center|centre =
  top: {{#expr:{{{ldy|0}}}+{{{y1|0}}}+( {{{mark-height|12}}}/2 )-( ( {{str count|{{{label|}}}<br>|pattern=<br>|plain=1}} )*{{Str number/trim|{{{label-size|12}}} }}*0.6) }}px;
  left: {{#expr:{{{ldx|0}}}+{{{x1|240}}}+2 }}px; 
  width: {{{mark-width|350}}}px;
  text-align: center; }}
|{{#switch:{{Str left |{{{label-line|0}}}| 1}}
|0|2=
 white-space: nowrap; {{#switch:{{{label-pos|left}}}
|right = 
  top: {{#expr:{{{ldy|0}}}+{{{y1|140}}}-( {{Str number/trim|{{{label-size|12}}} }}/2)-1-( {{str count|{{{label|}}}|pattern=<br>|plain=1}}*{{Str number/trim|{{{label-size|12}}} }}*1.25/2) }}px; 
  left: {{#expr:{{{ldx|0}}}+{{{x1|240}}}+( {{{mark-width|12}}}/2)+{{{outline-width|0}}}+2+{{#ifeq:{{{shape|}}}|image|2|0}} }}px; text-align: left;
  transform: rotate({{{label-angle|0}}}deg)
|left = 
  top: {{#expr:{{{ldy|0}}}+{{{y1|140}}}-( {{Str number/trim|{{{label-size|12}}} }}/2)-1-( {{str count|{{{label|}}}|pattern=<br>|plain=1}}*{{Str number/trim|{{{label-size|12}}} }}*1.25/2) }}px; 
  left: {{#expr:{{{ldx|0}}}+{{{x1|240}}}-( {{{mark-width|12}}}/2)-{{{outline-width|0}}}-2-{{#ifeq:{{{shape|}}}|image|2|0}} }}px;
  transform: translateX(-100%) rotate({{{label-angle|0}}}deg);
  text-align: right;
| top =
  top: {{#expr:{{{ldy|0}}}+{{{y1|140}}}-( {{{mark-height|12}}}/2)-{{{outline-width|0}}}-1-{{#ifeq:{{{shape|}}}|image|2|0}} }}px;
  left: {{#expr:{{{ldx|0}}}+{{{x1|240}}} }}px; 
  width: fit-content;
  height: fit-content;
  text-align: center;
  transform: translateX(-50%) translateY(-100%) rotate({{{label-angle|0}}}deg);
| bottom =
  top: {{#expr:{{{ldy|0}}}+{{{y1|140}}}+( {{{mark-height|12}}}/2)+{{{outline-width|0}}}+1 }}px; 
  left: {{#expr:{{{ldx|0}}}+{{{x1|240}}} }}px; 
  width: fit-content;
  text-align: center; 
  transform: translateX(-50%) rotate({{{label-angle|0}}}deg);
| center|centre =
  top: {{#expr:{{{ldy|0}}}+{{{y1|140}}}-7-( ( {{str count|{{{label|}}}|pattern=<br>|plain=1}} )*{{Str number/trim|{{{label-size|12}}} }}*0.6) }}px;
  left: {{#expr:{{{ldx|0}}}+{{{x1|240}}} }}px; 
  width: fit-content;
  transform: translateX(-50%) rotate({{{label-angle|0}}}deg);
  text-align: center; }}
|1|4= white-space: nowrap; {{#switch:{{{label-pos|top}}}<!-- same again for use with with-line and n-line -->
|right = 
  top: {{#expr:{{{ldy|0}}}+{{{y1|30}}}-( {{Str number/trim|{{{label-size|12}}} }}/2)-1}}px; 
  left: {{#expr:{{{ldx|0}}}+{{{x1|30}}}-1 }}px; text-align: left;
  transform: rotate({{{label-angle|0}}}deg);
|left = 
  top: {{#expr:{{{ldy|0}}}+{{{y1|30}}}-( {{Str number/trim|{{{label-size|12}}} }}/2)-1}}px; 
  left: {{#expr:{{{ldx|0}}}+{{{x1|30}}}-1 }}px;
  width: fit-content;
  text-align: right;
  transform: translateX(-100%) rotate({{{label-angle|0}}}deg);
| top =
  top: {{#expr:{{{ldy|0}}}+{{{y1|140}}}-1}}px;
  left: {{#expr:{{{ldx|0}}}+{{{x1|240}}} }}px; 
  width: fit-content;
  height: fit-content;
  text-align: center;
  transform: translateX(-50%) translateY(-100%) rotate({{{label-angle|0}}}deg);
| bottom | center|centre=
  top: {{#expr:{{{ldy|0}}}+{{{y1|0}}} }}px; 
  left: {{#expr:{{{ldx|0}}}+{{{x1|240}}} }}px; 
  width: fit-content;
  text-align: center;
  transform: translateX(-50%) rotate({{{label-angle|0}}}deg); }}
|3= top: {{#expr:{{{ldy|0}}}+{{{y1|30}}}-( {{Str number/trim|{{{label-size|12}}} }}/2)-1-( {{str count|{{{label|}}}|pattern=<br>|plain=1}}*{{Str number/trim|{{{label-size|12}}} }}*1.25/2) }}px; 
  {{#ifeq:{{{label-pos|}}}|right    <!-- idx4=panel-width, idx5=photo-width, idx2=dimension factor  -->
  | left: {{#expr:{{{ldx|0}}}+{{{x1|30}}}+1-( {{#invoke:String2 |split |txt={{{label-line|}}}|sep=!|idx=4}}/2 ) }}px;
  | left: {{#expr:{{{ldx|0}}}+{{{x1|30}}}+1-{{#invoke:String2 |split |txt={{{label-line|}}}|sep=!|idx=4}}/2+( {{#invoke:String2 |split |txt={{{label-line|}}}|sep=!|idx=5}}*{{#invoke:String2 |split |txt={{{label-line|}}}|sep=!|idx=2}} ) }}px;
 }} width: {{#expr:{{#invoke:String2 |split |txt={{{label-line|}}}|sep=!|idx=4}}-( {{#invoke:String2 |split |txt={{{label-line|}}}|sep=!|idx=5}}*{{#invoke:String2 |split |txt={{{label-line|}}}|sep=!|idx=2}} ) }}px;
  text-align: center; line-height: 1.1;
}} }}
background-color: transparent; color:inherit;"><span style="color: {{{label-color|black}}};
{{#ifeq:{{Str count|{{{label-size|}}}|outline}}|1|border: 1px solid black; line-height:98%;padding:0px 3px;border-radius:6px;|}}
{{#ifeq:{{Str count|{{{label-size|}}}|background}}|1|background-color: #F9F5E7;}}
{{#ifeq:{{Str count|{{{label-size|}}}|paleground}}|1|background-color: #FEFEFA;}}
{{#ifeq:{{Str count|{{{label-size|}}}|beigeground}}|1|background-color: #F5F5DC;}}
font-size: {{Str number/trim|{{{label-size|12}}} }}px; font-weight:normal;">
{{#ifeq:{{{label-line|0}}}|4|
 {{#ifeq:{{str count|{{{mark-title|}}}|[}}|0
  |'''{{{numbered|}}}'''<!-- just the number or make it a wikilink if there is one in mark-title -->
|'''[[{{delink|[[{{String split |{{String split |{{{mark-title|}}}|"]"]|1}}|"["[|2}}]]|wikilinks=target}}{{!}}{{{numbered|}}}]]'''}}{{#if:{{{label|}}}|&colon;&nbsp;}} }}{{{label|}}}</span></div>{{#ifexpr:{{{mark-width|0}}}>1|{{#ifeq:{{{numbered|0}}}|0||{{#ifeq:{{{label-line|0}}}|4||<div style="display:inline-block; position: absolute;
  top: {{#expr:{{{y1|40}}}-( {{{mark-height|15}}}*0.5)-1 }}px; 
  left: {{{x1|240}}}px; 
  width: fit-content;
  text-align: center;
  transform: translateX(-50%);
  background-color:transparent; color:inherit;
  line-height: 1.3;"><span style="color: white;
  font-size: {{#ifexpr:{{{mark-height|13}}}>13|{{#expr:{{{mark-height|15}}}-4}}|{{{mark-height|15}}} }}px; font-weight:bold;">{{{numbered|15}}}</span></div>}} }} }}{{#ifeq:{{str count|{{{mark-title|}}}|[}}|0||<!-- add an invisible square with a link extracted from mark-title, if one is available -->
  <div style="display:inline-block; position: absolute;
  outline-width: 0px;
  top: {{#expr:{{{y1|40}}}-({{{mark-height|50}}}/2)}}px; 
  left: {{#expr:{{{x1|40}}}-(({{{mark-width|50}}}-1)/2)}}px;  
  width: {{{mark-width|50}}}px;
  height: {{{mark-height|50}}}px;
  background-color: transparent; color:inherit;">[[file:Invisible Square.svg{{!}}{{#expr:{{{mark-width|14}}}+2}}px{{!}}alt={{{mark-title|}}}{{!}}link={{delink|[[{{String split |{{String split |{{{mark-title|}}}|"]"]|1}}|"["[|2}}]]|wikilinks=target}} ]]</div>}} }}<noinclude> Usage: 

*label= parameter adds text on a transparent background at point x1,y1, using label-color, label-size, label-angle, label-pos=left/right/top/bottom.
*shape=circle, square, diamond, triangle are equel width centered on x1,y1, and use mark-size.
*box, ellipse,itriangle allow mark-size=w,h to set width and height. A third number for box sets corner-radius.
*shape=panel has its top-left corner at x1,y1, places text within rather than beside the shape, and uses mark-size, border-radius, shape-angle.
*shape=image, uses the value in 'mark' or default red pog. Set mark-size. Height may be needed to align labels correctly, but doesn't affect the image itself.
*A 'photo-panel' option creates a 'standard' 50px high panel, adds a photo to left or right. A width dimension is needed to match the panel edge)
*All shapes can also set shape-color and optional opacity, and a shape-outline parameter to set color, width, opacity, style of an outline
*Shapes can also have auto- or manual-numbers to give a sequence of numbered shapes.
*Labels can optionally have a line to connect to their shape, as can shape-numbers if the shapes are congested.
*label-size can optionally include a plain background and/or 1px black outline around the label. eg label-size=12,outline,background
</noinclude>