|
|
| Line 1: |
Line 1: |
| <includeonly> | | <includeonly> |
|
| |
| <templatestyles src="Template:LinesOverlay_Test/styles.css" />
| |
| <div data-num="{{#invoke:String|count|{{{line1|}}}|,}}"></div>
| |
| <div id="outerLinesContainer">
| |
| {{#invoke: String
| |
| |rep
| |
| |<div class{{=}}"line" style{{=}}"
| |
| transform: rotate( calc( {{#expr: (atan (({{#explode:{{#explode:{{{line1|}}}| |0}}|,|0}} - {{#explode:{{#explode:{{{line1|}}}| |1}}|,|0}}) / ({{#explode:{{#explode:{{{line1|}}}| |1}}|,|1}} - {{#explode:{{#explode:{{{line1|}}}| |0}}|,|1}} + 0.00000001) )) }}rad {{#ifexpr: ({{#explode:{{#explode:{{{line1|}}}| |1}}|,|1}} - {{#explode:{{#explode:{{{line1|}}}| |0}}|,|1}}) < 0 | + 180deg }} ));
| |
| height: {{#expr: sqrt ((({{#explode:{{#explode:{{{line1|}}}| |1}}|,|0}} - {{#explode:{{#explode:{{{line1|}}}| |0}}|,|0}}) ^ 2) + (({{#explode:{{#explode:{{{line1|}}}| |1}}|,|1}} - {{#explode:{{#explode:{{{line1|}}}| |0}}|,|1}}) ^ 2 ) ) }}px;
| |
| width: {{{lineWidth|5}}}px;
| |
| left: {{#expr: {{#explode:{{#explode:{{{line1|}}}| |0}}|,|0}} - {{{startX|0}}} }}px;
| |
| top: {{#expr: {{#explode:{{#explode:{{{line1|}}}| |0}}|,|1}} - {{{startZ|0}}} }}px;
| |
| "></div>
| |
| |{{#expr: {{#invoke:String|count|{{{line1|}}}|,}} - 1}}
| |
| }}
| |
| </div>
| |
|
| |
| </includeonly> | | </includeonly> |
|
| |
|
| <noinclude> | | <noinclude> |
| {{LinesOverlay_Test | | <div style="max-width: 500px; max-height: 500px; position: absolute; clip-path: border-box"> |
| |line1=0,0 10,10 60,20 130,50 140,120 130,100
| | https://map.dogcraft.net/maps/sheltie/tiles/1/x-0/0/z-0/1.png |
| | </div> |
| | {{LinesOverlay| |
| | info 0,-500 |
| | station 183,-164 |
| | line lime 269,-135 276,-132 328,-126 360,-100 422,-100 436,-97 468,-82 484,-83 489,-85 543,-85 |
| | line yellow 248,-139 244,-136 245,-130 253,-126 279,-126 304,-119 312,-111 315,-99 315,-56 318,-47 323,-43 328,-41 353,-41 361,-38 363,-34 365,-29 365,-13 367,-7 373,-2 383,0 389,6 |
| }} | | }} |
| </noinclude> | | </noinclude> |
