Difference between revisions of "Develop location map"

From geofiction
Jump to navigation Jump to search
m
 
(15 intermediate revisions by the same user not shown)
Line 1: Line 1:
== Render the map ==
+
The location map template generates a location map as a composite image, consisting of a map and one or several location marks. Optionally, labels and a caption can be added.
[[File:Relief_Map_of_Germany.svg|120px|thumb|right|link=|some caption]]{{Blind text|length=20|clear=yes}}
 
  
=== Map 1 ===
+
==Render the map==
<div role="img" class="floatright noresize" <!-- noresize disables the img from being limited to the width of the viewport size (as on mobile) -->
+
===Floarting right===
    style="width: 400px;
+
<div role="img" class="floatright noresize" style="position:relative">[[File:Relief_Map_of_Germany.svg|400px|thumb|link=|Some caption]]
            margin: 2;
 
            padding: 5;
 
            border: 2;
 
            font-size: 12;
 
            line-height: 1;
 
            text-align: center;
 
            background-color: #ffffff;
 
            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]]
 
 
</div>{{Blind text|length=15|clear=yes}}
 
</div>{{Blind text|length=15|clear=yes}}
  
=== Map 2 ===
+
===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]]
            font-size: 12;
 
            line-height: 1;
 
            text-align: center;
 
            background-color: #dddddd;
 
            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]]
 
 
</div>{{Blind text|length=15|clear=yes}}
 
</div>{{Blind text|length=15|clear=yes}}
  
 +
<div role="img" class="floatleft noresize" style="position:relative">[[File:Relief_Map_of_Germany.svg|250px|thumb|link=|Some caption]]
 +
</div>{{Blind text|length=15|clear=yes}}
  
 +
[[File:Relief_Map_of_Germany.svg|250px|left|thumb|link=|Some caption]]{{Blind text|length=15|clear=yes}}
  
== Position place marker ==
+
[[File:Relief_Map_of_Germany.svg|250px|right|thumb|link=|Some caption]]{{Blind text|length=15|clear=yes}}
=== Illustrative example: checkered pattern with markers ===
+
 
<div role="img" class="floatright" style="width:500px; position:relative;>
+
==Position place markers==
 +
===Checkered pattern with markers===
 +
<div role="img" class="floatright" style="width:500px; position:relative">
 
[[File:Surrey.svg|500px|link=]]
 
[[File:Surrey.svg|500px|link=]]
 
<!-- marker -->
 
