Template:OSM Location map/cssmapping: Difference between revisions

Revision as of 15:05, 14 June 2024

Latest revision as of 08:40, 25 August 2025

(6 intermediate revisions by 2 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}}}}

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

Line 26 ⟶ 27:

|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

Line 37 ⟶ 38:

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

Line 45 ⟶ 48:

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

Line 59 ⟶ 62:

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;

Line 89 ⟶ 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 95 ⟶ 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 102 ⟶ 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|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 ------ -->

Line 197 ⟶ 200:

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

Line 207 ⟶ 210:

|'''{{{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)-{{#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; color:inherit;

line-height: 1.32;"><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;

Line 221 ⟶ 224:

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.