From c29f3b73e81a93e54165a421b69afcfd77d31fd7 Mon Sep 17 00:00:00 2001
From: Azgaar <azgaar.fmg@yandex.com>
Date: Thu, 2 Jan 2025 03:36:29 +0100
Subject: [PATCH] feat: burg groups - image icons

---
 icon.svg                              |  24 +++
 index.html                            | 141 ++++++++++++++++-
 main.js                               |   2 +-
 modules/renderers/draw-burg-icons.js  |  12 ++
 modules/renderers/draw-burg-labels.js |   5 +
 modules/ui/general.js                 |   2 +-
 modules/ui/style-presets.js           |   2 +
 modules/ui/style.js                   |   8 +
 styles/ancient.json                   | 216 +++++++++++++++++++++-----
 9 files changed, 371 insertions(+), 41 deletions(-)
 create mode 100644 icon.svg

diff --git a/icon.svg b/icon.svg
new file mode 100644
index 00000000..f3c7108e
--- /dev/null
+++ b/icon.svg
@@ -0,0 +1,24 @@
+<svg viewBox="0 0 100 100">
+  <g fill="#EBE8DF" stroke="#4D3F36" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.4" transform="translate(50 70) scale(1 1)">
+    <path d="M 4.439,0 L -18.531,0 L -18.994,-61.849 L 4.902,-61.849 L 4.439,0"/>
+    <path d="M 19.103,0 L 1.283,0 L 0.924,-45.875 L 19.462,-45.875 L 19.103,0"/>
+    <path fill="#4D3F36" d="M 10.193,-49.907 L 10.193,-54.973 L 11.638,-55.519 L 12.545,-55.52 L 13.396,-55.159 L 14.352,-54.496 L 15.413,-53.531 L 16.454,-52.885 L 17.476,-52.559 L 18.478,-52.553 L 19.462,-52.865 L 20.367,-53.044 L 21.194,-53.089 L 22.112,-52.943 L 23.623,-52.44 L 22.112,-52.373 L 21.194,-52.173 L 20.367,-51.816 L 19.462,-51.296 L 18.478,-50.612 L 17.476,-50.241 L 16.454,-50.181 L 15.413,-50.434 L 14.352,-50.999 L 13.396,-51.301 L 12.545,-51.342 L 11.638,-50.998 L 10.193,-49.907"/>
+    <path d="M 10.193,-45.875 L 10.193,-54.973"/>
+    <g stroke-width="0.6" stroke-linecap="mitter" fill="#4D3F36">
+      <path d="M -16.365,-58.727 L -16.365,-61.849 L -14.796,-61.849 L -14.796,-58.727 L -16.365,-58.727"/>
+      <path d="M -12.951,-58.727 L -12.951,-61.849 L -11.382,-61.849 L -11.382,-58.727 L -12.951,-58.727"/>
+      <path d="M -9.538,-58.727 L -9.538,-61.849 L -7.968,-61.849 L -7.968,-58.727 L -9.538,-58.727"/>
+      <path d="M -6.124,-58.727 L -6.124,-61.849 L -4.554,-61.849 L -4.554,-58.727 L -6.124,-58.727"/>
+      <path d="M -2.71,-58.727 L -2.71,-61.849 L -1.141,-61.849 L -1.141,-58.727 L -2.71,-58.727"/>
+      <path d="M 0.704,-58.727 L 0.704,-61.849 L 2.273,-61.849 L 2.273,-58.727 L 0.704,-58.727"/>
+      <path d="M 3.847,-42.752 L 3.847,-45.875 L 5.416,-45.875 L 5.416,-42.752 L 3.847,-42.752"/>
+      <path d="M 7.555,-42.752 L 7.555,-45.875 L 9.124,-45.875 L 9.124,-42.752 L 7.555,-42.752"/>
+      <path d="M 11.263,-42.752 L 11.263,-45.875 L 12.832,-45.875 L 12.832,-42.752 L 11.263,-42.752"/>
+      <path d="M 14.97,-42.752 L 14.97,-45.875 L 16.539,-45.875 L 16.539,-42.752 L 14.97,-42.752"/>
+      <path d="M -8.475,-52.589 L -6.906,-52.589 L -6.906,-55.16 L -7.181,-55.711 L -8.199,-55.711 L -8.475,-55.16 L -8.475,-52.589"/>
+      <path d="M 9.463,-36.614 L 11.032,-36.614 L 11.032,-39.185 L 10.756,-39.737 L 9.739,-39.737 L 9.463,-39.185 L 9.463,-36.614"/>
+      <path d="M -5,0 V -5 H -8 V 0"/>
+    </g>
+  </g>
+  <circle cx="50" cy="50" r="2" fill="red" />
+</svg>
\ No newline at end of file
diff --git a/index.html b/index.html
index 7846ccd0..53ea5c74 100644
--- a/index.html
+++ b/index.html
@@ -1068,6 +1068,12 @@
                     <option value="#icon-square">Square</option>
                     <option value="#icon-triangle">Triangle</option>
                     <option value="#icon-star">Star</option>