<!-- marker -->
Line 66: Line 53:
 
     position:absolute;
 
     position:absolute;
 
     float:left;
 
     float:left;
     left:{{#expr:-50-5}}px;
+
     left:{{#expr:-10-5}}px;
 
     top:{{#expr:150-5}}px;
 
     top:{{#expr:150-5}}px;
 
">[[File:Red pog.png|10px|link=Main Page]]
 
">[[File:Red pog.png|10px|link=Main Page]]
Line 72: Line 59:
 
</div>{{Blind text|length=15|clear=yes}}
 
</div>{{Blind text|length=15|clear=yes}}
  
=== Illustrative example: use relative positions ===
+
===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 -->
 +
<div style="
 +
    position:absolute;
 +
    float:left;
 +
    left:{{#expr:100-5-5}}px;
 +
    top:{{#expr:200-5+5}}px;
 +
">[[File:Red pog.png|10px|link=Main Page]]
 +
</div>
 +
<!-- marker -->
 +
<div style="
 +
    position:absolute;
 +
    float:left;
 +
    left:{{#expr:50-5-5}}px;
 +
    top:{{#expr:50-5+5}}px;
 +
">[[File:Red pog.png|10px|link=Main Page]]
 +
</div>
 +
<!-- marker -->
 +
<div style="
 +
    position:absolute;
 +
    float:left;
 +
    left:{{#expr:500-5-5}}px;
 +
    top:{{#expr:300-5+5}}px;
 +
">[[File:Red pog.png|10px|link=Main Page]]
 +
</div>
 +
</div>{{Blind text|length=5|clear=yes}}
 +
 
 +
===Using relative positions===
 +
<div role="img" class="floatright" style="width:500px; position:relative">
 
[[File:Surrey.svg|500px|link=]]
 
[[File:Surrey.svg|500px|link=]]
 
<!-- marker -->
 
<!-- marker -->
Line 85: Line 101:
 
</div>{{Blind text|length=15|clear=yes}}
 
</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=]]
 
[[File:Surrey.svg|250px|link=]]
 
<!-- marker -->
 
<!-- marker -->
Line 97: Line 113:
 
</div>{{Blind text|length=5|clear=yes}}
 
</div>{{Blind text|length=5|clear=yes}}
  
== Add text to marker/position ==
+
==Add text to markers/positions==
 
+
<div role="img" class="floatright" style="width:500px; position:relative">
 
+
[[File:Surrey.svg|500px|thumb|link=|Some caption]]
 
+
<!-- marker -->
 
+
<div style="
 
+
    position:absolute;
 
+
    float:left;
<!--
+
    left:{{#expr:100-5-5}}px;
 
+
    top:{{#expr:200-5+5}}px;
#################### place marker
+
">[[File:Red pog.png|10px|link=Main Page]]
 
 
--><div style="position:absolute; float:left;
 
<!--  x_relative = x_marker_orig / x_orig * x_scaled - marker_size / 2 + x_adjust  -->
 
left:{{#expr:
 
      {{{x |{{{x_marker_orig |{{{x-marker-orig |1 }}} }}} }}}
 
    / {{{x_orig |{{{width_orig |{{{x-orig |{{{width-orig |1 }}} }}} }}} }}}
 
    * {{{scale |{{{width |{{{x_scaled |{{{x-scaled |250 }}} }}} }}} }}}
 
  -  {{{marker_size |{{{marker-size |7 }}} }}}
 
    / 2
 
  +  {{{x_adjust |{{{x-adjust |0 }}} }}}
 
}}px;
 
<!--  y_relative = y_marker_orig / y_orig * y_scaled - marker_size / 2 + y_adjust
 
        where
 
      y_scaled = x_scaled / x_orig * y_orig  -->
 
top:{{#expr:
 
      {{{y |{{{y_marker_orig |{{{y-marker-orig |1 }}} }}} }}}
 
    / {{{y_orig |{{{height_orig |{{{y-orig |{{{height-orig |1 }}} }}} }}} }}}
 
    * {{{height |{{{y_scaled |{{{y-scaled |
 
        {{{scale |{{{width |{{{x_scaled |{{{x-scaled |250 }}} }}} }}} }}}
 
      / {{{x_orig |{{{width_orig |{{{x-orig |{{{width-orig |1 }}} }}} }}} }}}
 
      * {{{y_orig |{{{height_orig |{{{y-orig |{{{height-orig |1 }}} }}} }}} }}}
 
      }}} }}} }}}
 
  -  {{{marker_size |{{{marker-size |7 }}} }}}
 
    / 2
 
  +  {{{y_adjust |{{{y-adjust |0 }}} }}}
 
}}px;
 
">[[File:Red pog.png|9px|link={{{link|}}} ]]</div><!--
 
 
 
#################### 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  -->
 
left:{{#expr:  
 
      {{{x |{{{x_marker_orig |{{{x-marker-orig |1 }}} }}} }}}
 
    / {{{x_orig |{{{width_orig |{{{x-orig |{{{width-orig |1 }}} }}} }}} }}}
 
    * {{{scale |{{{width |{{{x_scaled |{{{x-scaled |250 }}} }}} }}} }}}
 
    +  {{{marker_size |{{{marker-size |7 }}} }}}
 
      / 2
 
    +  {{{x_textadjust |{{{x-textadjust |3 }}} }}}
 
  +  {{{x_adjust |{{{x-adjust |0 }}} }}}
 
}}px;
 
<!--  y_relative = y_marker_orig / y_orig * y_scaled - marker_size / 2 + y_adjust + y_textadjust
 
        where
 
      y_scaled = x_scaled / x_orig * y_orig  -->
 
top:{{#expr:
 
      {{{y |{{{y_marker_orig |{{{y-marker-orig |1 }}} }}} }}}
 
    / {{{y_orig |{{{height_orig |{{{y-orig |{{{height-orig |1 }}} }}} }}} }}}
 
    * {{{height |{{{y_scaled |{{{y-scaled |
 
        {{{scale |{{{width |{{{x_scaled |{{{x-scaled |250 }}} }}} }}} }}}
 
      / {{{x_orig |{{{width_orig |{{{x-orig |{{{width-orig |1 }}} }}} }}} }}}
 
      * {{{y_orig |{{{height_orig |{{{y-orig |{{{height-orig |1 }}} }}} }}} }}}
 
      }}} }}} }}}
 
  -  {{{marker_size |{{{marker-size |7 }}} }}}
 
      / 2
 
  +   {{{y_adjust |{{{y-adjust |0 }}} }}}
 
  +  {{{y_textadjust |{{{y-textadjust |0 }}} }}}
 
}}px;
 
<!--  The rest of the css-options.
 
      Clumsy way to do it because of unwanted extra spaces and broken CSS otherwise.  -->
 
  color:{{#if: {{{text_color |{{{text-color |{{{color | }}} }}} }}}
 
    | {{#if: {{{text_color|}}} |{{{text_color}}}
 
      |{{#if: {{{text-color|}}} |{{{text-color}}}
 
        |{{#if: {{{color|}}} |{{{color}}}
 
      }} }} }}
 
    |black }};
 
  text-align:{{#if: {{{text_align |{{{text-align | }}} }}}
 
    | {{#if: {{{text_align|}}} |{{{text_align}}}
 
      |{{#if: {{{text-align|}}} |{{{text-align}}}
 
      }} }}
 
    |left }};
 
  {{#if: {{{text_width |{{{text-width | }}} }}}
 
    |width:{{#if: {{{text_width|}}} |{{{text_width}}}
 
      |{{#if: {{{text-width|}}} |{{{text-width}}}
 
      }}
 
    }}; }}
 
  {{#if: {{{font_size |{{{font-size | }}} }}}
 
    |font-size:{{#if: {{{font_size|}}} |{{{font_size}}}
 
      |{{#if: {{{font-size|}}} |{{{font-size}}}
 
      }}
 
    }}; }}
 
  {{#if: {{{style | }}}
 
    |{{{style}}}
 
    }}
 
">{{{text|}}}</div>
 
|}}</includeonly><noinclude>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
==Further issues==
 
 
 
 
 
 
 
 
 
<!--{{MER-location map test1a | image=Mergany Detailmap.png | width=350 | float=right | title=Example }}
 
{{MER-location map test1b | x=1079 | y=1033 | image=Marker-question.png | marker_size=25 | width=250 | x_orig=2749 | link=Mergany }}
 
{{MER-location map test1b | x=1601 | y=1020 | image=Marker-question.png | marker_size=15 | width=250 | x_orig=2749 | link=EUOIA}}
 
</div>-->
 
 
 
{{Blind text|length=15}}
 
 
 
{{MER-location map test1a | image=Mergany Detailmap.png | width=250 | float=right | thumb = yes | caption=Example }}
 
{{MER-location marker | x=0 | y=0 | link=Stanncatt | x_orig=120 | text=Stanncatt | font-size=12px }}
 
{{MER-location marker | x=10 | y=10 | link=Gausbrug | x_orig=120 | text=Gausbrug | font-size=12px }}
 
{{MER-location marker | x=100 | y=100 | link=Gausbrug | x_orig=120 |text=Gausbrug | font-size=12px }}
 
{{MER-location marker | x=1079 | y=1033 | width=250 | x_orig=2749 | link=Mergany | text=test | font-size=12px }}
 
 
</div>
 
</div>
 
+
<div style="
<!--=Scale image=
+
    position:absolute;
{{MER-stub | article = test | textlong = yes}}
+
    float:left;
{{MER-location map test1a | image=Mergany Detailmap.png | width=120 | float=right | thumb = yes | caption=Example }}
+
    left:{{#expr:100-5-5+15}}px;
{{MER-location marker | x=10 | y=0 | link= | x_orig=120 | text=pos 0 0 | font-size=12px }}
+
    top:{{#expr:200-5+5+2}}px;
 +
    text-align:left;
 +
">'''[[Main Page|HXXXX]]'''</div>
 +
<!-- marker -->
 +
<div style="
 +
    position:absolute;
 +
    float:left;
 +
    left:{{#expr:300-5-5}}px;
 +
    top:{{#expr:100-5+5}}px;
 +
">[[File:Red pog.png|10px|link=Main Page]]
 
</div>
 
</div>
 +
<div style="
 +
    position:absolute;
 +
    float:left;
 +
    left:{{#expr:300-5-5-15}}px;
 +
    top:{{#expr:100-5+5+2}}px;
 +
    text-align:right;
 +
">'''[[Main Page|XXXXH]]'''</div>
 +
</div>{{Blind text|length=5|clear=yes}}
  
{{MER-stub | article = test | textlong = yes}}
+
==Using final template==
{{MER-location map test1a | image=Mergany Detailmap.png | width=120 | float=right | thumb = yes | caption=Example }}
+
<pre></pre>
{{MER-location marker | x=10 | y=0 | link= | x_orig=180 | text=pos 0 0 | font-size=12px }}
+
{{Locationmap|map=Relief_Map_of_Germany.svg|width=150|caption=Some text here
</div>-->
+
|m1=0.1/1.1
 
+
|m2=0.5/0.5
 
+
|m3=0.3/0.1
[[Template:MER-location marker]]
+
|m4=0.3/0.15
 
+
|m5=0.7/0.7
[[Template:MER-location map test1a]]
+
|m6=0.6/0.6
 +
|m7=0.4/0.4
 +
|m8=0.3/0.3
 +
|m9=0.3/0.31
 +
|m10=0.2/0.2
 +
}}

Latest revision as of 21:55, 14 September 2022

The location map template generates a location map as a composite image, consisting of a map and one or several location marks. Optionally, labels and a caption can be added.

Render the map

Floarting right

This section is a blind text and will be expanded hopefully soon. Similar blind texts will be edited and expanded by the corresponding territory's owner. If you have any ideas about it, feel free to participate and edit this section. However, please respect other people's previous work – if you want to change already-developed ideas, contact the author. A stub is an article that, although sometimes providing more or less useful information, is too short to provide OGF encyclopedic coverage of a subject, and that is capable of expansion. Also non-article pages, such as disambiguation pages, lists, categories, templates, talk pages, and redirects, can be regarded as stubs. Due to the lack of time, some stub articles have little verifiable information, but its subject has an apparent notability. Stub articles and sections are very important to the life of a wiki. Adding a topic might inspire another community member to add to it, and eventually the topic has enough content to be valuable to the community. Stub pages help show the progressive nature of the wiki. Sizable articles are usually not considered stubs, even if they have significant problems or are noticeably incomplete. Over the years, different editors have followed different rules of thumb to help them decide when an article is likely to be a stub. Editors may decide that an article with more than ten sentences is too big to be a stub, or that the threshold for another article may be 250 words. Others follow other standards of e.g. 1500 characters in the main text. There is no set size at which an article stops being a stub.

Floarting left

This section is a blind text and will be expanded hopefully soon. Similar blind texts will be edited and expanded by the corresponding territory's owner. If you have any ideas about it, feel free to participate and edit this section. However, please respect other people's previous work – if you want to change already-developed ideas, contact the author. A stub is an article that, although sometimes providing more or less useful information, is too short to provide OGF encyclopedic coverage of a subject, and that is capable of expansion. Also non-article pages, such as disambiguation pages, lists, categories, templates, talk pages, and redirects, can be regarded as stubs. Due to the lack of time, some stub articles have little verifiable information, but its subject has an apparent notability. Stub articles and sections are very important to the life of a wiki. Adding a topic might inspire another community member to add to it, and eventually the topic has enough content to be valuable to the community. Stub pages help show the progressive nature of the wiki. Sizable articles are usually not considered stubs, even if they have significant problems or are noticeably incomplete. Over the years, different editors have followed different rules of thumb to help them decide when an article is likely to be a stub. Editors may decide that an article with more than ten sentences is too big to be a stub, or that the threshold for another article may be 250 words. Others follow other standards of e.g. 1500 characters in the main text. There is no set size at which an article stops being a stub.

This section is a blind text and will be expanded hopefully soon. Similar blind texts will be edited and expanded by the corresponding territory's owner. If you have any ideas about it, feel free to participate and edit this section. However, please respect other people's previous work – if you want to change already-developed ideas, contact the author. A stub is an article that, although sometimes providing more or less useful information, is too short to provide OGF encyclopedic coverage of a subject, and that is capable of expansion. Also non-article pages, such as disambiguation pages, lists, categories, templates, talk pages, and redirects, can be regarded as stubs. Due to the lack of time, some stub articles have little verifiable information, but its subject has an apparent notability. Stub articles and sections are very important to the life of a wiki. Adding a topic might inspire another community member to add to it, and eventually the topic has enough content to be valuable to the community. Stub pages help show the progressive nature of the wiki. Sizable articles are usually not considered stubs, even if they have significant problems or are noticeably incomplete. Over the years, different editors have followed different rules of thumb to help them decide when an article is likely to be a stub. Editors may decide that an article with more than ten sentences is too big to be a stub, or that the threshold for another article may be 250 words. Others follow other standards of e.g. 1500 characters in the main text. There is no set size at which an article stops being a stub.

Some caption

This section is a blind text and will be expanded hopefully soon. Similar blind texts will be edited and expanded by the corresponding territory's owner. If you have any ideas about it, feel free to participate and edit this section. However, please respect other people's previous work – if you want to change already-developed ideas, contact the author. A stub is an article that, although sometimes providing more or less useful information, is too short to provide OGF encyclopedic coverage of a subject, and that is capable of expansion. Also non-article pages, such as disambiguation pages, lists, categories, templates, talk pages, and redirects, can be regarded as stubs. Due to the lack of time, some stub articles have little verifiable information, but its subject has an apparent notability. Stub articles and sections are very important to the life of a wiki. Adding a topic might inspire another community member to add to it, and eventually the topic has enough content to be valuable to the community. Stub pages help show the progressive nature of the wiki. Sizable articles are usually not considered stubs, even if they have significant problems or are noticeably incomplete. Over the years, different editors have followed different rules of thumb to help them decide when an article is likely to be a stub. Editors may decide that an article with more than ten sentences is too big to be a stub, or that the threshold for another article may be 250 words. Others follow other standards of e.g. 1500 characters in the main text. There is no set size at which an article stops being a stub.

Some caption

This section is a blind text and will be expanded hopefully soon. Similar blind texts will be edited and expanded by the corresponding territory's owner. If you have any ideas about it, feel free to participate and edit this section. However, please respect other people's previous work – if you want to change already-developed ideas, contact the author. A stub is an article that, although sometimes providing more or less useful information, is too short to provide OGF encyclopedic coverage of a subject, and that is capable of expansion. Also non-article pages, such as disambiguation pages, lists, categories, templates, talk pages, and redirects, can be regarded as stubs. Due to the lack of time, some stub articles have little verifiable information, but its subject has an apparent notability. Stub articles and sections are very important to the life of a wiki. Adding a topic might inspire another community member to add to it, and eventually the topic has enough content to be valuable to the community. Stub pages help show the progressive nature of the wiki. Sizable articles are usually not considered stubs, even if they have significant problems or are noticeably incomplete. Over the years, different editors have followed different rules of thumb to help them decide when an article is likely to be a stub. Editors may decide that an article with more than ten sentences is too big to be a stub, or that the threshold for another article may be 250 words. Others follow other standards of e.g. 1500 characters in the main text. There is no set size at which an article stops being a stub.

Position place markers

Checkered pattern with markers

This section is a blind text and will be expanded hopefully soon. Similar blind texts will be edited and expanded by the corresponding territory's owner. If you have any ideas about it, feel free to participate and edit this section. However, please respect other people's previous work – if you want to change already-developed ideas, contact the author. A stub is an article that, although sometimes providing more or less useful information, is too short to provide OGF encyclopedic coverage of a subject, and that is capable of expansion. Also non-article pages, such as disambiguation pages, lists, categories, templates, talk pages, and redirects, can be regarded as stubs. Due to the lack of time, some stub articles have little verifiable information, but its subject has an apparent notability. Stub articles and sections are very important to the life of a wiki. Adding a topic might inspire another community member to add to it, and eventually the topic has enough content to be valuable to the community. Stub pages help show the progressive nature of the wiki. Sizable articles are usually not considered stubs, even if they have significant problems or are noticeably incomplete. Over the years, different editors have followed different rules of thumb to help them decide when an article is likely to be a stub. Editors may decide that an article with more than ten sentences is too big to be a stub, or that the threshold for another article may be 250 words. Others follow other standards of e.g. 1500 characters in the main text. There is no set size at which an article stops being a stub.

Map in outer box

This section is a blind text and will be expanded hopefully soon. Similar blind texts will be edited and expanded by the corresponding territory's owner. If you have any ideas about it, feel free to participate and edit this section. However, please respect other people's previous work – if you want to change already-developed ideas, contact the author. A stub is an article that, although sometimes providing more or less useful information, is too short to provide OGF encyclopedic coverage of a subject, and that is capable of expansion.

Using relative positions

This section is a blind text and will be expanded hopefully soon. Similar blind texts will be edited and expanded by the corresponding territory's owner. If you have any ideas about it, feel free to participate and edit this section. However, please respect other people's previous work – if you want to change already-developed ideas, contact the author. A stub is an article that, although sometimes providing more or less useful information, is too short to provide OGF encyclopedic coverage of a subject, and that is capable of expansion. Also non-article pages, such as disambiguation pages, lists, categories, templates, talk pages, and redirects, can be regarded as stubs. Due to the lack of time, some stub articles have little verifiable information, but its subject has an apparent notability. Stub articles and sections are very important to the life of a wiki. Adding a topic might inspire another community member to add to it, and eventually the topic has enough content to be valuable to the community. Stub pages help show the progressive nature of the wiki. Sizable articles are usually not considered stubs, even if they have significant problems or are noticeably incomplete. Over the years, different editors have followed different rules of thumb to help them decide when an article is likely to be a stub. Editors may decide that an article with more than ten sentences is too big to be a stub, or that the threshold for another article may be 250 words. Others follow other standards of e.g. 1500 characters in the main text. There is no set size at which an article stops being a stub.

This section is a blind text and will be expanded hopefully soon. Similar blind texts will be edited and expanded by the corresponding territory's owner. If you have any ideas about it, feel free to participate and edit this section. However, please respect other people's previous work – if you want to change already-developed ideas, contact the author. A stub is an article that, although sometimes providing more or less useful information, is too short to provide OGF encyclopedic coverage of a subject, and that is capable of expansion.

Add text to markers/positions

This section is a blind text and will be expanded hopefully soon. Similar blind texts will be edited and expanded by the corresponding territory's owner. If you have any ideas about it, feel free to participate and edit this section. However, please respect other people's previous work – if you want to change already-developed ideas, contact the author. A stub is an article that, although sometimes providing more or less useful information, is too short to provide OGF encyclopedic coverage of a subject, and that is capable of expansion.

Using final template