Develop location map - Revision history

Admin: /* Add text to markers/positions */

2022-09-14T20:55:50Z

Add text to markers/positions

2022-09-14T20:42:30Z

2022-09-14T20:35:57Z

Map in outer box

2022-09-14T20:13:41Z

Using final template

2022-09-14T20:11:42Z

Using final template

2022-09-14T19:52:36Z

Floarting left

2022-09-14T19:45:52Z

Render the map

2022-09-14T19:32:52Z

2022-09-14T18:54:59Z

2022-09-14T14:18:51Z

Checkered pattern with markers

@@ Line 127: / Line 127: @@
       position:absolute;
       float:left;
-      left:{{#expr:100-5-5}}px;
+      left:{{#expr:100-5-5+15}}px;
-      top:{{#expr:200-5+5}}px;
+      top:{{#expr:200-5+5+2}}px;
-">Text</div>
+     text-align:left;
 </div>{{Blind text|length=5|clear=yes}}

@@ Line 23: / Line 23: @@
 ==Position place markers==
 ===Checkered pattern with markers===
-<div role="img" class="floatright" style="width:500px; position:relative;>
+<div role="img" class="floatright" style="width:500px; position:relative">
 [[File:Surrey.svg|500px|link=]]
 <!-- marker -->
@@ Line 89: / Line 89: @@
 ===Using relative positions===
-<div role="img" class="floatright" style="width:500px; position:relative;>
+<div role="img" class="floatright" style="width:500px; position:relative">
 [[File:Surrey.svg|500px|link=]]
 <!-- marker -->
@@ Line 101: / Line 101: @@
 </div>{{Blind text|length=15|clear=yes}}
-<div role="img" class="floatright" style="width:250px; position:relative;>
+<div role="img" class="floatright" style="width:250px; position:relative">
 [[File:Surrey.svg|250px|link=]]
 <!-- marker -->
@@ Line 114: / Line 114: @@
 ==Add text to markers/positions==
+<div role="img" class="floatright" style="width:500px; position:relative">
+[[File:Surrey.svg|500px|thumb|link=|Some caption]]
 ==Using final template==
 <pre></pre>
 {{Locationmap|map=Relief_Map_of_Germany.svg|width=150|caption=Some text here
@@ Line 131: / Line 145: @@
 |m9=0.3/0.31
 |m10=0.2/0.2
-}}{{clear}}
+}}

@@ Line 60: / Line 60: @@
 ===Map in outer box===
-<div role="img" class="floatright" style="width:500px; position:relative;>
+<div role="img" class="floatright" style="width:500px; position:relative">
 [[File:Surrey.svg|500px|thumb|link=|Some caption]]
 <!-- marker -->

@@ Line 120: / Line 120: @@
 <pre></pre>
-{{Locationmap|map=Relief_Map_of_Germany.svg|width=250|caption=Some text here
+{{Locationmap|map=Relief_Map_of_Germany.svg|width=150|caption=Some text here
 |m1=0.1/1.1
 |m2=0.5/0.5
@@ Line 131: / Line 131: @@
 |m9=0.3/0.31
 |m10=0.2/0.2
-}}
+}}{{clear}}
 ==old==

@@ Line 120: / Line 120: @@
 <pre></pre>
-{{Location_map|map=Relief_Map_of_Germany.svg|width=250
+{{Locationmap|map=Relief_Map_of_Germany.svg|width=250|caption=Some text here
-|m1=0.4/1.04
+|m1=0.1/1.1
 }}
 ==old==

@@ Line 3: / Line 3: @@
 ==Render the map==
 ===Floarting right===
-<div role="img" class="floatright noresize" <!-- noresize disables the img from being limited to the width of the viewport size (as on mobile) -->
+<div role="img" class="floatright noresize" style="position:relative">[[File:Relief_Map_of_Germany.svg|400px|thumb|link=|Some caption]]
 </div>{{Blind text|length=15|clear=yes}}
 ===Floarting left===
-<div role="img" class="floatleft noresize" <!-- noresize disables the img from being limited to the width of the viewport size (as on mobile) -->
+<div role="img" class="floatleft noresize" style="
-     style="width: 250px;
+     position:relative;
-            <!--margin: 2;
+     max-width:100%;
-            padding: 5;
+     overflow-x:auto
-            border: 2;
+">[[File:Relief_Map_of_Germany.svg|250px|thumb|link=|Some caption]]
 </div>{{Blind text|length=15|clear=yes}}

@@ Line 5: / Line 5: @@
 <div role="img" class="floatright noresize" <!-- noresize disables the img from being limited to the width of the viewport size (as on mobile) -->
       style="width: 400px;
-             margin: 2;
+             <!--margin: 2;
              padding: 5;
              border: 2;
@@ Line 11: / Line 11: @@
              line-height: 1;
              text-align: center;
-             background-color: #ffffff;
+             background-color: #ffffff;-->
              position: relative;
              max-width: 100%; <!-- deals with large images on mobile overflowing -->
@@ Line 20: / Line 20: @@
 <div role="img" class="floatleft noresize" <!-- noresize disables the img from being limited to the width of the viewport size (as on mobile) -->
       style="width: 250px;
-             margin: 2;
+             <!--margin: 2;
              padding: 5;
              border: 2;
@@ Line 26: / Line 26: @@
              line-height: 1;
              text-align: center;
-             background-color: #dddddd;
+             background-color: #ffffff;-->
              position: relative;
              max-width: 100%; <!-- deals with large images on mobile overflowing -->

@@ Line 14: / Line 14: @@
              position: relative;
              max-width: 100%; <!-- deals with large images on mobile overflowing -->
-             overflow-x: auto">[[File:Relief_Map_of_Germany.svg|400px|link=|Some caption]]
+             overflow-x: auto">[[File:Relief_Map_of_Germany.svg|400px|thumb|link=|Some caption]]
 </div>{{Blind text|length=15|clear=yes}}
@@ Line 29: / Line 29: @@
              position: relative;
              max-width: 100%; <!-- deals with large images on mobile overflowing -->
-             overflow-x: auto">[[File:Relief_Map_of_Germany.svg|250px|link=|Some caption]]
+             overflow-x: auto">[[File:Relief_Map_of_Germany.svg|250px|thumb|link=|Some caption]]
 </div>{{Blind text|length=15|clear=yes}}
@@ Line 131: / Line 131: @@
 <pre></pre>
-{{{Location_map}}}
+{{Location_map|map=Relief_Map_of_Germany.svg|width=250
---><div style="position:absolute; float:left;
+==old==
-#################### place text
+{{#if: {{{text|}}}
 |<div style="position:absolute; float:left;
 <!--  x_relative = x_marker_orig / x_orig * x_scaled + marker_size / 2 + x_adjust + x_textadjust  -->

@@ Line 64: / Line 64: @@
       position:absolute;
       float:left;
-      left:{{#expr:-50-5}}px;
+      left:{{#expr:-10-5}}px;
       top:{{#expr:150-5}}px;
 ">[[File:Red pog.png|10px|link=Main Page]]