+                    <option value="#icon-circled">Circled</option>
+                    <option value="#icon-squared">Squared</option>
+                    <option value="#icon-star-circled">Star circled</option>
+                    <option value="#icon-star-squared">Star squared</option>
+                    <option value="#icon-watabou-village">Watabou village</option>
+                    <option value="#icon-watabou-hamlet">Watabou hamlet</option>
                   </select>
                 </td>
               </tr>
@@ -1277,10 +1283,11 @@
             </tbody>
 
             <tbody id="styleFontShift">
-              <tr data-tip="Set font shoft along Y axis">
-                <td>Font shift Y</td>
+              <tr data-tip="Set label shift along X and Y axes">
+                <td>Label shift</td>
                 <td>
-                  <slider-input id="styleFontShiftY" min="-5" max="5" step=".01"></slider-input>
+                  <input id="styleFontShiftX" data-tip="Set label shift along Y axis" type="number" min="-5" max="5" step=".01" />
+                  <input id="styleFontShiftY" data-tip="Set label shift along Y axis" type="number" min="-5" max="5" step=".01" />
                 </td>
               </tr>
             </tbody>
@@ -5319,7 +5326,7 @@
       </div>
 
       <div id="burgsOverview" class="dialog stable" style="display: none">
-        <div id="burgsHeader" class="header" style="grid-template-columns: 9em 7em 7em 7em 7em 7em 6em">
+        <div id="burgsHeader" class="header" style="grid-template-columns: 9em 7em 7.5em 7.2em 6.5em 7em 6em">
           <div data-tip="Click to sort by burg name" class="sortable alphabetically" data-sortby="name">Burg</div>
           <div data-tip="Click to sort by province name" class="sortable alphabetically" data-sortby="province">
             Province
@@ -7828,6 +7835,132 @@
             <polygon points="0,-50 15,-15 50,-15 20,15 30,50 0,30 -30,50 -20,15 -50,-15 -15,-15" />
           </symbol>
 
