Template:OSM Location map/cssmapping: Difference between revisions

Revision as of 16:42, 2 March 2024

Latest revision as of 08:40, 25 August 2025

(46 intermediate revisions by 3 users not shown)

Line 1:

{{Template for discussion/dated|action=|page=OSM Location map/cssmapping|otherpage=|link=Wikipedia:Templates for discussion/Log/2025 August 25#Template:OSM Location map/cssmapping|help=off|bigbox={{#invoke:Noinclude|noinclude|text=yes}}}}

{{#switch:{{Str left |{{{label-line|0}}}| 1}}

{{#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}}} }}

Line 6 ⟶ 7:

| x1={{#expr:{{{x1|30}}}+{{{mark-width|30}}}/2}}| y1={{#expr:{{{y1|40}}}+{{{mark-height|30}}}/2}}

| x2={{{x2|50}}}| y2={{{y2|60}}}

| outline-width=2| outline-style=solid| shape-outline={{{outline-color|black}}} || double={{#invoke:String2 |split |txt={{{label-line|}}}|sep=,|idx=52}}}}

| 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=32}}

| outline-style={{#invoke:String2 |split |txt={{{label-line|}}}|sep=,|idx=43}}

| shape-outline={{{outlineshape-coloroutline|blackdarkgrey}}} | double={{#invoke:String2 |split |txt={{{label-line|}}}|sep=,|idx=54}} }} }} }}

{{#ifeq:{{Str left |{{{label-line|0}}}| 1}}|3| <!-- draw photo-panel -->

<div style="display:inline-block; position: absolute;

top: {{#expr:{{{y1|40}}}+{{{ldy|20}}}-24{{#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: 48px{{#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}}}-24({{#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-( 48{{#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}}{{!}}x48pxx{{#invoke:String2 |split |txt={{{label-line|}}}|sep=!|idx=5}}px]]</div>}}<div style="display:inline-block; position: absolute;

top: {{#expr:{{{y1|40}}}+{{{ldy|20}}}-24{{#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: 48px{{#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||<div style="display{{#switch:inline-block; position: absolute;{{{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|circleimage}}}

|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>

Line 44 ⟶ 54:

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|40140}}}-({{{mark-width|15}}}/2)}}px;

left: {{#expr:{{{x1|40240}}}-(({{{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*0.8)}}px;

left: {{#expr:{{{x1|40}}}-({{{mark-width|50}}}/2*0.8)}}px;

transform: rotate({{{shape-angle|0}}}deg);

width: 0; height: 0; outline-width: 0px;

Line 70 ⟶ 80:

border-right: {{#expr:{{{mark-width|14}}}/2}}px solid transparent;

border-bottom: {{{mark-width|14}}}px solid {{{shape-color|lightblue}}};"></div>

|iso-triangleitriangle = top: {{#expr:{{{y1|40}}}-({{{mark-height|50}}}/2*0.8)}}px;

left: {{#expr:{{{x1|40}}}-({{{mark-width|50}}}/2*0.8)}}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|1445}}}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;

Line 82 ⟶ 92:

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;

Line 88 ⟶ 98:

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;

Line 95 ⟶ 105:

border-radius: {{{mark-corner|3}}}px;

transform: rotate({{{shape-angle|0}}}deg);

background-color: {{{shape-color|lightblue}}}; color:inherit;"></div>

|image= top: {{#expr:{{{y1|40140}}}-({{{mark-height|14}}}/2)+{{min|({{{mark-height|14}}}*0.045)-312|0}} }}px;

left: {{#expr:{{{x1|40240}}}-({{{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:{{{ldxx1|0240}}}+{{{x1ldx|300}}}+{{{mark-width|12}}}-3-( {{{label-size|12}}}*{{Str find|{{{label|}}}<br>|<br>}}/2.1 )+{{{jdx|0}}} }}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|30240}}}+{{{mark-width|12}}}/2-3-( {{{label-size|12}}}*{{Str find|{{{label|}}}<br>|<br>}}/4.2)+( {{{jdx|0}}}/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|30240}}}+{{{mark-width|12}}}/2-3-( {{{label-size|12}}}*{{Str find|{{{label|}}}<br>|<br>}}/4.2)+( {{{jdx|0}}}/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|30240}}}+{{{mark-width|12}}}/2-3-( {{{label-size|12}}}*{{Str find|{{{label|}}}<br>|<br>}}/4.2)+( {{{jdx|0}}}/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|topleft}}}

|right =

top: {{#expr:{{{ldy|0}}}+{{{y1|30140}}}-( {{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|30240}}}+( {{{mark-width|12}}}/2)+5{{{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|30140}}}-( {{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|30240}}}-( {{{mark-width|12}}}/2)-5-( {{{labeloutline-sizewidth|120}}}*-2-{{Str find|#ifeq:{{{labelshape|}}}<br>|<br>}}/image|2.1 )+{{{jdx|0}}} }}px;

transform: translateX(-100%) rotate({{{label-angle|0}}}deg);

text-align: right;

| top =

top: {{#expr:{{{ldy|0}}}+{{{y1|0140}}}-( {{{mark-height|12}}}/2)-3-( ({{str count{outline-width|0}}}-1-{{#ifeq:{label{{shape|}}}|pattern=<br>image|plain=1}}+1 )*{{{label-size2|120}}}*1.1) }}px;}}

{{#ifexpr:{{{label-size|12}}}<12|

topleft: {{#expr:{{{y1ldx|400}}}-( +{{{mark-heightx1|15240}}}*0.5) }}px;

top: {{#expr:{{{ldy|0}}}+{{{y1|0}}}-( {{{mark-height|12}}}/2)-6-(5-{{{label-size|12}}} )-( ({{str count|{{{label|}}}|pattern=<br>|plain=1}}+1 )*{{{label-size|12}}}*1.4)+( {{{jdx|0}}}/2) }}px;|

width: fit-content;

top: {{#expr:{{{ldy|0}}}+{{{y1|0}}}-( {{{mark-height|12}}}/2)-3-( ({{str count|{{{label|}}}|pattern=<br>|plain=1}}+1 )*{{{label-size|12}}}*1.1) }}px;}}

height: fit-content;

left: {{#expr:{{{ldx|0}}}+{{{x1|30}}}+2-( {{{label-size|12}}}*{{Str find|{{{label|}}}<br>|<br>}}/4.2 ) }}px;

text-align: center;

transform: translateX(-50%) translateY(-100%) rotate({{{label-angle|0}}}deg);

| bottom =

top: {{#expr:{{{ldy|0}}}+{{{y1|0140}}}+( {{{mark-height|12}}}/2)+2{{{outline-width|0}}}+1 }}px;

left: {{#expr:{{{ldx|0}}}+{{{x1|30240}}}+2-( {{{label-size|12}}}*{{Str find|{{{label|}}}<br>|<br>}}/4.2)+( {{{jdx|0}}}/2) }}px;

width: fit-content;

text-align: center;

transform: translateX(-50%) rotate({{{label-angle|0}}}deg);

| center|centre =

top: {{#expr:{{{ldy|0}}}+{{{y1|0140}}}-7-( ( {{str count|{{{label|}}}|pattern=<br>|plain=1}} )*{{Str number/trim|{{{label-size|12}}} }}*0.6) }}px;

left: {{#expr:{{{ldx|0}}}+{{{x1|30240}}}+2-( {{{label-size|12}}}*{{Str find|{{{label|}}}<br>|<br>}}/4.2)+( {{{jdx|0}}}/2) }}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 nwith-line and withn-line -->

|right =

top: {{#expr:{{{ldy|0}}}+{{{y1|30}}}-( {{{label-size|12}}}Str number/2)-1-( {{str counttrim|{{{label|}}}|pattern=<br>|plain=1}}*{{{label-size|12}}}*1.25 }}/2) -1}}px;

left: {{#expr:{{{ldx|0}}}+{{{x1|30}}}+( {{{jdx|0}}}/2)-1 }}px; text-align: left;

transform: rotate({{{label-angle|0}}}deg);

|left =

top: {{#expr:{{{ldy|0}}}+{{{y1|30}}}-( {{{label-size|12}}}Str number/2)-1-( {{str counttrim|{{{label|}}}|pattern=<br>|plain=1}}*{{{label-size|12}}}*1.25 }}/2) -1}}px;

left: {{#expr:{{{ldx|0}}}+{{{x1|30}}}-( {{{label-size|12}}}*{{Str find|{{{label|}}}<br>|<br>}}/2.1 )+{{{jdx|0}}} }}px;

width: fit-content;

text-align: right;

transform: translateX(-100%) rotate({{{label-angle|0}}}deg);

| top =

top: {{#ifexprexpr:{{{label-sizeldy|120}}}<12+{{{y1|140}}}-1}}px;

topleft: {{#expr:{{{ldyldx|0}}}+{{{y1x1|0}}}-(5-{{{label-size|12240}}} )-( ({{str count|{{{label|}}}|pattern=<br>|plain=1}}+1 )*{{{label-size|12}}}*1.4) }}px;|

width: fit-content;

top: {{#expr:{{{ldy|0}}}+{{{y1|0}}}-( ({{str count|{{{label|}}}|pattern=<br>|plain=1}}+1 )*{{{label-size|12}}}*1.1) }}px;}}

height: fit-content;

left: {{#expr:{{{ldx|0}}}+{{{x1|30}}}+2-( {{{label-size|12}}}*{{Str find|{{{label|}}}<br>|<br>}}/4.2 )+( {{{jdx|0}}}/2) }}px;

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|30240}}}-( {{{label-size|12}}}*{{Str find|{{{label|}}}<br>|<br>}}/4.2)+( {{{jdx|0}}}/2) }}px;

width: fit-content;

text-align: center; }}

|3= top: {{#expr:{{{ldy|0}}}+{{{y1|30}}}-( {{{label-size|12}}}/2)-1-( {{str count|{{{label|}}}|pattern=<br>|plain=1}}*{{{label-size|12}}}*1.25/2)+( {{{jdx|0}}}/2) }}px;

{{#ifeqtransform: translateX(-50%) rotate({{{label-posangle|0}}}|rightdeg); }}

|3= lefttop: {{#expr:{{{ldxldy|0}}}+{{{x1y1|30}}}+3-( {{#invoke:String2Str number/trim|split{{{label-size|12}}} }}/2)-1-( {{str count|txt={{{label-line|}}}|seppattern=!<br>|idxplain=41}}*{{Str number/2trim|{{{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}}}+3-{{#invoke:String2 |split |txt={{{label-line|}}}|sep=!|idx=4}}/2+( 48*{{#invoke:String2 |split |txt={{{label-line|}}}|sep=!|idx=2}} ) }}px;

| left: {{#expr:{{{ldx|0}}}+{{{x1|30}}}+21-( {{{label-size#invoke:String2 |12}}}*{{Strsplit find|txt={{{label-line|}}}<br>|<br>sep=!|idx=4}}/4.2 ) }}px;

}} text-align: center;

| left: {{#expr:{{{ldx|0}}}+{{{x1|30}}}+31-{{#invoke:String2 |split |txt={{{label-line|}}}|sep=!|idx=4}}/2+( 48{{#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; line-heightcolor: normalinherit; transform: rotate({{{label-angle|0}}}deg)"><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;|}}

font-size: {{{label-size|13}}}px; font-weight:normal;">{{#ifeq:{{{label-line|0}}}|4|{{{numbered|}}}. |}}{{{label|}}}<br>LL={{{label-line|}}}</span></div>{{#ifexpr:{{{numbered|0}}}>0|{{#ifeq:{{{label-line|0}}}|4||<div style="display:inline-block; position: absolute;

{{#ifeq:{{Str count|{{{label-size|}}}|background}}|1|background-color: #F9F5E7;}}

top: {{#expr:{{{y1|40}}}-( {{{mark-height|15}}}*0.5) }}px;

{{#ifeq:{{Str count|{{{label-size|}}}|paleground}}|1|background-color: #FEFEFA;}}

left: {{#expr:{{{x1|40}}}+2-( {{str len|{{{numbered|15}}} }} * ( {{{mark-height|15}}}-4.2 )/2.8 ) }}px;

{{#ifeq:{{Str count|{{{label-size|}}}|beigeground}}|1|background-color: #F5F5DC;}}

font-size: {{Str number/trim|{{{label-size|12}}} }}px; font-weight:normal;">

{{#switchifeq:{{Str left |{{{label-line|0}}}| 1}}4|

{{#ifeq:{{str count|{{{mark-title|}}}|[}}|0

|'''{{{numbered|}}}'''<!-- just the number or make it a wikilink if there is one in mark-title -->

font-size: |'''[[{{{label-sizedelink|13}}}px;[[{{String font-weight:normal;">split |{{#ifeq:String split |{{{labelmark-linetitle|0}}}|4"]"]|1}}|"["[|2}}]]|wikilinks=target}}{{!}}{{{numbered|}}}. |]]'''}}{{#if:{{{label|}}}<br>LL=|&colon;&nbsp;}} }}{{{label-line|}}}</span></div>{{#ifexpr:{{{numberedmark-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)-{{#ifexpr:{{{mark-height|28}}}<13|2|0}}-{{#ifexpr:{{{mark-height|28}}}<11|1|0}} }}px;

left: {{{x1|240}}}px;

width: fit-content;

text-align: center;

transform: translateX(-50%);

background-color:transparent;

linebackground-heightcolor: normaltransparent;"><span style="color: whiteinherit;

line-height: 1.2;"><span style="color: white;

font-size: {{#expr:{{{mark-height|15}}}-4}}px; font-weight:bold;">{{{numbered|15}}}</span></div>}} }}<noinclude> Usage:

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}}}+2-( {{str len|{{{numbered|15}}} }} * ( {{{mark-heightwidth|1550}}}-4.2 1)/2.8 ) }}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 textlabel-color, textlabel-size, textlabel-angle, label-pos=left/right/top/bottom.

*shape=circle, square, diamond, triangle are equel width centered on x1,y1, and use mark-size.

*box and, 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 line-color, width, coloropacity, andstyle opacity.of an outline

*Shapes can also be set tohave 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>