Template:OSM Location map/cssline: Difference between revisions

Content deleted Content added

Inline

Latest revision as of 22:16, 19 June 2024

Uses a CSS divs for option=

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-.
line: between two points (x1,y1) and (x2,y2).

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.

(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.)

@@ Line 23: / Line 23: @@
   border-bottom: {{#expr:{{{outline-width|15}}}*3+16}}px solid {{{shape-outline|red}}};"></div></div>
 |ruleA=<div style="display:inline-block; position: absolute;
-  top:{{#expr:{{{y|120}}}-( {{{w|160}}}/2) }}px;
+  top:{{#expr:{{{|120}}}-( {{{w|160}}}/2) }}px;
-  left:{{#expr:{{{x|220}}}-( {{{w|160}}}/2) }}px;
+  left:{{#expr:{{{|220}}}-( {{{w|160}}}/2) }}px;
   width: {{{w|160}}}px;
   height: {{{w|160}}}px;