+          <symbol id="icon-circled" viewBox="0 0 100 100" width="1em" height="1em" overflow="visible">
+            <circle cx="0" cy="0" r="50" />
+            <circle cx="0" cy="0" r="1" stroke-width="60"></circle>
+          </symbol>
+
+          <symbol id="icon-squared" viewBox="0 0 100 100" width="1em" height="1em" overflow="visible">
+            <rect x="-50" y="-50" width="100" height="100" />
+            <rect x="0" y="0" width="1" height="1" stroke-width="60"></rect>
+          </symbol>
+
+          <symbol id="icon-star-circled" viewBox="0 0 100 100" width="1em" height="1em" overflow="visible">
+            <circle cx="0" cy="0" r="50" />
+            <polygon points="0,-50 15,-15 50,-15 20,15 30,50 0,30 -30,50 -20,15 -50,-15 -15,-15" transform="scale(0.78 0.78)" />
+          </symbol>
+
+          <symbol id="icon-star-squared" viewBox="0 0 100 100" width="1em" height="1em" overflow="visible">
+            <rect x="-50" y="-50" width="100" height="100" />
+            <polygon points="0,-50 15,-15 50,-15 20,15 30,50 0,30 -30,50 -20,15 -50,-15 -15,-15" transform="scale(0.78 0.78)" />
+          </symbol>
+
+          <symbol id="icon-watabou-capital" viewBox="0 0 100 100" width="1em" height="1em" overflow="visible">
+            <g transform="translate(-60 -194) scale(2 2)">
+              <path fill="#EBE8DF" d="M26 90H13l1.3-37.3-1-1v-16h12.6v16l-1 1L26 90"/>
+              <path d="m19.5 12 1.3 6.9 1 3.8 1 3 1.5 3.6 3.1 6.4H11.6l3.1-6.4 1.5-3.6 1-3 1-3.8 1.3-7"/>
+              <path fill="#4D3F36" d="M19.5 10.4V5.6L21.3 4l1-.3 1 .5.9 1 1 1.7.9 1 .9.5.9-.3.9-.8.7-.5.8-.2.6.2.5.5.6.4.7.3 1 .1h1.8l-1.8.6-1 .1H32l-.6-.2L31 8h-.6l-.8.4-.7.7-1 1.1-.8.5-1-.1-.9-.8-1-1.4-.9-.7-.9-.2-1 .6-1.8 2.2"/>
+              <path fill="#4D3F36" d="M19.5 12V5.5"/>
+              <path fill="#4D3F36" d="M17.2 46h1.6V42l-.3-.6h-1l-.3.6v4"/>
+              <path fill="#EBE8DF" d="M41.7 90H31.2l1-24.5-.8-.9v-16h10.1v16l-.8.9 1 24.5"/>
+              <path d="m36.5 29.7 1 5.6.8 3 .8 2.4 1.2 2.9 2.5 5H30.2l2.5-5 1.2-3 .8-2.3.7-3 1-5.6"/>
+              <path fill="#4D3F36" d="M36.5 28.2v-4.8l1.5-2 .9-.4.7.4.6 1 .7 1.7.7 1.1.8.5.7-.1.8-.7 1-.4h1l1 .2 1.2.5 1 .4 1 .3h2.4l-1.5.5-1 .2h-1.9l-1.2-.3-1 .1-1 .4-1 .7-.8.9-.7.3-.8-.2-.7-1-.7-1.4-.6-.8-.7-.2-.9.7-1.5 2.4"/>
+              <path fill="#4D3F36" d="M36.5 29.7v-6.3"/>
+              <path fill="#4D3F36" d="M34 59h1.6V55l-.3-.7h-1l-.3.7V59"/>
+              <path fill="#4D3F36" d="M47.6 88.8h1.6v-4.1l-.4-.7h-1l-.2.7v4.1"/>
+              <path fill="#EBE8DF" d="M14.8 94.6H1.5L2 84.4 8.3 73l6.3 11.4.2 10.2m8.3 0h-8.3l-.2-10.2L8.3 73l2 .4h4l2-.4 6.3 11.4.5 10.2"/>
+              <path d="M22.6 84.4h-8L8.3 73l2 .4h4l2-.4 6.3 11.4"/>
+              <path fill="#4D3F36" d="M9.5 94.6H7V89l.5-1H9l.5 1v5.5"/>
+              <path fill="#EBE8DF" d="M50.4 95.3H33.1l.5-10.4L42 70l8.3 15 .2 10.3m8.3 0h-8.3l-.2-10.4L41.9 70l2 .5 2 .1 2-.1 2-.5 8.3 15 .5 10.3"/>
+              <path d="M58.2 85h-8l-8.3-15 2 .5 2 .1 2-.1 2-.5 8.3 15"/>
+              <path fill="#4D3F36" d="M43 95.3h-2.3v-5.5l.5-1h1.4l.5 1v5.5"/>
+              <path fill="#EBE8DF" d="M27.9 97.3H13.4l1-19.8L21 65.8l6.5 11.7.5 19.8m8.5 0h-8.5l-.5-19.8-6.5-11.7 2 .4 2 .1 2-.1 2-.4 6.5 11.7 1 19.8"/>
+              <path d="M35.4 77.5h-8l-6.5-11.7 2 .4 2 .1 2-.1 2-.4 6.5 11.7"/>
+              <path fill="#4D3F36" d="m21.6 77.1.1.4-.1.4-.3.3-.4.1h-.4l-.3-.4v-.8l.3-.3h.8l.3.3"/>
+              <path fill="#4D3F36" d="M22.1 97.3h-2.4v-5.5l.5-1h1.4l.5 1v5.5"/>
+            </g>
+            <circle fill="#EBE8DF" stroke-width="3" cx="0" cy="0" r="10" />
+          </symbol>
+
+          <symbol id="icon-watabou-city" viewBox="0 0 100 100" width="1em" height="1em" overflow="visible">
+            <g fill="#E59189" stroke="#4D3F36" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.4" transform="translate(-60 -150) scale(2 2)">
+              <path fill="#EBE8DF" d="M29.5 70H18L19 48.7l-.9-.9v-16h11v16l-.8 1L29.5 70"/>
+              <path d="m23.7 11 1.2 6.2.8 3.3 1 2.6 1.2 3.1 2.8 5.6H16.8l2.8-5.6 1.3-3.1.9-2.6.8-3.3 1.1-6.1"/>
+              <path fill="#4D3F36" d="M23.7 9.6V4.8l1.4-.7h.9l.8.3 1 .7 1.1 1 1 .6.9.2.7-.4.6-.7.7-.4h.7l.7.3.8.8.8.5.9.3h1l2-.1-2 .8-1 .2h-.9l-.8-.3-.8-.5-.7-.1-.7.2-.7.6-.6 1-.7.5h-.9l-1-.2-1-.7-1-.4-1-.1-.8.3-1.4 1M23.7 11V4.9M23 42.2h1.5v-4.1l-.3-.7h-1l-.3.7v4.1"/>
+              <path fill="#EBE8DF" d="M19 71.2H1.5L2 63l4-15 4.2.4 4.2.1 4.2-.1 4.1-.5-4 15 .2 8.3M2 63h16.7m8.4 8.2H19l-.2-8.2 4-15 4 15 .4 8.2"/>
+              <path d="M18.7 63H2l4-15 4.2.4 4.2.1 4.2-.1 4.1-.5-4 15"/>
+              <path fill="#4D3F36" d="M9.6 69.5h1.6v-4.2l-.3-.6h-1l-.3.6v4.2"/>
+              <path fill="#EBE8DF" d="M49.4 71.8H32.5l.5-8.9 4-14.6 4 .5 4.1.1 4-.1 4.1-.5-4 14.6.2 8.9M33 62.9h16.2m8.5 8.9h-8.3l-.2-8.9 4-14.6 4 14.6.5 8.9"/>
+              <path d="M49.2 63H33l4-14.7 4 .5 4.1.1 4-.1 4.1-.5-4 14.6"/>
+              <path fill="#4D3F36" d="M40.3 69.8h1.6v-4.2l-.3-.6h-1l-.3.6v4.2"/>
+              <path fill="#EBE8DF" d="M32.6 75.3H15.9l1-19 7.6-13.6 7.6 13.6.5 19m8.5 0h-8.5l-.5-19-7.6-13.6 2 .4 2 .1 2-.1 2-.5 7.6 13.8 1 19"/>
+              <path d="M40.1 56.4h-8l-7.6-13.8 2 .5 2 .1 2-.1 2-.5 7.6 13.8"/>
+              <path fill="#4D3F36" d="m25.2 56 .1.4-.1.4-.3.2-.4.1h-.4l-.3-.4-.1-.4.1-.3.3-.3.4-.2.4.2.3.3M25.7 75.3h-2.4V70l.5-1h1.4l.5 1v5.4"/>
+            </g>
+            <circle fill="#EBE8DF" stroke-width="3" cx="0" cy="0" r="10" />
+          </symbol>
+
+          <symbol id="icon-watabou-town" viewBox="0 0 100 100" width="1em" height="1em" overflow="visible">
+            <g fill="#E59189" stroke="#4D3F36" stroke-width="1.4" stroke-linejoin="round" transform="translate(0 -10) scale(2 2)">
+              <path fill="#EBE8DF" d="M18.9-2H2.6l.5-9 7.8-14 7.8 14 .2 9M27-2H19l-.2-9-7.8-14 2 .4 2 .1 2-.1 2-.5 7.8 14L27-2 Z"/>
+              <path d="M26.7-11h-8l-7.8-14 2 .4 2 .1 2-.1 2-.5 7.8 14"/>
+              <path fill="#4D3F36" stroke="none" d="M12-2H9.8v-5.4l.4-1h1.5l.5 1V-2"/>
+              <path fill="#EBE8DF" d="M-10.3.4h-19.6l.4-8 4-17.2 4.8.5 4.7.2 4.8-.2 4.7-.5-4 17.1.2 8m-19.2-8h19m8.4 8h-8.2l-.2-8 4-17 4 17 .4 8Z"/>
+              <path d="M-10.5-7.7h-19l4-17 4.8.4 4.7.2 4.8-.2 4.7-.5-4 17.1"/>
+              <path fill="#4D3F36" stroke="none" d="M-24-1.3h1.7v-4.1l-.4-.7h-1l-.2.7v4.1"/>
+              <path fill="#EBE8DF" d="M-1.4 5H-17l.8-15 7.2-13.1 7.3 13 .4 15.2M7 5h-8.4L-1.8-10-9-23.1l2 .3 2 .2 2-.2 2-.3 7.3 13L7 4 Z"/>
+              <path d="M6.2-10h-8L-9-23.1l2 .3 2 .2 2-.2 2-.3 7.3 13"/>
+              <path fill="#4D3F36" stroke="none" d="M-7.9 5h-2.4V-.3l.5-1h1.5l.4 1v5.5"/>
+            </g>
+            <circle fill="#EBE8DF" stroke-width="3" cx="0" cy="0" r="10" />
+          </symbol>
+
+          <symbol id="icon-watabou-village" viewBox="0 0 100 100" width="1em" height="1em" overflow="visible">
+            <g fill="#E59189" stroke="#4D3F36" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.4" transform="translate(0 -6) scale(2 2)">
+              <path d="M 9.778,-3.849 L -3.296,-3.849 L -2.723,-15.318 L 3.384,-26.311 L 9.491,-15.318 L 9.778,-3.849 M 18.065,-3.849 L 9.778,-3.849 L 9.491,-15.318 L 3.384,-26.311 L 5.384,-25.981 L 7.384,-25.871 L 9.384,-25.981 L 11.384,-26.311 L 17.491,-15.318 L 18.065,-3.849" fill="#EBE8DF" />
+              <path d="M 17.491,-15.318 L 9.491,-15.318 L 3.384,-26.311 L 5.384,-25.981 L 7.384,-25.871 L 9.384,-25.981 L 11.384,-26.311 L 17.491,-15.318"/>
+              <path d="M 4.584,-3.849 L 2.184,-3.849 L 2.184,-9.289 L 2.664,-10.249 L 4.104,-10.249 L 4.584,-9.289 L 4.584,-3.849" fill="#4D3F36"/>
+              <path d="M -5.555,2.988 L -20.357,2.988 L -19.872,-6.711 L -15.872,-19.379 L -12.354,-18.999 L -8.835,-18.872 L -5.316,-18.999 L -1.797,-19.379 L -5.797,-6.711 L -5.555,2.988 M -19.872,-6.711 L -5.797,-6.711 M 2.688,2.988 L -5.555,2.988 L -5.797,-6.711 L -1.797,-19.379 L 2.203,-6.711 L 2.688,2.988" fill="#EBE8DF" />
+              <path d=" M -5.797,-6.711 L -19.872,-6.711 L -15.872,-19.379 L -12.354,-18.999 L -8.835,-18.872 L -5.316,-18.999 L -1.797,-19.379 L -5.797,-6.711"/>
+              <path d="M -13.635,0.539 L -12.035,0.539 L -12.035,-3.621 L -12.355,-4.261 L -13.315,-4.261 L -13.635,-3.621 L -13.635,0.539" fill="#4D3F36"/>
+            </g>
+            <circle fill="#EBE8DF" stroke-width="3" cx="0" cy="0" r="10" />
+          </symbol>
+
+          <symbol id="icon-watabou-hamlet" viewBox="0 0 100 100" width="1em" height="1em" overflow="visible">
+            <g fill="#E59189" stroke="#4D3F36" stroke-width="1.4" stroke-linejoin="round" transform="translate(-120 -95) scale(2 2)">
+              <path fill="#EBE8DF" d="M63 48H48.6l.4-8.7 6.8-12.2 6.8 12.2.2 8.7m8.3 0h-8.3l-.2-8.7L56 27.1l2 .3 2 .2 2-.2 2-.3 6.8 12.2.5 8.7"/>
+              <path d="M70.7 39.3h-8L56 27.1l2 .3 2 .2 2-.2 2-.3 6.8 12.2"/>
+              <path fill="#4D3F36" d="M57.1 48h-2.4v-5.4l.5-1h1.4l.5 1V48"/>
+            </g>
+            <circle fill="#EBE8DF" stroke-width="3" cx="0" cy="0" r="10" />
+          </symbol>
+
+          <symbol id="icon-watabou-fort" viewBox="0 0 100 100" width="1em" height="1em" overflow="visible">
+            <g fill="#EBE8DF" stroke="#4D3F36" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.8" transform="translate(0 0) scale(2 1.6)">
+              <path d="M 4.439,0 L -18.531,0 L -18.994,-61.849 L 4.902,-61.849 L 4.439,0"/>
+              <path d="M 19.103,0 L 1.283,0 L 0.924,-45.875 L 19.462,-45.875 L 19.103,0"/>
+              <path fill="#4D3F36" d="M 10.193,-49.907 L 10.193,-54.973 L 11.638,-55.519 L 12.545,-55.52 L 13.396,-55.159 L 14.352,-54.496 L 15.413,-53.531 L 16.454,-52.885 L 17.476,-52.559 L 18.478,-52.553 L 19.462,-52.865 L 20.367,-53.044 L 21.194,-53.089 L 22.112,-52.943 L 23.623,-52.44 L 22.112,-52.373 L 21.194,-52.173 L 20.367,-51.816 L 19.462,-51.296 L 18.478,-50.612 L 17.476,-50.241 L 16.454,-50.181 L 15.413,-50.434 L 14.352,-50.999 L 13.396,-51.301 L 12.545,-51.342 L 11.638,-50.998 L 10.193,-49.907"/>
+              <path d="M 10.193,-45.875 L 10.193,-54.973"/>
+              <g stroke-width="0.6" stroke-linecap="mitter" fill="#4D3F36">
+                <path d="M -16.365,-58.727 L -16.365,-61.849 L -14.796,-61.849 L -14.796,-58.727 L -16.365,-58.727"/>
+                <path d="M -12.951,-58.727 L -12.951,-61.849 L -11.382,-61.849 L -11.382,-58.727 L -12.951,-58.727"/>
+                <path d="M -9.538,-58.727 L -9.538,-61.849 L -7.968,-61.849 L -7.968,-58.727 L -9.538,-58.727"/>
+                <path d="M -6.124,-58.727 L -6.124,-61.849 L -4.554,-61.849 L -4.554,-58.727 L -6.124,-58.727"/>
+                <path d="M -2.71,-58.727 L -2.71,-61.849 L -1.141,-61.849 L -1.141,-58.727 L -2.71,-58.727"/>
+                <path d="M 0.704,-58.727 L 0.704,-61.849 L 2.273,-61.849 L 2.273,-58.727 L 0.704,-58.727"/>
+                <path d="M 3.847,-42.752 L 3.847,-45.875 L 5.416,-45.875 L 5.416,-42.752 L 3.847,-42.752"/>
+                <path d="M 7.555,-42.752 L 7.555,-45.875 L 9.124,-45.875 L 9.124,-42.752 L 7.555,-42.752"/>
+                <path d="M 11.263,-42.752 L 11.263,-45.875 L 12.832,-45.875 L 12.832,-42.752 L 11.263,-42.752"/>
+                <path d="M 14.97,-42.752 L 14.97,-45.875 L 16.539,-45.875 L 16.539,-42.752 L 14.97,-42.752"/>
+                <path d="M -8.475,-52.589 L -6.906,-52.589 L -6.906,-55.16 L -7.181,-55.711 L -8.199,-55.711 L -8.475,-55.16 L -8.475,-52.589"/>
+                <path d="M 9.463,-36.614 L 11.032,-36.614 L 11.032,-39.185 L 10.756,-39.737 L 9.739,-39.737 L 9.463,-39.185 L 9.463,-36.614"/>
+                <path d="M -5,0 V -5 H -8 V 0"/>
+              </g>
+            </g>
+            <circle fill="#EBE8DF" stroke-width="3" cx="0" cy="0" r="10" />
+          </symbol>
+
           <symbol id="icon-anchor" viewBox="0 0 30 28">
             <path
               d="M15 4c0-0.547-0.453-1-1-1s-1 0.453-1 1 0.453 1 1 1 1-0.453 1-1zM28 18.5v5.5c0 0.203-0.125 0.391-0.313 0.469-0.063 0.016-0.125 0.031-0.187 0.031-0.125 0-0.25-0.047-0.359-0.141l-1.453-1.453c-2.453 2.953-6.859 4.844-11.688 4.844s-9.234-1.891-11.688-4.844l-1.453 1.453c-0.094 0.094-0.234 0.141-0.359 0.141-0.063 0-0.125-0.016-0.187-0.031-0.187-0.078-0.313-0.266-0.313-0.469v-5.5c0-0.281 0.219-0.5 0.5-0.5h5.5c0.203 0 0.391 0.125 0.469 0.313s0.031 0.391-0.109 0.547l-1.563 1.563c1.406 1.891 4.109 3.266 7.203 3.687v-10.109h-3c-0.547 0-1-0.453-1-1v-2c0-0.547 0.453-1 1-1h3v-2.547c-1.188-0.688-2-1.969-2-3.453 0-2.203 1.797-4 4-4s4 1.797 4 4c0 1.484-0.812 2.766-2 3.453v2.547h3c0.547 0 1 0.453 1 1v2c0 0.547-0.453 1-1 1h-3v10.109c3.094-0.422 5.797-1.797 7.203-3.687l-1.563-1.563c-0.141-0.156-0.187-0.359-0.109-0.547s0.266-0.313 0.469-0.313h5.5c0.281 0 0.5 0.219 0.5 0.5z"
