Template:OSM Location map/cssmapping: Difference between revisions

Revision as of 20:47, 25 April 2024

Revision as of 21:29, 29 April 2024

Line 102:

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>

|#default="></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}}}

Line 131:

|{{#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)+3{{{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;

right: {{#expr:{{{width|350}}}-{{{x1|240}}}-{{{ldx|0}}}+( {{{mark-width|12}}}/2)+{{{outline-width|0}}}+1+{{#ifeq:{{{shape|}}}|image|1|0}} }}px;

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

text-align: right;

| top =

bottom: {{#expr:{{{height|250}}}-{{{y1|0}}}-{{{ldy|0}}}+({{{mark-height|12}}}/2)+1{{{outline-width|0}}}+2+{{#ifeq:{{{shape|}}}|image|2|0}} }}px;

left: {{#expr:{{{ldx|0}}}+{{{x1|240}}}-( {{{width|350}}}/2 )+1 }}px;

width: {{{width|350}}}pxfit-content;

text-align: center;

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

| bottom =

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

left: {{#expr:{{{ldx|0}}}+{{{x1|240}}}-( {{{width|350}}}/2 )+1 }}px;

width: {{{width|350}}}pxfit-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}}}-( {{{width|350}}}/2 )+1 }}px;

width: {{{width|350}}}pxfit-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-( {{str count|{{{label|}}}|pattern=<br>|plain=1}}*{{Str number/trim|{{{label-size|12}}} }}*1.25/2) }}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-( {{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;

text-align: right;

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

| top =

bottom: {{#expr:{{{height|250}}}-{{{y1|0}}}-{{{ldy|0}}}-1}}px;

left: {{#expr:{{{ldx|0}}}+{{{x1|240}}}-( {{{width|350}}}/2 )+1 }}px;

width: {{{width|350}}}pxfit-content;

text-align: center;

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

| bottom | center|centre=

top: {{#expr:{{{ldy|0}}}+{{{y1|0}}}-2 }}px;

left: {{#expr:{{{ldx|0}}}+{{{x1|240}}}-( {{{width|350}}}/2 )+1 }}px;

width: {{{width|350}}}px; textfit-align: centercontent; }}

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

Line 176 ⟶ 186:

| 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; line-height: 0.98; 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;|}}

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

Line 184 ⟶ 194:

{{#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: {{#expr:{{{x1|240}}}-( {{{width|350}}}/2) }}px;

width: {{{width|350}}}pxfit-content;
text-align: center;

transform: translateX(-50%);

background-color:transparent;

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

Line 200 ⟶ 212:

background-color: transparent;">[[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