View source for Template:HexMap

<div style="position:relative;display:grid;grid:auto-flow calc(0.5px*{{{x|67.195}}})/repeat({{{w|auto-fit}}},calc(0.75px*{{{x|67.195}}}/cos(30deg)));{{{|g}}}rid:auto-flow calc(0.75px*{{{x|67.195}}}/cos(30deg))/repeat({{{w|auto-fit}}},calc(0.5px*{{{x|67.195}}}));place-items:center;gap:calc(1px*{{{gap|0}}});width:fit-content;max-width:100vw;background:{{{bg|transparent}}};border-radius:8px;padding:16px;margin-top:8px;white-space:nowrap;"><div style="position:absolute;display:flex;{{{n|display:none}}};justify-content:center;align-items:center;top:8px;left:16px;padding:4px;width:fit-content;min-width:28px;min-height:28px;background:{{{n-bg|#199}}};border-radius:28px;line-height:1;color:{{{n-c|#fff}}};font-family:Roboto,Arial,sans-serif;font-weight:700;font-size:24px;">{{{n|}}}</div>{{{1|}}}</div><noinclude>

A map for '''[[Template:Hex]]es''' and other hexagonal pieces.

== Examples ==

=== [[Gamehelphive|Hive]] ===

{{hexMap|

{{hiveAnt           |r=3  |x=1 |y=2 }}
{{hiveBeetle        |r=1  |x=2 |y=3 }}
{{hiveGrasshopper   |r=11 |x=4 |y=3 }}
{{hiveSpider        |r=9  |x=5 |y=2 }}

{{hiveBee|w=        |r=0  |x=3 |y=2 }}
{{hiveGrasshopper|w=|r=0  |x=2 |y=1 }}
{{hiveSpider|w=     |r=0  |x=4 |y=1 }}
}}

<pre style="background:none;border:none;">
{{hexMap|gap=2|

{{hiveAnt           |r=3  |x=1 |y=2 }}
{{hiveBeetle        |r=1  |x=2 |y=3 }}
{{hiveGrasshopper   |r=11 |x=4 |y=3 }}
{{hiveSpider        |r=9  |x=5 |y=2 }}

{{hiveBee|w=        |r=0  |x=3 |y=2 }}
{{hiveGrasshopper|w=|r=0  |x=2 |y=1 }}
{{hiveSpider|w=     |r=0  |x=4 |y=1 }}
}}
</pre>
----
<div style="display:flex;gap:0 8px;flex-wrap:wrap;">
{{hexMap |n=1 |
{{hex |x=3 |y=1 |{{TaluvaSand}} |{{meeple|red}}
}}
{{hex |x=5 |y=1 |{{TaluvaSand}}
}}
{{hex |x=7 |y=1 |{{TaluvaSand}}
}}
{{hex |x=2 |y=2 |{{TaluvaSand}}
}}
{{hex |x=4 |y=2 |{{TaluvaJungle}} |{{meeple|green}}
}}
{{hex |x=6 |y=2 |{{TaluvaJungle}}
}}
{{hex |x=8 |y=2 |{{TaluvaJungle}}
}}
{{hex |x=1 |y=3 |{{TaluvaSand}}
}}
{{hex |x=3 |y=3 |{{TaluvaJungle}}
}}
{{hex |x=5 |y=3 |{{TaluvaClearing}} |{{meeple|blue}}
}}
{{hex |x=7 |y=3 |{{TaluvaClearing}} |{{meeple|red}}
}}
{{hex |x=2 |y=4 |{{TaluvaSand}} |{{meeple|green}}
}}
{{hex |x=4 |y=4 |{{TaluvaJungle}}
}}
{{hex |x=6 |y=4 |{{TaluvaClearing}} |{{meeple|blue}}
}}
{{hex |x=8 |y=4 |{{TaluvaClearing}}
}}
}}

{{hexMap |n=2 |
{{hex |x=3 |y=1 |{{TaluvaSand}} |{{meeple|red}}
}}
{{hex |x=5 |y=1 |{{TaluvaSand}}
}}
{{hex |x=7 |y=1 |{{TaluvaSand}}
}}
{{hex |x=2 |y=2 |{{TaluvaSand}} |{{meeple|red}}
}}
{{hex |x=4 |y=2 |{{TaluvaJungle}} |{{meeple|green}}
}}
{{hex |x=6 |y=2 |{{TaluvaJungle}} |{{meeple|green}}
}}
{{hex |x=8 |y=2 |{{TaluvaJungle}}
}}
{{hex |x=1 |y=3 |{{TaluvaSand}}
}}
{{hex |x=3 |y=3 |{{TaluvaJungle}}
}}
{{hex |x=5 |y=3 |{{TaluvaClearing}} |{{meeple|blue}}
}}
{{hex |x=7 |y=3 |{{TaluvaClearing}} |{{meeple|red}}
}}
{{hex |x=2 |y=4 |{{TaluvaSand}} |{{meeple|green}}
}}
{{hex |x=4 |y=4 |{{TaluvaJungle}}
}}
{{hex |x=6 |y=4 |{{TaluvaClearing}} |{{meeple|blue}}{{meeple|blue}}
}}
{{hex |x=8 |y=4 |{{TaluvaClearing}}
}}
}}
</div>

