Template:OSM Location map/cssmapping: Difference between revisions

Content deleted Content added
install ruleA for line with Arrow
fix text color in dark mode; this generally works but may cause problems, in which case revert or try specifying a color
Line 26:
|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 47:
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 53:
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 61:
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 91:
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 97:
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 104:
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 199:
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 214:
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 -->
Line 223:
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.