diff --git a/main.js b/main.js
index d86b84f0..2344b308 100644
--- a/main.js
+++ b/main.js
@@ -77,8 +77,8 @@ let ice = viewbox.append("g").attr("id", "ice");
 let prec = viewbox.append("g").attr("id", "prec").style("display", "none");
 let population = viewbox.append("g").attr("id", "population");
 let emblems = viewbox.append("g").attr("id", "emblems").style("display", "none");
-let labels = viewbox.append("g").attr("id", "labels");
 let icons = viewbox.append("g").attr("id", "icons");
+let labels = viewbox.append("g").attr("id", "labels");
 let burgIcons = icons.append("g").attr("id", "burgIcons");
 let anchors = icons.append("g").attr("id", "anchors");
 let armies = viewbox.append("g").attr("id", "armies");
diff --git a/modules/renderers/draw-burg-icons.js b/modules/renderers/draw-burg-icons.js
index ad98b5bd..b2dd96ec 100644
--- a/modules/renderers/draw-burg-icons.js
+++ b/modules/renderers/draw-burg-icons.js
@@ -12,6 +12,7 @@ function drawBurgIcons() {
     if (g.empty()) continue;
 
     const icon = g.attr("data-icon") || "#icon-circle";
+
     g.selectAll("use")
       .data(burgsInGroup)
       .enter()
@@ -22,6 +23,17 @@ function drawBurgIcons() {
       .attr("x", d => d.x)
       .attr("y", d => d.y);
 
+    // g.selectAll("circle")
+    //   .data(burgsInGroup)
+    //   .enter()
+    //   .append("circle")
+    //   .attr("id", d => "burg_circle" + d.i)
+    //   .attr("cx", d => d.x)
+    //   .attr("cy", d => d.y)
+    //   .attr("r", 0.2)
+    //   .attr("fill", "red")
+    //   .attr("stroke", "none");
+
     // capitalAnchors
     //   .selectAll("use")
     //   .data(capitals.filter(c => c.port))
diff --git a/modules/renderers/draw-burg-labels.js b/modules/renderers/draw-burg-labels.js
index a8fd9318..564cbf55 100644
--- a/modules/renderers/draw-burg-labels.js
+++ b/modules/renderers/draw-burg-labels.js
@@ -10,6 +10,8 @@ function drawBurgLabels() {
 
     const labelGroup = burgLabels.select("#" + name);
     if (labelGroup.empty()) continue;
+
+    const dx = labelGroup.attr("data-dx");
     const dy = labelGroup.attr("data-dy");
 
     labelGroup
@@ -21,6 +23,7 @@ function drawBurgLabels() {
       .attr("data-id", d => d.i)
       .attr("x", d => d.x)
       .attr("y", d => d.y)
+      .attr("dx", dx + "em")
       .attr("dy", dy + "em")
       .text(d => d.name);
   }
@@ -30,6 +33,7 @@ function drawBurgLabels() {
 
 function drawBurgLabel(burg) {
   const group = burgLabels.select("#" + burg.group);
+  const dx = labelGroup.attr("data-dx");
   const dy = labelGroup.attr("data-dy");
 
   group
@@ -38,6 +42,7 @@ function drawBurgLabel(burg) {
     .attr("data-id", burg.i)
     .attr("x", burg.x)
     .attr("y", burg.y)
+    .attr("dx", dx + "em")
     .attr("dy", dy + "em")
     .text(burg.name);
 }
diff --git a/modules/ui/general.js b/modules/ui/general.js
index 6e276bd6..e02f9d19 100644
--- a/modules/ui/general.js
+++ b/modules/ui/general.js
@@ -167,7 +167,7 @@ function showMapTooltip(point, e, i, g) {
     if (burgId) {
       const burg = pack.burgs[burgId];
       const population = si(burg.population * populationRate * urbanization);
-      tip(`${burg.name}. Population: ${population}. Click to edit`);
+      tip(`${burg.name}. Population: ${population}. Group: ${burg.group}. Click to edit`);
       if (burgsOverview?.offsetParent) highlightEditorLine(burgsOverview, burgId, 5000);
       return;
     }
diff --git a/modules/ui/style-presets.js b/modules/ui/style-presets.js
index f77b4452..a3535b16 100644
--- a/modules/ui/style-presets.js
+++ b/modules/ui/style-presets.js
@@ -135,6 +135,7 @@ async function changeStyle(desiredPreset) {
   const [presetName, style] = styleData;
   localStorage.setItem("presetStyle", presetName);
   applyStyleWithUiRefresh(style);
+  if (layerIsOn("toggleBurgIcons")) drawBurgIcons();
 }
 
 function applyStyleWithUiRefresh(style) {
@@ -325,6 +326,7 @@ function addStylePreset() {
       "data-size",
       "font-size",
       "font-family",
+      "data-dx",
       "data-dy"
     ];
     const burgIconsAttributes = [
diff --git a/modules/ui/style.js b/modules/ui/style.js
index bf2abadf..c357110f 100644
--- a/modules/ui/style.js
+++ b/modules/ui/style.js
@@ -279,6 +279,7 @@ function selectStyleElement() {
 
     if (el.node().parentNode.id === "burgLabels") {
       styleFontShift.style.display = "block";
+      styleFontShiftX.value = el.attr("data-dx") || 0;
       styleFontShiftY.value = el.attr("data-dy") || 0;
     }
   }
@@ -892,6 +893,13 @@ function changeFontSize(el, size) {
   if (styleElementSelect.value === "legend") redrawLegend();
 }
 
+styleFontShiftX.on("input", e => {
+  getEl()
+    .attr("data-dx", e.target.value)
+    .selectAll("text")
+    .attr("dx", e.target.value + "em");
+});
+
 styleFontShiftY.on("input", e => {
   getEl()
     .attr("data-dy", e.target.value)
diff --git a/styles/ancient.json b/styles/ancient.json
index 69e18b4f..2bab2ed9 100644
--- a/styles/ancient.json
+++ b/styles/ancient.json
@@ -220,7 +220,7 @@
   },
   "#statesBody": {
     "opacity": 0.2,
-    "filter": "url(#filter-sepia)"
+    "filter": null
   },
   "#statesHalo": {
     "opacity": 0.4,
@@ -328,57 +328,203 @@
     "data-y": 93,
     "data-columns": 8
   },
-  "#burgLabels > #cities": {
+  "#burgLabels > g#capitals": {
     "opacity": 1,
     "fill": "#3e3e4b",
     "style": "text-shadow: white 0px 0px 4px",
     "letter-spacing": 0,
-    "data-size": 12,
-    "font-size": 12,
-    "font-family": "Great Vibes"
+    "data-size": 7,
+    "font-size": 7,
+    "font-family": "Great Vibes",
+    "data-dy": 0.6
   },
-  "#burgIcons > #cities": {
+  "#burgIcons > g#capitals": {
+    "data-icon": "#icon-watabou-capital",
     "opacity": 1,
-    "fill": "#fdfab9",
-    "fill-opacity": 0.7,
-    "size": 1,
-    "stroke": "#6f4e1f",
-    "stroke-width": 0.3,
-    "stroke-dasharray": ".3 .4",
-    "stroke-linecap": "butt"
+    "fill": "#E59189",
+    "fill-opacity": 1,
+    "font-size": 2,
+    "stroke": "#4D3F36",
+    "stroke-width": 1.4,
+    "stroke-dasharray": null,
+    "stroke-linecap": "round",
+    "stroke-linejoin": "round"
   },
-  "#anchors > #cities": {
-    "opacity": 1,
-    "fill": "#ffffff",
-    "size": 2,
-    "stroke": "#3e3e4b",
-    "stroke-width": 1.2
-  },
-  "#burgLabels > #towns": {
+  "#burgLabels > g#cities": {
     "opacity": 1,
     "fill": "#3e3e4b",
     "style": "text-shadow: white 0px 0px 4px",
     "letter-spacing": 0,
     "data-size": 5,
     "font-size": 5,
-    "font-family": "Great Vibes"
+    "font-family": "Great Vibes",
+    "data-dy": 0.6
   },
-  "#burgIcons > #towns": {
-    "opacity": 1,
-    "fill": "#fef4d8",
-    "fill-opacity": 0.7,
-    "size": 0.5,
-    "stroke": "#72472c",
-    "stroke-width": 0.12,
-    "stroke-dasharray": "",
-    "stroke-linecap": "butt"
-  },
-  "#anchors > #towns": {
+  "#burgIcons > g#cities": {
+    "data-icon": "#icon-watabou-city",
     "opacity": 1,
     "fill": "#ffffff",
-    "size": 1,
+    "fill-opacity": 1,
+    "font-size": 2,
     "stroke": "#3e3e4b",
-    "stroke-width": 1.2
+    "stroke-width": 10,
+    "stroke-dasharray": null,
+    "stroke-linecap": "butt",
+    "stroke-linejoin": "round"
+  },
+  "#burgLabels > g#forts": {
+    "opacity": 1,
+    "fill": "#3e3e4b",
+    "style": "text-shadow: white 0px 0px 4px",
+    "letter-spacing": 0,
+    "data-size": 3,
+    "font-size": 3,
+    "font-family": "Great Vibes",
+    "data-dy": 0.8
+  },
+  "#burgIcons > g#forts": {
+    "data-icon": "#icon-watabou-fort",
+    "opacity": 1,
+    "fill": "#ffffff",
+    "fill-opacity": 1,
+    "font-size": 2,
+    "stroke": "#3e3e4b",
+    "stroke-width": 10,
+    "stroke-dasharray": null,
+    "stroke-linecap": "butt",
+    "stroke-linejoin": "round"
+  },
+  "#burgLabels > g#monasteries": {
+    "opacity": 1,
+    "fill": "#3e3e4b",
+    "style": "text-shadow: white 0px 0px 4px",
+    "letter-spacing": 0,
+    "data-size": 2,
+    "font-size": 2,
+    "font-family": "Great Vibes",
+    "data-dy": 0.8
+  },
+  "#burgIcons > g#monasteries": {
+    "data-icon": "#icon-triangle",
+    "opacity": 1,
+    "fill": "#ffffff",
+    "fill-opacity": 1,
+    "font-size": 2,
+    "stroke": "#3e3e4b",
+    "stroke-width": 10,
+    "stroke-dasharray": null,
+    "stroke-linecap": "butt",
+    "stroke-linejoin": "round"
+  },
+  "#burgLabels > g#caravanserais": {
+    "opacity": 1,
+    "fill": "#3e3e4b",
+    "style": "text-shadow: white 0px 0px 4px",
+    "letter-spacing": 0,
+    "data-size": 2,
+    "font-size": 2,
+    "font-family": "Great Vibes",
+    "data-dy": 0.8
+  },
+  "#burgIcons > g#caravanserais": {
+    "data-icon": "#icon-triangle",
+    "opacity": 1,
+    "fill": "#ffffff",
+    "fill-opacity": 1,
+    "font-size": 2,
+    "stroke": "#3e3e4b",
+    "stroke-width": 10,
+    "stroke-dasharray": null,
+    "stroke-linecap": "butt",
+    "stroke-linejoin": "round"
+  },
+  "#burgLabels > g#trading_posts": {
+    "opacity": 1,
+    "fill": "#3e3e4b",
+    "style": "text-shadow: white 0px 0px 4px",
+    "letter-spacing": 0,
+    "data-size": 2,
+    "font-size": 2,
+    "font-family": "Great Vibes",
+    "data-dy": 0.8
+  },
+  "#burgIcons > g#trading_posts": {
+    "data-icon": "#icon-triangle",
+    "opacity": 1,
+    "fill": "#ffffff",
+    "fill-opacity": 1,
+    "font-size": 2,
+    "stroke": "#3e3e4b",
+    "stroke-width": 10,
+    "stroke-dasharray": null,
+    "stroke-linecap": "butt",
+    "stroke-linejoin": "round"
+  },
+  "#burgLabels > g#villages": {
+    "opacity": 1,
+    "fill": "#3e3e4b",
+    "style": "text-shadow: white 0px 0px 4px",
+    "letter-spacing": 0,
+    "data-size": 3,
+    "font-size": 3,
+    "font-family": "Great Vibes",
+    "data-dy": 0.8
+  },
+  "#burgIcons > g#villages": {
+    "data-icon": "#icon-watabou-village",
+    "opacity": 1,
+    "fill": "#ffffff",
+    "fill-opacity": 1,
+    "font-size": 2,
+    "stroke": "#3e3e4b",
+    "stroke-width": 10,
+    "stroke-dasharray": null,
+    "stroke-linecap": "butt",
+    "stroke-linejoin": "round"
+  },
+  "#burgLabels > g#hamlets": {
+    "opacity": 1,
+    "fill": "#3e3e4b",
+    "style": "text-shadow: white 0px 0px 4px",
+    "letter-spacing": 0,
+    "data-size": 2,
+    "font-size": 2,
+    "font-family": "Great Vibes",
+    "data-dy": 0.8
+  },
+  "#burgIcons > g#hamlets": {
+    "data-icon": "#icon-watabou-hamlet",
+    "opacity": 1,
+    "fill": "#ffffff",
+    "fill-opacity": 1,
+    "font-size": 2,
+    "stroke": "#3e3e4b",
+    "stroke-width": 10,
+    "stroke-dasharray": null,
+    "stroke-linecap": "butt",
+    "stroke-linejoin": "round"
+  },
+  "#burgLabels > g#towns": {
+    "opacity": 1,
+    "fill": "#3e3e4b",
+    "style": "text-shadow: white 0px 0px 4px",
+    "letter-spacing": 0,
+    "data-size": 3,
+    "font-size": 3,
+    "font-family": "Great Vibes",
+    "data-dy": 0.8
+  },
+  "#burgIcons > g#towns": {
+    "data-icon": "#icon-watabou-town",
+    "opacity": 1,
+    "fill": "#ffffff",
+    "fill-opacity": 1,
+    "font-size": 2,
+    "stroke": "#3e3e4b",
+    "stroke-width": 10,
+    "stroke-dasharray": null,
+    "stroke-linecap": "butt",
+    "stroke-linejoin": "round"
   },
   "#labels > #states": {
     "opacity": 1,