Wikipedia

Template:OSM Location map/cssmapping: Difference between revisions

Browse history interactively
← Previous editNext edit →
Content deleted Content added
VisualWikitext
test adjustment for image vertical shift
Revision with better text placement
Line 49:
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;
Line 98:
transform: rotate({{{shape-angle|0}}}deg);
background-color: {{{shape-color|lightblue}}};"></div>
|image= top: {{#expr:{{{y1|40140}}}-({{{mark-height|14}}}/2)+{{min|({{{mark-height|14}}}*0.5)-12|0}} }}px;
left: {{#expr:{{{x1|40240}}}-({{{mark-width|14}}}-1)/2}}px;
background-color:transparent;
transform: rotate({{{shape-angle|0}}}deg);">[[file:{{{mark|Red pog.svg}}}{{!}}{{#expr:{{{mark-width|14}}}+2}}px{{!}}alt={{{mark-title|}}}{{!}}link=]]</div>
Line 106:
| {{#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;
leftright: {{#expr:{{{ldxwidth|0350}}}+-{{{x1|30240}}}+-{{{mark-widthldx|120}}}-3-( {{{labelmark-sizewidth|12}}}*{{Str find|{{{label|}}}<br>|<br>}}/2.1 )+{{{jdx|0}}} 3}}px;
width: {{{mark-width|350}}}px;
text-align: right;
| 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=
{{#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)+53}}px; text-align: left;
|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;
leftright: {{#expr:{{{ldxwidth|0350}}}+-{{{x1|30240}}}-( {{{mark-widthldx|120}}}/2)-5-+( {{{labelmark-sizewidth|12}}}*{{Str find|{{{label|}}}<br>|<br>}}/2.1 )+{{{jdx|0}}} 1}}px;
text-align: right;
| top =
bottom: {{#expr:{{{height|250}}}-{{{y1|0}}}-{{{ldy|0}}}+({{{mark-height|12}}}/2)+1}}px;
{{#ifexpr:{{{label-size|12}}}<12|
topleft: {{#expr:{{{ldyldx|0}}}+{{{y1x1|0240}}}-( {{{mark-heightwidth|12350}}}/2)-6-(5-{{{label-size|12}}} )-( ({{str count|{{{label|}}}|pattern=<br>|plain=1}}+1 )*{{{label-size|12}}}*1.4)+( {{{jdx|0}}}/2) }}px;|
width: {{{width|350}}}px;
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;}}
left: {{#expr:{{{ldx|0}}}+{{{x1|30}}}+2-( {{{label-size|12}}}*{{Str find|{{{label|}}}<br>|<br>}}/4.2 ) }}px;
text-align: center;
| bottom =
top: {{#expr:{{{ldy|0}}}+{{{y1|0140}}}+( {{{mark-height|12}}}/2)+2}}px;
left: {{#expr:{{{ldx|0}}}+{{{x1|30240}}}+2-( {{{label-sizewidth|12350}}}*{{Str find|{{{label|}}}<br>|<br>}}/4.2 )+( {{{jdx|0}}}/2)1 }}px;
width: {{{width|350}}}px;
text-align: center;
| 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-sizewidth|12350}}}*{{Str find|{{{label|}}}<br>|<br>}}/4.2 )+( {{{jdx|0}}}/2)1 }}px;
width: {{{width|350}}}px;
text-align: center; }}
|1|4= {{#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-( {{str count|{{{label|}}}|pattern=<br>|plain=1}}*{{Str number/trim|{{{label-size|12}}} }}*1.25/2) }}px;
left: {{#expr:{{{ldx|0}}}+{{{x1|30}}}+( {{{jdx|0}}}/2) }}px; text-align: left;
|left =
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;
right: {{#expr:{{{width|350}}}-{{{x1|240}}}-{{{ldx|0}}}+2}}px;
{{#ifeq:{{Str left |{{{label-line|0}}}| 1}}|1| <!--only add in length of numbered if 4 (n-line) -->
left: {{#expr:{{{ldx|0}}}+{{{x1|30}}}-( {{{label-size|12}}}*{{Str find|{{{label|}}}<br>|<br>}}/2.1)+{{{jdx|0}}} }}px; |
left: {{#expr:{{{ldx|0}}}+{{{x1|30}}}+2-( {{{label-size|12}}}*{{Str find|{{{numbered|}}}{{{label|}}}<br>|<br>}}/2.1)+{{{jdx|0}}} }}px; }}
text-align: right;
| top =
bottom: {{#ifexprexpr:{{{labelheight|250}}}-size{{{y1|120}}}<12-{{{ldy|0}}}-1}}px;
topleft: {{#expr:{{{ldyldx|0}}}+{{{y1x1|0240}}}-(5- {{{label-sizewidth|12350}}}/2 )-( ({{str count|{{{label|}}}|pattern=<br>|plain=1}}+1 )*{{{label-size|12}}}*1.4) }}px;|
width: {{{width|350}}}px;
top: {{#expr:{{{ldy|0}}}+{{{y1|0}}}-( ({{str count|{{{label|}}}|pattern=<br>|plain=1}}+1 )*{{{label-size|12}}}*1.1) }}px;}}
left: {{#expr:{{{ldx|0}}}+{{{x1|30}}}-2-( {{{label-size|12}}}*{{Str find|{{{label|}}}<br>|<br>}}/4.2 )+( {{{jdx|0}}}/2) }}px;
text-align: center;
| bottom | center|centre=
top: {{#expr:{{{ldy|0}}}+{{{y1|0}}}-2 }}px;
left: {{#expr:{{{ldx|0}}}+{{{x1|30240}}}-( {{{label-sizewidth|12350}}}*{{Str find|{{{label|}}}<br>|<br>}}/4.2 )+( {{{jdx|0}}}/2)1 }}px;
width: {{{width|350}}}px; text-align: center; }}
|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)+( {{{jdx|0}}}/2) }}px;
{{#ifeq:{{{label-pos|}}}|right <!-- idx4=panel-width, idx5=photo-width, idx2=dimension factor -->
| left: {{#expr:{{{ldx|0}}}+{{{x1|30}}}+31-( {{#invoke:String2 |split |txt={{{label-line|}}}|sep=!|idx=4}}/2 ) }}px;
| left: {{#expr:{{{ldx|0}}}+{{{x1|30}}}+31-{{#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;
}} }}
background-color: transparent; line-height: normal; 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;">▼
background-color: {{#ifeq:{{Str count|{{{label-size|}}}|background}}|1|#F9F5E7|transparent}};
▲font-size: {{Str number/trim|{{{label-size|1312}}} }}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|}}}. ]]'''.}} }}{{{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: {{#expr:{{{x1|40240}}}+2-( {{str len|{{{numberedwidth|15350}}} }} * ( {{{mark-height|15}}}-4.2 )/2.8 ) }}px;
width: {{{width|350}}}px; text-align: center;
background-color:transparent;
line-height: normal;"><span style="color: white;
Line 203 ⟶ 209:
*Shapes can also be set to 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>
Retrieved from "https://en.wikipedia.org/wiki/Template:OSM_Location_map/cssmapping"