<pre style="background:none;border:none;">
{{hexMap |n=1 |
{{hex |x=3 |y=1 |{{TaluvaSand}} |{{meeple|red}}
}}
{{hex |x=5 |y=1 |{{TaluvaSand}}
}}
{{hex |x=7 |y=1 |{{TaluvaSand}}
}}
{{hex |x=2 |y=2 |{{TaluvaSand}}
}}
{{hex |x=4 |y=2 |{{TaluvaJungle}} |{{meeple|green}}
}}
{{hex |x=6 |y=2 |{{TaluvaJungle}}
}}
{{hex |x=8 |y=2 |{{TaluvaJungle}}
}}
{{hex |x=1 |y=3 |{{TaluvaSand}}
}}
{{hex |x=3 |y=3 |{{TaluvaJungle}}
}}
{{hex |x=5 |y=3 |{{TaluvaClearing}} |{{meeple|blue}}
}}
{{hex |x=7 |y=3 |{{TaluvaClearing}} |{{meeple|red}}
}}
{{hex |x=2 |y=4 |{{TaluvaSand}} |{{meeple|green}}
}}
{{hex |x=4 |y=4 |{{TaluvaJungle}}
}}
{{hex |x=6 |y=4 |{{TaluvaClearing}} |{{meeple|blue}}
}}
{{hex |x=8 |y=4 |{{TaluvaClearing}}
}}
}}
</pre>

== Parameters ==

<div style="display:grid;grid-template-columns:repeat(3,max-content) 1fr;gap:0 0.25rem;overflow:auto;text-overflow:ellipsis;">
  <div style="font-weight:bold;width:8rem;">Parameter</div>
  <div style="font-weight:bold;width:8rem;">Default value</div>
  <div style="font-weight:bold;width:8rem;">Example</div>
  <div style="font-weight:bold;width:8rem;">Description</div>
  <div><code>1</code></div>
  <div><code>null</code></div>
  <div><code><nowiki>{{HexMap |{{hex}} }}</nowiki></code></div>
  <div>'''''Optional:''''' place '''[[Template:Hex]]''' tiles on the map.</div>
  <div><code>x</code></div>
  <div><code>67.195</code></div>
  <div><code><nowiki>{{hexMap |x=80 }}</nowiki></code></div>
  <div>'''''Optional:''''' specify the grid hex width in px units.</div>
  <div><code>gap</code></div>
  <div><code>0</code></div>
  <div><code><nowiki>{{hexMap |gap=4 }}</nowiki></code></div>
  <div>'''''Optional:''''' specify the gap between hexes in px units.</div>
  <div><code>w</code></div>
  <div><code>auto-fit</code></div>
  <div><code><nowiki>{{hexMap |w=20 }}</nowiki></code></div>
  <div>'''''Optional:''''' specify the grid width in hexes.</div>
  <div><code>bg</code></div>
  <div><code>transparent</code></div>
  <div><code><nowiki>{{hexMap |bg=green }}</nowiki></code></div>
  <div>'''''Optional:''''' specify the background as a [https://developer.mozilla.org/en-US/docs/Web/CSS/color CSS color].</div>
  <div><code>n</code></div>
  <div><code>null</code></div>
  <div><code><nowiki>{{HexMap |n=1 }}</nowiki></code></div>
  <div>'''''Optional:''''' specify text in the top left corner of the map.</div>
  <div><code>n-c</code></div>
  <div><code>#fff</code> (white)</div>
  <div><code><nowiki>{{hexMap |n-c=green }}</nowiki></code></div>
  <div>'''''Optional:''''' specify the text color as a [https://developer.mozilla.org/en-US/docs/Web/CSS/color CSS color].</div>
  <div><code>n-bg</code></div>
  <div><code>#199</code> (teal)</div>
  <div><code><nowiki>{{hexMap |n-bg=green }}</nowiki></code></div>
  <div>'''''Optional:''''' specify the text background as a [https://developer.mozilla.org/en-US/docs/Web/CSS/color CSS color].</div>
</div>

[[Category:GameBoardTemplates]]
</noinclude>