https://warbirdphilosophy.com/w/index.php?action=history&feed=atom&title=Template%3AOSM_Location_map%2Fcssline
Template:OSM Location map/cssline - Revision history
2026-10-25T17:41:44Z
Revision history for this page on the wiki
MediaWiki 1.43.0
https://warbirdphilosophy.com/w/index.php?title=Template:OSM_Location_map/cssline&diff=5262&oldid=prev
Noha307: 1 revision imported: Content from Template:OSM Location map on Wikipedia
2024-06-26T06:00:49Z
<p>1 revision imported: Content from Template:OSM Location map on Wikipedia</p>
<table style="background-color: #fff; color: #202122;" data-mw="interface">
<tr class="diff-title" lang="en">
<td colspan="1" style="background-color: #fff; color: #202122; text-align: center;">← Older revision</td>
<td colspan="1" style="background-color: #fff; color: #202122; text-align: center;">Revision as of 06:00, 26 June 2024</td>
</tr><tr><td colspan="2" class="diff-notice" lang="en"><div class="mw-diff-empty">(No difference)</div>
</td></tr></table>
Noha307
https://warbirdphilosophy.com/w/index.php?title=Template:OSM_Location_map/cssline&diff=5261&oldid=prev
wikipedia>RobinLeicester: needs y1 x1
2024-06-19T22:16:24Z
<p>needs y1 x1</p>
<p><b>New page</b></p><div>{{#switch:{{{option|}}}|curveA=<br />
<div style="display:inline-block; position: absolute; <!-- draw a curve with Arrow ----- --><br />
top:{{#expr:{{{y1|120}}}-( {{{w|60}}}+{{{outline-width|5}}}*3+16)/2 }}px; <br />
left:{{#expr:{{{x1|220}}}-( {{{w|60}}}+{{{outline-width|5}}}*3+16)/2 }}px; <br />
width: {{#expr:{{{w|60}}}+{{{outline-width|5}}}*3+16 }}px; <br />
height: {{#expr:{{{w|60}}}+{{{outline-width|5}}}*3+16 }}px; <br />
{{#ifexpr:{{{cw|0}}}=0<br />
|transform: rotate( {{#expr:{{{angle|0}}}-120 }}deg);<br />
|transform: rotate( {{#expr:{{{angle|0}}}-62 }}deg); }}"> <br />
<div style="display:inline-block; position: absolute; <br />
border-left: {{{outline-width|15}}}px {{{outline-style|solid}}} {{{shape-outline|red}}};<br />
{{#ifexpr:{{{cw|0}}}=0| border-radius: 10000px 0 0 {{#expr:{{{w|60}}} }}px; top:0px; left:{{#expr:{{{w|60}}}*0.25 }}px;<br />
| border-radius: {{{w|60}}}px 0 0 10000px; <br />
top:{{#expr:( {{{outline-width|15}}}*3+16)/2+({{{w|60}}}*0.15) }}px; left:{{#expr:{{{w|60}}}*0.25 }}px; }} <!-- reverse --><br />
width: {{{w|60}}}px; <br />
height: {{{w|60}}}px;"></div><div style="display:inline-block; position: absolute; <br />
{{#ifexpr:{{{cw|0}}}=0| transform: rotate(180deg); top:{{#expr:{{{w|60}}}-1}}px; <br />
| transform: rotate(0deg); top: {{#expr:0-( ( {{{outline-width|15}}}*3+16)/2)+1+( {{{w|60}}}*0.15) }}px; }} <!-- reverse --><br />
left:{{#expr:0-( {{{outline-width|15}}}*0.6)-2+({{{w|60}}}*0.25) }}px;<br />
width: 0; height: 0; outline-width: 0px;<br />
border-left: {{#expr:{{{outline-width|15}}}*1.1+2}}px solid transparent;<br />
border-right: {{#expr:{{{outline-width|15}}}*1.1+2}}px solid transparent;<br />
border-bottom: {{#expr:{{{outline-width|15}}}*3+16}}px solid {{{shape-outline|red}}};"></div></div><br />
|ruleA=<div style="display:inline-block; position: absolute; <br />
top:{{#expr:{{{y1|120}}}-( {{{w|160}}}/2) }}px; <br />
left:{{#expr:{{{x1|220}}}-( {{{w|160}}}/2) }}px; <br />
width: {{{w|160}}}px; <br />
height: {{{w|160}}}px; <br />
transform: rotate( {{#expr:{{{angle|0}}}-90}}deg); background:transparent;"> <br />
<div style="display:inline-block; position: absolute; <br />
top:{{#expr:( {{{outline-width|5}}}*3+15) }}px;<br />
left:{{#expr:({{{w|160}}}-{{{outline-width|5}}} )/2 }}px;<br />
width: 0px; <br />
height: {{#expr: {{{w|160}}}-( {{{outline-width|5}}}*3+16) }}px;<br />
border-right: {{{outline-width|5}}}px {{{outline-style|solid}}} {{{shape-outline|red}}}; <br />
background:transparent;"></div><div style="display:inline-block; position: absolute; <br />
top: 0px;<br />
left:{{#expr:{{{w|160}}}/2-( {{{outline-width|5}}}/2)-{{{outline-width|5}}}*0.55-2 }}px;<br />
width: 0; height: 0; outline-width: 0px;<br />
border-left: {{#expr:{{{outline-width|5}}}*1.1+2}}px solid transparent;<br />
border-right: {{#expr:{{{outline-width|5}}}*1.1+2}}px solid transparent;<br />
border-bottom: {{#expr:{{{outline-width|5}}}*3+16}}px solid {{{shape-outline|red}}};"></div></div><br />
|line|=<div style="display:inline-block; position: absolute; <!-- or draw a line ----- --><br />
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; <br />
top: {{#expr:{{{y1|30}}}+( ( {{{y2|60}}}-{{{y1|30}}} )/2)-( {{{outline-width|2}}} /2) }}px; <br />
width: {{#expr:sqrt( ({{{x2|80}}}-{{{x1|40}}} )^2 + ( {{{y2|60}}}-{{{y1|30}}} )^2)-1 }}px;<br />
height: {{{double|1}}}px; background-color: transparent; <br />
outline-width: 0; border-bottom: {{{outline-width|2}}}px {{{outline-style|solid}}} {{{shape-outline|blue}}};<br />
{{#ifexpr:{{{double|1}}}>1|border-top: {{{outline-width|2}}}px {{{outline-style|solid}}} {{{shape-outline|blue}}};}}<br />
transform: rotate({{#ifeq:{{{x1|40}}}|{{{x2|80}}}|90|{{#expr:atan(( {{{y2|60}}}-{{{y1|30}}} )/( {{{x2|80}}}-{{{x1|40}}} ) )*180/pi }} }}deg);"></div> }}<noinclude><br />
Uses a CSS divs for option=<br />
*curveA: (x1,y1,w,cw, angle). curve line 'swoops' around 90deg, sort-of centered at x,y. sort-of length w, rotation of angle=. cw=1 for clockwise, 0 for anti-.<br />
*line: between two points (x1,y1) and (x2,y2). <br />
<br />
Parameters also used are outline-width, outline-style and shape-outline which provide the line-width, css line-style and line-color for all options.<br />
<br />
(Line works by calculating the centre-point, transform-angle and line-length needed and applies them to border-bottom. Maths comes with thanks to ES.)</noinclude></div>
wikipedia>RobinLeicester