diff --git a/.github/FUNDING.yml b/.github/FUNDING.yml
index b027f814..f01a2390 100644
--- a/.github/FUNDING.yml
+++ b/.github/FUNDING.yml
@@ -1,3 +1,3 @@
 # These are supported funding model platforms
-
+github: Azgaar
 patreon: Azgaar
diff --git a/.github/copilot-instructions.md b/.github/copilot-instructions.md
new file mode 100644
index 00000000..698d23ae
--- /dev/null
+++ b/.github/copilot-instructions.md
@@ -0,0 +1,89 @@
+# Fantasy Map Generator
+
+Azgaar's Fantasy Map Generator is a client-side JavaScript web application for creating fantasy maps. It generates detailed fantasy worlds with countries, cities, rivers, biomes, and cultural elements.
+
+Always reference these instructions first and fallback to search or bash commands only when you encounter unexpected information that does not match the info here.
+
+## Working Effectively
+
+- **CRITICAL**: This is a static web application - NO build process needed. No npm install, no compilation, no bundling.
+- Run the application using HTTP server (required - cannot run with file:// protocol):
+  - `python3 -m http.server 8000` - takes 2-3 seconds to start
+- Access at: `http://localhost:8000`
+
+## Validation
+
+- Always manually validate any changes by:
+  1. Starting the HTTP server (NEVER CANCEL - wait for full startup)
+  2. Navigate to the application in browser
+  3. Click the "►" button to open the menu and generate a new map
+  4. **CRITICAL VALIDATION**: Verify the map generates with countries, cities, roads, and geographic features
+  5. Test UI interaction: click "Layers" button, verify layer controls work
+  6. Test regeneration: click "New Map!" button, verify new map generates correctly
+- **Known Issues**: Google Analytics and font loading errors are normal (blocked external resources)
+
+## Repository Structure
+
+### Core Files
+
+- `index.html` - Main application entry point
+- `main.js` - Core application logic
+- `versioning.js` - Version management and update handling
+
+### Key Directories
+
+- `modules/` - core functionality modules:
+  - `modules/ui/` - UI components (editors, tools, style management)
+  - `modules/dynamic/` - runtime modules (export, installation)
+  - `modules/renderers/` - drawing and rendering logic
+- `utils/` - utility libraries (math, arrays, strings, etc.)
+- `styles/` - visual style presets (JSON files)
+- `libs/` - Third-party libraries (D3.js, TinyMCE, etc.)
+- `images/` - backgrounds, UI elements
+- `charges/` - heraldic symbols and coat of arms elements
+- `config/` - Heightmap templates and configurations
+- `heightmaps/` - Terrain generation data
+
+## Common Tasks
+
+### Making Code Changes
+
+1. Edit JavaScript files directly (no compilation needed)
+2. Refresh browser to see changes immediately
+3. **ALWAYS test map generation** after making changes
+4. Update version in `versioning.js` for all changes
+5. Update file hashes in `index.html` for changed files (format: `file.js?v=1.108.1`)
+
+### Debugging Map Generation
+
+- Open browser developer tools console
+- Look for timing logs, e.g. "TOTAL: ~0.76s"
+- Map generation logs show each step (heightmap, rivers, states, etc.)
+- Error messages will indicate specific generation failures
+
+### Testing Different Map Types
+
+- Use "New Map!" button for quick regeneration
+- Access "Layers" menu to change map visualization
+- Available presets: Political, Cultural, Religions, Biomes, Heightmap, Physical, Military
+
+## Troubleshooting
+
+### Application Won't Load
+
+- Ensure using HTTP server (not file://)
+- Check console for JavaScript errors
+- Verify all files are present in repository
+
+### Map Generation Fails
+
+- Check browser console for error messages
+- Look for specific module failures in generation logs
+- Try refreshing page and generating new map
+
+### Performance Issues
+
+- Map generation should complete in ~1 second for standard configurations
+- If slower, check browser console for errors
+
+Remember: This is a sophisticated client-side application that generates complete fantasy worlds with political systems, geography, cultures, and detailed cartographic elements. Always validate that your changes preserve the core map generation functionality.
diff --git a/.github/pull_request_template.md b/.github/pull_request_template.md
index b254d0ad..acedeb18 100644
--- a/.github/pull_request_template.md
+++ b/.github/pull_request_template.md
@@ -14,8 +14,8 @@
 
 # Versioning
 
-<!-- Update the version if you want the PR to be merged fast. Currently it's a manual 3-steps process:
-  * update version in `versioning.js` using semver principle. Just set the next patch (for fixes) or minor version (for new features)
+<!-- Update the VERSION if you want the PR to be merged. Currently it's a manual 3-steps process:
+  * update VERSION in `versioning.js` using semver principle
   * for all changed files update hash (the part after `?`) in place where file is requested (usually it's `index.html`)
   * if the change can be really interesting for end-users, describe it inside the `showUpdateWindow()` function in `versioning.js` -->
 
diff --git a/components/slider-input.js b/components/slider-input.js
new file mode 100644
index 00000000..f1732027
--- /dev/null
+++ b/components/slider-input.js
@@ -0,0 +1,78 @@
+{
+  const style = /* css */ `
+    slider-input {
+      display: flex;
+      align-items: center;
+      gap: .4em;
+    }
+  `;
+
+  const styleElement = document.createElement("style");
+  styleElement.setAttribute("type", "text/css");
+  styleElement.innerHTML = style;
+  document.head.appendChild(styleElement);
+}
+
+{
+  const template = document.createElement("template");
+  template.innerHTML = /* html */ `
+    <input type="range" />
+    <input type="number" />
+  `;
+
+  class SliderInput extends HTMLElement {
+    constructor() {
+      super();
+      this.appendChild(template.content.cloneNode(true));
+
+      const range = this.querySelector("input[type=range]");
+      const number = this.querySelector("input[type=number]");
+
+      range.value = number.value = this.value || this.getAttribute("value") || 50;
+      range.min = number.min = this.getAttribute("min") || 0;
+      range.max = number.max = this.getAttribute("max") || 100;
+      range.step = number.step = this.getAttribute("step") || 1;
+
+      range.addEventListener("input", this.handleEvent.bind(this));
+      number.addEventListener("input", this.handleEvent.bind(this));
+      range.addEventListener("change", this.handleEvent.bind(this));
+      number.addEventListener("change", this.handleEvent.bind(this));
+    }
+
+    handleEvent(e) {
+      const value = e.target.value;
+      const isNaN = Number.isNaN(Number(value));
+      if (isNaN || value === "") return e.stopPropagation();
+
+      const range = this.querySelector("input[type=range]");
+      const number = this.querySelector("input[type=number]");
+      this.value = range.value = number.value = value;
+
+      this.dispatchEvent(
+        new CustomEvent(e.type, {
+          detail: {value},
+          bubbles: true,
+          composed: true
+        })
+      );
+    }
+
+    set value(value) {
+      const range = this.querySelector("input[type=range]");
+      const number = this.querySelector("input[type=number]");
+      range.value = number.value = value;
+    }
+
+    get value() {
+      const number = this.querySelector("input[type=number]");
+      return number.value;
+    }
+
+    get valueAsNumber() {
+      const number = this.querySelector("input[type=number]");
+      return number.valueAsNumber;
+    }
+  }
+
+  customElements.define("slider-input", SliderInput);
+}
diff --git a/icons.css b/icons.css
index ae40ee00..4740f091 100644
--- a/icons.css
+++ b/icons.css
@@ -253,7 +253,7 @@
 .icon-coa:before {content:'\f3ed'; font-size: .9em; color: #999;} /* '' */
 .icon-half:before {font-weight: bold;content:'½';}
 .icon-voice:before {content:'🔊';}
-
+.icon-robot:before {content:'🤖';}
 .icon-die:before {content:'🎲';}
 .icon-button-die:before {content:'🎲'; padding-right: .4em;}
 .icon-button-power:before {content:'💪'; padding-right: .6em;}
diff --git a/index.css b/index.css
index 555b650c..373bf63c 100644
--- a/index.css
+++ b/index.css
@@ -122,10 +122,6 @@ a {
   fill: none;
 }
 
-#biomes {
-  stroke-width: 0.7;
-}
-
 #landmass {
   mask: url(#land);
   fill-rule: evenodd;
@@ -170,6 +166,7 @@ t,
 #texture,
 #landmass,
 #vignette,
+#gridOverlay,
 #fogging {
   pointer-events: none;
 }
@@ -190,20 +187,12 @@ t,
   font-size: 0.8em;
 }
 
-#statesBody {
-  stroke-width: 3;
-}
-
 #statesHalo {
   fill: none;
   stroke-linecap: round;
   stroke-linejoin: round;
 }
 
-#provincesBody {
-  stroke-width: 0.2;
-}
-
 #statesBody,
 #provincesBody,
 #relig,
@@ -356,6 +345,14 @@ text.drag {
   font-weight: bold;
 }
 
+button.ui-button:disabled {
+  filter: brightness(0.95);
+}
+
+button.ui-button:disabled:hover {
+  cursor: default;
+}
+
 .ui-dialog,
 #optionsContainer {
   user-select: none;
@@ -525,7 +522,53 @@ input[type="color"]::-webkit-color-swatch-wrapper {
   font-size: smaller;
 }
 
+#options input[type="text"] {
+  border: 0px;
+  width: 62%;
+  font-size: smaller;
+}
+
+#options output {
+  text-align: right;
+  font-size: smaller;
+}
+
+#options input[type="number"] {
+  font-size: 0.8em;
+  border: 0;
+  text-align: right;
+  background-color: transparent;
+  width: 3.3em;
+}
+
+#options input[type="number"]::-webkit-inner-spin-button,
+#options input[type="number"]::-webkit-outer-spin-button {
+  -webkit-appearance: none;
+  margin: 0;
+}
+
+#options input[type="number"] {
+  appearance: textfield;
+  -moz-appearance: textfield;
+}
+
+#options input[type="number"]:hover {
+  outline: 1px solid var(--dark-solid);
+}
+
+#options input.paired {
+  text-align: center;
+  background-color: white;
+}
+
+#options input.long {
+  width: 100%;
+  background-color: white;
+  text-align: left;
+}
+
 #options input[type="range"] {
+  width: 100%;
   height: 8px;
   background: 0;
   appearance: none;
@@ -568,55 +611,7 @@ input[type="color"]::-webkit-color-swatch-wrapper {
   height: 2px;
 }
 
-#options input[type="number"] {
-  font-size: 0.8em;
-}
-
-#options input[type="text"] {
-  border: 0px;
-  width: 62%;
-  font-size: smaller;
-}
-
-#optionsContent output {
-  text-align: right;
-  font-size: smaller;
-}
-
-#optionsContent input[type="number"] {
-  border: 0;
-  text-align: right;
-  background-color: transparent;
-  width: 3.3em;
-  -moz-appearance: textfield;
-}
-
-#optionsContent input[type="number"]::-webkit-inner-spin-button,
-#optionsContent input[type="number"]::-webkit-outer-spin-button {
-  -webkit-appearance: none;
-  margin: 0;
-}
-
-#optionsContent input[type="number"]:hover {
-  outline: 1px solid var(--dark-solid);
-}
-
-#optionsContent input.paired {
-  text-align: center;
-  background-color: white;
-}
-
-#optionsContent input.long {
-  width: 100%;
-  background-color: white;
-  text-align: left;
-}
-
-#optionsContent input[type="range"] {
-  width: 100%;
-}
-
-#optionsContent select {
+#options select {
   width: 100%;
 }
 
@@ -641,19 +636,6 @@ input[type="color"]::-webkit-color-swatch-wrapper {
   transform: translate(0px, 1px);
 }
 
-#styleElements input[type="range"] {
-  width: 64%;
-}
-
-#styleElements select {
-  width: 64%;
-}
-
-#styleElements input[type="number"] {
-  width: 6em;
-  border: 0;
-}
-
 #styleSelectFont > option {
   font-size: 2em;
 }
@@ -692,6 +674,7 @@ input[type="color"]::-webkit-color-swatch-wrapper {
   border: none;
   padding: 0.45em 0.75em;
   margin: 0.4em 0;
+  white-space: nowrap;
   font-family: var(--monospace);
   animation: glowing 2s infinite;
 }
@@ -724,9 +707,6 @@ input[type="color"]::-webkit-color-swatch-wrapper {
   padding: 0.45em 0.75em;
   margin: 0.35em 0;
   transition: 0.1s;
-  font-size: 1em;
-  text-transform: capitalize;
-
   overflow: hidden;
   white-space: nowrap;
   text-overflow: ellipsis;
@@ -743,7 +723,7 @@ input[type="color"]::-webkit-color-swatch-wrapper {
 
 #toolsContent > .grid {
   display: grid;
-  grid-template-columns: repeat(4, 1fr);
+  grid-template-columns: repeat(3, 1fr);
   margin: 0.2em 0;
 }
 
@@ -790,7 +770,7 @@ fieldset {
   text-overflow: ellipsis;
 }
 
-.tabcontent .buttonoff {
+.tabcontent li.buttonoff {
   background-color: var(--bg-disabled);
   color: #444444aa;
 }
@@ -1268,7 +1248,6 @@ i.resetButton:active {
   padding: 0;
   height: 2px;
   background: #d4d4d4;
-  top: -0.35em;
   position: relative;
   appearance: none;
   -webkit-appearance: none;
@@ -1533,20 +1512,6 @@ div.states > .burgCulture {
   width: 6em;
 }
 
-div.states .burgPopulation {
-  width: 4.8em;
-}
-
-div.states .burgType {
-  width: 3em;
-}
-
-div.states .burgType > span {
-  padding: 0 1px;
-  color: #6e5e66;
-  transition: 0.2s;
-}
-
 div.states span.inactive {
   color: #c6c2c2;
 }
@@ -1844,11 +1809,6 @@ div.editorLine {
   padding: 0px 3px !important;
 }
 
-#unitsBody > div > * {
-  display: inline-block;
-  margin-bottom: 0.2em;
-}
-
 .unitsHeader {
   margin: 0.8em 0 0 -1.1em;
   font-weight: bold;
@@ -1860,28 +1820,21 @@ div.editorLine {
   margin: 6px 0 0 6px;
 }
 
-#unitsBody > div > div {
+#unitsBody label {
+  display: inline-block;
   width: 9em;
 }
 
-#unitsBody > div > input[type="range"] {
-  width: 7em;
-}
-
 #unitsBody > div > select,
 #unitsBody > div > input[type="text"] {
-  width: 12em;
-}
-
-#unitsBody > div > input[type="number"] {
-  width: 4.35em;
-}
-
-#unitsBody > div > input,
-#unitsBody > div > select {
+  width: 14.4em;
   border: 1px solid #e9e9e9;
 }
 
+#unitsBody input[type="range"] {
+  width: 9em;
+}
+
 #unitsEditor i.icon-lock-open,
 #unitsEditor i.icon-lock {
   color: #626573;
@@ -2414,6 +2367,34 @@ svg.button {
   margin-left: 0.25em;
 }
 
+@keyframes clockwiseBorderPulse {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
+
+#chat-widget-container {
+  user-select: none;
+}
+
+#chat-widget-minimized {
+  animation: fadeIn 1s ease-in;
+  transform: scale(0.65);
+  opacity: var(--bg-opacity);
+}
+
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: var(--bg-opacity);
+  }
+}
+
 @media print {
   div,
   canvas {
diff --git a/index.html b/index.html
index 6453976a..5a18e579 100644
--- a/index.html
+++ b/index.html
@@ -11,8 +11,8 @@
       name="description"
       content="Free web app that helps fantasy writers, game masters, and cartographers create and edit fantasy maps"
     />
-
     <meta property="og:url" content="https://azgaar.github.io/Fantasy-Map-Generator" />
+
     <meta property="og:title" content="Azgaar's Fantasy Map Generator" />
     <meta
       property="og:description"
@@ -138,9 +138,14 @@
       }
     </style>
 
-    <link rel="preload" href="index.css?v=1.99.00" as="style" onload="this.onload=null; this.rel='stylesheet'" />
+    <link rel="preload" href="index.css?v=1.108.6" as="style" onload="this.onload=null; this.rel='stylesheet'" />
     <link rel="preload" href="icons.css" as="style" onload="this.onload=null; this.rel='stylesheet'" />
-    <link rel="preload" href="libs/jquery-ui.css" as="style" onload="this.onload=null; this.rel='stylesheet'" />
+    <link
+      rel="preload"
+      href="libs/jquery-ui.css?v=1.106.5"
+      as="style"
+      onload="this.onload=null; this.rel='stylesheet'"
+    />
   </head>
   <body>
     <svg
@@ -344,16 +349,15 @@
         </g>
 
         <g id="deftemp">
-          <mask id="land"></mask>
-          <mask id="water">
-            <rect x="0" y="0" width="100%" height="100%" fill="white" />
-          </mask>
-          <mask id="fog" style="stroke-width: 10; stroke: black; stroke-linejoin: round; stroke-opacity: 0.1">
-            <rect x="0" y="0" width="100%" height="100%" fill="white" stroke="none" />
-          </mask>
+          <g id="featurePaths"></g>
           <g id="textPaths"></g>
           <g id="statePaths"></g>
           <g id="defs-emblems"></g>
+          <mask id="land"></mask>
+          <mask id="water"></mask>
+          <mask id="fog" style="stroke-width: 10; stroke: black; stroke-linejoin: round; stroke-opacity: 0.1">
+            <rect x="0" y="0" width="100%" height="100%" fill="white" stroke="none" />
+          </mask>
         </g>
 
         <pattern id="oceanic" width="100" height="100" patternUnits="userSpaceOnUse">
@@ -438,7 +442,7 @@
           <select
             data-tip="Select a map layers preset"
             id="layersPreset"
-            onchange="changePreset(this.value)"
+            onchange="handleLayersPresetChange(this.value)"
             style="width: 45%"
           >
             <option value="political" selected>Political map</option>
@@ -478,7 +482,6 @@
               id="toggleTexture"
               data-tip="Texture overlay: click to toggle, drag to raise or lower the layer. Ctrl + click to edit layer style"
               data-shortcut="X"
-              class="buttonoff"
               onclick="toggleTexture(event)"
             >
               Te<u>x</u>ture
@@ -487,7 +490,6 @@
               id="toggleHeight"
               data-tip="Heightmap: click to toggle, drag to raise or lower the layer. Ctrl + click to edit layer style"
               data-shortcut="H"
-              class="buttonoff"
               onclick="toggleHeight(event)"
             >
               <u>H</u>eightmap
@@ -496,7 +498,6 @@
               id="toggleBiomes"
               data-tip="Biomes: click to toggle, drag to raise or lower the layer. Ctrl + click to edit layer style"
               data-shortcut="B"
-              class="buttonoff"
               onclick="toggleBiomes(event)"
             >
               <u>B</u>iomes
@@ -505,7 +506,6 @@
               id="toggleCells"
               data-tip="Cells structure: click to toggle, drag to raise or lower the layer. Ctrl + click to edit layer style"
               data-shortcut="E"
-              class="buttonoff"
               onclick="toggleCells(event)"
             >
               C<u>e</u>lls
@@ -514,7 +514,6 @@
               id="toggleGrid"
               data-tip="Grid: click to toggle, drag to raise or lower. Ctrl + click to edit layer style and select type"
               data-shortcut="G"
-              class="buttonoff"
               onclick="toggleGrid(event)"
             >
               <u>G</u>rid
@@ -523,7 +522,6 @@
               id="toggleCoordinates"
               data-tip="Coordinate grid: click to toggle, drag to raise or lower the layer. Ctrl + click to edit layer style"
               data-shortcut="O"
-              class="buttonoff"
               onclick="toggleCoordinates(event)"
             >
               C<u>o</u>ordinates
@@ -532,7 +530,6 @@
               id="toggleCompass"
               data-tip="Wind (Compass) Rose: click to toggle, drag to raise or lower the layer. Ctrl + click to edit layer style"
               data-shortcut="W"
-              class="buttonoff"
               onclick="toggleCompass(event)"
             >
               <u>W</u>ind Rose
@@ -549,7 +546,6 @@
               id="toggleRelief"
               data-tip="Relief and biome icons: click to toggle, drag to raise or lower the layer. Ctrl + click to edit layer style"
               data-shortcut="F"
-              class="buttonoff"
               onclick="toggleRelief(event)"
             >
               Relie<u>f</u>
@@ -558,7 +554,6 @@
               id="toggleReligions"
               data-tip="Religions: click to toggle, drag to raise or lower the layer. Ctrl + click to edit layer style"
               data-shortcut="R"
-              class="buttonoff"
               onclick="toggleReligions(event)"
             >
               <u>R</u>eligions
@@ -567,7 +562,6 @@
               id="toggleCultures"
               data-tip="Cultures: click to toggle, drag to raise or lower the layer. Ctrl + click to edit layer style"
               data-shortcut="C"
-              class="buttonoff"
               onclick="toggleCultures(event)"
             >
               <u>C</u>ultures
@@ -584,7 +578,6 @@
               id="toggleProvinces"
               data-tip="Provinces: click to toggle, drag to raise or lower the layer. Ctrl + click to edit layer style"
               data-shortcut="P"
-              class="buttonoff"
               onclick="toggleProvinces(event)"
             >
               <u>P</u>rovinces
@@ -593,7 +586,6 @@
               id="toggleZones"
               data-tip="Zones: click to toggle, drag to raise or lower the layer. Ctrl + click to edit layer style"
               data-shortcut="Z"
-              class="buttonoff"
               onclick="toggleZones(event)"
             >
               <u>Z</u>ones
@@ -610,17 +602,15 @@
               id="toggleRoutes"
               data-tip="Trade routes: click to toggle, drag to raise or lower the layer. Ctrl + click to edit layer style"
               data-shortcut="U"
-              class="buttonoff"
               onclick="toggleRoutes(event)"
             >
               Ro<u>u</u>tes
             </li>
             <li
-              id="toggleTemp"
+              id="toggleTemperature"
               data-tip="Temperature map: click to toggle, drag to raise or lower the layer. Ctrl + click to edit layer style"
               data-shortcut="T"
-              class="buttonoff"
-              onclick="toggleTemp(event)"
+              onclick="toggleTemperature(event)"
             >
               <u>T</u>emperature
             </li>
@@ -628,7 +618,6 @@
               id="togglePopulation"
               data-tip="Population map: click to toggle, drag to raise or lower the layer. Ctrl + click to edit layer style"
               data-shortcut="N"
-              class="buttonoff"
               onclick="togglePopulation(event)"
             >
               Populatio<u>n</u>
@@ -637,17 +626,15 @@
               id="toggleIce"
               data-tip="Icebergs and glaciers: click to toggle, drag to raise or lower the layer. Ctrl + click to edit layer style"
               data-shortcut="J"
-              class="buttonoff"
               onclick="toggleIce(event)"
             >
               Ice
             </li>
             <li
-              id="togglePrec"
+              id="togglePrecipitation"
               data-tip="Precipitation map: click to toggle, drag to raise or lower the layer. Ctrl + click to edit layer style"
               data-shortcut="A"
-              class="buttonoff"
-              onclick="togglePrec(event)"
+              onclick="togglePrecipitation(event)"
             >
               Precipit<u>a</u>tion
             </li>
@@ -655,7 +642,6 @@
               id="toggleEmblems"
               data-tip="Emblems: click to toggle, drag to raise or lower the layer. Ctrl + click to edit layer style"
               data-shortcut="Y"
-              class="buttonoff"
               onclick="toggleEmblems(event)"
             >
               Emblems
@@ -669,10 +655,10 @@
               <u>L</u>abels
             </li>
             <li
-              id="toggleIcons"
+              id="toggleBurgIcons"
               data-tip="Burg icons: click to toggle, drag to raise or lower the layer. Ctrl + click to edit layer style"
               data-shortcut="I"
-              onclick="toggleIcons(event)"
+              onclick="toggleBurgIcons(event)"
             >
               <u>I</u>cons
             </li>
@@ -680,7 +666,6 @@
               id="toggleMilitary"
               data-tip="Military forces: click to toggle, drag to raise or lower the layer. Ctrl + click to edit layer style"
               data-shortcut="M"
-              class="buttonoff"
               onclick="toggleMilitary(event)"
             >
               <u>M</u>ilitary
@@ -689,7 +674,6 @@
               id="toggleMarkers"
               data-tip="Markers: click to toggle, drag to raise or lower the layer. Ctrl + click to edit layer style"
               data-shortcut="K"
-              class="buttonoff"
               onclick="toggleMarkers(event)"
             >
               Mar<u>k</u>ers
@@ -698,7 +682,6 @@
               id="toggleRulers"
               data-tip="Rulers: click to toggle, drag to move, click on label to delete. Ctrl + click to edit layer style"
               data-shortcut="= (equal sign)"
-              class="buttonoff"
               onclick="toggleRulers(event)"
             >
               Rulers
@@ -836,27 +819,24 @@
                 </td>
               </tr>
 
-              <tr data-tip="Terracing rate. Set to 0 (toggle off) to improve performance">
+              <tr data-tip="Terracing power. Set to 0 to toggle off">
                 <td>Terracing</td>
                 <td>
-                  <input id="styleHeightmapTerracingInput" type="range" min="0" max="20" step="1" />
-                  <output id="styleHeightmapTerracingOutput">0</output>
+                  <slider-input id="styleHeightmapTerracing" min="0" max="20" step="1"></slider-input>
                 </td>
               </tr>
 
               <tr data-tip="Layers reduction rate. Increase to improve performance">
                 <td>Reduce layers</td>
                 <td>
-                  <input id="styleHeightmapSkipInput" type="range" min="0" max="10" step="1" value="5" />
-                  <output id="styleHeightmapSkipOutput">5</output>
+                  <slider-input id="styleHeightmapSkip" min="0" max="10" step="1"></slider-input>
                 </td>
               </tr>
 
               <tr data-tip="Line simplification rate. Increase to slightly improve performance">
                 <td>Simplify line</td>
                 <td>
-                  <input id="styleHeightmapSimplificationInput" type="range" min="0" max="10" step="1" value="0" />
-                  <output id="styleHeightmapSimplificationOutput">0</output>
+                  <slider-input id="styleHeightmapSimplification" min="0" max="10" step="1"></slider-input>
                 </td>
               </tr>
 
@@ -874,7 +854,7 @@
               <tr data-tip="Select color scheme for the element">
                 <td>Color scheme</td>
                 <td>
-                  <select id="styleHeightmapScheme"></select>
+                  <select id="styleHeightmapScheme" style="width: 86%"></select>
                   <button
                     id="openCreateHeightmapSchemeButton"
                     data-tip="Click to add a custom heightmap color scheme"
@@ -889,8 +869,7 @@
               <tr data-tip="Set opacity. 0: transparent, 1: solid">
                 <td>Opacity</td>
                 <td>
-                  <input id="styleOpacityInput" type="range" min="0" max="1" step="0.01" value=".4" />
-                  <output id="styleOpacityOutput">0.4</output>
+                  <slider-input id="styleOpacityInput" min="0" max="1" step="0.01"></slider-input>
                 </td>
               </tr>
             </tbody>
@@ -899,8 +878,7 @@
               <tr data-tip="Set maximum number of items in one column">
                 <td>Column items</td>
                 <td>
-                  <input id="styleLegendColItems" type="range" min="1" max="30" step="1" value="8" />
-                  <output id="styleLegendColItemsOutput">8</output>
+                  <slider-input id="styleLegendColItems" min="1" max="30" step="1"></slider-input>
                 </td>
               </tr>
 
@@ -915,8 +893,7 @@
               <tr data-tip="Set background opacity">
                 <td>Opacity</td>
                 <td>
-                  <input id="styleLegendOpacity" type="range" min="0" max="1" step="0.01" value="1" />
-                  <output id="styleLegendOpacityOutput">1</output>
+                  <slider-input id="styleLegendOpacity" min="0" max="1" step=".01"></slider-input>
                 </td>
               </tr>
             </tbody>
@@ -943,7 +920,7 @@
               <tr data-tip="Select texture image. Big textures can highly affect performance">
                 <td>Image</td>
                 <td>
-                  <select id="styleTextureInput">
+                  <select id="styleTextureInput" style="width: 86%">
                     <option value="">No texture</option>
                     <option value="./images/textures/folded-paper-big.jpg">Folded paper big</option>
                     <option value="./images/textures/folded-paper-small.jpg">Folded paper small</option>
@@ -1027,8 +1004,7 @@
               <tr data-tip="Set vignette blue propagation (in pixels)">
                 <td>Blur</td>
                 <td>
-                  <input id="styleVignetteBlur" type="range" min="0" max="400" step="1" value="50" />
-                  <output id="styleVignetteBlurOutput">50</output>px
+                  <slider-input id="styleVignetteBlur" min="0" max="400" step="1"></slider-input>
                 </td>
               </tr>
             </tbody>
@@ -1053,8 +1029,7 @@
               <tr data-tip="Set ocean pattern opacity">
                 <td>Pattern opacity</td>
                 <td>
-                  <input id="styleOceanPatternOpacity" type="range" min="0" max="1" step=".01" value=".2" />
-                  <output id="styleOceanPatternOpacityOutput">0.2</output>
+                  <slider-input id="styleOceanPatternOpacity" min="0" max="1" step=".01"></slider-input>
                 </td>
               </tr>
 
@@ -1090,6 +1065,13 @@
                     <option value="pointyHex">Hex grid (pointy)</option>
                     <option value="flatHex">Hex grid (flat)</option>
                     <option value="square">Square grid</option>
+                    <option value="square45deg">Square 45 degrees grid</option>
+                    <option value="squareTruncated">Truncated square grid</option>
+                    <option value="squareTetrakis">Tetrakis square grid</option>
+                    <option value="triangleHorizontal">Triangle grid (horizontal)</option>
+                    <option value="triangleVertical">Triangle grid (vertical)</option>
+                    <option value="trihexagonal">Trihexagonal grid</option>
+                    <option value="rhombille">Rhombille grid</option>
                   </select>
                 </td>
               </tr>
@@ -1102,6 +1084,15 @@
                     id="styleGridSizeFriendly"
                     data-tip="Distance between grid cell centers (in map scale)"
                   ></output>
+                  <a
+                    href="https://github.com/Azgaar/Fantasy-Map-Generator/wiki/Scale-and-distance#grids"
+                    target="_blank"
+                  >
+                    <span
+                      data-tip="Open wiki article scale and distance to know about grid scale"
+                      class="icon-info-circled pointer"
+                    ></span>
+                  </a>
                 </td>
               </tr>
 
@@ -1118,8 +1109,7 @@
               <tr data-tip="Set wind (compass) rose size">
                 <td>Size</td>
                 <td>
-                  <input id="styleCompassSizeInput" type="range" min=".02" max="1" step=".01" value=".25" />
-                  <output id="styleCompassSizeOutput">.25</output>
+                  <slider-input id="styleCompassSizeInput" min=".02" max="1" step=".01"></slider-input>
                 </td>
               </tr>
 
@@ -1147,8 +1137,7 @@
               <tr data-tip="Define the size of relief icons. All relief icons will be regenerated">
                 <td>Size</td>
                 <td>
-                  <input id="styleReliefSizeInput" data-stored="reliefSize" type="range" min=".2" max="4" step=".01" />
-                  <output id="styleReliefSizeOutput"></output>
+                  <slider-input id="styleReliefSize" min=".2" max="4" step=".01"></slider-input>
                 </td>
               </tr>
 
@@ -1157,23 +1146,14 @@
               >
                 <td>Density</td>
                 <td>
-                  <input
-                    id="styleReliefDensityInput"
-                    data-stored="reliefDensity"
-                    type="range"
-                    min=".3"
-                    max=".8"
-                    step=".01"
-                    value=".4"
-                  />
-                  <output id="styleReliefDensityOutput">.4</output>
+                  <slider-input id="styleReliefDensity" min=".3" max=".8" step=".01"></slider-input>
                 </td>
               </tr>
             </tbody>
 
             <tbody id="styleFill">
               <tr data-tip="Set fill color">
-                <td>Fill</td>
+                <td>Fill color</td>
                 <td>
                   <input id="styleFillInput" type="color" value="#5E4FA2" />
                   <output id="styleFillOutput">#5E4FA2</output>
@@ -1183,7 +1163,7 @@
 
             <tbody id="styleStroke">
               <tr data-tip="Set stroke color">
-                <td>Stroke</td>
+                <td>Stroke color</td>
                 <td>
                   <input id="styleStrokeInput" type="color" value="#5E4FA2" />
                   <output id="styleStrokeOutput">#5E4FA2</output>
@@ -1195,8 +1175,16 @@
               <tr data-tip="Set stroke width">
                 <td>Stroke width</td>
                 <td>
-                  <input id="styleStrokeWidthInput" type="range" min="0" max="5" step=".01" value="1" />
-                  <output id="styleStrokeWidthOutput">1</output>
+                  <slider-input id="styleStrokeWidthInput" min="0" max="5" step=".01"></slider-input>
+                </td>
+              </tr>
+            </tbody>
+
+            <tbody id="styleLetterSpacing">
+              <tr data-tip="Set letter spacing">
+                <td>Letter spacing</td>
+                <td>
+                  <slider-input id="styleLetterSpacingInput" min="0" max="20" step=".01"></slider-input>
                 </td>
               </tr>
             </tbody>
@@ -1229,7 +1217,7 @@
               <tr data-tip="Select font">
                 <td>Font</td>
                 <td>
-                  <select id="styleSelectFont"></select>
+                  <select id="styleSelectFont" style="width: 85%"></select>
                   <button id="styleFontAdd" data-tip="Add a font" class="icon-plus sideButton"></button>
                 </td>
               </tr>
@@ -1241,7 +1229,7 @@
                 <td>
                   <button id="styleFontPlus" data-tip="Increase font" class="whiteButton">+</button>
                   <button id="styleFontMinus" data-tip="Descrease font" class="whiteButton">-</button>
-                  <input id="styleFontSize" type="number" min=".5" max="100" step=".1" value="14" />
+                  <input id="styleFontSize" type="number" min=".5" max="100" step=".1" />
                 </td>
               </tr>
             </tbody>
@@ -1281,16 +1269,14 @@
               <tr data-tip="Define transparency of temperature leyer. Set to 0 to make it fully transparent">
                 <td>Fill opacity</td>
                 <td>
-                  <input id="styleTemperatureFillOpacityInput" type="range" min="0" max="1" step=".01" value=".3" />
-                  <output id="styleTemperatureFillOpacityOutput">0.3</output>
+                  <slider-input id="styleTemperatureFillOpacityInput" min="0" max="1" step=".01"></slider-input>
                 </td>
               </tr>
 
               <tr data-tip="Set labels size">
                 <td>Labels size</td>
                 <td>
-                  <input id="styleTemperatureFontSizeInput" type="range" min="0" max="30" value="8" />
-                  <output id="styleTemperatureFontSizeOutput">8</output>
+                  <slider-input id="styleTemperatureFontSizeInput" min="0" max="30" step="1"></slider-input>
                 </td>
               </tr>
 
@@ -1307,8 +1293,7 @@
               <tr data-tip="Set states fill opacity. 0: invisible, 1: solid">
                 <td>Body opacity</td>
                 <td>
-                  <input id="styleStatesBodyOpacity" type="range" min="0" max="1" step="0.01" />
-                  <output id="styleStatesBodyOpacityOutput"></output>
+                  <slider-input id="styleStatesBodyOpacity" min="0" max="1" step="0.01"></slider-input>
                 </td>
               </tr>
 
@@ -1326,24 +1311,21 @@
               <tr data-tip="Set states halo effect width">
                 <td>Halo width</td>
                 <td>
-                  <input id="styleStatesHaloWidth" type="range" min="0" max="30" step=".1" value="10" />
-                  <output id="styleStatesHaloWidthOutput">10</output>
+                  <slider-input id="styleStatesHaloWidth" min="0" max="30" step="0.1"></slider-input>
                 </td>
               </tr>
 
               <tr data-tip="Set states halo effect opacity. 0: invisible, 1: solid">
                 <td>Halo opacity</td>
                 <td>
-                  <input id="styleStatesHaloOpacity" type="range" min="0" max="1" step="0.01" value="1" />
-                  <output id="styleStatesHaloOpacityOutput">1</output>
+                  <slider-input id="styleStatesHaloOpacity" min="0" max="1" step="0.01"></slider-input>
                 </td>
               </tr>
 
               <tr data-tip="Select halo effect power (blur). Set to 0 to make it solid line" style="margin-bottom: 1em">
                 <td>Halo blur</td>
                 <td>
-                  <input id="styleStatesHaloBlur" type="range" min="0" max="10" step="0.01" value="4" />
-                  <output id="styleStatesHaloBlurOutput">4</output>
+                  <slider-input id="styleStatesHaloBlur" min="0" max="10" step="0.01"></slider-input>
                 </td>
               </tr>
             </tbody>
@@ -1352,62 +1334,36 @@
               <tr data-tip="Set fill transparency. Set to 0 to make it fully transparent">
                 <td>Fill opacity</td>
                 <td>
-                  <input id="styleArmiesFillOpacity" type="range" min="0" max="1" step=".01" value="1" />
-                  <output id="styleArmiesFillOpacityOutput">1</output>
+                  <slider-input id="styleArmiesFillOpacity" min="0" max="1" step=".01"></slider-input>
                 </td>
               </tr>
               <tr data-tip="Set regiment box size. All regiments will be redrawn on change (position will defaulted)">
                 <td>Box Size</td>
                 <td>
-                  <input id="styleArmiesSize" type="range" min="1" max="10" step=".1" value="3" />
-                  <output id="styleArmiesSizeOutput">3</output>
+                  <slider-input id="styleArmiesSize" min="0" max="10" step=".1"></slider-input>
                 </td>
               </tr>
             </tbody>
 
             <tbody id="styleEmblems">
               <tr data-tip="Set state emblems size multiplier">
-                <td>State Size</td>
+                <td>State size</td>
                 <td>
-                  <input
-                    id="emblemsStateSizeInput"
-                    data-stored="emblemsStateSize"
-                    type="number"
-                    min="0"
-                    max="5"
-                    step=".02"
-                    value="1"
-                  />
+                  <slider-input id="emblemsStateSizeInput" min="0" max="5" step=".01"></slider-input>
                 </td>
               </tr>
 
               <tr data-tip="Set province emblems size multiplier">
-                <td>Province Size</td>
+                <td>Province size</td>
                 <td>
-                  <input
-                    id="emblemsProvinceSizeInput"
-                    data-stored="emblemsProvinceSize"
-                    type="number"
-                    min="0"
-                    max="5"
-                    step=".02"
-                    value="1"
-                  />
+                  <slider-input id="emblemsProvinceSizeInput" min="0" max="5" step=".01"></slider-input>
                 </td>
               </tr>
 
               <tr data-tip="Set burg emblems size multiplier">
-                <td>Burg Size</td>
+                <td>Burg size</td>
                 <td>
-                  <input
-                    id="emblemsBurgSizeInput"
-                    data-stored="emblemsBurgSize"
-                    type="number"
-                    min="0"
-                    max="5"
-                    step=".02"
-                    value="1"
-                  />
+                  <slider-input id="emblemsBurgSizeInput" min="0" max="5" step=".01"></slider-input>
                 </td>
               </tr>
 
@@ -1495,15 +1451,14 @@
               <tr data-tip="Set background opacity. 0: transparent, 1: solid">
                 <td>Back opacity</td>
                 <td>
-                  <input id="styleScaleBarBackgroundOpacityInput" type="range" min="0" max="1" step="0.01" />
-                  <output id="styleScaleBarBackgroundOpacityOutput"></output>
+                  <slider-input id="styleScaleBarBackgroundOpacity" min="0" max="1" step=".01"></slider-input>
                 </td>
               </tr>
 
               <tr data-tip="Set background fill color">
                 <td>Back fill</td>
                 <td>
-                  <input id="styleScaleBarBackgroundFillInput" type="color" />
+                  <input id="styleScaleBarBackgroundFill" type="color" />
                   <output id="styleScaleBarBackgroundFillOutput"></output>
                 </td>
               </tr>
@@ -1511,7 +1466,7 @@
               <tr data-tip="Set background stroke color and width">
                 <td>Back stroke</td>
                 <td>
-                  <input id="styleScaleBarBackgroundStrokeInput" type="color" />
+                  <input id="styleScaleBarBackgroundStroke" type="color" />
                   <output id="styleScaleBarBackgroundStrokeOutput"></output>
 
                   <span>Width </span>
@@ -1573,7 +1528,9 @@
               <td></td>
             </tr>
 
-            <tr data-tip="Map seed number. Seed produces the same map only if canvas size and options are the same">
+            <tr
+              data-tip="Map seed number. Press 'Enter' to apply. Seed produces the same map only if canvas size and options are the same"
+            >
               <td>
                 <i
                   data-tip="Show seed history to apply a previous seed"
@@ -1639,7 +1596,7 @@
 
             <tr data-tip="Define current year and era name">
               <td>
-                <i data-locked="0" id="lock_era" class="icon-lock-open"></i>
+                <i data-locked="0" id="lock_year" data-ids="year,era" class="icon-lock-open"></i>
               </td>
               <td>Year and era</td>
               <td>
@@ -1683,10 +1640,10 @@
               </td>
               <td>Cultures number</td>
               <td>
-                <input id="culturesInput" data-stored="cultures" type="range" min="1" max="32" value="14" />
+                <input id="culturesInput" data-stored="cultures" type="range" min="1" />
               </td>
               <td>
-                <input id="culturesOutput" data-stored="cultures" type="number" min="1" max="32" value="14" />
+                <input id="culturesOutput" data-stored="cultures" type="number" min="1" />
               </td>
             </tr>
 
@@ -1712,53 +1669,41 @@
 
             <tr data-tip="Define how many states and capitals should be generated">
               <td>
-                <i data-locked="0" id="lock_regions" class="icon-lock-open"></i>
+                <i data-locked="0" id="lock_statesNumber" class="icon-lock-open"></i>
               </td>
               <td>States number</td>
-              <td>
-                <input id="regionsInput" data-stored="regions" type="range" min="0" max="99" value="13" />
-              </td>
-              <td>
-                <input id="regionsOutput" data-stored="regions" type="number" min="0" max="999" value="13" />
+              <td colspan="2">
+                <slider-input id="statesNumber" data-stored="statesNumber" min="0" max="100"></slider-input>
               </td>
             </tr>
 
             <tr data-tip="Define burgs percentage to form a separate province">
               <td>
-                <i data-locked="0" id="lock_provinces" class="icon-lock-open"></i>
+                <i data-locked="0" id="lock_provincesRatio" class="icon-lock-open"></i>
               </td>
               <td>Provinces ratio</td>
-              <td>
-                <input id="provincesInput" data-stored="provinces" type="range" min="0" max="100" value="30" />
-              </td>
-              <td>
-                <input id="provincesOutput" data-stored="provinces" type="number" min="0" max="100" value="30" />
+              <td colspan="2">
+                <slider-input id="provincesRatio" data-stored="provincesRatio" min="0" max="100"></slider-input>
               </td>
             </tr>
 
             <tr data-tip="Define how much states and cultures can vary in size. Defines expansionism value">
               <td>
-                <i data-locked="0" id="lock_power" class="icon-lock-open"></i>
+                <i data-locked="0" id="lock_sizeVariety" class="icon-lock-open"></i>
               </td>
               <td>Size variety</td>
-              <td>
-                <input id="powerInput" data-stored="power" type="range" min="0" max="10" step=".2" value="5" />
-              </td>
-              <td>
-                <input id="powerOutput" data-stored="power" type="number" min="0" max="10" step=".1" value="5" />
+              <td colspan="2">
+                <slider-input id="sizeVariety" data-stored="sizeVariety" min="0" max="10" step=".1"></slider-input>
               </td>
             </tr>
 
             <tr data-tip="Set state and cultures growth rate. Defines how many lands will stay neutral">
               <td>
-                <i data-locked="0" id="lock_neutral" class="icon-lock-open"></i>
+                <i data-locked="0" id="lock_growthRate" class="icon-lock-open"></i>
               </td>
               <td>Growth rate</td>
-              <td>
-                <input id="neutralInput" data-stored="neutral" type="range" min=".1" max="2" step=".1" value="1" />
-              </td>
-              <td>
-                <input id="neutralOutput" data-stored="neutral" type="number" min=".1" max="2" step=".1" value="1" />
+              <td colspan="2">
+                <slider-input id="growthRate" data-stored="growthRate" min=".1" max="2" step=".1"></slider-input>
               </td>
             </tr>
 
@@ -1779,14 +1724,17 @@
               data-tip="Define how many organized religions and cults should be generated. Cultures will have their own folk religions in any case"
             >
               <td>
-                <i data-locked="0" id="lock_religions" class="icon-lock-open"></i>
+                <i data-locked="0" id="lock_religionsNumber" class="icon-lock-open"></i>
               </td>
               <td>Religions number</td>
-              <td>
-                <input id="religionsInput" data-stored="religions" type="range" min="0" max="50" step="1" value="15" />
-              </td>
-              <td>
-                <output id="religionsOutput" data-stored="religions" value="auto"></output>
+              <td colspan="2">
+                <slider-input
+                  id="religionsNumber"
+                  data-stored="religionsNumber"
+                  min="0"
+                  max="50"
+                  step="1"
+                ></slider-input>
               </td>
             </tr>
 
@@ -1815,22 +1763,16 @@
             >
               <td></td>
               <td>Interface size</td>
-              <td>
-                <input id="uiSizeInput" data-stored="uiSize" type="range" min=".6" max="3" step=".1" />
-              </td>
-              <td>
-                <input id="uiSizeOutput" data-stored="uiSize" type="number" min=".6" max="3" step=".1" />
+              <td colspan="2">
+                <slider-input id="uiSize" data-stored="uiSize" min=".6" max="3" step=".1"></slider-input>
               </td>
             </tr>
 
             <tr data-tip="Set tooltip size">
               <td></td>
               <td>Tooltip size</td>
-              <td>
-                <input id="tooltipSizeInput" data-stored="tooltipSize" type="range" min="4" max="32" value="14" />
-              </td>
-              <td>
-                <input id="tooltipSizeOutput" data-stored="tooltipSize" type="number" min="0" max="256" value="14" />
+              <td colspan="2">
+                <slider-input id="tooltipSize" data-stored="tooltipSize" min="1" max="32" value="14"></slider-input>
               </td>
             </tr>
 
@@ -1850,11 +1792,8 @@
             <tr data-tip="Set dialog and tool windows transparency">
               <td></td>
               <td>Transparency</td>
-              <td>
-                <input id="transparencyInput" data-stored="transparency" type="range" min="0" max="100" />
-              </td>
-              <td>
-                <input id="transparencyOutput" data-stored="transparency" type="number" min="0" max="100" />
+              <td colspan="2">
+                <slider-input id="transparencyInput" data-stored="transparency" min="0" max="100"></slider-input>
               </td>
             </tr>
 
@@ -1897,6 +1836,17 @@
               <td></td>
             </tr>
 
+            <tr data-tip="Toggle Azgaar Assistant (help bubble on the bottom right corner)">
+              <td></td>
+              <td>Azgaar assistant</td>
+              <td>
+                <select id="azgaarAssistant" data-stored="azgaarAssistant">
+                  <option value="show" selected>Show</option>
+                  <option value="hide">Hide</option>
+                </select>
+              </td>
+            </tr>
+
             <tr data-tip="Select speech synthesis voice to pronounce generated names">
               <td></td>
               <td>Speaker voice</td>
@@ -2060,8 +2010,8 @@
             </button>
             <button
               id="optionsReset"
-              data-tip="Click to restore default options (page will be reloaded)"
-              onclick="restoreDefaultOptions()"
+              data-tip="Click to restore default options and reload the page"
+              onclick="cleanupData()"
             >
               Reset to defaults
             </button>
@@ -2145,7 +2095,7 @@
               id="regenerateStateLabels"
               data-tip="Click to update state labels placement based on current borders"
             >
-              Labels
+              State Labels
             </button>
             <button id="regenerateMarkers" data-tip="Click to regenerate unlocked markers">
               Markers <i id="configRegenerateMarkers" class="icon-cog" data-tip="Click to set number multiplier"></i>
@@ -2178,7 +2128,7 @@
             <button id="regenerateRoutes" data-tip="Click to regenerate all unlocked routes">Routes</button>
             <button
               id="regenerateStates"
-              data-tip="Click to select new capitals and regenerate non-locked states. Emblems and military forces will be regenerated as well, burgs will remain as they are"
+              data-tip="Click to regenerate non-locked states. Emblems and military forces will be regenerated as well, burgs will remain as they are, but capitals will be different"
             >
               States
             </button>
@@ -2239,8 +2189,8 @@
 
           <div class="separator">Create</div>
           <div class="grid">
-            <button id="openSubmapMenu" data-tip="Click to generate a submap from the current viewport">Submap</button>
-            <button id="openResampleMenu" data-tip="Click to transform the map">Transform</button>
+            <button id="openSubmapTool" data-tip="Click to generate a submap from the current viewport">Submap</button>
+            <button id="openTransformTool" data-tip="Click to transform the map">Transform</button>
           </div>
         </div>
 
@@ -2749,6 +2699,24 @@
           />
         </div>
 
+        <button id="labelLetterSpacingShow" data-tip="Show the letter spacing section" class="icon-text-width"></button>
+        <div id="labelLetterSpacingSection" style="display: none">
+          <button
+            id="labelLetterSpacingHide"
+            data-tip="Hide the letter spacing section"
+            class="icon-text-width"
+          ></button>
+          <slider-input
+            id="labelLetterSpacingSize"
+            style="display: inline-block"
+            data-tip="Set the letter spacing size for this label"
+            min="0"
+            max="20"
+            step=".01"
+            value="0"
+          ></slider-input>
+        </div>
+
         <button id="labelAlign" data-tip="Turn text path into a straight line" class="icon-resize-horizontal"></button>
         <button id="labelLegend" data-tip="Edit free text notes (legend) for this label" class="icon-edit"></button>
         <button
@@ -3386,7 +3354,7 @@
               <use id="burgEmblem"></use>
             </svg>
             <div style="display: grid; grid-auto-rows: minmax(1.6em, auto)">
-              <div id="burgProvinceAndState" style="font-style: italic; max-width: 16em"></div>
+              <div id="burgProvinceAndState" style="font-weight: bold; max-width: 16em"></div>
 
               <div>
                 <div class="label">Name:</div>
@@ -3395,7 +3363,7 @@
                   data-tip="Type to rename the burg"
                   autocorrect="off"
                   spellcheck="false"
-                  style="width: 8em"
+                  style="width: 9em"
                 />
                 <span data-tip="Speak the name. You can change voice and language in options" class="speaker">🔊</span>
                 <span
@@ -3407,7 +3375,7 @@
 
               <div data-tip="Select burg type. Type slightly affects emblem generation">
                 <div class="label">Type:</div>
-                <select id="burgType" style="width: 8em">
+                <select id="burgType" style="width: 9em">
                   <option value="Generic">Generic</option>
                   <option value="River">River</option>
                   <option value="Lake">Lake</option>
@@ -3420,7 +3388,7 @@
 
               <div data-tip="Select dominant culture">
                 <div class="label">Culture:</div>
-                <select id="burgCulture" style="width: 8em"></select>
+                <select id="burgCulture" style="width: 9em"></select>
                 <span
                   id="burgNameReCulture"
                   data-tip="Generate culture-specific name for the burg"
@@ -3430,18 +3398,22 @@
 
               <div data-tip="Set burg population">
                 <div class="label">Population:</div>
-                <input id="burgPopulation" type="number" min="0" step="1" style="width: 8em" />
+                <input id="burgPopulation" type="number" min="0" step="1" style="width: 9em" />
               </div>
 
-              <div data-tip="Burg mean annual temperature and real-world city for comparison">
-                <div class="label">Temperature:</div>
-                <span id="burgTemperature"></span>, like in
-                <span id="burgTemperatureLikeIn"></span>
-                <i
-                  id="burgTemperatureGraph"
-                  data-tip="Show temperature graph for the burg"
-                  class="icon-chart-area pointer"
-                ></i>
+              <div data-tip="Burg average yearly temperature" style="display: flex; justify-content: space-between">
+                <div>
+                  <div class="label">Temperature:</div>
+                  <span id="burgTemperature"></span>
+                </div>
+                <div style="display: flex; gap: 0.5em">
+                  <i class="icon-info-circled" id="burgTemperatureLikeIn"></i>
+                  <i
+                    id="burgTemperatureGraph"
+                    data-tip="Show temperature graph for the burg"
+                    class="icon-chart-area pointer"
+                  ></i>
+                </div>
               </div>
 
               <div data-tip="Burg height above mean sea level">
@@ -3514,7 +3486,7 @@
                 <i id="burgLinkOpen" data-tip="Open burg map in a new tab" class="icon-link-ext pointer"></i>
               </div>
             </div>
-            <div id="burgPreviewObject" style="max-width: 30em; pointer-events: none"></div>
+            <div id="burgPreviewObject" style="pointer-events: none"></div>
           </div>
         </div>
 
@@ -3555,7 +3527,12 @@
 
           <button id="burgEditEmblem" data-tip="Edit emblem" class="icon-shield-alt"></button>
           <button id="burgTogglePreview" data-tip="Toggle preview" class="icon-map"></button>
-          <button id="burgRelocate" data-tip="Relocate burg" class="icon-target"></button>
+          <button id="burgLocate" data-tip="Zoom map and center view in the burg" class="icon-target"></button>
+          <button
+            id="burgRelocate"
+            data-tip="Relocate burg. Click on map to move the burg"
+            class="icon-map-pin"
+          ></button>
           <button id="burglLegend" data-tip="Edit free text notes (legend) for this burg" class="icon-edit"></button>
           <button id="burgLock" class="icon-lock-open" onmouseover="showElementLockTip(event)"></button>
           <button
@@ -3576,9 +3553,9 @@
             <input id="markerType" style="width: 10.3em" />
           </div>
 
-          <div data-tip="Marker icon. Paste any Unicode symbol or select from the predefined list">
+          <div data-tip="Marker icon" style="display: flex; align-items: center">
             <div class="label">Icon:</div>
-            <input id="markerIcon" style="width: 5em" />
+            <div id="markerIcon" style="font-size: 1.5em; width: 3.7em">👑</div>
             <button id="markerIconSelect" style="width: 5em">select</button>
           </div>
 
@@ -3667,10 +3644,10 @@
             ></i>
           </div>
 
-          <div data-tip="Regiment emblem. Paste any Unicode symbol or select from the predefined list">
-            <div class="label italic">Emblem:</div>
-            <input id="regimentEmblem" style="width: 5em" />
-            <button id="regimentEmblemSelect" style="padding: 0; width: 4.5em">select</button>
+          <div data-tip="Regiment emblem" style="display: flex; align-items: center">
+            <div class="label">Emblem:</div>
+            <div id="regimentEmblem" style="font-size: 1.5em; width: 3.7em"></div>
+            <button id="regimentEmblemChange" style="padding: 0; width: 4.5em">change</button>
           </div>
 
           <div id="regimentComposition" class="table"></div>
@@ -4123,72 +4100,24 @@
         </div>
 
         <div id="brushesSliders" style="display: none">
-          <div data-tip="Change brush size" data-shortcut="+ (increase), – (decrease)" style="padding-bottom: 1px">
-            <div style="width: 3.2em; display: inline-block"><i>Radius:</i></div>
-            <input
-              id="brushRadius"
-              oninput="tip('Brush radius: '+this.value); brushRadiusNumber.value = this.value"
-              type="range"
-              min="1"
-              max="99"
-              value="25"
-              style="width: 13em"
-            />
-            <input
-              id="brushRadiusNumber"
-              oninput="tip('Brush radius: '+this.value); brushRadius.value = this.value"
-              type="number"
-              min="1"
-              max="99"
-              value="25"
-              style="border: 1px solid #d4d4d4"
-            />
+          <div data-tip="Change brush size. Shortcut: + to increase; – to decrease">
+            <slider-input id="heightmapBrushRadius" min="1" max="100" value="25">
+              <div style="width: 3.5em">Radius:</div>
+            </slider-input>
           </div>
 
-          <div data-tip="Set the brush power">
-            <div style="width: 3.2em; display: inline-block"><i>Power:</i></div>
-            <input
-              id="brushPower"
-              oninput="tip('Brush power: '+this.value); brushPowerNumber.value = this.value"
-              type="range"
-              min="1"
-              max="10"
-              value="5"
-              style="width: 13em"
-            />
-            <input
-              id="brushPowerNumber"
-              oninput="tip('Brush power: '+this.value); brushPower.value = this.value"
-              type="number"
-              min="1"
-              max="10"
-              value="5"
-              style="border: 1px solid #d4d4d4"
-            />
+          <div data-tip="Change brush power">
+            <slider-input id="heightmapBrushPower" min="1" max="10" value="5">
+              <div style="width: 3.5em">Power:</div>
+            </slider-input>
           </div>
         </div>
 
         <div id="lineSlider" style="display: none">
-          <div data-tip="Set change power">
-            <div style="width: 3.2em; display: inline-block"><i>Power:</i></div>
-            <input
-              id="linePower"
-              oninput="tip('Line power: '+this.value); linePowerNumber.value = this.value"
-              type="range"
-              min="-100"
-              max="100"
-              value="30"
-              style="width: 13em"
-            />
-            <input
-              id="linePowerNumber"
-              oninput="tip('Line power: '+this.value); linePower.value = this.value"
-              type="number"
-              min="-100"
-              max="100"
-              value="30"
-              style="border: 1px solid #d4d4d4"
-            />
+          <div data-tip="Change tool power. Shortcut: + to increase; – to decrease">
+            <slider-input id="heightmapLinePower" min="-100" max="100" value="30">
+              <div style="width: 3.5em">Power:</div>
+            </slider-input>
           </div>
         </div>
 
@@ -4454,26 +4383,10 @@
             class="icon-brush"
           ></button>
           <div id="biomesManuallyButtons" style="display: none">
-            <label data-tip="Change brush size" data-shortcut="+ (increase), – (decrease)" class="italic"
-              >Brush radius:
-              <input
-                id="biomesManuallyBrush"
-                oninput="tip('Brush radius: '+this.value); biomesManuallyBrushNumber.value = this.value"
-                type="range"
-                min="5"
-                max="99"
-                value="15"
-                style="width: 4em"
-              />
-              <input
-                id="biomesManuallyBrushNumber"
-                oninput="tip('Brush radius: '+this.value); biomesManuallyBrush.value = this.value"
-                type="number"
-                min="5"
-                max="99"
-                value="15"
-              /> </label
-            ><br />
+            <div data-tip="Change brush size. Shortcut: + to increase; – to decrease" style="margin-block: 0.3em">
+              Brush size:
+              <slider-input id="biomesBrush" min="1" max="100" value="15"></slider-input>
+            </div>
             <button id="biomesManuallyApply" data-tip="Apply current assignment" class="icon-check"></button>
             <button id="biomesManuallyCancel" data-tip="Cancel assignment" class="icon-cancel"></button>
           </div>
@@ -4698,26 +4611,10 @@
 
           <button id="provincesManually" data-tip="Manually re-assign provinces" class="icon-brush"></button>
           <div id="provincesManuallyButtons" style="display: none">
-            <label data-tip="Change brush size" data-shortcut="+ (increase), – (decrease)" class="italic"
-              >Brush size:
-              <input
-                id="provincesManuallyBrush"
-                oninput="tip('Brush size: '+this.value); provincesManuallyBrushNumber.value = this.value"
-                type="range"
-                min="5"
-                max="99"
-                value="8"
-                style="width: 5em"
-              />
-              <input
-                id="provincesManuallyBrushNumber"
-                oninput="tip('Brush size: '+this.value); provincesManuallyBrush.value = this.value"
-                type="number"
-                min="5"
-                max="99"
-                value="8"
-              /> </label
-            ><br />
+            <div data-tip="Change brush size. Shortcut: + to increase; – to decrease" style="margin-block: 0.3em">
+              Brush size:
+              <slider-input id="provincesBrush" min="1" max="100" value="8"></slider-input>
+            </div>
             <button id="provincesManuallyApply" data-tip="Apply assignment" class="icon-check"></button>
             <button id="provincesManuallyCancel" data-tip="Cancel assignment" class="icon-cancel"></button>
           </div>
@@ -4893,7 +4790,7 @@
           <span style="margin-left: 2px">Names data: </span>
         </div>
 
-        <div id="namesbaseBody" style="margin-block: 2px">
+        <div id="namesbaseBody" style="margin-block: 2px; width: auto">
           <textarea
             id="namesbaseTextarea"
             data-base="0"
@@ -4902,6 +4799,7 @@
             placeholder="Provide a names data: a comma separated list of source names"
             autocorrect="off"
             spellcheck="false"
+            style="resize: none"
           ></textarea>
 
           <div>
@@ -4997,7 +4895,11 @@
         <div id="zonesBottom">
           <button id="zonesEditorRefresh" data-tip="Refresh the Editor" class="icon-cw"></button>
           <button id="zonesEditStyle" data-tip="Edit zones style in Style Editor" class="icon-adjust"></button>
-          <button id="zonesLegend" data-tip="Toggle Legend box" class="icon-list-bullet"></button>
+          <button
+            id="zonesLegend"
+            data-tip="Toggle Legend box (shows all non-hidden zones)"
+            class="icon-list-bullet"
+          ></button>
           <button
             id="zonesPercentage"
             data-tip="Toggle percentage / absolute values views"
@@ -5006,29 +4908,10 @@
 
           <button id="zonesManually" data-tip="Re-assign zones" class="icon-brush"></button>
           <div id="zonesManuallyButtons" style="display: none">
-            <div>
-              <label data-tip="Change brush size" data-shortcut="+ (increase), – (decrease)" class="italic"
-                >Brush:
-                <input
-                  id="zonesBrush"
-                  oninput="tip('Brush size: '+this.value); zonesBrushNumber.value = this.value"
-                  type="range"
-                  min="5"
-                  max="50"
-                  value="7"
-                  style="width: 9em"
-                />
-                <input
-                  id="zonesBrushNumber"
-                  oninput="tip('Brush size: '+this.value); zonesBrush.value = this.value"
-                  type="number"
-                  min="5"
-                  max="50"
-                  value="7"
-                />
-              </label>
+            <div data-tip="Change brush size. Shortcut: + to increase; – to decrease" style="margin-block: 0.3em">
+              Brush size:
+              <slider-input id="zonesBrush" min="1" max="100" value="8"></slider-input>
             </div>
-
             <div>
               <input id="zonesBrushLandOnly" class="checkbox" type="checkbox" checked />
               <label for="zonesBrushLandOnly" class="checkbox-label"><i>Change land only</i></label>
@@ -5067,6 +4950,7 @@
         <div id="notesLegend" contenteditable="true"></div>
         <div style="margin-top: 0.3em">
           <button id="notesFocus" data-tip="Focus on selected object" class="icon-target"></button>
+          <button id="notesGenerateWithAi" data-tip="Generate note with AI" class="icon-robot"></button>
           <button
             id="notesPin"
             data-tip="Toggle notes box dispay: hide or do not hide the box on mouse move"
@@ -5078,6 +4962,40 @@
         </div>
       </div>
 
+      <div id="aiGenerator" class="dialog stable" style="display: none">
+        <div style="display: flex; flex-direction: column; gap: 0.3em; width: 100%">
+          <textarea id="aiGeneratorResult" placeholder="Generated text will appear here" cols="30" rows="10"></textarea>
+          <textarea id="aiGeneratorPrompt" placeholder="Type a prompt here" cols="30" rows="5"></textarea>
+          <div style="display: flex; align-items: center; gap: 1em">
+            <label for="aiGeneratorModel"
+              >Model:
+              <select id="aiGeneratorModel"></select>
+            </label>
+            <label
+              for="aiGeneratorTemperature"
+              data-tip="Temperature controls response randomness; higher values mean more creativity, lower values mean more predictability"
+            >
+              Temperature:
+              <input id="aiGeneratorTemperature" type="number" min="-1" max="2" step=".1" class="icon-key" />
+            </label>
+            <label for="aiGeneratorKey"
+              >Key:
+              <input
+                id="aiGeneratorKey"
+                placeholder="Enter API key"
+                class="icon-key"
+                data-tip="Enter API key. Note: the Generator doesn't store the key or any generated data"
+              />
+              <button
+                id="aiGeneratorKeyHelp"
+                class="icon-help-circled"
+                data-tip="Click to see the usage instructions"
+              />
+            </label>
+          </div>
+        </div>
+      </div>
+
       <div id="emblemEditor" class="dialog stable" style="display: none">
         <svg viewBox="0 0 200 200"><use id="emblemImage"></use></svg>
         <div id="emblemBody">
@@ -5253,11 +5171,11 @@
         <div id="unitsBody" style="margin-left: 1.1em">
           <div class="unitsHeader" style="margin-top: 0.4em">
             <span class="icon-map-signs"></span>
-            <div>Distance:</div>
+            <label>Distance:</label>
           </div>
 
           <div data-tip="Select a distance unit or provide a custom name">
-            <div>Distance unit:</div>
+            <label>Distance unit:</label>
             <select id="distanceUnitInput" data-stored="distanceUnit">
               <option value="mi" selected>Mile (mi)</option>
               <option value="km">Kilometer (km)</option>
@@ -5269,34 +5187,25 @@
             </select>
           </div>
 
-          <i data-locked="0" id="lock_distanceScale" class="icon-lock-open"></i>
           <div data-tip="Select how many distance units are in one pixel">
-            <div>1 map pixel =</div>
-            <input id="distanceScaleOutput" type="range" min=".01" max="20" step=".1" value="3" />
-            <input
-              id="distanceScaleInput"
-              data-stored="distanceScale"
-              type="number"
-              min=".01"
-              max="100"
-              step=".01"
-              value="3"
-              data-value="3"
-            />
+            <i data-locked="0" id="lock_distanceScale" class="icon-lock-open"></i>
+            <slider-input id="distanceScaleInput" data-stored="distanceScale" min=".01" max="20" step=".1" value="3">
+              <label>1 map pixel:</label>
+            </slider-input>
           </div>
 
           <div data-tip='Area unit name, type "square" to add ² to the distance unit'>
-            <div>Area unit:</div>
+            <label>Area unit:</label>
             <input id="areaUnit" data-stored="areaUnit" type="text" value="square" />
           </div>
 
           <div class="unitsHeader">
             <span class="icon-signal"></span>
-            <div>Altitude:</div>
+            <label>Altitude:</label>
           </div>
 
           <div data-tip="Select an altitude unit or provide a custom name">
-            <div>Height unit:</div>
+            <label>Height unit:</label>
             <select id="heightUnit" data-stored="heightUnit">
               <option value="ft" selected>Feet (ft)</option>
               <option value="m">Meters (m)</option>
@@ -5308,26 +5217,25 @@
           <div
             data-tip="Set height exponent, i.e. a value for altitude change sharpness. Altitude affects temperature and hence biomes"
           >
-            <div>Exponent:</div>
-            <input id="heightExponentOutput" type="range" min="1.5" max="2.2" value="2" step=".01" />
-            <input
+            <slider-input
               id="heightExponentInput"
               data-stored="heightExponent"
-              type="number"
               min="1.5"
               max="2.2"
-              value="2"
               step=".01"
-            />
+              value="2"
+            >
+              <label>Exponent:</label>
+            </slider-input>
           </div>
 
           <div class="unitsHeader" data-tip="Select Temperature scale">
             <span class="icon-temperature-high"></span>
-            <div>Temperature:</div>
+            <label>Temperature:</label>
           </div>
 
           <div>
-            <div>Temperature scale:</div>
+            <label>Temperature scale:</label>
             <select id="temperatureScale" data-stored="temperatureScale">
               <option value="°C" selected>degree Celsius (°C)</option>
               <option value="°F">degree Fahrenheit (°F)</option>
@@ -5342,73 +5250,32 @@
 
           <div class="unitsHeader">
             <span class="icon-male"></span>
-            <div>Population:</div>
+            <label>Population:</label>
           </div>
 
           <div data-tip="Set how many people are in one population point">
-            <div>1 population point =</div>
-            <input
-              id="populationRateOutput"
-              data-stored="populationRate"
-              type="range"
-              min="10"
-              max="9990"
-              step="10"
-              value="1000"
-            />
-            <input
+            <slider-input
               id="populationRateInput"
               data-stored="populationRate"
-              type="number"
               min="10"
-              max="9990"
+              max="10000"
               step="10"
               value="1000"
-            />
+            >
+              <label>1 population point:</label>
+            </slider-input>
           </div>
 
           <div data-tip="Set urbanization rate: burgs population relative to all population">
-            <div>Urbanization rate:</div>
-            <input
-              id="urbanizationOutput"
-              data-stored="urbanization"
-              type="range"
-              min=".01"
-              max="5"
-              step=".01"
-              value="1"
-            />
-            <input
-              id="urbanizationInput"
-              data-stored="urbanization"
-              type="number"
-              min=".01"
-              max="5"
-              step=".01"
-              value="1"
-            />
+            <slider-input id="urbanizationInput" data-stored="urbanization" min=".01" max="5" step=".01" value="1">
+              <label>Urbanization rate:</label>
+            </slider-input>
           </div>
 
           <div data-tip="Set urban density: average population per building in Medieval Fantasy City Generator">
-            <div>Urban density:</div>
-            <input
-              id="urbanDensityOutput"
-              data-stored="urbanDensity"
-              type="range"
-              min="1"
-              max="200"
-              step="1"
-              value="10"
-            />
-            <input
-              id="urbanDensityInput"
-              data-stored="urbanDensity"
-              type="number"
-              min="1"
-              max="200"
-              step="1"
-              value="10"
-            />
+            <slider-input id="urbanDensityInput" data-stored="urbanDensity" min="1" max="200" step="1" value="10">
+              <label>Urban density:</label>
+            </slider-input>
           </div>
         </div>
 
@@ -5442,7 +5309,7 @@
       </div>
 
       <div id="burgsOverview" class="dialog stable" style="display: none">
-        <div id="burgsHeader" class="header" style="grid-template-columns: 8em 6em 6em 7em 7em 4em 2em">
+        <div id="burgsHeader" class="header" style="grid-template-columns: 8em 6em 6em 6em 8em 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
@@ -5458,7 +5325,9 @@
           >
             Population
           </div>
-          <div data-tip="Click to sort by burg type" class="sortable alphabetically" data-sortby="type">Type&nbsp;</div>
+          <div data-tip="Click to sort by burg features" class="sortable alphabetically" data-sortby="features">
+            Features&nbsp;
+          </div>
         </div>
 
         <div id="burgsBody" class="table"></div>
@@ -5886,12 +5755,13 @@
         </p>
         <p><b>Latitude:</b> <span id="infoLat"></span></p>
         <p><b>Longitude:</b> <span id="infoLon"></span></p>
+        <p><b>Geozone:</b> <span id="infoGeozone"></span></p>
         <p><b>Area:</b> <span id="infoArea">0</span></p>
         <p><b>Type:</b> <span id="infoFeature">n/a</span></p>
         <p><b>Precipitation:</b> <span id="infoPrec">0</span></p>
         <p><b>River:</b> <span id="infoRiver">no</span></p>
         <p><b>Population:</b> <span id="infoPopulation">0</span></p>
-        <p><b>Elevation:</b> <span id="infoEvelation">0</span></p>
+        <p><b>Elevation:</b> <span id="infoElevation">0</span></p>
         <p><b>Depth:</b> <span id="infoDepth">0</span></p>
         <p><b>Temperature:</b> <span id="infoTemp">0</span></p>
         <p><b>Biome:</b> <span id="infoBiome">n/a</span></p>
@@ -5903,11 +5773,101 @@
       </div>
 
       <div id="iconSelector" style="display: none" class="dialog">
-        <table id="iconTable" class="table pointer" style="font-size: 2em; text-align: center; width: 100%"></table>
-        <div style="font-style: italic; font-size: 1.2em; margin: 0.4em 0 0 0.4em">
-          <span>Select from the list or paste a Unicode character here: </span>
-          <input id="iconInput" style="width: 2.5em" />
-          <span>. See <a href="https://emojipedia.org" target="_blank">Emojipedia</a> for reference</span>
+        <div>
+          <b>Unicode emojis</b>
+          <div style="font-style: italic">
+            <span>Select from the list or paste a Unicode character here: </span>
+            <input id="iconInput" style="width: 2.5em" />
+            <span>. See <a href="https://emojidb.org" target="_blank">EmojiDB</a> to search for emojis</span>
+          </div>
+          <table id="iconTable" class="table pointer" style="font-size: 2em; text-align: center; width: 100%"></table>
+        </div>
+
+        <div style="margin-top: 0.5em">
+          <b>External images</b>
+          <div style="font-style: italic">
+            <span>Paste link to the image here: </span>
+            <input id="imageInput" style="width: 20em" />
+            <button id="addImage" type="button">Add</button>
+          </div>
+          <div id="addedIcons" class="pointer" style="display: flex; flex-wrap: wrap; max-width: 420px"></div>
+        </div>
+      </div>
+
+      <div id="submapTool" style="display: none" class="dialog">
+        <p style="font-weight: bold">
+          This operation is destructive and irreversible. It will create a completely new map based on the current one.
+          Don't forget to save the .map file to your machine first!
+        </p>
+
+        <div style="display: flex; flex-direction: column; gap: 0.5em">
+          <div data-tip="Set points (cells) number of the submap" style="display: flex; gap: 1em">
+            <div>Points number</div>
+            <div>
+              <input id="submapPointsInput" type="range" min="1" max="13" value="4" />
+              <output id="submapPointsFormatted" style="color: #053305">10K</output>
+            </div>
+          </div>
+
+          <div data-tip="Check to fit burg styles (icon and label size) to the submap scale">
+            <input type="checkbox" class="checkbox" id="submapRescaleBurgStyles" checked />
+            <label for="submapRescaleBurgStyles" class="checkbox-label">Rescale burg styles</label>
+          </div>
+        </div>
+      </div>
+
+      <div id="transformTool" style="display: none" class="dialog">
+        <div style="padding-top: 0.5em; width: 40em; font-weight: bold">
+          This operation is destructive and irreversible. It will create a completely new map based on the current one.
+          Don't forget to save the .map file to your machine first!
+        </div>
+
+        <div
+          id="transformToolBody"
+          style="
+            padding: 0.5em 0;
+            width: 100%;
+            display: grid;
+            grid-template-columns: 1fr 1fr;
+            grid-template-rows: repeat(5, 1fr);
+            align-items: center;
+          "
+        >
+          <div>Points number</div>
+          <div>
+            <input id="transformPointsInput" type="range" min="1" max="13" value="4" />
+            <output id="transformPointsFormatted" style="color: #053305">10K</output>
+          </div>
+
+          <div>Shift</div>
+          <div>
+            <label>X: <input id="transformShiftX" type="number" size="4" value="0" /></label>
+            <label>Y: <input id="transformShiftY" type="number" size="4" value="0" /></label>
+          </div>
+
+          <div>Rotate</div>
+          <div>
+            <input id="transformAngleInput" type="range" min="0" max="359" value="0" />
+            <output id="transformAngleOutput">0</output>°
+          </div>
+
+          <div>Scale</div>
+          <div>
+            <input id="transformScaleInput" type="range" min="-25" max="25" value="0" />
+            <output id="transformScaleResult">1</output>x
+          </div>
+
+          <div>Mirror</div>
+          <div style="display: flex; gap: 0.5em">
+            <input type="checkbox" class="checkbox" id="transformMirrorH" />
+            <label for="transformMirrorH" class="checkbox-label">horizontally</label>
+            <input type="checkbox" class="checkbox" id="transformMirrorV" />
+            <label for="transformMirrorV" class="checkbox-label">vertically</label>
+          </div>
+        </div>
+
+        <div id="transformPreview" style="position: relative; overflow: hidden; outline: 1px solid #666">
+          <canvas id="transformPreviewCanvas" style="position: absolute; transform-origin: center"></canvas>
         </div>
       </div>
 
@@ -6084,10 +6044,10 @@
 
         <div style="margin: 1em 0 0.3em; font-weight: bold">Export to GeoJSON</div>
         <div>
-          <button onclick="saveGeoJSON_Cells()" data-tip="Download cells data in GeoJSON format">cells</button>
-          <button onclick="saveGeoJSON_Routes()" data-tip="Download routes data in GeoJSON format">routes</button>
-          <button onclick="saveGeoJSON_Rivers()" data-tip="Download rivers data in GeoJSON format">rivers</button>
-          <button onclick="saveGeoJSON_Markers()" data-tip="Download markers data in GeoJSON format">markers</button>
+          <button onclick="saveGeoJsonCells()" data-tip="Download cells data in GeoJSON format">cells</button>
+          <button onclick="saveGeoJsonRoutes()" data-tip="Download routes data in GeoJSON format">routes</button>
+          <button onclick="saveGeoJsonRivers()" data-tip="Download rivers data in GeoJSON format">rivers</button>
+          <button onclick="saveGeoJsonMarkers()" data-tip="Download markers data in GeoJSON format">markers</button>
         </div>
         <p>
           GeoJSON format is used in GIS tools such as QGIS. Check out
@@ -6230,105 +6190,6 @@
         <div id="tileStatus" style="font-style: italic"></div>
       </div>
 
-      <div id="resampleDialog" style="display: none" class="dialog">
-        <div style="width: 34em; max-width: 80vw; font-weight: bold; padding: 6px">
-          This operation is destructive and irreversible. It will create a completely new map based on the current one.
-          Don't forget to save the current project to your machine first!
-        </div>
-
-        <div
-          style="
-            width: auto;
-            display: grid;
-            grid-template-columns: 1fr 1fr;
-            grid-template-rows: repeat(5, 1fr);
-            align-items: center;
-            padding: 0.5em;
-          "
-        >
-          <div>Points number</div>
-          <div>
-            <input id="submapPointsInput" type="range" min="1" max="13" value="4" />
-            <output id="submapPointsOutputFormatted" style="color: #053305">10K</output>
-          </div>
-
-          <div>Shift</div>
-          <div>
-            <label>X: <input id="submapShiftX" type="number" size="4" value="0" /></label>
-            <label>Y: <input id="submapShiftY" type="number" size="4" value="0" /></label>
-          </div>
-
-          <div>Rotate</div>
-          <div>
-            <input id="submapAngleInput" type="range" min="0" max="359" value="0" />
-            <output id="submapAngleOutput">0</output>°
-          </div>
-
-          <div>Scale</div>
-          <div>
-            <input id="submapScaleInput" type="range" min="-25" max="25" value="0" />
-            <output id="submapScaleOutput">1</output>x
-          </div>
-
-          <div>Mirror</div>
-          <div>
-            <input type="checkbox" class="checkbox" id="submapMirrorH" />
-            <label for="submapMirrorH" class="checkbox-label">horizontally</label>
-            &nbsp;
-            <input type="checkbox" class="checkbox" id="submapMirrorV" />
-            <label for="submapMirrorV" class="checkbox-label">vertically</label>
-          </div>
-        </div>
-
-        <div
-          id="submapPreview"
-          style="border: 1px solid #666; margin: 1em auto; overflow: hidden; position: relative"
-        ></div>
-      </div>
-
-      <div id="submapOptionsDialog" style="display: none" class="dialog">
-        <p style="font-weight: bold">
-          This operation is destructive and irreversible. It will create a completely new map based on the current one.
-          Don't forget to save the current project as a .map file first!
-        </p>
-
-        <p>Settings to be changed: population rate, map pixel size</p>
-        <p>
-          Data to be copied: heightmap, biomes, religions, population, precipitation, cultures, states, provinces,
-          military regiments
-        </p>
-        <p>Data to be regenerated: zones, routes, rivers</p>
-        <p>Burgs may be remapped incorrectly, manual change is required</p>
-
-        <p>Keep data for:</p>
-        <div data-tip="Lock all markers copied from the original map">
-          <input id="submapLockMarkers" class="checkbox" type="checkbox" checked />
-          <label for="submapLockMarkers" class="checkbox-label">Markers</label>
-        </div>
-        <div data-tip="Lock all burgs copied from the original map">
-          <input id="submapLockBurgs" class="checkbox" type="checkbox" checked />
-          <label for="submapLockBurgs" class="checkbox-label">Burgs</label>
-        </div>
-
-        <p>Experimental features:</p>
-        <div data-tip="Rivers on the parent map will errode land (helps to get similar river network)">
-          <input id="submapDepressRivers" class="checkbox" type="checkbox" />
-          <label for="submapDepressRivers" class="checkbox-label">Errode riverbeds</label>
-        </div>
-        <div data-tip="Rescale styles (burg labels, emblem size) to match the new scale">
-          <input id="submapRescaleStyles" class="checkbox" type="checkbox" checked />
-          <label for="submapRescaleStyles" class="checkbox-label">Rescale styles</label>
-        </div>
-        <div data-tip="Move all existing towns to the 'largetown' burg group">
-          <input id="submapPromoteTowns" class="checkbox" type="checkbox" />
-          <label for="submapPromoteTowns" class="checkbox-label">Promote towns to largetowns</label>
-        </div>
-        <div data-tip="Add lakes in depressions (can be very slow on big landmasses)">
-          <input id="submapAddLakeInDepression" class="checkbox" type="checkbox" />
-          <label for="submapAddLakeInDepression" class="checkbox-label">Add lakes in depressions (slow)</label>
-        </div>
-      </div>
-
       <div id="alert" style="display: none" class="dialog">
         <p id="alertMessage">Warning!</p>
       </div>
@@ -7997,12 +7858,58 @@
           <pattern id="pattern_square" width="25" height="25" patternUnits="userSpaceOnUse" fill="none">
             <path d="M 25 0 L 0 0 0 25" />
           </pattern>
+
           <pattern id="pattern_pointyHex" width="25" height="43.4" patternUnits="userSpaceOnUse" fill="none">
             <path d="M 0,0 12.5,7.2 25,0 M 12.5,21.7 V 7.2 Z M 0,43.4 V 28.9 L 12.5,21.7 25,28.9 v 14.5" />
           </pattern>
+
           <pattern id="pattern_flatHex" width="43.4" height="25" patternUnits="userSpaceOnUse" fill="none">
             <path d="M 43.4,0 36.2,12.5 43.4,25 M 21.7,12.5 H 36.2 Z M 0,0 H 14.5 L 21.7,12.5 14.5,25 H 0" />
           </pattern>
+
+          <pattern id="pattern_square45deg" width="35.355" height="35.355" patternUnits="userSpaceOnUse" fill="none">
+            <path d="M 0 0 L 35.355 35.355 M 0 35.355 L 35.355 0" />
+          </pattern>
+
+          <pattern id="pattern_squareTruncated" width="25" height="25" patternUnits="userSpaceOnUse" fill="none">
+            <path
+              d="M 8.33 25 L 0 16.66 V 8.33 L 8.33 0 16.66 0 25 8.33  M 16.66 25 L 25 16.66 L 25 8.33 M 8.33 25 L 16.66 25"
+            />
+          </pattern>
+
+          <pattern id="pattern_squareTetrakis" width="25" height="25" patternUnits="userSpaceOnUse" fill="none">
+            <path
+              d="M 25 0 L 0 0 0 25 M 0 0 L 25 25 M 0 25 L 25 0 M 12.5 0 L 12.5 25 M 0 12.5 L 25 12.5 M 0 25 L 25 25 L 25 0"
+            />
+          </pattern>
+
+          <pattern
+            id="pattern_triangleHorizontal"
+            width="41.76"
+            height="72.33"
+            patternUnits="userSpaceOnUse"
+            fill="none"
+          >
+            <path
+              d="M 41.76 36.165 H 0 L 20.88 0 41.76 36.165 20.88 72.33 0 36.165 M 0 0 H 72.33 M 0 72.33 L 41.76 72.33"
+            />
+          </pattern>
+
+          <pattern id="pattern_triangleVertical" width="72.33" height="41.76" patternUnits="userSpaceOnUse" fill="none">
+            <path
+              d="M 36.165 0 L 0 20.88 36.165 41.76 72.33 20.88 36.165 0 V 41.76 M 0 0 V 72.33 M 72.33 0 L 72.33 41.76"
+            />
+          </pattern>
+
+          <pattern id="pattern_trihexagonal" width="25" height="43.4" patternUnits="userSpaceOnUse" fill="none">
+            <path d="M 25 10.85 H 0 L 18.85 43.4 25 32.55 H 0 L 18.85 0 25 10.85" />
+          </pattern>
+
+          <pattern id="pattern_rhombille" width="82.5" height="50" patternUnits="userSpaceOnUse" fill="none">
+            <path
+              d="M 13.8 50 L 0 25 13.8 0 H 41.2 L 27.5 25 41.2 50 55 25 41.2 0 68.8 0 82.5 25 68.8 50 M 0 25 H 27.5 M 55 25 H 82.5 M 13.8 50 H 41.2 L 68.8 50"
+            />
+          </pattern>
         </g>
 
         <g id="defs-hatching">
@@ -8154,108 +8061,124 @@
       </defs>
     </svg>
 
+    <script src="components/fill-box.js"></script>
+    <script src="components/slider-input.js"></script>
+
     <script src="libs/jquery-3.1.1.min.js"></script>
     <script src="libs/jquery-ui.min.js"></script>
     <script src="versioning.js"></script>
     <script src="libs/d3.min.js"></script>
-    <script src="libs/priority-queue.min.js"></script>
     <script src="libs/flatqueue.js"></script>
     <script src="libs/delaunator.min.js"></script>
     <script src="libs/indexedDB.js?v=1.99.00"></script>
 
-    <script src="utils/shorthands.js?v=1.99.00"></script>
-    <script src="utils/commonUtils.js?v=1.99.00"></script>
+    <script src="utils/shorthands.js?v=1.106.0"></script>
+    <script src="utils/commonUtils.js?v=1.103.0"></script>
     <script src="utils/arrayUtils.js?v=1.99.00"></script>
     <script src="utils/functionUtils.js?v=1.99.00"></script>
     <script src="utils/colorUtils.js?v=1.99.00"></script>
-    <script src="utils/graphUtils.js?v=1.99.00"></script>
+    <script src="utils/graphUtils.js?v=1.106.0"></script>
     <script src="utils/nodeUtils.js?v=1.99.00"></script>
     <script src="utils/numberUtils.js?v=1.99.00"></script>
     <script src="utils/polyfills.js?v=1.99.00"></script>
-    <script src="utils/probabilityUtils.js?v=1.99.00"></script>
-    <script src="utils/stringUtils.js?v=1.99.00"></script>
-    <script src="utils/languageUtils.js?v=1.99.00"></script>
+    <script src="utils/probabilityUtils.js?v=1.99.05"></script>
+    <script src="utils/stringUtils.js?v=1.106.0"></script>
+    <script src="utils/languageUtils.js?v=1.108.11"></script>
     <script src="utils/unitUtils.js?v=1.99.00"></script>
-    <script defer src="utils/debugUtils.js?v=1.99.00"></script>
+    <script src="utils/pathUtils.js?v=1.106.0"></script>
+    <script defer src="utils/debugUtils.js?v=1.106.0"></script>
 
     <script src="modules/voronoi.js"></script>
     <script src="config/heightmap-templates.js"></script>
     <script src="config/precreated-heightmaps.js"></script>
     <script src="modules/heightmap-generator.js?v=1.99.00"></script>
-    <script src="modules/ocean-layers.js?v=1.99.00"></script>
-    <script src="modules/river-generator.js?v=1.99.00"></script>
+    <script src="modules/features.js?v=1.104.0"></script>
+    <script src="modules/ocean-layers.js?v=1.108.4"></script>
+    <script src="modules/river-generator.js?v=1.106.7"></script>
     <script src="modules/lakes.js?v=1.99.00"></script>
     <script src="modules/biomes.js?v=1.99.00"></script>
-    <script src="modules/names-generator.js?v=1.87.14"></script>
-    <script src="modules/cultures-generator.js?v=1.99.00"></script>
-    <script src="modules/renderers/state-labels.js?v=1.96.04"></script>
-    <script src="modules/burgs-and-states.js?v=1.99.00"></script>
-    <script src="modules/routes-generator.js?v=1.99.00"></script>
-    <script src="modules/religions-generator.js?v=1.99.00"></script>
-    <script src="modules/military-generator.js?v=1.99.00"></script>
-    <script src="modules/markers-generator.js?v=1.99.00"></script>
+    <script src="modules/names-generator.js?v=1.105.11"></script>
+    <script src="modules/cultures-generator.js?v=1.106.0"></script>
+    <script src="modules/burgs-and-states.js?v=1.106.0"></script>
+    <script src="modules/provinces-generator.js?v=1.106.0"></script>
+    <script src="modules/routes-generator.js?v=1.106.0"></script>
+    <script src="modules/religions-generator.js?v=1.106.0"></script>
+    <script src="modules/military-generator.js?v=1.107.0"></script>
+    <script src="modules/markers-generator.js?v=1.107.0"></script>
+    <script src="modules/zones-generator.js?v=1.106.0"></script>
     <script src="modules/coa-generator.js?v=1.99.00"></script>
-    <script src="modules/submap.js?v=1.99.00"></script>
-    <script src="libs/polylabel.min.js"></script>
-    <script src="libs/lineclip.min.js"></script>
-    <script src="libs/alea.min.js"></script>
-    <script src="modules/fonts.js?v=1.99.00"></script>
-    <script src="modules/ui/layers.js?v=1.99.00"></script>
+    <script src="modules/resample.js?v=1.106.4"></script>
+    <script src="libs/alea.min.js?v1.105.0"></script>
+    <script src="libs/polylabel.min.js?v1.105.0"></script>
+    <script src="libs/lineclip.min.js?v1.105.0"></script>
+    <script src="libs/simplify.js?v1.105.6"></script>
+    <script src="modules/fonts.js?v=1.99.03"></script>
+    <script src="modules/ui/layers.js?v=1.108.4"></script>
     <script src="modules/ui/measurers.js?v=1.99.00"></script>
-    <script src="modules/ui/stylePresets.js?v=1.99.00"></script>
+    <script src="modules/ui/style-presets.js?v=1.100.00"></script>
+    <script src="modules/ui/general.js?v=1.100.00"></script>
+    <script src="modules/ui/options.js?v=1.106.2"></script>
+    <script src="main.js?v=1.108.1"></script>
 
-    <script src="modules/ui/general.js?v=1.99.00"></script>
-    <script src="modules/ui/options.js?v=1.99.00"></script>
-    <script src="main.js?v=1.99.00"></script>
-
-    <script defer src="modules/relief-icons.js?v=1.99.00"></script>
-    <script defer src="modules/ui/style.js?v=1.99.00"></script>
-    <script defer src="modules/ui/editors.js?v=1.99.00"></script>
-    <script defer src="modules/ui/tools.js?v=1.99.00"></script>
-    <script defer src="modules/ui/world-configurator.js?v=1.99.00"></script>
-    <script defer src="modules/ui/heightmap-editor.js?v=1.99.00"></script>
-    <script defer src="modules/ui/provinces-editor.js?v=1.99.00"></script>
-    <script defer src="modules/ui/biomes-editor.js?v=1.99.00"></script>
-    <script defer src="modules/ui/namesbase-editor.js?v=1.99.00"></script>
+    <script defer src="modules/ui/style.js?v=1.108.4"></script>
+    <script defer src="modules/ui/editors.js?v=1.108.5"></script>
+    <script defer src="modules/ui/tools.js?v=1.108.5"></script>
+    <script defer src="modules/ui/world-configurator.js?v=1.105.4"></script>
+    <script defer src="modules/ui/heightmap-editor.js?v=1.105.2"></script>
+    <script defer src="modules/ui/provinces-editor.js?v=1.108.1"></script>
+    <script defer src="modules/ui/biomes-editor.js?v=1.108.4"></script>
+    <script defer src="modules/ui/namesbase-editor.js?v=1.105.11"></script>
     <script defer src="modules/ui/elevation-profile.js?v=1.99.00"></script>
-    <script defer src="modules/ui/temperature-graph.js?v=1.99.00"></script>
-    <script defer src="modules/ui/routes-editor.js?v=1.99.00"></script>
-    <script defer src="modules/ui/routes-creator.js?v=1.99.00"></script>
-    <script defer src="modules/ui/route-group-editor.js?v=1.99.00"></script>
+    <script defer src="modules/ui/temperature-graph.js?v=1.106.6"></script>
+    <script defer src="modules/ui/routes-editor.js?v=1.104.3"></script>
+    <script defer src="modules/ui/routes-creator.js?v=1.104.3"></script>
+    <script defer src="modules/ui/route-group-editor.js?v=1.103.8"></script>
     <script defer src="modules/ui/ice-editor.js?v=1.99.00"></script>
-    <script defer src="modules/ui/lakes-editor.js?v=1.99.00"></script>
+    <script defer src="modules/ui/lakes-editor.js?v=1.106.0"></script>
     <script defer src="modules/ui/coastline-editor.js?v=1.99.00"></script>
-    <script defer src="modules/ui/labels-editor.js?v=1.99.00"></script>
-    <script defer src="modules/ui/rivers-editor.js?v=1.99.00"></script>
-    <script defer src="modules/ui/rivers-creator.js?v=1.99.00"></script>
+    <script defer src="modules/ui/labels-editor.js?v=1.106.0"></script>
+    <script defer src="modules/ui/rivers-editor.js?v=1.106.0"></script>
+    <script defer src="modules/ui/rivers-creator.js?v=1.106.0"></script>
     <script defer src="modules/ui/relief-editor.js?v=1.99.00"></script>
-    <script defer src="modules/ui/burg-editor.js?v=1.99.00"></script>
-    <script defer src="modules/ui/units-editor.js?v=1.99.00"></script>
-    <script defer src="modules/ui/notes-editor.js?v=1.99.00"></script>
+    <script defer src="modules/ui/burg-editor.js?v=1.106.6"></script>
+    <script defer src="modules/ui/units-editor.js?v=1.108.12"></script>
+    <script defer src="modules/ui/notes-editor.js?v=1.107.3"></script>
+    <script defer src="modules/ui/ai-generator.js?v=1.108.8"></script>
     <script defer src="modules/ui/diplomacy-editor.js?v=1.99.00"></script>
-    <script defer src="modules/ui/zones-editor.js?v=1.99.00"></script>
-    <script defer src="modules/ui/burgs-overview.js?v=1.99.00"></script>
-    <script defer src="modules/ui/routes-overview.js?v=1.99.00"></script>
+    <script defer src="modules/ui/zones-editor.js?v=1.105.20"></script>
+    <script defer src="modules/ui/burgs-overview.js?v=1.105.15"></script>
+    <script defer src="modules/ui/routes-overview.js?v=1.104.3"></script>
     <script defer src="modules/ui/rivers-overview.js?v=1.99.00"></script>
-    <script defer src="modules/ui/military-overview.js?v=1.99.00"></script>
-    <script defer src="modules/ui/regiments-overview.js?v=1.99.00"></script>
-    <script defer src="modules/ui/markers-overview.js?v=1.99.00"></script>
-    <script defer src="modules/ui/regiment-editor.js?v=1.99.00"></script>
-    <script defer src="modules/ui/battle-screen.js?v=1.99.00"></script>
+    <script defer src="modules/ui/military-overview.js?v=1.108.5"></script>
+    <script defer src="modules/ui/regiments-overview.js?v=1.108.5"></script>
+    <script defer src="modules/ui/markers-overview.js?v=1.108.10"></script>
+    <script defer src="modules/ui/regiment-editor.js?v=1.108.5"></script>
+    <script defer src="modules/ui/battle-screen.js?v=1.108.5"></script>
     <script defer src="modules/ui/emblems-editor.js?v=1.99.00"></script>
-    <script defer src="modules/ui/markers-editor.js?v=1.99.00"></script>
+    <script defer src="modules/ui/markers-editor.js?v=1.108.5"></script>
     <script defer src="modules/ui/3d.js?v=1.99.00"></script>
-    <script defer src="modules/ui/submap.js?v=1.99.00"></script>
-    <script defer src="modules/ui/hotkeys.js?v=1.99.00"></script>
+    <script defer src="modules/ui/submap-tool.js?v=1.106.2"></script>
+    <script defer src="modules/ui/transform-tool.js?v=1.106.2"></script>
+    <script defer src="modules/ui/hotkeys.js?v=1.104.0"></script>
     <script defer src="modules/coa-renderer.js?v=1.99.00"></script>
     <script defer src="libs/rgbquant.min.js"></script>
     <script defer src="libs/jquery.ui.touch-punch.min.js"></script>
-    <script defer src="modules/io/save.js?v=1.99.00"></script>
-    <script defer src="modules/io/load.js?v=1.99.01"></script>
-    <script defer src="modules/io/cloud.js?v=1.99.00"></script>
-    <script defer src="modules/io/export.js?v=1.99.00"></script>
+    <script defer src="modules/io/save.js?v=1.107.4"></script>
+    <script defer src="modules/io/load.js?v=1.108.0"></script>
+    <script defer src="modules/io/cloud.js?v=1.106.0"></script>
+    <script defer src="modules/io/export.js?v=1.108.13"></script>
 
-    <!-- Web Components -->
-    <script defer src="components/fill-box.js"></script>
+    <script defer src="modules/renderers/draw-features.js?v=1.108.2"></script>
+    <script defer src="modules/renderers/draw-borders.js?v=1.104.0"></script>
+    <script defer src="modules/renderers/draw-heightmap.js?v=1.104.0"></script>
+    <script defer src="modules/renderers/draw-markers.js?v=1.108.5"></script>
+    <script defer src="modules/renderers/draw-scalebar.js?v=1.108.1"></script>
+    <script defer src="modules/renderers/draw-temperature.js?v=1.104.0"></script>
+    <script defer src="modules/renderers/draw-emblems.js?v=1.104.0"></script>
+    <script defer src="modules/renderers/draw-military.js?v=1.108.5"></script>
+    <script defer src="modules/renderers/draw-state-labels.js?v=1.108.1"></script>
+    <script defer src="modules/renderers/draw-burg-labels.js?v=1.108.1"></script>
+    <script defer src="modules/renderers/draw-burg-icons.js?v=1.104.0"></script>
+    <script defer src="modules/renderers/draw-relief-icons.js?v=1.108.4"></script>
   </body>
 </html>
diff --git a/libs/jquery-ui.css b/libs/jquery-ui.css
index 36d437d5..ad11d1a6 100644
--- a/libs/jquery-ui.css
+++ b/libs/jquery-ui.css
@@ -314,30 +314,44 @@ body .ui-dialog {
 }
 .ui-dialog .ui-dialog-titlebar {
   display: flex;
-  padding: 0.4em 0.3em;
-  justify-content: space-evenly;
+  padding: 0.3em 0.8em;
+  justify-content: space-between;
+  align-items: center;
   font-size: 1.2em;
   min-width: 150px;
 }
 .ui-dialog .ui-dialog-title {
-  float: left;
-  margin: 0.1em 0;
   white-space: nowrap;
-  width: 90%;
+  width: 100%;
   overflow: hidden;
   text-overflow: ellipsis;
 }
 
 .ui-dialog .ui-dialog-titlebar button {
-  padding: 0;
-  width: 1.8em;
-  height: 1.8em;
+  padding: 3px;
+  margin-left: 5px;
+  width: 19px;
+  height: 18px;
   color: #ffffff;
   background: none;
-  font-size: 0.75em;
+  font-size: 0.8em;
   border: 1px solid #c5c5c5;
 }
 
+@media (max-width: 600px) {
+  .ui-dialog .ui-dialog-title {
+    font-size: 1.6em;
+  }
+
+  .ui-dialog .ui-dialog-titlebar button {
+    padding: 3px;
+    margin-left: 10px;
+    width: 40px;
+    height: 32px;
+    font-size: 1.6em;
+  }
+}
+
 .ui-dialog .ui-dialog-titlebar button:active {
   border: 1px solid #5d4651;
   color: #5d4651;
diff --git a/libs/openwidget.min.js b/libs/openwidget.min.js
new file mode 100644
index 00000000..89583d8f
--- /dev/null
+++ b/libs/openwidget.min.js
@@ -0,0 +1 @@
+window.__ow=window.__ow||{},window.__ow.organizationId="7bb02e70-bcef-4861-a4e6-d259b0d10e24",window.__ow.integration_name="manual_settings",window.__ow.product_name="openwidget",function(n,e,t){function o(n){return c._h?c._h.apply(null,n):c._q.push(n)}var c={_q:[],_h:null,_v:"2.0",on:function(){o(["on",t.call(arguments)])},once:function(){o(["once",t.call(arguments)])},off:function(){o(["off",t.call(arguments)])},get:function(){if(!c._h)throw Error("[OpenWidget] You can't use getters before load.");return o(["get",t.call(arguments)])},call:function(){o(["call",t.call(arguments)])},init:function(){var n=e.createElement("script");n.async=!0,n.type="text/javascript",n.src="https://cdn.openwidget.com/openwidget.js",e.head.appendChild(n)}};n.__ow.asyncInit||c.init(),n.OpenWidget=n.OpenWidget||c}(window,document,[].slice);
\ No newline at end of file
diff --git a/libs/priority-queue.min.js b/libs/priority-queue.min.js
deleted file mode 100644
index acf2506b..00000000
--- a/libs/priority-queue.min.js
+++ /dev/null
@@ -1 +0,0 @@
-!function(t){if("object"==typeof exports&&"undefined"!=typeof module)module.exports=t();else if("function"==typeof define&&define.amd)define([],t);else{("undefined"!=typeof window?window:"undefined"!=typeof global?global:"undefined"!=typeof self?self:this).PriorityQueue=t()}}(function(){return function t(e,i,r){function o(n,s){if(!i[n]){if(!e[n]){var h="function"==typeof require&&require;if(!s&&h)return h(n,!0);if(a)return a(n,!0);var u=new Error("Cannot find module '"+n+"'");throw u.code="MODULE_NOT_FOUND",u}var p=i[n]={exports:{}};e[n][0].call(p.exports,function(t){var i=e[n][1][t];return o(i||t)},p,p.exports,t,e,i,r)}return i[n].exports}for(var a="function"==typeof require&&require,n=0;n<r.length;n++)o(r[n]);return o}({1:[function(t,e,i){var r,o,a,n,s,h={}.hasOwnProperty;r=t("./PriorityQueue/AbstractPriorityQueue"),o=t("./PriorityQueue/ArrayStrategy"),n=t("./PriorityQueue/BinaryHeapStrategy"),a=t("./PriorityQueue/BHeapStrategy"),(s=function(t){function e(t){t||(t={}),t.strategy||(t.strategy=n),t.comparator||(t.comparator=function(t,e){return(t||0)-(e||0)}),e.__super__.constructor.call(this,t)}return function(t,e){for(var i in e)h.call(e,i)&&(t[i]=e[i]);function r(){this.constructor=t}r.prototype=e.prototype,t.prototype=new r,t.__super__=e.prototype}(e,r),e}()).ArrayStrategy=o,s.BinaryHeapStrategy=n,s.BHeapStrategy=a,e.exports=s},{"./PriorityQueue/AbstractPriorityQueue":2,"./PriorityQueue/ArrayStrategy":3,"./PriorityQueue/BHeapStrategy":4,"./PriorityQueue/BinaryHeapStrategy":5}],2:[function(t,e,i){e.exports=function(){function t(t){var e;if(null==(null!=t?t.strategy:void 0))throw"Must pass options.strategy, a strategy";if(null==(null!=t?t.comparator:void 0))throw"Must pass options.comparator, a comparator";this.priv=new t.strategy(t),this.length=(null!=t&&null!=(e=t.initialValues)?e.length:void 0)||0}return t.prototype.queue=function(t){this.length++,this.priv.queue(t)},t.prototype.dequeue=function(t){if(!this.length)throw"Empty queue";return this.length--,this.priv.dequeue()},t.prototype.peek=function(t){if(!this.length)throw"Empty queue";return this.priv.peek()},t.prototype.clear=function(){return this.length=0,this.priv.clear()},t}()},{}],3:[function(t,e,i){var r;r=function(t,e,i){var r,o,a;for(o=0,r=t.length;o<r;)i(t[a=o+r>>>1],e)>=0?o=a+1:r=a;return o},e.exports=function(){function t(t){var e;this.options=t,this.comparator=this.options.comparator,this.data=(null!=(e=this.options.initialValues)?e.slice(0):void 0)||[],this.data.sort(this.comparator).reverse()}return t.prototype.queue=function(t){var e;e=r(this.data,t,this.comparator),this.data.splice(e,0,t)},t.prototype.dequeue=function(){return this.data.pop()},t.prototype.peek=function(){return this.data[this.data.length-1]},t.prototype.clear=function(){this.data.length=0},t}()},{}],4:[function(t,e,i){e.exports=function(){function t(t){var e,i,r,o,a,n,s,h;for(this.comparator=(null!=t?t.comparator:void 0)||function(t,e){return t-e},this.pageSize=(null!=t?t.pageSize:void 0)||512,this.length=0,s=0;1<<s<this.pageSize;)s+=1;if(1<<s!==this.pageSize)throw"pageSize must be a power of two";for(this._shift=s,this._emptyMemoryPageTemplate=e=[],i=0,a=this.pageSize;0<=a?i<a:i>a;0<=a?++i:--i)e.push(null);if(this._memory=[],this._mask=this.pageSize-1,t.initialValues)for(r=0,o=(n=t.initialValues).length;r<o;r++)h=n[r],this.queue(h)}return t.prototype.queue=function(t){this.length+=1,this._write(this.length,t),this._bubbleUp(this.length,t)},t.prototype.dequeue=function(){var t,e;return t=this._read(1),e=this._read(this.length),this.length-=1,this.length>0&&(this._write(1,e),this._bubbleDown(1,e)),t},t.prototype.peek=function(){return this._read(1)},t.prototype.clear=function(){this.length=0,this._memory.length=0},t.prototype._write=function(t,e){var i;for(i=t>>this._shift;i>=this._memory.length;)this._memory.push(this._emptyMemoryPageTemplate.slice(0));return this._memory[i][t&this._mask]=e},t.prototype._read=function(t){return this._memory[t>>this._shift][t&this._mask]},t.prototype._bubbleUp=function(t,e){var i,r,o,a;for(i=this.comparator;t>1&&(r=t&this._mask,t<this.pageSize||r>3?o=t&~this._mask|r>>1:r<2?(o=t-this.pageSize>>this._shift,o+=o&~(this._mask>>1),o|=this.pageSize>>1):o=t-2,!(i(a=this._read(o),e)<0));)this._write(o,e),this._write(t,a),t=o},t.prototype._bubbleDown=function(t,e){var i,r,o,a,n;for(n=this.comparator;t<this.length;)if(t>this._mask&&!(t&this._mask-1)?i=r=t+2:t&this.pageSize>>1?(i=(t&~this._mask)>>1,r=(i=(i|=t&this._mask>>1)+1<<this._shift)+1):r=(i=t+(t&this._mask))+1,i!==r&&r<=this.length)if(o=this._read(i),a=this._read(r),n(o,e)<0&&n(o,a)<=0)this._write(i,e),this._write(t,o),t=i;else{if(!(n(a,e)<0))break;this._write(r,e),this._write(t,a),t=r}else{if(!(i<=this.length))break;if(!(n(o=this._read(i),e)<0))break;this._write(i,e),this._write(t,o),t=i}},t}()},{}],5:[function(t,e,i){e.exports=function(){function t(t){var e;this.comparator=(null!=t?t.comparator:void 0)||function(t,e){return t-e},this.length=0,this.data=(null!=(e=t.initialValues)?e.slice(0):void 0)||[],this._heapify()}return t.prototype._heapify=function(){var t,e,i;if(this.data.length>0)for(t=e=1,i=this.data.length;1<=i?e<i:e>i;t=1<=i?++e:--e)this._bubbleUp(t)},t.prototype.queue=function(t){this.data.push(t),this._bubbleUp(this.data.length-1)},t.prototype.dequeue=function(){var t,e;return e=this.data[0],t=this.data.pop(),this.data.length>0&&(this.data[0]=t,this._bubbleDown(0)),e},t.prototype.peek=function(){return this.data[0]},t.prototype.clear=function(){this.length=0,this.data.length=0},t.prototype._bubbleUp=function(t){for(var e,i;t>0&&(e=t-1>>>1,this.comparator(this.data[t],this.data[e])<0);)i=this.data[e],this.data[e]=this.data[t],this.data[t]=i,t=e},t.prototype._bubbleDown=function(t){var e,i,r,o,a;for(e=this.data.length-1;o=(i=1+(t<<1))+1,r=t,i<=e&&this.comparator(this.data[i],this.data[r])<0&&(r=i),o<=e&&this.comparator(this.data[o],this.data[r])<0&&(r=o),r!==t;)a=this.data[r],this.data[r]=this.data[t],this.data[t]=a,t=r},t}()},{}]},{},[1])(1)});
\ No newline at end of file
diff --git a/libs/simplify.js b/libs/simplify.js
new file mode 100644
index 00000000..e4086e53
--- /dev/null
+++ b/libs/simplify.js
@@ -0,0 +1,103 @@
+/*
+ (c) 2017, Vladimir Agafonkin
+ Simplify.js, a high-performance JS polyline simplification library
+ mourner.github.io/simplify-js
+*/
+{
+  // square distance between 2 points
+  function getSqDist([x1, y1], [x2, y2]) {
+    const dx = x1 - x2;
+    const dy = y1 - y2;
+
+    return dx * dx + dy * dy;
+  }
+
+  // square distance from a point to a segment
+  function getSqSegDist([x1, y1], [x, y], [x2, y2]) {
+    let dx = x2 - x;
+    let dy = y2 - y;
+
+    if (dx !== 0 || dy !== 0) {
+      const t = ((x1 - x) * dx + (y1 - y) * dy) / (dx * dx + dy * dy);
+
+      if (t > 1) {
+        x = x2;
+        y = y2;
+      } else if (t > 0) {
+        x += dx * t;
+        y += dy * t;
+      }
+    }
+
+    dx = x1 - x;
+    dy = y1 - y;
+
+    return dx * dx + dy * dy;
+  }
+  // rest of the code doesn't care about point format
+
+  // basic distance-based simplification
+  function simplifyRadialDist(points, sqTolerance) {
+    let prevPoint = points[0];
+    const newPoints = [prevPoint];
+    let point;
+
+    for (let i = 1; i < points.length; i++) {
+      point = points[i];
+      if (!point) continue;
+
+      if (getSqDist(point, prevPoint) > sqTolerance) {
+        newPoints.push(point);
+        prevPoint = point;
+      }
+    }
+
+    if (prevPoint !== point) newPoints.push(point);
+    return newPoints;
+  }
+
+  function simplifyDPStep(points, first, last, sqTolerance, simplified) {
+    let maxSqDist = sqTolerance;
+    let index = first;
+
+    for (let i = first + 1; i < last; i++) {
+      const sqDist = getSqSegDist(points[i], points[first], points[last]);
+
+      if (sqDist > maxSqDist) {
+        index = i;
+        maxSqDist = sqDist;
+      }
+    }
+
+    if (maxSqDist > sqTolerance) {
+      if (index - first > 1) simplifyDPStep(points, first, index, sqTolerance, simplified);
+      simplified.push(points[index]);
+      if (last - index > 1) simplifyDPStep(points, index, last, sqTolerance, simplified);
+    }
+  }
+
+  // simplification using Ramer-Douglas-Peucker algorithm
+  function simplifyDouglasPeucker(points, sqTolerance) {
+    const last = points.length - 1;
+
+    const simplified = [points[0]];
+    simplifyDPStep(points, 0, last, sqTolerance, simplified);
+    simplified.push(points[last]);
+
+    return simplified;
+  }
+
+  // both algorithms combined for awesome performance
+  function simplify(points, tolerance, highestQuality = false) {
+    if (points.length <= 2) return points;
+
+    const sqTolerance = tolerance * tolerance;
+
+    points = highestQuality ? points : simplifyRadialDist(points, sqTolerance);
+    points = simplifyDouglasPeucker(points, sqTolerance);
+
+    return points;
+  }
+
+  window.simplify = simplify;
+}
diff --git a/main.js b/main.js
index 12f75328..848ff3c5 100644
--- a/main.js
+++ b/main.js
@@ -4,7 +4,7 @@
 
 // set debug options
 const PRODUCTION = location.hostname && location.hostname !== "localhost" && location.hostname !== "127.0.0.1";
-const DEBUG = localStorage.getItem("debug");
+const DEBUG = JSON.safeParse(localStorage.getItem("debug")) || {};
 const INFO = true;
 const TIME = true;
 const WARN = true;
@@ -14,6 +14,7 @@ const ERROR = true;
 const MOBILE = window.innerWidth < 600 || navigator.userAgentData?.mobile;
 
 // typed arrays max values
+const INT8_MAX = 127;
 const UINT8_MAX = 255;
 const UINT16_MAX = 65535;
 const UINT32_MAX = 4294967295;
@@ -62,7 +63,7 @@ let regions = viewbox.append("g").attr("id", "regions");
 let statesBody = regions.append("g").attr("id", "statesBody");
 let statesHalo = regions.append("g").attr("id", "statesHalo");
 let provs = viewbox.append("g").attr("id", "provs");
-let zones = viewbox.append("g").attr("id", "zones").style("display", "none");
+let zones = viewbox.append("g").attr("id", "zones");
 let borders = viewbox.append("g").attr("id", "borders");
 let stateBorders = borders.append("g").attr("id", "stateBorders");
 let provinceBorders = borders.append("g").attr("id", "provinceBorders");
@@ -72,7 +73,7 @@ let trails = routes.append("g").attr("id", "trails");
 let searoutes = routes.append("g").attr("id", "searoutes");
 let temperature = viewbox.append("g").attr("id", "temperature");
 let coastline = viewbox.append("g").attr("id", "coastline");
-let ice = viewbox.append("g").attr("id", "ice").style("display", "none");
+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");
@@ -80,7 +81,7 @@ let labels = viewbox.append("g").attr("id", "labels");
 let icons = viewbox.append("g").attr("id", "icons");
 let burgIcons = icons.append("g").attr("id", "burgIcons");
 let anchors = icons.append("g").attr("id", "anchors");
-let armies = viewbox.append("g").attr("id", "armies").style("display", "none");
+let armies = viewbox.append("g").attr("id", "armies");
 let markers = viewbox.append("g").attr("id", "markers");
 let fogging = viewbox
   .append("g")
@@ -105,10 +106,10 @@ coastline.append("g").attr("id", "lake_island");
 terrs.append("g").attr("id", "oceanHeights");
 terrs.append("g").attr("id", "landHeights");
 
+let burgLabels = labels.append("g").attr("id", "burgLabels");
 labels.append("g").attr("id", "states");
 labels.append("g").attr("id", "addedLabels");
 
-let burgLabels = labels.append("g").attr("id", "burgLabels");
 burgIcons.append("g").attr("id", "cities");
 burgLabels.append("g").attr("id", "cities");
 anchors.append("g").attr("id", "cities");
@@ -169,7 +170,7 @@ let scale = 1;
 let viewX = 0;
 let viewY = 0;
 
-function onZoom() {
+const onZoom = debounce(function () {
   const {k, x, y} = d3.event.transform;
 
   const isScaleChanged = Boolean(scale - k);
@@ -181,9 +182,8 @@ function onZoom() {
   viewY = y;
 
   handleZoom(isScaleChanged, isPositionChanged);
-}
-const onZoomDebouced = debounce(onZoom, 50);
-const zoom = d3.zoom().scaleExtent([1, 20]).on("zoom", onZoomDebouced);
+}, 50);
+const zoom = d3.zoom().scaleExtent([1, 20]).on("zoom", onZoom);
 
 // default options, based on Earth data
 let options = {
@@ -313,9 +313,11 @@ async function checkLoadParameters() {
 async function generateMapOnLoad() {
   await applyStyleOnLoad(); // apply previously selected default or custom style
   await generate(); // generate map
-  applyPreset(); // apply saved layers preset
+  applyLayersPreset(); // apply saved layers preset and reder layers
+  drawLayers();
   fitMapToScreen();
   focusOn(); // based on searchParams focus on point, cell or burg from MFCG
+  toggleAssistant();
 }
 
 // focus on coordinates, cell or burg provided in searchParams
@@ -365,6 +367,31 @@ function focusOn() {
   }
 }
 
+let isAssistantLoaded = false;
+function toggleAssistant() {
+  const assistantContainer = byId("chat-widget-container");
+  const showAssistant = byId("azgaarAssistant").value === "show";
+
+  if (showAssistant) {
+    if (isAssistantLoaded) {
+      assistantContainer.style.display = "block";
+    } else {
+      import("./libs/openwidget.min.js").then(() => {
+        isAssistantLoaded = true;
+        setTimeout(() => {
+          const bubble = byId("chat-widget-minimized");
+          if (bubble) {
+            bubble.dataset.tip = "Click to open the Assistant";
+            bubble.on("mouseover", showDataTip);
+          }
+        }, 5000);
+      });
+    }
+  } else if (isAssistantLoaded) {
+    assistantContainer.style.display = "none";
+  }
+}
+
 // find burg for MFCG and focus on it
 function findBurgForMFCG(params) {
   const cells = pack.cells,
@@ -432,7 +459,9 @@ function findBurgForMFCG(params) {
 function handleZoom(isScaleChanged, isPositionChanged) {
   viewbox.attr("transform", `translate(${viewX} ${viewY}) scale(${scale})`);
 
-  if (isPositionChanged) drawCoordinates();
+  if (isPositionChanged) {
+    if (layerIsOn("toggleCoordinates")) drawCoordinates();
+  }
 
   if (isScaleChanged) {
     invokeActiveZooming();
@@ -466,14 +495,6 @@ function resetZoom(d = 1000) {
   svg.transition().duration(d).call(zoom.transform, d3.zoomIdentity);
 }
 
-// calculate x y extreme points of viewBox
-function getViewBoxExtent() {
-  return [
-    [Math.abs(viewX / scale), Math.abs(viewY / scale)],
-    [Math.abs(viewX / scale) + graphWidth / scale, Math.abs(viewY / scale) + graphHeight / scale]
-  ];
-}
-
 // active zooming feature
 function invokeActiveZooming() {
   const isOptimized = shapeRendering.value === "optimizeSpeed";
@@ -544,21 +565,6 @@ function invokeActiveZooming() {
   }
 }
 
-async function renderGroupCOAs(g) {
-  const [group, type] =
-    g.id === "burgEmblems"
-      ? [pack.burgs, "burg"]
-      : g.id === "provinceEmblems"
-      ? [pack.provinces, "province"]
-      : [pack.states, "state"];
-  for (let use of g.children) {
-    const i = +use.dataset.i;
-    const id = type + "COA" + i;
-    COArenderer.trigger(id, group[i].coa);
-    use.setAttribute("href", "#" + id);
-  }
-}
-
 // add drag to upload logic, pull request from @evyatron
 void (function addDragToUpload() {
   document.addEventListener("dragover", function (e) {
@@ -624,8 +630,7 @@ async function generate(options) {
     grid.cells.h = await HeightmapGenerator.generate(grid);
     pack = {}; // reset pack
 
-    markFeatures();
-    markupGridOcean();
+    Features.markupGrid();
     addLakesInDeepDepressions();
     openNearSeaLakes();
 
@@ -636,11 +641,10 @@ async function generate(options) {
     generatePrecipitation();
 
     reGraph();
-    drawCoastline();
+    Features.markupPack();
+    createDefaultRuler();
 
     Rivers.generate();
-    drawRivers();
-    Lakes.defineGroup();
     Biomes.define();
 
     rankCells();
@@ -650,19 +654,16 @@ async function generate(options) {
     Routes.generate();
     Religions.generate();
     BurgsAndStates.defineStateForms();
-    BurgsAndStates.generateProvinces();
+    Provinces.generate();
+    Provinces.getPoles();
     BurgsAndStates.defineBurgFeatures();
 
-    drawStates();
-    drawBorders();
-    drawStateLabels();
-
     Rivers.specify();
-    Lakes.generateName();
+    Features.specify();
 
     Military.generate();
     Markers.generate();
-    addZones();
+    Zones.generate();
 
     drawScaleBar(scaleBar, scale);
     Names.getMapName();
@@ -682,10 +683,7 @@ async function generate(options) {
       title: "Generation error",
       width: "32em",
       buttons: {
-        "Clear data": function () {
-          localStorage.clear();
-          localStorage.setItem("version", version);
-        },
+        "Clear cache": () => cleanupData(),
         Regenerate: function () {
           regenerateMap("generation error");
           $(this).dialog("close");
@@ -716,75 +714,13 @@ function setSeed(precreatedSeed) {
   Math.random = aleaPRNG(seed);
 }
 
-// Mark features (ocean, lakes, islands) and calculate distance field
-function markFeatures() {
-  TIME && console.time("markFeatures");
-  Math.random = aleaPRNG(seed); // get the same result on heightmap edit in Erase mode
-
-  const cells = grid.cells;
-  const heights = grid.cells.h;
-  cells.f = new Uint16Array(cells.i.length); // cell feature number
-  cells.t = new Int8Array(cells.i.length); // cell type: 1 = land coast; -1 = water near coast
-  grid.features = [0];
-
-  for (let i = 1, queue = [0]; queue[0] !== -1; i++) {
-    cells.f[queue[0]] = i; // feature number
-    const land = heights[queue[0]] >= 20;
-    let border = false; // true if feature touches map border
-
-    while (queue.length) {
-      const q = queue.pop();
-      if (cells.b[q]) border = true;
-
-      cells.c[q].forEach(c => {
-        const cLand = heights[c] >= 20;
-        if (land === cLand && !cells.f[c]) {
-          cells.f[c] = i;
-          queue.push(c);
-        } else if (land && !cLand) {
-          cells.t[q] = 1;
-          cells.t[c] = -1;
-        }
-      });
-    }
-    const type = land ? "island" : border ? "ocean" : "lake";
-    grid.features.push({i, land, border, type});
-
-    queue[0] = cells.f.findIndex(f => !f); // find unmarked cell
-  }
-
-  TIME && console.timeEnd("markFeatures");
-}
-
-function markupGridOcean() {
-  TIME && console.time("markupGridOcean");
-  markup(grid.cells, -2, -1, -10);
-  TIME && console.timeEnd("markupGridOcean");
-}
-
-// Calculate cell-distance to coast for every cell
-function markup(cells, start, increment, limit) {
-  for (let t = start, count = Infinity; count > 0 && t > limit; t += increment) {
-    count = 0;
-    const prevT = t - increment;
-    for (let i = 0; i < cells.i.length; i++) {
-      if (cells.t[i] !== prevT) continue;
-
-      for (const c of cells.c[i]) {
-        if (cells.t[c]) continue;
-        cells.t[c] = t;
-        count++;
-      }
-    }
-  }
-}
-
 function addLakesInDeepDepressions() {
   TIME && console.time("addLakesInDeepDepressions");
+  const elevationLimit = +byId("lakeElevationLimitOutput").value;
+  if (elevationLimit === 80) return;
+
   const {cells, features} = grid;
   const {c, h, b} = cells;
-  const ELEVATION_LIMIT = +byId("lakeElevationLimitOutput").value;
-  if (ELEVATION_LIMIT === 80) return;
 
   for (const i of cells.i) {
     if (b[i] || h[i] < 20) continue;
@@ -793,7 +729,7 @@ function addLakesInDeepDepressions() {
     if (h[i] > minHeight) continue;
 
     let deep = true;
-    const threshold = h[i] + ELEVATION_LIMIT;
+    const threshold = h[i] + elevationLimit;
     const queue = [i];
     const checked = [];
     checked[i] = true;
@@ -979,7 +915,7 @@ function calculateTemperatures() {
     const [, y] = grid.points[rowCellId];
     const rowLatitude = mapCoordinates.latN - (y / graphHeight) * mapCoordinates.latT; // [90; -90]
     const tempSeaLevel = calculateSeaLevelTemp(rowLatitude);
-    DEBUG && console.info(`${rn(rowLatitude)}° sea temperature: ${rn(tempSeaLevel)}°C`);
+    DEBUG.temperature && console.info(`${rn(rowLatitude)}° sea temperature: ${rn(tempSeaLevel)}°C`);
 
     for (let cellId = rowCellId; cellId < rowCellId + grid.cellsX; cellId++) {
       const tempAltitudeDrop = getAltitudeTemperatureDrop(cells.h[cellId]);
@@ -1131,7 +1067,7 @@ function generatePrecipitation() {
           const from = west[0][0],
             to = west[west.length - 1][0];
           const y = (grid.points[from][1] + grid.points[to][1]) / 2;
-          wind.append("text").attr("x", 20).attr("y", y).text("\u21C9");
+          wind.append("text").attr("text-rendering", "optimizeSpeed").attr("x", 20).attr("y", y).text("\u21C9");
         }
       }
       if (easterly.length > 1) {
@@ -1142,6 +1078,7 @@ function generatePrecipitation() {
           const y = (grid.points[from][1] + grid.points[to][1]) / 2;
           wind
             .append("text")
+            .attr("text-rendering", "optimizeSpeed")
             .attr("x", graphWidth - 52)
             .attr("y", y)
             .text("\u21C7");
@@ -1152,12 +1089,14 @@ function generatePrecipitation() {
     if (northerly)
       wind
         .append("text")
+        .attr("text-rendering", "optimizeSpeed")
         .attr("x", graphWidth / 2)
         .attr("y", 42)
         .text("\u21CA");
     if (southerly)
       wind
         .append("text")
+        .attr("text-rendering", "optimizeSpeed")
         .attr("x", graphWidth / 2)
         .attr("y", graphHeight - 20)
         .text("\u21C8");
@@ -1220,222 +1159,6 @@ function reGraph() {
   TIME && console.timeEnd("reGraph");
 }
 
-// Detect and draw the coastline
-function drawCoastline() {
-  TIME && console.time("drawCoastline");
-  reMarkFeatures();
-
-  const cells = pack.cells,
-    vertices = pack.vertices,
-    n = cells.i.length,
-    features = pack.features;
-  const used = new Uint8Array(features.length); // store connected features
-  const largestLand = d3.scan(
-    features.map(f => (f.land ? f.cells : 0)),
-    (a, b) => b - a
-  );
-  const landMask = defs.select("#land");
-  const waterMask = defs.select("#water");
-  lineGen.curve(d3.curveBasisClosed);
-
-  for (const i of cells.i) {
-    const startFromEdge = !i && cells.h[i] >= 20;
-    if (!startFromEdge && cells.t[i] !== -1 && cells.t[i] !== 1) continue; // non-edge cell
-    const f = cells.f[i];
-    if (used[f]) continue; // already connected
-    if (features[f].type === "ocean") continue; // ocean cell
-
-    const type = features[f].type === "lake" ? 1 : -1; // type value to search for
-    const start = findStart(i, type);
-    if (start === -1) continue; // cannot start here
-    let vchain = connectVertices(start, type);
-    if (features[f].type === "lake") relax(vchain, 1.2);
-    used[f] = 1;
-    let points = clipPoly(
-      vchain.map(v => vertices.p[v]),
-      1
-    );
-    const area = d3.polygonArea(points); // area with lakes/islands
-    if (area > 0 && features[f].type === "lake") {
-      points = points.reverse();
-      vchain = vchain.reverse();
-    }
-
-    features[f].area = Math.abs(area);
-    features[f].vertices = vchain;
-
-    const path = round(lineGen(points));
-
-    if (features[f].type === "lake") {
-      landMask
-        .append("path")
-        .attr("d", path)
-        .attr("fill", "black")
-        .attr("id", "land_" + f);
-      // waterMask.append("path").attr("d", path).attr("fill", "white").attr("id", "water_"+id); // uncomment to show over lakes
-      lakes
-        .select("#freshwater")
-        .append("path")
-        .attr("d", path)
-        .attr("id", "lake_" + f)
-        .attr("data-f", f); // draw the lake
-    } else {
-      landMask
-        .append("path")
-        .attr("d", path)
-        .attr("fill", "white")
-        .attr("id", "land_" + f);
-      waterMask
-        .append("path")
-        .attr("d", path)
-        .attr("fill", "black")
-        .attr("id", "water_" + f);
-      const g = features[f].group === "lake_island" ? "lake_island" : "sea_island";
-      coastline
-        .select("#" + g)
-        .append("path")
-        .attr("d", path)
-        .attr("id", "island_" + f)
-        .attr("data-f", f); // draw the coastline
-    }
-
-    // draw ruler to cover the biggest land piece
-    if (f === largestLand) {
-      const from = points[d3.scan(points, (a, b) => a[0] - b[0])];
-      const to = points[d3.scan(points, (a, b) => b[0] - a[0])];
-      rulers.create(Ruler, [from, to]);
-    }
-  }
-
-  // find cell vertex to start path detection
-  function findStart(i, t) {
-    if (t === -1 && cells.b[i]) return cells.v[i].find(v => vertices.c[v].some(c => c >= n)); // map border cell
-    const filtered = cells.c[i].filter(c => cells.t[c] === t);
-    const index = cells.c[i].indexOf(d3.min(filtered));
-    return index === -1 ? index : cells.v[i][index];
-  }
-
-  // connect vertices to chain
-  function connectVertices(start, t) {
-    const chain = []; // vertices chain to form a path
-    for (let i = 0, current = start; i === 0 || (current !== start && i < 50000); i++) {
-      const prev = chain[chain.length - 1]; // previous vertex in chain
-      chain.push(current); // add current vertex to sequence
-      const c = vertices.c[current]; // cells adjacent to vertex
-      const v = vertices.v[current]; // neighboring vertices
-      const c0 = c[0] >= n || cells.t[c[0]] === t;
-      const c1 = c[1] >= n || cells.t[c[1]] === t;
-      const c2 = c[2] >= n || cells.t[c[2]] === t;
-      if (v[0] !== prev && c0 !== c1) current = v[0];
-      else if (v[1] !== prev && c1 !== c2) current = v[1];
-      else if (v[2] !== prev && c0 !== c2) current = v[2];
-      if (current === chain[chain.length - 1]) {
-        ERROR && console.error("Next vertex is not found");
-        break;
-      }
-    }
-    return chain;
-  }
-
-  // move vertices that are too close to already added ones
-  function relax(vchain, r) {
-    const p = vertices.p,
-      tree = d3.quadtree();
-
-    for (let i = 0; i < vchain.length; i++) {
-      const v = vchain[i];
-      let [x, y] = [p[v][0], p[v][1]];
-      if (i && vchain[i + 1] && tree.find(x, y, r) !== undefined) {
-        const v1 = vchain[i - 1],
-          v2 = vchain[i + 1];
-        const [x1, y1] = [p[v1][0], p[v1][1]];
-        const [x2, y2] = [p[v2][0], p[v2][1]];
-        [x, y] = [(x1 + x2) / 2, (y1 + y2) / 2];
-        p[v] = [x, y];
-      }
-      tree.add([x, y]);
-    }
-  }
-
-  TIME && console.timeEnd("drawCoastline");
-}
-
-// Re-mark features (ocean, lakes, islands)
-function reMarkFeatures() {
-  TIME && console.time("reMarkFeatures");
-  const cells = pack.cells;
-  const features = (pack.features = [0]);
-
-  cells.f = new Uint16Array(cells.i.length); // cell feature number
-  cells.t = new Int8Array(cells.i.length); // cell type: 1 = land along coast; -1 = water along coast;
-  cells.haven = cells.i.length < 65535 ? new Uint16Array(cells.i.length) : new Uint32Array(cells.i.length); // cell haven (opposite water cell);
-  cells.harbor = new Uint8Array(cells.i.length); // cell harbor (number of adjacent water cells);
-
-  if (!cells.i.length) return; // no cells -> there is nothing to do
-  for (let i = 1, queue = [0]; queue[0] !== -1; i++) {
-    const start = queue[0]; // first cell
-    cells.f[start] = i; // assign feature number
-    const land = cells.h[start] >= 20;
-    let border = false; // true if feature touches map border
-    let cellNumber = 1; // to count cells number in a feature
-
-    while (queue.length) {
-      const q = queue.pop();
-      if (cells.b[q]) border = true;
-      cells.c[q].forEach(function (e) {
-        const eLand = cells.h[e] >= 20;
-        if (land && !eLand) {
-          cells.t[q] = 1;
-          cells.t[e] = -1;
-          if (!cells.haven[q]) defineHaven(q);
-        } else if (land && eLand) {
-          if (!cells.t[e] && cells.t[q] === 1) cells.t[e] = 2;
-          else if (!cells.t[q] && cells.t[e] === 1) cells.t[q] = 2;
-        }
-        if (!cells.f[e] && land === eLand) {
-          queue.push(e);
-          cells.f[e] = i;
-          cellNumber++;
-        }
-      });
-    }
-
-    const type = land ? "island" : border ? "ocean" : "lake";
-    let group;
-    if (type === "ocean") group = defineOceanGroup(cellNumber);
-    else if (type === "island") group = defineIslandGroup(start, cellNumber);
-    features.push({i, land, border, type, cells: cellNumber, firstCell: start, group});
-    queue[0] = cells.f.findIndex(f => !f); // find unmarked cell
-  }
-
-  markup(pack.cells, 3, 1, 0); // markupPackLand
-  markup(pack.cells, -2, -1, -10); // markupPackWater
-
-  function defineHaven(i) {
-    const water = cells.c[i].filter(c => cells.h[c] < 20);
-    const dist2 = water.map(c => (cells.p[i][0] - cells.p[c][0]) ** 2 + (cells.p[i][1] - cells.p[c][1]) ** 2);
-    const closest = water[dist2.indexOf(Math.min.apply(Math, dist2))];
-
-    cells.haven[i] = closest;
-    cells.harbor[i] = water.length;
-  }
-
-  function defineOceanGroup(number) {
-    if (number > grid.cells.i.length / 25) return "ocean";
-    if (number > grid.cells.i.length / 100) return "sea";
-    return "gulf";
-  }
-
-  function defineIslandGroup(cell, number) {
-    if (cell && features[cells.f[cell - 1]].type === "lake") return "lake_island";
-    if (number > grid.cells.i.length / 10) return "continent";
-    if (number > grid.cells.i.length / 1000) return "island";
-    return "isle";
-  }
-
-  TIME && console.timeEnd("reMarkFeatures");
-}
-
 function isWetLand(moisture, temperature, height) {
   if (moisture > 40 && temperature > -2 && height < 25) return true; //near coast
   if (moisture > 24 && temperature > -2 && height > 24 && height < 60) return true; //off coast
@@ -1449,8 +1172,8 @@ function rankCells() {
   cells.s = new Int16Array(cells.i.length); // cell suitability array
   cells.pop = new Float32Array(cells.i.length); // cell population array
 
-  const flMean = d3.median(cells.fl.filter(f => f)) || 0,
-    flMax = d3.max(cells.fl) + d3.max(cells.conf); // to normalize flux
+  const flMean = d3.median(cells.fl.filter(f => f)) || 0;
+  const flMax = d3.max(cells.fl) + d3.max(cells.conf); // to normalize flux
   const areaMean = d3.mean(cells.area); // to adjust population by cell area
 
   for (const i of cells.i) {
@@ -1484,442 +1207,6 @@ function rankCells() {
   TIME && console.timeEnd("rankCells");
 }
 
-// generate zones
-function addZones(number = 1) {
-  TIME && console.time("addZones");
-  const {cells, states, burgs} = pack;
-  const used = new Uint8Array(cells.i.length); // to store used cells
-  const zonesData = [];
-
-  for (let i = 0; i < rn(Math.random() * 1.8 * number); i++) addInvasion(); // invasion of enemy lands
-  for (let i = 0; i < rn(Math.random() * 1.6 * number); i++) addRebels(); // rebels along a state border
-  for (let i = 0; i < rn(Math.random() * 1.6 * number); i++) addProselytism(); // proselitism of organized religion
-  for (let i = 0; i < rn(Math.random() * 1.6 * number); i++) addCrusade(); // crusade on heresy lands
-  for (let i = 0; i < rn(Math.random() * 1.8 * number); i++) addDisease(); // disease starting in a random city
-  for (let i = 0; i < rn(Math.random() * 1.4 * number); i++) addDisaster(); // disaster starting in a random city
-  for (let i = 0; i < rn(Math.random() * 1.4 * number); i++) addEruption(); // volcanic eruption aroung volcano
-  for (let i = 0; i < rn(Math.random() * 1.0 * number); i++) addAvalanche(); // avalanche impacting highland road
-  for (let i = 0; i < rn(Math.random() * 1.4 * number); i++) addFault(); // fault line in elevated areas
-  for (let i = 0; i < rn(Math.random() * 1.4 * number); i++) addFlood(); // flood on river banks
-  for (let i = 0; i < rn(Math.random() * 1.2 * number); i++) addTsunami(); // tsunami starting near coast
-
-  drawZones();
-
-  function addInvasion() {
-    const atWar = states.filter(s => s.diplomacy && s.diplomacy.some(d => d === "Enemy"));
-    if (!atWar.length) return;
-
-    const invader = ra(atWar);
-    const target = invader.diplomacy.findIndex(d => d === "Enemy");
-
-    const cell = ra(
-      cells.i.filter(i => cells.state[i] === target && cells.c[i].some(c => cells.state[c] === invader.i))
-    );
-    if (!cell) return;
-
-    const cellsArray = [],
-      queue = [cell],
-      power = rand(5, 30);
-
-    while (queue.length) {
-      const q = P(0.4) ? queue.shift() : queue.pop();
-      cellsArray.push(q);
-      if (cellsArray.length > power) break;
-
-      cells.c[q].forEach(e => {
-        if (used[e]) return;
-        if (cells.state[e] !== target) return;
-        used[e] = 1;
-        queue.push(e);
-      });
-    }
-
-    const invasion = rw({
-      Invasion: 4,
-      Occupation: 3,
-      Raid: 2,
-      Conquest: 2,
-      Subjugation: 1,
-      Foray: 1,
-      Skirmishes: 1,
-      Incursion: 2,
-      Pillaging: 1,
-      Intervention: 1
-    });
-    const name = getAdjective(invader.name) + " " + invasion;
-    zonesData.push({name, type: "Invasion", cells: cellsArray, fill: "url(#hatch1)"});
-  }
-
-  function addRebels() {
-    const state = ra(states.filter(s => s.i && !s.removed && s.neighbors.some(n => n)));
-    if (!state) return;
-
-    const neib = ra(state.neighbors.filter(n => n && !states[n].removed));
-    if (!neib) return;
-    const cell = cells.i.find(
-      i => cells.state[i] === state.i && !state.removed && cells.c[i].some(c => cells.state[c] === neib)
-    );
-    const cellsArray = [];
-    const queue = [];
-    if (cell) queue.push(cell);
-
-    const power = rand(10, 30);
-
-    while (queue.length) {
-      const q = queue.shift();
-      cellsArray.push(q);
-      if (cellsArray.length > power) break;
-
-      cells.c[q].forEach(e => {
-        if (used[e]) return;
-        if (cells.state[e] !== state.i) return;
-        used[e] = 1;
-        if (e % 4 !== 0 && !cells.c[e].some(c => cells.state[c] === neib)) return;
-        queue.push(e);
-      });
-    }
-
-    const rebels = rw({
-      Rebels: 5,
-      Insurgents: 2,
-      Mutineers: 1,
-      Rioters: 1,
-      Separatists: 1,
-      Secessionists: 1,
-      Insurrection: 2,
-      Rebellion: 1,
-      Conspiracy: 2
-    });
-    const name = getAdjective(states[neib].name) + " " + rebels;
-    zonesData.push({name, type: "Rebels", cells: cellsArray, fill: "url(#hatch3)"});
-  }
-
-  function addProselytism() {
-    const organized = ra(pack.religions.filter(r => r.type === "Organized"));
-    if (!organized) return;
-
-    const cell = ra(
-      cells.i.filter(
-        i =>
-          cells.religion[i] &&
-          cells.religion[i] !== organized.i &&
-          cells.c[i].some(c => cells.religion[c] === organized.i)
-      )
-    );
-    if (!cell) return;
-    const target = cells.religion[cell];
-    const cellsArray = [],
-      queue = [cell],
-      power = rand(10, 30);
-
-    while (queue.length) {
-      const q = queue.shift();
-      cellsArray.push(q);
-      if (cellsArray.length > power) break;
-
-      cells.c[q].forEach(e => {
-        if (used[e]) return;
-        if (cells.religion[e] !== target) return;
-        if (cells.h[e] < 20) return;
-        used[e] = 1;
-        //if (e%2 !== 0 && !cells.c[e].some(c => cells.state[c] === neib)) return;
-        queue.push(e);
-      });
-    }
-
-    const name = getAdjective(organized.name.split(" ")[0]) + " Proselytism";
-    zonesData.push({name, type: "Proselytism", cells: cellsArray, fill: "url(#hatch6)"});
-  }
-
-  function addCrusade() {
-    const heresy = ra(pack.religions.filter(r => r.type === "Heresy"));
-    if (!heresy) return;
-
-    const cellsArray = cells.i.filter(i => !used[i] && cells.religion[i] === heresy.i);
-    if (!cellsArray.length) return;
-    cellsArray.forEach(i => (used[i] = 1));
-
-    const name = getAdjective(heresy.name.split(" ")[0]) + " Crusade";
-    zonesData.push({name, type: "Crusade", cells: cellsArray, fill: "url(#hatch6)"});
-  }
-
-  function addDisease() {
-    const burg = ra(burgs.filter(b => !used[b.cell] && b.i && !b.removed)); // random burg
-    if (!burg) return;
-
-    const cellsArray = [];
-    const cost = [];
-    const power = rand(20, 37);
-
-    const queue = new PriorityQueue({comparator: (a, b) => a.p - b.p});
-    queue.queue({e: burg.cell, p: 0});
-
-    while (queue.length) {
-      const next = queue.dequeue();
-      if (cells.burg[next.e] || cells.pop[next.e]) cellsArray.push(next.e);
-      used[next.e] = 1;
-
-      cells.c[next.e].forEach(nextCellId => {
-        const c = Routes.getRoute(next.e, nextCellId) ? 5 : 100;
-        const p = next.p + c;
-        if (p > power) return;
-
-        if (!cost[nextCellId] || p < cost[nextCellId]) {
-          cost[nextCellId] = p;
-          queue.queue({e: nextCellId, p});
-        }
-      });
-    }
-
-    const adjective = () =>
-      ra(["Great", "Silent", "Severe", "Blind", "Unknown", "Loud", "Deadly", "Burning", "Bloody", "Brutal", "Fatal"]);
-    const animal = () =>
-      ra([
-        "Ape",
-        "Bear",
-        "Boar",
-        "Cat",
-        "Cow",
-        "Dog",
-        "Pig",
-        "Fox",
-        "Bird",
-        "Horse",
-        "Rat",
-        "Raven",
-        "Sheep",
-        "Spider",
-        "Wolf"
-      ]);
-    const color = () =>
-      ra([
-        "Golden",
-        "White",
-        "Black",
-        "Red",
-        "Pink",
-        "Purple",
-        "Blue",
-        "Green",
-        "Yellow",
-        "Amber",
-        "Orange",
-        "Brown",
-        "Grey"
-      ]);
-
-    const type = rw({
-      Fever: 5,
-      Pestilence: 2,
-      Flu: 2,
-      Pox: 2,
-      Smallpox: 2,
-      Plague: 4,
-      Cholera: 2,
-      Dropsy: 1,
-      Leprosy: 2
-    });
-    const name = rw({[color()]: 4, [animal()]: 2, [adjective()]: 1}) + " " + type;
-    zonesData.push({name, type: "Disease", cells: cellsArray, fill: "url(#hatch12)"});
-  }
-
-  function addDisaster() {
-    const burg = ra(burgs.filter(b => !used[b.cell] && b.i && !b.removed)); // random burg
-    if (!burg) return;
-
-    const cellsArray = [],
-      cost = [],
-      power = rand(5, 25);
-    const queue = new PriorityQueue({comparator: (a, b) => a.p - b.p});
-    queue.queue({e: burg.cell, p: 0});
-
-    while (queue.length) {
-      const next = queue.dequeue();
-      if (cells.burg[next.e] || cells.pop[next.e]) cellsArray.push(next.e);
-      used[next.e] = 1;
-
-      cells.c[next.e].forEach(function (e) {
-        const c = rand(1, 10);
-        const p = next.p + c;
-        if (p > power) return;
-
-        if (!cost[e] || p < cost[e]) {
-          cost[e] = p;
-          queue.queue({e, p});
-        }
-      });
-    }
-
-    const type = rw({Famine: 5, Dearth: 1, Drought: 3, Earthquake: 3, Tornadoes: 1, Wildfires: 1});
-    const name = getAdjective(burg.name) + " " + type;
-    zonesData.push({name, type: "Disaster", cells: cellsArray, fill: "url(#hatch5)"});
-  }
-
-  function addEruption() {
-    const volcano = byId("markers").querySelector("use[data-id='#marker_volcano']");
-    if (!volcano) return;
-
-    const x = +volcano.dataset.x,
-      y = +volcano.dataset.y,
-      cell = findCell(x, y);
-    const id = volcano.id;
-    const note = notes.filter(n => n.id === id);
-
-    if (note[0]) note[0].legend = note[0].legend.replace("Active volcano", "Erupting volcano");
-    const name = note[0] ? note[0].name.replace(" Volcano", "") + " Eruption" : "Volcano Eruption";
-
-    const cellsArray = [],
-      queue = [cell],
-      power = rand(10, 30);
-
-    while (queue.length) {
-      const q = P(0.5) ? queue.shift() : queue.pop();
-      cellsArray.push(q);
-      if (cellsArray.length > power) break;
-      cells.c[q].forEach(e => {
-        if (used[e] || cells.h[e] < 20) return;
-        used[e] = 1;
-        queue.push(e);
-      });
-    }
-
-    zonesData.push({name, type: "Disaster", cells: cellsArray, fill: "url(#hatch7)"});
-  }
-
-  function addAvalanche() {
-    const routes = cells.i.filter(i => !used[i] && Routes.isConnected(i) && cells.h[i] >= 70);
-    if (!routes.length) return;
-
-    const cell = +ra(routes);
-    const cellsArray = [],
-      queue = [cell],
-      power = rand(3, 15);
-
-    while (queue.length) {
-      const q = P(0.3) ? queue.shift() : queue.pop();
-      cellsArray.push(q);
-      if (cellsArray.length > power) break;
-      cells.c[q].forEach(e => {
-        if (used[e] || cells.h[e] < 65) return;
-        used[e] = 1;
-        queue.push(e);
-      });
-    }
-
-    const proper = getAdjective(Names.getCultureShort(cells.culture[cell]));
-    const name = proper + " Avalanche";
-    zonesData.push({name, type: "Disaster", cells: cellsArray, fill: "url(#hatch5)"});
-  }
-
-  function addFault() {
-    const elevated = cells.i.filter(i => !used[i] && cells.h[i] > 50 && cells.h[i] < 70);
-    if (!elevated.length) return;
-
-    const cell = ra(elevated);
-    const cellsArray = [],
-      queue = [cell],
-      power = rand(3, 15);
-
-    while (queue.length) {
-      const q = queue.pop();
-      if (cells.h[q] >= 20) cellsArray.push(q);
-      if (cellsArray.length > power) break;
-      cells.c[q].forEach(e => {
-        if (used[e] || cells.r[e]) return;
-        used[e] = 1;
-        queue.push(e);
-      });
-    }
-
-    const proper = getAdjective(Names.getCultureShort(cells.culture[cell]));
-    const name = proper + " Fault";
-    zonesData.push({name, type: "Disaster", cells: cellsArray, fill: "url(#hatch2)"});
-  }
-
-  function addFlood() {
-    const fl = cells.fl.filter(fl => fl),
-      meanFlux = d3.mean(fl),
-      maxFlux = d3.max(fl),
-      flux = (maxFlux - meanFlux) / 2 + meanFlux;
-    const rivers = cells.i.filter(
-      i => !used[i] && cells.h[i] < 50 && cells.r[i] && cells.fl[i] > flux && cells.burg[i]
-    );
-    if (!rivers.length) return;
-
-    const cell = +ra(rivers),
-      river = cells.r[cell];
-    const cellsArray = [],
-      queue = [cell],
-      power = rand(5, 30);
-
-    while (queue.length) {
-      const q = queue.pop();
-      cellsArray.push(q);
-      if (cellsArray.length > power) break;
-
-      cells.c[q].forEach(e => {
-        if (used[e] || cells.h[e] < 20 || cells.r[e] !== river || cells.h[e] > 50 || cells.fl[e] < meanFlux) return;
-        used[e] = 1;
-        queue.push(e);
-      });
-    }
-
-    const name = getAdjective(burgs[cells.burg[cell]].name) + " Flood";
-    zonesData.push({name, type: "Disaster", cells: cellsArray, fill: "url(#hatch13)"});
-  }
-
-  function addTsunami() {
-    const coastal = cells.i.filter(i => !used[i] && cells.t[i] === -1 && pack.features[cells.f[i]].type !== "lake");
-    if (!coastal.length) return;
-
-    const cell = +ra(coastal);
-    const cellsArray = [],
-      queue = [cell],
-      power = rand(10, 30);
-
-    while (queue.length) {
-      const q = queue.shift();
-      if (cells.t[q] === 1) cellsArray.push(q);
-      if (cellsArray.length > power) break;
-
-      cells.c[q].forEach(e => {
-        if (used[e]) return;
-        if (cells.t[e] > 2) return;
-        if (pack.features[cells.f[e]].type === "lake") return;
-        used[e] = 1;
-        queue.push(e);
-      });
-    }
-
-    const proper = getAdjective(Names.getCultureShort(cells.culture[cell]));
-    const name = proper + " Tsunami";
-    zonesData.push({name, type: "Disaster", cells: cellsArray, fill: "url(#hatch13)"});
-  }
-
-  function drawZones() {
-    zones
-      .selectAll("g")
-      .data(zonesData)
-      .enter()
-      .append("g")
-      .attr("id", (d, i) => "zone" + i)
-      .attr("data-description", d => d.name)
-      .attr("data-type", d => d.type)
-      .attr("data-cells", d => d.cells.join(","))
-      .attr("fill", d => d.fill)
-      .selectAll("polygon")
-      .data(d => d.cells)
-      .enter()
-      .append("polygon")
-      .attr("points", d => getPackPolygon(d))
-      .attr("id", function (d) {
-        return this.parentNode.id + "_" + d;
-      });
-  }
-
-  TIME && console.timeEnd("addZones");
-}
-
 // show map stats on generation complete
 function showStatistics() {
   const heightmap = byId("templateInput").value;
@@ -1929,7 +1216,8 @@ function showStatistics() {
 
   const stats = `  Seed: ${seed}
     Canvas size: ${graphWidth}x${graphHeight} px
-    Heightmap: ${heightmap} (${isRandomTemplate}${heightmapType})
+    Heightmap: ${heightmap}
+    Template: ${isRandomTemplate}${heightmapType}
     Points: ${grid.points.length}
     Cells: ${pack.cells.i.length}
     Map size: ${mapSizeOutput.value}%
@@ -1937,7 +1225,7 @@ function showStatistics() {
     Provinces: ${pack.provinces.length - 1}
     Burgs: ${pack.burgs.length - 1}
     Religions: ${pack.religions.length - 1}
-    Culture set: ${culturesSet.selectedOptions[0].innerText}
+    Culture set: ${culturesSet.value}
     Cultures: ${pack.cultures.length - 1}`;
 
   mapId = Date.now(); // unique map id is it's creation date number
@@ -1957,7 +1245,7 @@ const regenerateMap = debounce(async function (options) {
   resetZoom(1000);
   undraw();
   await generate(options);
-  restoreLayers();
+  drawLayers();
   if (ThreeD.options.isOn) ThreeD.redraw();
   if ($("#worldConfigurator").is(":visible")) editWorld();
 
@@ -1971,12 +1259,10 @@ function undraw() {
   viewbox
     .selectAll("path, circle, polygon, line, text, use, #texture > image, #zones > g, #armies > g, #ruler > g")
     .remove();
-  document
-    .getElementById("deftemp")
+  byId("deftemp")
     .querySelectorAll("path, clipPath, svg")
     .forEach(el => el.remove());
   byId("coas").innerHTML = ""; // remove auto-generated emblems
   notes = [];
-  rulers = new Rulers();
   unfog();
 }
diff --git a/modules/burgs-and-states.js b/modules/burgs-and-states.js
index dfd734cb..8e3879c1 100644
--- a/modules/burgs-and-states.js
+++ b/modules/burgs-and-states.js
@@ -13,6 +13,8 @@ window.BurgsAndStates = (() => {
     placeTowns();
     expandStates();
     normalizeStates();
+    getPoles();
+
     specifyBurgs();
 
     collectStatistics();
@@ -20,11 +22,10 @@ window.BurgsAndStates = (() => {
 
     generateCampaigns();
     generateDiplomacy();
-    drawBurgs();
 
     function placeCapitals() {
       TIME && console.time("placeCapitals");
-      let count = +regionsOutput.value;
+      let count = +byId("statesNumber").value;
       let burgs = [0];
 
       const rand = () => 0.5 + Math.random() * 0.5;
@@ -85,7 +86,7 @@ window.BurgsAndStates = (() => {
         b.capital = 1;
 
         // states data
-        const expansionism = rn(Math.random() * powerInput.value + 1, 1);
+        const expansionism = rn(Math.random() * byId("sizeVariety").value + 1, 1);
         const basename = b.name.length < 9 && each5th(b.cell) ? b.name : Names.getCultureShort(b.culture);
         const name = Names.getState(basename, b.culture);
         const type = cultures[b.culture].type;
@@ -238,16 +239,23 @@ window.BurgsAndStates = (() => {
     return [x, y];
   }
 
-  const getType = (i, port) => {
-    const cells = pack.cells;
-    if (port) return "Naval";
-    if (cells.haven[i] && pack.features[cells.f[cells.haven[i]]].type === "lake") return "Lake";
-    if (cells.h[i] > 60) return "Highland";
-    if (cells.r[i] && cells.r[i].length > 100 && cells.r[i].length >= pack.rivers[0].length) return "River";
+  const getType = (cellId, port) => {
+    const {cells, features, burgs} = pack;
 
-    if (!cells.burg[i] || pack.burgs[cells.burg[i]].population < 6) {
-      if (population < 5 && [1, 2, 3, 4].includes(cells.biome[i])) return "Nomadic";
-      if (cells.biome[i] > 4 && cells.biome[i] < 10) return "Hunting";
+    if (port) return "Naval";
+
+    const haven = cells.haven[cellId];
+    if (haven !== undefined && features[cells.f[haven]].type === "lake") return "Lake";
+
+    if (cells.h[cellId] > 60) return "Highland";
+
+    if (cells.r[cellId] && cells.fl[cellId] >= 100) return "River";
+
+    const biome = cells.biome[cellId];
+    const population = cells.pop[cellId];
+    if (!cells.burg[cellId] || population <= 5) {
+      if (population < 5 && [1, 2, 3, 4].includes(biome)) return "Nomadic";
+      if (biome > 4 && biome < 10) return "Hunting";
     }
 
     return "Generic";
@@ -272,115 +280,19 @@ window.BurgsAndStates = (() => {
       });
   };
 
-  const drawBurgs = () => {
-    TIME && console.time("drawBurgs");
-
-    // remove old data
-    burgIcons.selectAll("circle").remove();
-    burgLabels.selectAll("text").remove();
-    icons.selectAll("use").remove();
-
-    // capitals
-    const capitals = pack.burgs.filter(b => b.capital && !b.removed);
-    const capitalIcons = burgIcons.select("#cities");
-    const capitalLabels = burgLabels.select("#cities");
-    const capitalSize = capitalIcons.attr("size") || 1;
-    const capitalAnchors = anchors.selectAll("#cities");
-    const caSize = capitalAnchors.attr("size") || 2;
-
-    capitalIcons
-      .selectAll("circle")
-      .data(capitals)
-      .enter()
-      .append("circle")
-      .attr("id", d => "burg" + d.i)
-      .attr("data-id", d => d.i)
-      .attr("cx", d => d.x)
-      .attr("cy", d => d.y)
-      .attr("r", capitalSize);
-
-    capitalLabels
-      .selectAll("text")
-      .data(capitals)
-      .enter()
-      .append("text")
-      .attr("id", d => "burgLabel" + d.i)
-      .attr("data-id", d => d.i)
-      .attr("x", d => d.x)
-      .attr("y", d => d.y)
-      .attr("dy", `${capitalSize * -1.5}px`)
-      .text(d => d.name);
-
-    capitalAnchors
-      .selectAll("use")
-      .data(capitals.filter(c => c.port))
-      .enter()
-      .append("use")
-      .attr("xlink:href", "#icon-anchor")
-      .attr("data-id", d => d.i)
-      .attr("x", d => rn(d.x - caSize * 0.47, 2))
-      .attr("y", d => rn(d.y - caSize * 0.47, 2))
-      .attr("width", caSize)
-      .attr("height", caSize);
-
-    // towns
-    const towns = pack.burgs.filter(b => b.i && !b.capital && !b.removed);
-    const townIcons = burgIcons.select("#towns");
-    const townLabels = burgLabels.select("#towns");
-    const townSize = townIcons.attr("size") || 0.5;
-    const townsAnchors = anchors.selectAll("#towns");
-    const taSize = townsAnchors.attr("size") || 1;
-
-    townIcons
-      .selectAll("circle")
-      .data(towns)
-      .enter()
-      .append("circle")
-      .attr("id", d => "burg" + d.i)
-      .attr("data-id", d => d.i)
-      .attr("cx", d => d.x)
-      .attr("cy", d => d.y)
-      .attr("r", townSize);
-
-    townLabels
-      .selectAll("text")
-      .data(towns)
-      .enter()
-      .append("text")
-      .attr("id", d => "burgLabel" + d.i)
-      .attr("data-id", d => d.i)
-      .attr("x", d => d.x)
-      .attr("y", d => d.y)
-      .attr("dy", `${townSize * -1.5}px`)
-      .text(d => d.name);
-
-    townsAnchors
-      .selectAll("use")
-      .data(towns.filter(c => c.port))
-      .enter()
-      .append("use")
-      .attr("xlink:href", "#icon-anchor")
-      .attr("data-id", d => d.i)
-      .attr("x", d => rn(d.x - taSize * 0.47, 2))
-      .attr("y", d => rn(d.y - taSize * 0.47, 2))
-      .attr("width", taSize)
-      .attr("height", taSize);
-
-    TIME && console.timeEnd("drawBurgs");
-  };
-
   // expand cultures across the map (Dijkstra-like algorithm)
   const expandStates = () => {
     TIME && console.time("expandStates");
     const {cells, states, cultures, burgs} = pack;
 
     cells.state = cells.state || new Uint16Array(cells.i.length);
-    const queue = new PriorityQueue({comparator: (a, b) => a.p - b.p});
+
+    const queue = new FlatQueue();
     const cost = [];
 
-    const globalNeutralRate = byId("neutralInput")?.valueAsNumber || 1;
-    const statesNeutralRate = byId("statesNeutral")?.valueAsNumber || 1;
-    const neutral = (cells.i.length / 2) * globalNeutralRate * statesNeutralRate; // limit cost for state growth
+    const globalGrowthRate = byId("growthRate").valueAsNumber || 1;
+    const statesGrowthRate = byId("statesGrowthRate")?.valueAsNumber || 1;
+    const growthRate = (cells.i.length / 2) * globalGrowthRate * statesGrowthRate; // limit cost for state growth
 
     // remove state from all cells except of locked
     for (const cellId of cells.i) {
@@ -396,12 +308,13 @@ window.BurgsAndStates = (() => {
       cells.state[capitalCell] = state.i;
       const cultureCenter = cultures[state.culture].center;
       const b = cells.biome[cultureCenter]; // state native biome
-      queue.queue({e: state.center, p: 0, s: state.i, b});
+      queue.push({e: state.center, p: 0, s: state.i, b}, 0);
       cost[state.center] = 1;
     }
 
     while (queue.length) {
-      const next = queue.dequeue();
+      const next = queue.pop();
+
       const {e, p, s, b} = next;
       const {type, culture} = states[s];
 
@@ -419,12 +332,12 @@ window.BurgsAndStates = (() => {
         const cellCost = Math.max(cultureCost + populationCost + biomeCost + heightCost + riverCost + typeCost, 0);
         const totalCost = p + 10 + cellCost / states[s].expansionism;
 
-        if (totalCost > neutral) return;
+        if (totalCost > growthRate) return;
 
         if (!cost[e] || totalCost < cost[e]) {
           if (cells.h[e] >= 20) cells.state[e] = s; // assign state to cell
           cost[e] = totalCost;
-          queue.queue({e, p: totalCost, s, b});
+          queue.push({e, p: totalCost, s, b}, totalCost);
         }
       });
     }
@@ -468,8 +381,7 @@ window.BurgsAndStates = (() => {
 
   const normalizeStates = () => {
     TIME && console.time("normalizeStates");
-    const cells = pack.cells,
-      burgs = pack.burgs;
+    const {cells, burgs} = pack;
 
     for (const i of cells.i) {
       if (cells.h[i] < 20 || cells.burg[i]) continue; // do not overwrite burgs
@@ -486,26 +398,30 @@ window.BurgsAndStates = (() => {
     TIME && console.timeEnd("normalizeStates");
   };
 
-  // Resets the cultures of all burgs and states to their
-  // cell or center cell's (respectively) culture.
+  // calculate pole of inaccessibility for each state
+  const getPoles = () => {
+    const getType = cellId => pack.cells.state[cellId];
+    const poles = getPolesOfInaccessibility(pack, getType);
+
+    pack.states.forEach(s => {
+      if (!s.i || s.removed) return;
+      s.pole = poles[s.i] || [0, 0];
+    });
+  };
+
+  // Resets the cultures of all burgs and states to their cell or center cell's (respectively) culture
   const updateCultures = () => {
     TIME && console.time("updateCulturesForBurgsAndStates");
 
-    // Assign the culture associated with the burgs cell.
+    // Assign the culture associated with the burgs cell
     pack.burgs = pack.burgs.map((burg, index) => {
-      // Ignore metadata burg
-      if (index === 0) {
-        return burg;
-      }
+      if (index === 0) return burg;
       return {...burg, culture: pack.cells.culture[burg.cell]};
     });
 
-    // Assign the culture associated with the states' center cell.
+    // Assign the culture associated with the states' center cell
     pack.states = pack.states.map((state, index) => {
-      // Ignore neutrals state
-      if (index === 0) {
-        return state;
-      }
+      if (index === 0) return state;
       return {...state, culture: pack.cells.culture[state.center]};
     });
 
@@ -611,8 +527,7 @@ window.BurgsAndStates = (() => {
   // generate Diplomatic Relationships
   const generateDiplomacy = () => {
     TIME && console.time("generateDiplomacy");
-    const cells = pack.cells,
-      states = pack.states;
+    const {cells, states} = pack;
     const chronicle = (states[0].diplomacy = []);
     const valid = states.filter(s => s.i && !states.removed);
 
@@ -696,21 +611,23 @@ window.BurgsAndStates = (() => {
       const defender = ra(
         ad.map((r, d) => (r === "Rival" && !states[d].diplomacy.includes("Vassal") ? d : 0)).filter(d => d)
       );
-      let ap = states[attacker].area * states[attacker].expansionism,
-        dp = states[defender].area * states[defender].expansionism;
+      let ap = states[attacker].area * states[attacker].expansionism;
+      let dp = states[defender].area * states[defender].expansionism;
       if (ap < dp * gauss(1.6, 0.8, 0, 10, 2)) continue; // defender is too strong
-      const an = states[attacker].name,
-        dn = states[defender].name; // names
-      const attackers = [attacker],
-        defenders = [defender]; // attackers and defenders array
+
+      const an = states[attacker].name;
+      const dn = states[defender].name; // names
+      const attackers = [attacker];
+      const defenders = [defender]; // attackers and defenders array
       const dd = states[defender].diplomacy; // defender relations;
 
-      // start a war
-      const war = [`${an}-${trimVowels(dn)}ian War`, `${an} declared a war on its rival ${dn}`];
-      const end = options.year;
-      const start = end - gauss(2, 2, 0, 5);
-      states[attacker].campaigns.push({name: `${trimVowels(dn)}ian War`, start, end});
-      states[defender].campaigns.push({name: `${trimVowels(an)}ian War`, start, end});
+      // start an ongoing war
+      const name = `${an}-${trimVowels(dn)}ian War`;
+      const start = options.year - gauss(2, 3, 0, 10);
+      const war = [name, `${an} declared a war on its rival ${dn}`];
+      const campaign = {name, start, attacker, defender};
+      states[attacker].campaigns.push(campaign);
+      states[defender].campaigns.push(campaign);
 
       // attacker vassals join the war
       ad.forEach((r, d) => {
@@ -790,7 +707,6 @@ window.BurgsAndStates = (() => {
     }
 
     TIME && console.timeEnd("generateDiplomacy");
-    //console.table(states.map(s => s.diplomacy));
   };
 
   // select a forms for listed or all valid states
@@ -949,254 +865,12 @@ window.BurgsAndStates = (() => {
     return adjName ? `${getAdjective(state.name)} ${state.formName}` : `${state.formName} of ${state.name}`;
   };
 
-  const generateProvinces = (regenerate = false, regenerateInLockedStates = false) => {
-    TIME && console.time("generateProvinces");
-    const localSeed = regenerate ? generateSeed() : seed;
-    Math.random = aleaPRNG(localSeed);
-
-    const {cells, states, burgs} = pack;
-    const provinces = [0];
-    const provinceIds = new Uint16Array(cells.i.length);
-
-    const isProvinceLocked = province => province.lock || (!regenerateInLockedStates && states[province.state]?.lock);
-    const isProvinceCellLocked = cell => provinceIds[cell] && isProvinceLocked(provinces[provinceIds[cell]]);
-
-    if (regenerate) {
-      pack.provinces.forEach(province => {
-        if (!province.i || province.removed || !isProvinceLocked(province)) return;
-
-        const newId = provinces.length;
-        for (const i of cells.i) {
-          if (cells.province[i] === province.i) provinceIds[i] = newId;
-        }
-
-        province.i = newId;
-        provinces.push(province);
-      });
-    }
-
-    const percentage = +provincesInput.value;
-
-    const max = percentage == 100 ? 1000 : gauss(20, 5, 5, 100) * percentage ** 0.5; // max growth
-
-    const forms = {
-      Monarchy: {County: 22, Earldom: 6, Shire: 2, Landgrave: 2, Margrave: 2, Barony: 2, Captaincy: 1, Seneschalty: 1},
-      Republic: {Province: 6, Department: 2, Governorate: 2, District: 1, Canton: 1, Prefecture: 1},
-      Theocracy: {Parish: 3, Deanery: 1},
-      Union: {Province: 1, State: 1, Canton: 1, Republic: 1, County: 1, Council: 1},
-      Anarchy: {Council: 1, Commune: 1, Community: 1, Tribe: 1},
-      Wild: {Territory: 10, Land: 5, Region: 2, Tribe: 1, Clan: 1, Dependency: 1, Area: 1}
-    };
-
-    // generate provinces for selected burgs
-    states.forEach(s => {
-      s.provinces = [];
-      if (!s.i || s.removed) return;
-      if (provinces.length) s.provinces = provinces.filter(p => p.state === s.i).map(p => p.i); // locked provinces ids
-      if (s.lock && !regenerateInLockedStates) return; // don't regenerate provinces of a locked state
-
-      const stateBurgs = burgs
-        .filter(b => b.state === s.i && !b.removed && !provinceIds[b.cell])
-        .sort((a, b) => b.population * gauss(1, 0.2, 0.5, 1.5, 3) - a.population)
-        .sort((a, b) => b.capital - a.capital);
-      if (stateBurgs.length < 2) return; // at least 2 provinces are required
-      const provincesNumber = Math.max(Math.ceil((stateBurgs.length * percentage) / 100), 2);
-
-      const form = Object.assign({}, forms[s.form]);
-
-      for (let i = 0; i < provincesNumber; i++) {
-        const provinceId = provinces.length;
-        const center = stateBurgs[i].cell;
-        const burg = stateBurgs[i].i;
-        const c = stateBurgs[i].culture;
-        const nameByBurg = P(0.5);
-        const name = nameByBurg ? stateBurgs[i].name : Names.getState(Names.getCultureShort(c), c);
-        const formName = rw(form);
-        form[formName] += 10;
-        const fullName = name + " " + formName;
-        const color = getMixedColor(s.color);
-        const kinship = nameByBurg ? 0.8 : 0.4;
-        const type = getType(center, burg.port);
-        const coa = COA.generate(stateBurgs[i].coa, kinship, null, type);
-        coa.shield = COA.getShield(c, s.i);
-
-        s.provinces.push(provinceId);
-        provinces.push({i: provinceId, state: s.i, center, burg, name, formName, fullName, color, coa});
-      }
-    });
-
-    // expand generated provinces
-    const queue = new PriorityQueue({comparator: (a, b) => a.p - b.p});
-    const cost = [];
-
-    provinces.forEach(p => {
-      if (!p.i || p.removed || isProvinceLocked(p)) return;
-      provinceIds[p.center] = p.i;
-      queue.queue({e: p.center, p: 0, province: p.i, state: p.state});
-      cost[p.center] = 1;
-    });
-
-    while (queue.length) {
-      const {e, p, province, state} = queue.dequeue();
-
-      cells.c[e].forEach(e => {
-        if (isProvinceCellLocked(e)) return; // do not overwrite cell of locked provinces
-
-        const land = cells.h[e] >= 20;
-        if (!land && !cells.t[e]) return; // cannot pass deep ocean
-        if (land && cells.state[e] !== state) return;
-        const evevation = cells.h[e] >= 70 ? 100 : cells.h[e] >= 50 ? 30 : cells.h[e] >= 20 ? 10 : 100;
-        const totalCost = p + evevation;
-
-        if (totalCost > max) return;
-        if (!cost[e] || totalCost < cost[e]) {
-          if (land) provinceIds[e] = province; // assign province to a cell
-          cost[e] = totalCost;
-          queue.queue({e, p: totalCost, province, state});
-        }
-      });
-    }
-
-    // justify provinces shapes a bit
-    for (const i of cells.i) {
-      if (cells.burg[i]) continue; // do not overwrite burgs
-      if (isProvinceCellLocked(i)) continue; // do not overwrite cell of locked provinces
-
-      const neibs = cells.c[i]
-        .filter(c => cells.state[c] === cells.state[i] && !isProvinceCellLocked(c))
-        .map(c => provinceIds[c]);
-      const adversaries = neibs.filter(c => c !== provinceIds[i]);
-      if (adversaries.length < 2) continue;
-
-      const buddies = neibs.filter(c => c === provinceIds[i]).length;
-      if (buddies.length > 2) continue;
-
-      const competitors = adversaries.map(p => adversaries.reduce((s, v) => (v === p ? s + 1 : s), 0));
-      const max = d3.max(competitors);
-      if (buddies >= max) continue;
-
-      provinceIds[i] = adversaries[competitors.indexOf(max)];
-    }
-
-    // add "wild" provinces if some cells don't have a province assigned
-    const noProvince = Array.from(cells.i).filter(i => cells.state[i] && !provinceIds[i]); // cells without province assigned
-    states.forEach(s => {
-      if (!s.i || s.removed) return;
-      if (s.lock && !regenerateInLockedStates) return;
-      if (!s.provinces.length) return;
-
-      const coreProvinceNames = s.provinces.map(p => provinces[p]?.name);
-      const colonyNamePool = [s.name, ...coreProvinceNames].filter(name => name && !/new/i.test(name));
-      const getColonyName = () => {
-        if (colonyNamePool.length < 1) return null;
-
-        const index = rand(colonyNamePool.length - 1);
-        const spliced = colonyNamePool.splice(index, 1);
-        return spliced[0] ? `New ${spliced[0]}` : null;
-      };
-
-      let stateNoProvince = noProvince.filter(i => cells.state[i] === s.i && !provinceIds[i]);
-      while (stateNoProvince.length) {
-        // add new province
-        const provinceId = provinces.length;
-        const burgCell = stateNoProvince.find(i => cells.burg[i]);
-        const center = burgCell ? burgCell : stateNoProvince[0];
-        const burg = burgCell ? cells.burg[burgCell] : 0;
-        provinceIds[center] = provinceId;
-
-        // expand province
-        const cost = [];
-        cost[center] = 1;
-        queue.queue({e: center, p: 0});
-        while (queue.length) {
-          const {e, p} = queue.dequeue();
-
-          cells.c[e].forEach(nextCellId => {
-            if (provinceIds[nextCellId]) return;
-            const land = cells.h[nextCellId] >= 20;
-            if (cells.state[nextCellId] && cells.state[nextCellId] !== s.i) return;
-            const ter = land ? (cells.state[nextCellId] === s.i ? 3 : 20) : cells.t[nextCellId] ? 10 : 30;
-            const totalCost = p + ter;
-
-            if (totalCost > max) return;
-            if (!cost[nextCellId] || totalCost < cost[nextCellId]) {
-              if (land && cells.state[nextCellId] === s.i) provinceIds[nextCellId] = provinceId; // assign province to a cell
-              cost[nextCellId] = totalCost;
-              queue.queue({e: nextCellId, p: totalCost});
-            }
-          });
-        }
-
-        // generate "wild" province name
-        const c = cells.culture[center];
-        const f = pack.features[cells.f[center]];
-        const color = getMixedColor(s.color);
-
-        const provCells = stateNoProvince.filter(i => provinceIds[i] === provinceId);
-        const singleIsle = provCells.length === f.cells && !provCells.find(i => cells.f[i] !== f.i);
-        const isleGroup = !singleIsle && !provCells.find(i => pack.features[cells.f[i]].group !== "isle");
-        const colony = !singleIsle && !isleGroup && P(0.5) && !isPassable(s.center, center);
-
-        const name = (() => {
-          const colonyName = colony && P(0.8) && getColonyName();
-          if (colonyName) return colonyName;
-          if (burgCell && P(0.5)) return burgs[burg].name;
-          return Names.getState(Names.getCultureShort(c), c);
-        })();
-
-        const formName = (() => {
-          if (singleIsle) return "Island";
-          if (isleGroup) return "Islands";
-          if (colony) return "Colony";
-          return rw(forms["Wild"]);
-        })();
-
-        const fullName = name + " " + formName;
-
-        const dominion = colony ? P(0.95) : singleIsle || isleGroup ? P(0.7) : P(0.3);
-        const kinship = dominion ? 0 : 0.4;
-        const type = getType(center, burgs[burg]?.port);
-        const coa = COA.generate(s.coa, kinship, dominion, type);
-        coa.shield = COA.getShield(c, s.i);
-
-        provinces.push({i: provinceId, state: s.i, center, burg, name, formName, fullName, color, coa});
-        s.provinces.push(provinceId);
-
-        // check if there is a land way within the same state between two cells
-        function isPassable(from, to) {
-          if (cells.f[from] !== cells.f[to]) return false; // on different islands
-          const queue = [from],
-            used = new Uint8Array(cells.i.length),
-            state = cells.state[from];
-          while (queue.length) {
-            const current = queue.pop();
-            if (current === to) return true; // way is found
-            cells.c[current].forEach(c => {
-              if (used[c] || cells.h[c] < 20 || cells.state[c] !== state) return;
-              queue.push(c);
-              used[c] = 1;
-            });
-          }
-          return false; // way is not found
-        }
-
-        // re-check
-        stateNoProvince = noProvince.filter(i => cells.state[i] === s.i && !provinceIds[i]);
-      }
-    });
-
-    cells.province = provinceIds;
-    pack.provinces = provinces;
-
-    TIME && console.timeEnd("generateProvinces");
-  };
-
   return {
     generate,
     expandStates,
     normalizeStates,
+    getPoles,
     assignColors,
-    drawBurgs,
     specifyBurgs,
     defineBurgFeatures,
     getType,
@@ -1206,7 +880,7 @@ window.BurgsAndStates = (() => {
     generateDiplomacy,
     defineStateForms,
     getFullName,
-    generateProvinces,
-    updateCultures
+    updateCultures,
+    getCloseToEdgePoint
   };
 })();
diff --git a/modules/cultures-generator.js b/modules/cultures-generator.js
index 7f89b76f..34dc5edd 100644
--- a/modules/cultures-generator.js
+++ b/modules/cultures-generator.js
@@ -8,7 +8,10 @@ window.Cultures = (function () {
     cells = pack.cells;
 
     const cultureIds = new Uint16Array(cells.i.length); // cell cultures
-    let count = Math.min(+culturesInput.value, +culturesSet.selectedOptions[0].dataset.max);
+
+    const culturesInputNumber = +byId("culturesInput").value;
+    const culturesInSetNumber = +byId("culturesSet").selectedOptions[0].dataset.max;
+    let count = Math.min(culturesInputNumber, culturesInSetNumber);
 
     const populated = cells.i.filter(i => cells.s[i]); // populated cells
     if (populated.length < count * 25) {
@@ -120,26 +123,26 @@ window.Cultures = (function () {
     cultures.forEach(c => (c.base = c.base % nameBases.length));
 
     function selectCultures(culturesNumber) {
-      let def = getDefault(culturesNumber);
+      let defaultCultures = getDefault(culturesNumber);
       const cultures = [];
 
       pack.cultures?.forEach(function (culture) {
-        if (culture.lock) cultures.push(culture);
+        if (culture.lock && !culture.removed) cultures.push(culture);
       });
 
       if (!cultures.length) {
-        if (culturesNumber === def.length) return def;
-        if (def.every(d => d.odd === 1)) return def.splice(0, culturesNumber);
+        if (culturesNumber === defaultCultures.length) return defaultCultures;
+        if (defaultCultures.every(d => d.odd === 1)) return defaultCultures.splice(0, culturesNumber);
       }
 
-      for (let culture, rnd, i = 0; cultures.length < culturesNumber && def.length > 0; ) {
+      for (let culture, rnd, i = 0; cultures.length < culturesNumber && defaultCultures.length > 0; ) {
         do {
-          rnd = rand(def.length - 1);
-          culture = def[rnd];
+          rnd = rand(defaultCultures.length - 1);
+          culture = defaultCultures[rnd];
           i++;
         } while (i < 200 && !P(culture.odd));
         cultures.push(culture);
-        def.splice(rnd, 1);
+        defaultCultures.splice(rnd, 1);
       }
       return cultures;
     }
@@ -169,7 +172,7 @@ window.Cultures = (function () {
       else if (type === "Nomadic") base = 1.5;
       else if (type === "Hunting") base = 0.7;
       else if (type === "Highland") base = 1.2;
-      return rn(((Math.random() * powerInput.value) / 2 + 1) * base, 1);
+      return rn(((Math.random() * byId("sizeVariety").value) / 2 + 1) * base, 1);
     }
 
     TIME && console.timeEnd("generateCultures");
@@ -515,7 +518,7 @@ window.Cultures = (function () {
     TIME && console.time("expandCultures");
     const {cells, cultures} = pack;
 
-    const queue = new PriorityQueue({comparator: (a, b) => a.priority - b.priority});
+    const queue = new FlatQueue();
     const cost = [];
 
     const neutralRate = byId("neutralRate")?.valueAsNumber || 1;
@@ -535,11 +538,11 @@ window.Cultures = (function () {
 
     for (const culture of cultures) {
       if (!culture.i || culture.removed || culture.lock) continue;
-      queue.queue({cellId: culture.center, cultureId: culture.i, priority: 0});
+      queue.push({cellId: culture.center, cultureId: culture.i, priority: 0}, 0);
     }
 
     while (queue.length) {
-      const {cellId, priority, cultureId} = queue.dequeue();
+      const {cellId, priority, cultureId} = queue.pop();
       const {type, expansionism} = cultures[cultureId];
 
       cells.c[cellId].forEach(neibCellId => {
@@ -563,7 +566,7 @@ window.Cultures = (function () {
         if (!cost[neibCellId] || totalCost < cost[neibCellId]) {
           if (cells.pop[neibCellId] > 0) cells.culture[neibCellId] = cultureId; // assign culture to populated cell
           cost[neibCellId] = totalCost;
-          queue.queue({cellId: neibCellId, cultureId, priority: totalCost});
+          queue.push({cellId: neibCellId, cultureId, priority: totalCost}, totalCost);
         }
       });
     }
diff --git a/modules/dynamic/auto-update.js b/modules/dynamic/auto-update.js
index 4bbb778d..6622e3b5 100644
--- a/modules/dynamic/auto-update.js
+++ b/modules/dynamic/auto-update.js
@@ -1,8 +1,10 @@
 "use strict";
 
 // update old map file to the current version
-export function resolveVersionConflicts(version) {
-  if (version < 1) {
+export function resolveVersionConflicts(mapVersion) {
+  const isOlderThan = tagVersion => compareVersions(mapVersion, tagVersion).isOlder;
+
+  if (isOlderThan("1.0.0")) {
     // v1.0 added a new religions layer
     relig = viewbox.insert("g", "#terrain").attr("id", "relig");
     Religions.generate();
@@ -49,9 +51,8 @@ export function resolveVersionConflicts(version) {
     BurgsAndStates.generateCampaigns();
     BurgsAndStates.generateDiplomacy();
     BurgsAndStates.defineStateForms();
-    drawStates();
-    BurgsAndStates.generateProvinces();
-    drawBorders();
+    Provinces.generate();
+    Provinces.getPoles();
     if (!layerIsOn("toggleBorders")) $("#borders").fadeOut();
     if (!layerIsOn("toggleStates")) regions.attr("display", "none").selectAll("path").remove();
 
@@ -63,7 +64,7 @@ export function resolveVersionConflicts(version) {
       .attr("stroke-width", 0)
       .attr("stroke-dasharray", null)
       .attr("stroke-linecap", "butt");
-    addZones();
+    Zones.generate();
     if (!markers.selectAll("*").size()) {
       Markers.generate();
       turnButtonOn("toggleMarkers");
@@ -107,11 +108,11 @@ export function resolveVersionConflicts(version) {
     biomesData.habitability.push(12);
   }
 
-  if (version < 1.1) {
-    // v1.0 initial code had a bug with religion layer id
+  if (isOlderThan("1.1.0")) {
+    // v1.0 code had a bug with religion layer id
     if (!relig.size()) relig = viewbox.insert("g", "#terrain").attr("id", "relig");
 
-    // v1.0 initially has Sympathy status then relaced with Friendly
+    // v1.0 had Sympathy status then relaced with Friendly
     for (const s of pack.states) {
       if (!s.diplomacy) continue;
       s.diplomacy = s.diplomacy.map(r => (r === "Sympathy" ? "Friendly" : r));
@@ -200,10 +201,12 @@ export function resolveVersionConflicts(version) {
     defs.select("#water").selectAll("path").remove();
     coastline.selectAll("path").remove();
     lakes.selectAll("path").remove();
-    drawCoastline();
+
+    Features.markupPack();
+    createDefaultRuler();
   }
 
-  if (version < 1.11) {
+  if (isOlderThan("1.11.0")) {
     // v1.11 added new attributes
     terrs.attr("scheme", "bright").attr("terracing", 0).attr("skip", 5).attr("relax", 0).attr("curve", 0);
     svg.select("#oceanic > *").attr("id", "oceanicPattern");
@@ -229,7 +232,7 @@ export function resolveVersionConflicts(version) {
     if (!terrain.attr("density")) terrain.attr("density", 0.4);
   }
 
-  if (version < 1.21) {
+  if (isOlderThan("1.21.0")) {
     // v1.11 replaced "display" attribute by "display" style
     viewbox.selectAll("g").each(function () {
       if (this.hasAttribute("display")) {
@@ -255,12 +258,12 @@ export function resolveVersionConflicts(version) {
     });
   }
 
-  if (version < 1.22) {
+  if (isOlderThan("1.22.0")) {
     // v1.22 changed state neighbors from Set object to array
     BurgsAndStates.collectStatistics();
   }
 
-  if (version < 1.3) {
+  if (isOlderThan("1.3.0")) {
     // v1.3 added global options object
     const winds = options.slice(); // previostly wind was saved in settings[19]
     const year = rand(100, 2000);
@@ -285,7 +288,7 @@ export function resolveVersionConflicts(version) {
     Military.generate();
   }
 
-  if (version < 1.4) {
+  if (isOlderThan("1.4.0")) {
     // v1.35 added dry lakes
     if (!lakes.select("#dry").size()) {
       lakes.append("g").attr("id", "dry");
@@ -329,7 +332,7 @@ export function resolveVersionConflicts(version) {
     pack.states.filter(s => s.military).forEach(s => s.military.forEach(r => (r.state = s.i)));
   }
 
-  if (version < 1.5) {
+  if (isOlderThan("1.5.0")) {
     // not need to store default styles from v 1.5
     localStorage.removeItem("styleClean");
     localStorage.removeItem("styleGloom");
@@ -367,7 +370,7 @@ export function resolveVersionConflicts(version) {
     });
   }
 
-  if (version < 1.6) {
+  if (isOlderThan("1.6.0")) {
     // v1.6 changed rivers data
     for (const river of pack.rivers) {
       const el = document.getElementById("river" + river.i);
@@ -399,7 +402,7 @@ export function resolveVersionConflicts(version) {
     }
   }
 
-  if (version < 1.61) {
+  if (isOlderThan("1.61.0")) {
     // v1.61 changed rulers data
     ruler.style("display", null);
     rulers = new Rulers();
@@ -453,12 +456,12 @@ export function resolveVersionConflicts(version) {
     pattern.innerHTML = /* html */ `<image id="oceanicPattern" href=${href} width="100" height="100" opacity="0.2"></image>`;
   }
 
-  if (version < 1.62) {
+  if (isOlderThan("1.62.0")) {
     // v1.62 changed grid data
     gridOverlay.attr("size", null);
   }
 
-  if (version < 1.63) {
+  if (isOlderThan("1.63.0")) {
     // v1.63 changed ocean pattern opacity element
     const oceanPattern = document.getElementById("oceanPattern");
     if (oceanPattern) oceanPattern.removeAttribute("opacity");
@@ -472,7 +475,7 @@ export function resolveVersionConflicts(version) {
     labels.select("#addedLabels").style("text-shadow", "white 0 0 4px");
   }
 
-  if (version < 1.64) {
+  if (isOlderThan("1.64.0")) {
     // v1.64 change states style
     const opacity = regions.attr("opacity");
     const filter = regions.attr("filter");
@@ -481,7 +484,7 @@ export function resolveVersionConflicts(version) {
     regions.attr("opacity", null).attr("filter", null);
   }
 
-  if (version < 1.65) {
+  if (isOlderThan("1.65.0")) {
     // v1.65 changed rivers data
     d3.select("#rivers").attr("style", null); // remove style to unhide layer
     const {cells, rivers} = pack;
@@ -523,13 +526,13 @@ export function resolveVersionConflicts(version) {
     }
   }
 
-  if (version < 1.652) {
+  if (isOlderThan("1.652.0")) {
     // remove style to unhide layers
     rivers.attr("style", null);
     borders.attr("style", null);
   }
 
-  if (version < 1.7) {
+  if (isOlderThan("1.7.0")) {
     // v1.7 changed markers data
     const defs = document.getElementById("defs-markers");
     const markersGroup = document.getElementById("markers");
@@ -587,7 +590,7 @@ export function resolveVersionConflicts(version) {
     }
   }
 
-  if (version < 1.72) {
+  if (isOlderThan("1.72.0")) {
     // v1.72 renamed custom style presets
     const storedStyles = Object.keys(localStorage).filter(key => key.startsWith("style"));
     storedStyles.forEach(styleName => {
@@ -598,7 +601,7 @@ export function resolveVersionConflicts(version) {
     });
   }
 
-  if (version < 1.73) {
+  if (isOlderThan("1.73.0")) {
     // v1.73 moved the hatching patterns out of the user's SVG
     document.getElementById("hatching")?.remove();
 
@@ -609,17 +612,17 @@ export function resolveVersionConflicts(version) {
     });
   }
 
-  if (version < 1.84) {
+  if (isOlderThan("1.84.0")) {
     // v1.84.0 added grid.cellsDesired to stored data
     if (!grid.cellsDesired) grid.cellsDesired = rn((graphWidth * graphHeight) / grid.spacing ** 2, -3);
   }
 
-  if (version < 1.85) {
+  if (isOlderThan("1.85.0")) {
     // v1.84.0 moved intial screen out of maon svg
     svg.select("#initial").remove();
   }
 
-  if (version < 1.86) {
+  if (isOlderThan("1.86.0")) {
     // v1.86.0 added multi-origin culture and religion hierarchy trees
     for (const culture of pack.cultures) {
       culture.origins = [culture.origin];
@@ -632,14 +635,14 @@ export function resolveVersionConflicts(version) {
     }
   }
 
-  if (version < 1.88) {
+  if (isOlderThan("1.88.0")) {
     // v1.87 may have incorrect shield for some reason
     pack.states.forEach(({coa}) => {
       if (coa?.shield === "state") delete coa.shield;
     });
   }
 
-  if (version < 1.91) {
+  if (isOlderThan("1.91.0")) {
     // from 1.91.00 custom coa is moved to coa object
     pack.states.forEach(state => {
       if (state.coa === "custom") state.coa = {custom: true};
@@ -688,14 +691,14 @@ export function resolveVersionConflicts(version) {
     });
   }
 
-  if (version < 1.92) {
+  if (isOlderThan("1.92.0")) {
     // v1.92 change labels text-anchor from 'start' to 'middle'
     labels.selectAll("tspan").each(function () {
       this.setAttribute("x", 0);
     });
   }
 
-  if (version < 1.94) {
+  if (isOlderThan("1.94.0")) {
     // from v1.94.00 texture image is removed when layer is off
     texture.style("display", null);
 
@@ -713,7 +716,7 @@ export function resolveVersionConflicts(version) {
     }
   }
 
-  if (version < 1.95) {
+  if (isOlderThan("1.95.0")) {
     // v1.95.00 added vignette visual layer
     const mask = defs.append("mask").attr("id", "vignette-mask");
     mask.append("rect").attr("fill", "white").attr("x", 0).attr("y", 0).attr("width", "100%").attr("height", "100%");
@@ -739,7 +742,7 @@ export function resolveVersionConflicts(version) {
     vignette.append("rect").attr("x", 0).attr("y", 0).attr("width", "100%").attr("height", "100%");
   }
 
-  if (version < 1.96) {
+  if (isOlderThan("1.96.0")) {
     // v1.96 added ocean rendering for heightmap
     terrs.selectAll("*").remove();
 
@@ -833,7 +836,7 @@ export function resolveVersionConflicts(version) {
     });
   }
 
-  if (version < 1.97) {
+  if (isOlderThan("1.97.0")) {
     // v1.97.00 changed MFCG link to an arbitrary preview URL
     options.villageMaxPopulation = 2000;
     options.showBurgPreview = options.showMFCGMap;
@@ -849,7 +852,7 @@ export function resolveVersionConflicts(version) {
     });
   }
 
-  if (version < 1.98) {
+  if (isOlderThan("1.98.0")) {
     // v1.98.00 changed compass layer and rose element id
     const rose = compass.select("use");
     rose.attr("xlink:href", "#defs-compass-rose");
@@ -861,7 +864,7 @@ export function resolveVersionConflicts(version) {
     }
   }
 
-  if (version < 1.99) {
+  if (isOlderThan("1.99.0")) {
     // v1.99.00 changed routes generation algorithm and data format
     routes.attr("display", null).attr("style", null);
 
@@ -923,4 +926,72 @@ export function resolveVersionConflicts(version) {
       }
     }
   }
+
+  if (isOlderThan("1.100.0")) {
+    // v1.100.00 added zones to pack data
+    pack.zones = [];
+    zones.selectAll("g").each(function () {
+      const i = pack.zones.length;
+      const name = this.dataset.description;
+      const type = this.dataset.type;
+      const color = this.getAttribute("fill");
+      const cells = this.dataset.cells.split(",").map(Number);
+      pack.zones.push({i, name, type, cells, color});
+    });
+    zones.style("display", null).selectAll("*").remove();
+    if (layerIsOn("toggleZones")) drawZones();
+  }
+
+  if (isOlderThan("1.104.0")) {
+    // v1.104.00 separated pole of inaccessibility detection from layer rendering
+    BurgsAndStates.getPoles();
+    Provinces.getPoles();
+  }
+
+  if (isOlderThan("1.105.0")) {
+    // v1.104.0 introduced some bugs with layers visibility
+    viewbox.select("#icons").style("display", null);
+    viewbox.select("#ice").style("display", null);
+    viewbox.select("#regions").style("display", null);
+    viewbox.select("#armies").style("display", null);
+  }
+
+  if (isOlderThan("1.106.0")) {
+    // v1.104.0 introduced bugs with coastlines. Redraw features
+    defs.select("#featurePaths").remove();
+    defs.append("g").attr("id", "featurePaths");
+    defs.select("#land").selectAll("path, use").remove();
+    defs.select("#water").selectAll("path, use").remove();
+    viewbox.select("#coastline").selectAll("path, use").remove();
+
+    // v1.104.0 introduced bugs with state borders
+    regions
+      .attr("opacity", null)
+      .attr("stroke-width", null)
+      .attr("letter-spacing", null)
+      .attr("fill", null)
+      .attr("stroke", null);
+
+    // pole can be missing for some states/provinces
+    BurgsAndStates.getPoles();
+    Provinces.getPoles();
+  }
+
+  if (isOlderThan("1.107.0")) {
+    // v1.107.0 allowed custom images for markers and regiments
+    if (layerIsOn("toggleMarkers")) drawMarkers();
+    if (layerIsOn("toggleMilitary")) drawMilitary();
+  }
+
+  if (isOlderThan("1.108.0")) {
+    // v1.108.0 changed features rendering method
+    pack.features.forEach(f => {
+      // fix lakes with missing group
+      if (f?.type === "lake" && !f.group) f.group = "freshwater";
+    });
+    drawFeatures();
+
+    // some old maps has incorrect "heights" groups
+    viewbox.selectAll("#heights").remove();
+  }
 }
diff --git a/modules/dynamic/editors/cultures-editor.js b/modules/dynamic/editors/cultures-editor.js
index 7f886edb..dee807db 100644
--- a/modules/dynamic/editors/cultures-editor.js
+++ b/modules/dynamic/editors/cultures-editor.js
@@ -51,24 +51,9 @@ function insertEditorHtml() {
       <button id="culturesHeirarchy" data-tip="Show cultures hierarchy tree" class="icon-sitemap"></button>
       <button id="culturesManually" data-tip="Manually re-assign cultures" class="icon-brush"></button>
       <div id="culturesManuallyButtons" style="display: none">
-        <label data-tip="Change brush size" data-shortcut="+ (increase), – (decrease)" class="italic">Brush size:
-          <input
-            id="culturesManuallyBrush"
-            oninput="tip('Brush size: '+this.value); culturesManuallyBrushNumber.value = this.value"
-            type="range"
-            min="5"
-            max="99"
-            value="15"
-            style="width: 7em"
-          />
-          <input
-            id="culturesManuallyBrushNumber"
-            oninput="tip('Brush size: '+this.value); culturesManuallyBrush.value = this.value"
-            type="number"
-            min="5"
-            max="99"
-            value="15"
-          /> </label><br />
+        <div data-tip="Change brush size. Shortcut: + to increase; – to decrease" style="margin-block: 0.3em;">
+          <slider-input id="culturesBrush" min="1" max="100" value="15">Brush size:</slider-input>
+        </div>
         <button id="culturesManuallyApply" data-tip="Apply assignment" class="icon-check"></button>
         <button id="culturesManuallyCancel" data-tip="Cancel assignment" class="icon-cancel"></button>
       </div>
@@ -281,6 +266,7 @@ function getTypeOptions(type) {
 function getBaseOptions(base) {
   let options = "";
   nameBases.forEach((n, i) => (options += `<option ${base === i ? "selected" : ""} value="${i}">${n.name}</option>`));
+  if (!nameBases[base]) options += `<option selected value="${base}">removed</option>`; // in case namesbase was removed
   return options;
 }
 
@@ -359,10 +345,13 @@ function cultureChangeName() {
 }
 
 function cultureRegenerateName() {
-  const culture = +this.parentNode.dataset.id;
-  const name = Names.getCultureShort(culture);
+  const cultureId = +this.parentNode.dataset.id;
+  const base = pack.cultures[cultureId].base;
+  if (!nameBases[base]) return tip("Namesbase is not defined, please select a valid namesbase", false, "error", 5000);
+
+  const name = Names.getCultureShort(cultureId);
   this.parentNode.querySelector("input.cultureName").value = name;
-  pack.cultures[culture].name = name;
+  pack.cultures[cultureId].name = name;
 }
 
 function cultureChangeExpansionism() {
@@ -500,6 +489,7 @@ function applyPopulationChange(oldRural, oldUrban, newRural, newUrban, culture)
     burgs.forEach(b => (b.population = population));
   }
 
+  if (layerIsOn("togglePopulation")) drawPopulation();
   refreshCulturesEditor();
 }
 
@@ -507,12 +497,15 @@ function cultureRegenerateBurgs() {
   if (customization === 4) return;
 
   const cultureId = +this.parentNode.dataset.id;
-  const cBurgs = pack.burgs.filter(b => b.culture === cultureId && !b.lock);
-  cBurgs.forEach(b => {
+  const base = pack.cultures[cultureId].base;
+  if (!nameBases[base]) return tip("Namesbase is not defined, please select a valid namesbase", false, "error", 5000);
+
+  const cultureBurgs = pack.burgs.filter(b => b.culture === cultureId && !b.removed && !b.lock);
+  cultureBurgs.forEach(b => {
     b.name = Names.getCulture(cultureId);
     labels.select("[data-id='" + b.i + "']").text(b.name);
   });
-  tip(`Names for ${cBurgs.length} burgs are regenerated`, false, "success");
+  tip(`Names for ${cultureBurgs.length} burgs are regenerated`, false, "success");
 }
 
 function removeCulture(cultureId) {
@@ -718,7 +711,7 @@ function selectCultureOnMapClick() {
 }
 
 function dragCultureBrush() {
-  const radius = +culturesManuallyBrush.value;
+  const radius = +culturesBrush.value;
 
   d3.event.on("drag", () => {
     if (!d3.event.dx && !d3.event.dy) return;
@@ -759,7 +752,7 @@ function changeCultureForSelection(selection) {
 function moveCultureBrush() {
   showMainTip();
   const point = d3.mouse(this);
-  const radius = +culturesManuallyBrush.value;
+  const radius = +culturesBrush.value;
   moveCircle(point[0], point[1], radius);
 }
 
@@ -862,14 +855,15 @@ async function uploadCulturesData() {
   this.value = "";
   const csv = await file.text();
   const data = d3.csvParse(csv, d => ({
-    i: +d.Id,
     name: d.Name,
+    i: +d.Id,
     color: d.Color,
     expansionism: +d.Expansionism,
     type: d.Type,
     population: +d.Population,
     emblemsShape: d["Emblems Shape"],
-    origins: d.Origins
+    origins: d.Origins,
+    namesbase: d.Namesbase
   }));
 
   const {cultures, cells} = pack;
@@ -896,7 +890,7 @@ async function uploadCulturesData() {
         culture.i
       );
     } else {
-      current = {i: cultures.length, center: ra(populated), area: 0, cells: 0, origin: 0, rural: 0, urban: 0};
+      current = {i: cultures.length, center: ra(populated), area: 0, cells: 0, origins: [0], rural: 0, urban: 0};
       cultures.push(current);
     }
 
@@ -916,6 +910,10 @@ async function uploadCulturesData() {
       else current.type = "Generic";
     }
 
+    culture.origins = current.i ? restoreOrigins(culture.origins || "") : [null];
+    current.shield = shapes.includes(culture.emblemsShape) ? culture.emblemsShape : "heater";
+    current.base = nameBases.findIndex(n => n.name == culture.namesbase); // can be -1 if namesbase is not found
+
     function restoreOrigins(originsString) {
       const originNames = originsString
         .replaceAll('"', "")
@@ -931,12 +929,6 @@ async function uploadCulturesData() {
       current.origins = originIds.filter(id => id !== null);
       if (!current.origins.length) current.origins = [0];
     }
-
-    culture.origins = current.i ? restoreOrigins(culture.origins || "") : [null];
-    current.shield = shapes.includes(culture.emblemsShape) ? culture.emblemsShape : "heater";
-
-    const nameBaseIndex = nameBases.findIndex(n => n.name == culture.namesbase);
-    current.base = nameBaseIndex === -1 ? 0 : nameBaseIndex;
   }
 
   cultures.filter(c => c.removed).forEach(c => removeCulture(c.i));
diff --git a/modules/dynamic/editors/religions-editor.js b/modules/dynamic/editors/religions-editor.js
index b6b2b5a0..effa90cf 100644
--- a/modules/dynamic/editors/religions-editor.js
+++ b/modules/dynamic/editors/religions-editor.js
@@ -26,7 +26,7 @@ function insertEditorHtml() {
     <div id="religionsHeader" class="header" style="grid-template-columns: 13em 6em 7em 18em 6em 7em 6em 7em">
       <div data-tip="Click to sort by religion name" class="sortable alphabetically" data-sortby="name">Religion&nbsp;</div>
       <div data-tip="Click to sort by religion type" class="sortable alphabetically icon-sort-name-down" data-sortby="type">Type&nbsp;</div>
-      <div data-tip="Click to sort by religion form" class="sortable alphabetically hide" data-sortby="form">Form&nbsp;</div>
+      <div data-tip="Click to sort by religion form" class="sortable alphabetically" data-sortby="form">Form&nbsp;</div>
       <div data-tip="Click to sort by supreme deity" class="sortable alphabetically hide" data-sortby="deity">Supreme Deity&nbsp;</div>
       <div data-tip="Click to sort by religion area" class="sortable hide" data-sortby="area">Area&nbsp;</div>
       <div data-tip="Click to sort by number of believers (religion area population)" class="sortable hide" data-sortby="population">Believers&nbsp;</div>
@@ -66,25 +66,9 @@ function insertEditorHtml() {
 
       <button id="religionsManually" data-tip="Manually re-assign religions" class="icon-brush"></button>
       <div id="religionsManuallyButtons" style="display: none">
-        <label data-tip="Change brush size" data-shortcut="+ (increase), – (decrease)" class="italic">Brush size:
-          <input
-            id="religionsManuallyBrush"
-            oninput="tip('Brush size: '+this.value); religionsManuallyBrushNumber.value = this.value"
-            type="range"
-            min="5"
-            max="99"
-            value="15"
-            style="width: 7em"
-          />
-          <input
-            id="religionsManuallyBrushNumber"
-            oninput="tip('Brush size: '+this.value); religionsManuallyBrush.value = this.value"
-            type="number"
-            min="5"
-            max="99"
-            value="15"
-          /> </label
-        ><br />
+        <div data-tip="Change brush size. Shortcut: + to increase; – to decrease" style="margin-block: 0.3em;">
+          <slider-input id="religionsBrush" min="1" max="100" value="15">Brush size:</slider-input>
+        </div>
         <button id="religionsManuallyApply" data-tip="Apply assignment" class="icon-check"></button>
         <button id="religionsManuallyCancel" data-tip="Cancel assignment" class="icon-cancel"></button>
       </div>
@@ -183,7 +167,7 @@ function religionsEditorAddLines() {
         <select data-tip="Religion type" class="religionType placeholder" style="width: 5em">
           ${getTypeOptions(r.type)}
         </select>
-        <input data-tip="Religion form" class="religionForm placeholder hide" style="width: 6em" value="" autocorrect="off" spellcheck="false" />
+        <input data-tip="Religion form" class="religionForm placeholder" style="width: 6em" value="" autocorrect="off" spellcheck="false" />
         <span data-tip="Click to re-generate supreme deity" class="icon-arrows-cw placeholder hide"></span>
         <input data-tip="Religion supreme deity" class="religionDeity placeholder hide" style="width: 17em" value="" autocorrect="off" spellcheck="false" />
         <span data-tip="Religion area" style="padding-right: 4px" class="icon-map-o hide"></span>
@@ -215,7 +199,7 @@ function religionsEditorAddLines() {
       <select data-tip="Religion type" class="religionType" style="width: 5em">
         ${getTypeOptions(r.type)}
       </select>
-      <input data-tip="Religion form" class="religionForm hide" style="width: 6em"
+      <input data-tip="Religion form" class="religionForm" style="width: 6em"
         value="${r.form}" autocorrect="off" spellcheck="false" />
       <span data-tip="Click to re-generate supreme deity" class="icon-arrows-cw hide"></span>
       <input data-tip="Religion supreme deity" class="religionDeity hide" style="width: 17em"
@@ -478,6 +462,7 @@ function changePopulation() {
       burgs.forEach(b => (b.population = population));
     }
 
+    if (layerIsOn("togglePopulation")) drawPopulation();
     refreshReligionsEditor();
   }
 }
@@ -696,7 +681,7 @@ function selectReligionOnMapClick() {
 }
 
 function dragReligionBrush() {
-  const radius = +byId("religionsManuallyBrushNumber").value;
+  const radius = +byId("religionsBrush").value;
 
   d3.event.on("drag", () => {
     if (!d3.event.dx && !d3.event.dy) return;
@@ -736,7 +721,7 @@ function changeReligionForSelection(selection) {
 function moveReligionBrush() {
   showMainTip();
   const [x, y] = d3.mouse(this);
-  const radius = +byId("religionsManuallyBrushNumber").value;
+  const radius = +byId("religionsBrush").value;
   moveCircle(x, y, radius);
 }
 
diff --git a/modules/dynamic/editors/states-editor.js b/modules/dynamic/editors/states-editor.js
index abdb3222..4160fb4b 100644
--- a/modules/dynamic/editors/states-editor.js
+++ b/modules/dynamic/editors/states-editor.js
@@ -24,7 +24,7 @@ function insertEditorHtml() {
     <div id="statesHeader" class="header" style="grid-template-columns: 11em 8em 7em 7em 6em 6em 8em 6em 7em 6em">
       <div data-tip="Click to sort by state name" class="sortable alphabetically" data-sortby="name">State&nbsp;</div>
       <div data-tip="Click to sort by state form name" class="sortable alphabetically" data-sortby="form">Form&nbsp;</div>
-      <div data-tip="Click to sort by capital name" class="sortable alphabetically hide" data-sortby="capital">Capital&nbsp;</div>
+      <div data-tip="Click to sort by capital name" class="sortable alphabetically" data-sortby="capital">Capital&nbsp;</div>
       <div data-tip="Click to sort by state dominant culture" class="sortable alphabetically hide" data-sortby="culture">Culture&nbsp;</div>
       <div data-tip="Click to sort by state burgs count" class="sortable hide" data-sortby="burgs">Burgs&nbsp;</div>
       <div data-tip="Click to sort by state area" class="sortable hide icon-sort-number-down" data-sortby="area">Area&nbsp;</div>
@@ -55,60 +55,25 @@ function insertEditorHtml() {
       <div id="statesRegenerateButtons" style="display: none">
         <button id="statesRegenerateBack" data-tip="Hide the regeneration menu" class="icon-cog-alt"></button>
         <button id="statesRandomize" data-tip="Randomize states Expansion value and re-calculate states and provinces" class="icon-shuffle"></button>
-        <span data-tip="Additional growth rate. Defines how many lands will stay neutral">
-          <label class="italic">Growth rate:</label>
-          <input
-            id="statesNeutral"
-            type="range"
-            min=".1"
-            max="3"
-            step=".05"
-            value="1"
-            style="width: 12em"
-          />
-          <input
-            id="statesNeutralNumber"
-            type="number"
-            min=".1"
-            max="3"
-            step=".05"
-            value="1"
-            style="width: 4em"
-          />
-        </span>
+        <div data-tip="Additional growth rate. Defines how many land cells remain neutral" style="display: inline-block">
+          <slider-input id="statesGrowthRate" min=".1" max="3" step=".05" value="1">Growth rate:</slider-input>
+        </div>
         <button id="statesRecalculate" data-tip="Recalculate states based on current values of growth-related attributes" class="icon-retweet"></button>
-        <span data-tip="Allow states neutral distance, expansion and type changes to take an immediate effect">
+        <div data-tip="Allow states neutral distance, expansion and type changes to take an immediate effect" style="display: inline-block">
           <input id="statesAutoChange" class="checkbox" type="checkbox" />
           <label for="statesAutoChange" class="checkbox-label"><i>auto-apply changes</i></label>
-        </span>
-        <span data-tip="Allow system to change state labels when states data is change">
+        </div>
+        <div data-tip="Allow system to change state labels when states data is change" style="display: inline-block">
           <input id="adjustLabels" class="checkbox" type="checkbox" />
           <label for="adjustLabels" class="checkbox-label"><i>auto-change labels</i></label>
-        </span>
+        </div>
       </div>
 
       <button id="statesManually" data-tip="Manually re-assign states" class="icon-brush"></button>
       <div id="statesManuallyButtons" style="display: none">
-        <label data-tip="Change brush size" data-shortcut="+ (increase), – (decrease)" class="italic"
-          >Brush size:
-          <input
-            id="statesManuallyBrush"
-            oninput="tip('Brush size: '+this.value); statesManuallyBrushNumber.value = this.value"
-            type="range"
-            min="5"
-            max="99"
-            value="15"
-            style="width: 5em"
-          />
-          <input
-            id="statesManuallyBrushNumber"
-            oninput="tip('Brush size: '+this.value); statesManuallyBrush.value = this.value"
-            type="number"
-            min="5"
-            max="99"
-            value="15"
-          /> </label
-        ><br />
+        <div data-tip="Change brush size. Shortcut: + to increase; – to decrease" style="margin-block: 0.3em;">
+          <slider-input id="statesBrush" min="1" max="100" value="15">Brush size:</slider-input>
+        </div>
         <button id="statesManuallyApply" data-tip="Apply assignment" class="icon-check"></button>
         <button id="statesManuallyCancel" data-tip="Cancel assignment" class="icon-cancel"></button>
       </div>
@@ -135,8 +100,7 @@ function addListeners() {
   byId("statesRegenerateBack").on("click", exitRegenerationMenu);
   byId("statesRecalculate").on("click", () => recalculateStates(true));
   byId("statesRandomize").on("click", randomizeStatesExpansion);
-  byId("statesNeutral").on("input", changeStatesGrowthRate);
-  byId("statesNeutralNumber").on("change", changeStatesGrowthRate);
+  byId("statesGrowthRate").on("input", () => recalculateStates(false));
   byId("statesManually").on("click", enterStatesManualAssignent);
   byId("statesManuallyApply").on("click", applyStatesManualAssignent);
   byId("statesManuallyCancel").on("click", () => exitStatesManualAssignment(false));
@@ -228,10 +192,10 @@ function statesEditorAddLines() {
         <input data-tip="Neutral lands name. Click to change" class="stateName name pointer italic" value="${
           s.name
         }" readonly />
-        <svg class="coaIcon placeholder hide"></svg>
+        <svg class="coaIcon placeholder"></svg>
         <input class="stateForm placeholder" value="none" />
-        <span class="icon-star-empty placeholder hide"></span>
-        <input class="stateCapital placeholder hide" />
+        <span class="icon-star-empty placeholder"></span>
+        <input class="stateCapital placeholder" />
         <select class="stateCulture placeholder hide">${getCultureOptions(0)}</select>
         <span data-tip="Click to overview neutral burgs" class="icon-dot-circled pointer hide" style="padding-right: 1px"></span>
         <div data-tip="Burgs count" class="stateBurgs hide">${s.burgs}</div>
@@ -267,14 +231,14 @@ function statesEditorAddLines() {
     >
       <fill-box fill="${s.color}"></fill-box>
       <input data-tip="State name. Click to change" class="stateName name pointer" value="${s.name}" readonly />
-      <svg data-tip="Click to show and edit state emblem" class="coaIcon pointer hide" viewBox="0 0 200 200"><use href="#stateCOA${
+      <svg data-tip="Click to show and edit state emblem" class="coaIcon pointer" viewBox="0 0 200 200"><use href="#stateCOA${
         s.i
       }"></use></svg>
       <input data-tip="State form name. Click to change" class="stateForm name pointer" value="${
         s.formName
       }" readonly />
-      <span data-tip="State capital. Click to zoom into view" class="icon-star-empty pointer hide"></span>
-      <input data-tip="Capital name. Click and type to rename" class="stateCapital hide" value="${capital}" autocorrect="off" spellcheck="false" />
+      <span data-tip="State capital. Click to zoom into view" class="icon-star-empty pointer"></span>
+      <input data-tip="Capital name. Click and type to rename" class="stateCapital" value="${capital}" autocorrect="off" spellcheck="false" />
       <select data-tip="Dominant culture. Click to change" class="stateCulture hide">${getCultureOptions(
         s.culture
       )}</select>
@@ -579,6 +543,7 @@ function changePopulation(stateId) {
       burgs.forEach(b => (b.population = population));
     }
 
+    if (layerIsOn("togglePopulation")) drawPopulation();
     refreshStatesEditor();
   }
 }
@@ -678,11 +643,11 @@ function stateRemove(stateId) {
   pack.states[stateId] = {i: stateId, removed: true};
 
   debug.selectAll(".highlight").remove();
-  if (!layerIsOn("toggleStates")) toggleStates();
-  else drawStates();
-  if (!layerIsOn("toggleBorders")) toggleBorders();
-  else drawBorders();
+
+  if (layerIsOn("toggleStates")) drawStates();
+  if (layerIsOn("toggleBorders")) drawBorders();
   if (layerIsOn("toggleProvinces")) drawProvinces();
+
   refreshStatesEditor();
 }
 
@@ -728,7 +693,7 @@ function showStatesChart() {
     .sum(d => d.area)
     .sort((a, b) => b.value - a.value);
 
-  const size = 150 + 200 * uiSizeOutput.value;
+  const size = 150 + 200 * uiSize.value;
   const margin = {top: 0, right: -50, bottom: 0, left: -50};
   const w = size - margin.left - margin.right;
   const h = size - margin.top - margin.bottom;
@@ -778,6 +743,7 @@ function showStatesChart() {
 
   node
     .append("text")
+    .attr("text-rendering", "optimizeSpeed")
     .style("font-size", d => rn((d.r ** 0.97 * 4) / lp(d.data.name), 2) + "px")
     .selectAll("tspan")
     .data(d => d.data.name.split(exp))
@@ -875,22 +841,16 @@ function recalculateStates(must) {
   if (!must && !statesAutoChange.checked) return;
 
   BurgsAndStates.expandStates();
-  BurgsAndStates.generateProvinces();
-  if (!layerIsOn("toggleStates")) toggleStates();
-  else drawStates();
-  if (!layerIsOn("toggleBorders")) toggleBorders();
-  else drawBorders();
+  Provinces.generate();
+  Provinces.getPoles();
+  BurgsAndStates.getPoles();
+
+  if (layerIsOn("toggleStates")) drawStates();
+  if (layerIsOn("toggleBorders")) drawBorders();
   if (layerIsOn("toggleProvinces")) drawProvinces();
   if (adjustLabels.checked) drawStateLabels();
-  refreshStatesEditor();
-}
 
-function changeStatesGrowthRate() {
-  const growthRate = +this.value;
-  byId("statesNeutral").value = growthRate;
-  byId("statesNeutralNumber").value = growthRate;
-  tip("Growth rate: " + growthRate);
-  recalculateStates(false);
+  refreshStatesEditor();
 }
 
 function randomizeStatesExpansion() {
@@ -959,7 +919,7 @@ function selectStateOnMapClick() {
 }
 
 function dragStateBrush() {
-  const r = +statesManuallyBrush.value;
+  const r = +statesBrush.value;
 
   d3.event.on("drag", () => {
     if (!d3.event.dx && !d3.event.dy) return;
@@ -1002,7 +962,7 @@ function changeStateForSelection(selection) {
 function moveStateBrush() {
   showMainTip();
   const point = d3.mouse(this);
-  const radius = +statesManuallyBrush.value;
+  const radius = +statesBrush.value;
   moveCircle(point[0], point[1], radius);
 }
 
@@ -1025,6 +985,7 @@ function applyStatesManualAssignent() {
 
   if (affectedStates.length) {
     refreshStatesEditor();
+    BurgsAndStates.getPoles();
     layerIsOn("toggleStates") ? drawStates() : toggleStates();
     if (adjustLabels.checked) drawStateLabels([...new Set(affectedStates)]);
     adjustProvinces([...new Set(affectedProvinces)]);
@@ -1240,7 +1201,6 @@ function addState() {
   const basename = center % 5 === 0 ? burgs[burg].name : Names.getCulture(culture);
   const name = Names.getState(basename, culture);
   const color = getRandomColor();
-  const pole = cells.p[center];
 
   // generate emblem
   const cultureType = pack.cultures[culture].type;
@@ -1290,38 +1250,21 @@ function addState() {
     culture,
     military: [],
     alert: 1,
-    coa,
-    pole
+    coa
   });
+
+  BurgsAndStates.getPoles();
   BurgsAndStates.collectStatistics();
   BurgsAndStates.defineStateForms([newState]);
   adjustProvinces([cells.province[center]]);
 
-  if (layerIsOn("toggleProvinces")) toggleProvinces();
-  if (!layerIsOn("toggleStates")) toggleStates();
-  else drawStates();
-  if (!layerIsOn("toggleBorders")) toggleBorders();
-  else drawBorders();
-
-  // add label
-  defs
-    .select("#textPaths")
-    .append("path")
-    .attr("d", `M${pole[0] - 50},${pole[1] + 6}h${100}`)
-    .attr("id", "textPath_stateLabel" + newState);
-  labels
-    .select("#states")
-    .append("text")
-    .attr("id", "stateLabel" + newState)
-    .append("textPath")
-    .attr("xlink:href", "#textPath_stateLabel" + newState)
-    .attr("startOffset", "50%")
-    .attr("font-size", "50%")
-    .append("tspan")
-    .attr("x", name.length * -3)
-    .text(name);
-
+  drawStateLabels([newState]);
   COArenderer.add("state", newState, coa, states[newState].pole[0], states[newState].pole[1]);
+
+  layerIsOn("toggleProvinces") && toggleProvinces();
+  layerIsOn("toggleStates") ? drawStates() : toggleStates();
+  layerIsOn("toggleBorders") ? drawBorders() : toggleBorders();
+
   statesEditorAddLines();
 }
 
@@ -1459,6 +1402,7 @@ function openStateMergeDialog() {
     unfog();
     debug.selectAll(".highlight").remove();
 
+    BurgsAndStates.getPoles();
     layerIsOn("toggleStates") ? drawStates() : toggleStates();
     layerIsOn("toggleBorders") ? drawBorders() : toggleBorders();
     layerIsOn("toggleProvinces") && drawProvinces();
diff --git a/modules/dynamic/export-json.js b/modules/dynamic/export-json.js
index df0d6815..cc895b7a 100644
--- a/modules/dynamic/export-json.js
+++ b/modules/dynamic/export-json.js
@@ -53,7 +53,8 @@ function getMinimalDataJson() {
     religions: pack.religions,
     rivers: pack.rivers,
     markers: pack.markers,
-    routes: pack.routes
+    routes: pack.routes,
+    zones: pack.zones
   };
   return JSON.stringify({info, settings, mapCoordinates, pack: packData, biomesData, notes, nameBases});
 }
@@ -72,7 +73,7 @@ function getGridDataJson() {
 
 function getMapInfo() {
   return {
-    version,
+    version: VERSION,
     description: "Azgaar's Fantasy Map Generator output: azgaar.github.io/Fantasy-map-generator",
     exportedAt: new Date().toISOString(),
     mapName: mapName.value,
@@ -172,7 +173,8 @@ function getPackCellsData() {
     religions: pack.religions,
     rivers: pack.rivers,
     markers: pack.markers,
-    routes: pack.routes
+    routes: pack.routes,
+    zones: pack.zones
   };
 }
 
diff --git a/modules/dynamic/supporters.js b/modules/dynamic/supporters.js
index 478516fa..50a26d58 100644
--- a/modules/dynamic/supporters.js
+++ b/modules/dynamic/supporters.js
@@ -580,4 +580,13 @@ MisterPete
 Johanna Martin
 Marmalade_MacGuffin
 James Benware
-FortunesFaded`;
+FortunesFaded
+breadsticks
+Murderbits
+Ben Jones
+Marco Faltracco
+L
+silentArtifact
+Keith Potter
+Morgan Gilbert
+Alengork Gamer`;
diff --git a/modules/features.js b/modules/features.js
new file mode 100644
index 00000000..9ef785d6
--- /dev/null
+++ b/modules/features.js
@@ -0,0 +1,271 @@
+"use strict";
+
+window.Features = (function () {
+  const DEEPER_LAND = 3;
+  const LANDLOCKED = 2;
+  const LAND_COAST = 1;
+  const UNMARKED = 0;
+  const WATER_COAST = -1;
+  const DEEP_WATER = -2;
+
+  // calculate distance to coast for every cell
+  function markup({distanceField, neighbors, start, increment, limit = INT8_MAX}) {
+    for (let distance = start, marked = Infinity; marked > 0 && distance !== limit; distance += increment) {
+      marked = 0;
+      const prevDistance = distance - increment;
+      for (let cellId = 0; cellId < neighbors.length; cellId++) {
+        if (distanceField[cellId] !== prevDistance) continue;
+
+        for (const neighborId of neighbors[cellId]) {
+          if (distanceField[neighborId] !== UNMARKED) continue;
+          distanceField[neighborId] = distance;
+          marked++;
+        }
+      }
+    }
+  }
+
+  // mark Grid features (ocean, lakes, islands) and calculate distance field
+  function markupGrid() {
+    TIME && console.time("markupGrid");
+    Math.random = aleaPRNG(seed); // get the same result on heightmap edit in Erase mode
+
+    const {h: heights, c: neighbors, b: borderCells, i} = grid.cells;
+    const cellsNumber = i.length;
+    const distanceField = new Int8Array(cellsNumber); // gird.cells.t
+    const featureIds = new Uint16Array(cellsNumber); // gird.cells.f
+    const features = [0];
+
+    const queue = [0];
+    for (let featureId = 1; queue[0] !== -1; featureId++) {
+      const firstCell = queue[0];
+      featureIds[firstCell] = featureId;
+
+      const land = heights[firstCell] >= 20;
+      let border = false; // set true if feature touches map edge
+
+      while (queue.length) {
+        const cellId = queue.pop();
+        if (!border && borderCells[cellId]) border = true;
+
+        for (const neighborId of neighbors[cellId]) {
+          const isNeibLand = heights[neighborId] >= 20;
+
+          if (land === isNeibLand && featureIds[neighborId] === UNMARKED) {
+            featureIds[neighborId] = featureId;
+            queue.push(neighborId);
+          } else if (land && !isNeibLand) {
+            distanceField[cellId] = LAND_COAST;
+            distanceField[neighborId] = WATER_COAST;
+          }
+        }
+      }
+
+      const type = land ? "island" : border ? "ocean" : "lake";
+      features.push({i: featureId, land, border, type});
+
+      queue[0] = featureIds.findIndex(f => f === UNMARKED); // find unmarked cell
+    }
+
+    // markup deep ocean cells
+    markup({distanceField, neighbors, start: DEEP_WATER, increment: -1, limit: -10});
+
+    grid.cells.t = distanceField;
+    grid.cells.f = featureIds;
+    grid.features = features;
+
+    TIME && console.timeEnd("markupGrid");
+  }
+
+  // mark Pack features (ocean, lakes, islands), calculate distance field and add properties
+  function markupPack() {
+    TIME && console.time("markupPack");
+
+    const {cells, vertices} = pack;
+    const {c: neighbors, b: borderCells, i} = cells;
+    const packCellsNumber = i.length;
+    if (!packCellsNumber) return; // no cells -> there is nothing to do
+
+    const distanceField = new Int8Array(packCellsNumber); // pack.cells.t
+    const featureIds = new Uint16Array(packCellsNumber); // pack.cells.f
+    const haven = createTypedArray({maxValue: packCellsNumber, length: packCellsNumber}); // haven: opposite water cell
+    const harbor = new Uint8Array(packCellsNumber); // harbor: number of adjacent water cells
+    const features = [0];
+
+    const queue = [0];
+    for (let featureId = 1; queue[0] !== -1; featureId++) {
+      const firstCell = queue[0];
+      featureIds[firstCell] = featureId;
+
+      const land = isLand(firstCell);
+      let border = Boolean(borderCells[firstCell]); // true if feature touches map border
+      let totalCells = 1; // count cells in a feature
+
+      while (queue.length) {
+        const cellId = queue.pop();
+        if (borderCells[cellId]) border = true;
+        if (!border && borderCells[cellId]) border = true;
+
+        for (const neighborId of neighbors[cellId]) {
+          const isNeibLand = isLand(neighborId);
+
+          if (land && !isNeibLand) {
+            distanceField[cellId] = LAND_COAST;
+            distanceField[neighborId] = WATER_COAST;
+            if (!haven[cellId]) defineHaven(cellId);
+          } else if (land && isNeibLand) {
+            if (distanceField[neighborId] === UNMARKED && distanceField[cellId] === LAND_COAST)
+              distanceField[neighborId] = LANDLOCKED;
+            else if (distanceField[cellId] === UNMARKED && distanceField[neighborId] === LAND_COAST)
+              distanceField[cellId] = LANDLOCKED;
+          }
+
+          if (!featureIds[neighborId] && land === isNeibLand) {
+            queue.push(neighborId);
+            featureIds[neighborId] = featureId;
+            totalCells++;
+          }
+        }
+      }
+
+      features.push(addFeature({firstCell, land, border, featureId, totalCells}));
+      queue[0] = featureIds.findIndex(f => f === UNMARKED); // find unmarked cell
+    }
+
+    markup({distanceField, neighbors, start: DEEPER_LAND, increment: 1}); // markup pack land
+    markup({distanceField, neighbors, start: DEEP_WATER, increment: -1, limit: -10}); // markup pack water
+
+    pack.cells.t = distanceField;
+    pack.cells.f = featureIds;
+    pack.cells.haven = haven;
+    pack.cells.harbor = harbor;
+    pack.features = features;
+
+    TIME && console.timeEnd("markupPack");
+
+    function defineHaven(cellId) {
+      const waterCells = neighbors[cellId].filter(isWater);
+      const distances = waterCells.map(neibCellId => dist2(cells.p[cellId], cells.p[neibCellId]));
+      const closest = distances.indexOf(Math.min.apply(Math, distances));
+
+      haven[cellId] = waterCells[closest];
+      harbor[cellId] = waterCells.length;
+    }
+
+    function addFeature({firstCell, land, border, featureId, totalCells}) {
+      const type = land ? "island" : border ? "ocean" : "lake";
+      const [startCell, featureVertices] = getCellsData(type, firstCell);
+      const points = clipPoly(featureVertices.map(vertex => vertices.p[vertex]));
+      const area = d3.polygonArea(points); // feature perimiter area
+      const absArea = Math.abs(rn(area));
+
+      const feature = {
+        i: featureId,
+        type,
+        land,
+        border,
+        cells: totalCells,
+        firstCell: startCell,
+        vertices: featureVertices,
+        area: absArea
+      };
+
+      if (type === "lake") {
+        if (area > 0) feature.vertices = feature.vertices.reverse();
+        feature.shoreline = unique(feature.vertices.map(vertex => vertices.c[vertex].filter(isLand)).flat());
+        feature.height = Lakes.getHeight(feature);
+      }
+
+      return feature;
+
+      function getCellsData(featureType, firstCell) {
+        if (featureType === "ocean") return [firstCell, []];
+
+        const getType = cellId => featureIds[cellId];
+        const type = getType(firstCell);
+        const ofSameType = cellId => getType(cellId) === type;
+        const ofDifferentType = cellId => getType(cellId) !== type;
+
+        const startCell = findOnBorderCell(firstCell);
+        const featureVertices = getFeatureVertices(startCell);
+        return [startCell, featureVertices];
+
+        function findOnBorderCell(firstCell) {
+          const isOnBorder = cellId => borderCells[cellId] || neighbors[cellId].some(ofDifferentType);
+          if (isOnBorder(firstCell)) return firstCell;
+
+          const startCell = cells.i.filter(ofSameType).find(isOnBorder);
+          if (startCell === undefined)
+            throw new Error(`Markup: firstCell ${firstCell} is not on the feature or map border`);
+
+          return startCell;
+        }
+
+        function getFeatureVertices(startCell) {
+          const startingVertex = cells.v[startCell].find(v => vertices.c[v].some(ofDifferentType));
+          if (startingVertex === undefined)
+            throw new Error(`Markup: startingVertex for cell ${startCell} is not found`);
+
+          return connectVertices({vertices, startingVertex, ofSameType, closeRing: false});
+        }
+      }
+    }
+  }
+
+  // add properties to pack features
+  function specify() {
+    const gridCellsNumber = grid.cells.i.length;
+    const OCEAN_MIN_SIZE = gridCellsNumber / 25;
+    const SEA_MIN_SIZE = gridCellsNumber / 1000;
+    const CONTINENT_MIN_SIZE = gridCellsNumber / 10;
+    const ISLAND_MIN_SIZE = gridCellsNumber / 1000;
+
+    for (const feature of pack.features) {
+      if (!feature || feature.type === "ocean") continue;
+
+      feature.group = defineGroup(feature);
+
+      if (feature.type === "lake") {
+        feature.height = Lakes.getHeight(feature);
+        feature.name = Lakes.getName(feature);
+      }
+    }
+
+    function defineGroup(feature) {
+      if (feature.type === "island") return defineIslandGroup(feature);
+      if (feature.type === "ocean") return defineOceanGroup();
+      if (feature.type === "lake") return defineLakeGroup(feature);
+      throw new Error(`Markup: unknown feature type ${feature.type}`);
+    }
+
+    function defineOceanGroup(feature) {
+      if (feature.cells > OCEAN_MIN_SIZE) return "ocean";
+      if (feature.cells > SEA_MIN_SIZE) return "sea";
+      return "gulf";
+    }
+
+    function defineIslandGroup(feature) {
+      const prevFeature = pack.features[pack.cells.f[feature.firstCell - 1]];
+      if (prevFeature && prevFeature.type === "lake") return "lake_island";
+      if (feature.cells > CONTINENT_MIN_SIZE) return "continent";
+      if (feature.cells > ISLAND_MIN_SIZE) return "island";
+      return "isle";
+    }
+
+    function defineLakeGroup(feature) {
+      if (feature.temp < -3) return "frozen";
+      if (feature.height > 60 && feature.cells < 10 && feature.firstCell % 10 === 0) return "lava";
+
+      if (!feature.inlets && !feature.outlet) {
+        if (feature.evaporation > feature.flux * 4) return "dry";
+        if (feature.cells < 3 && feature.firstCell % 10 === 0) return "sinkhole";
+      }
+
+      if (!feature.outlet && feature.evaporation > feature.flux) return "salt";
+
+      return "freshwater";
+    }
+  }
+
+  return {markupGrid, markupPack, specify};
+})();
diff --git a/modules/fonts.js b/modules/fonts.js
index 53419851..c3af3624 100644
--- a/modules/fonts.js
+++ b/modules/fonts.js
@@ -69,6 +69,12 @@ const fonts = [
     unicodeRange:
       "U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215"
   },
+  {
+    family: "Eagle Lake",
+    src: "url(https://fonts.gstatic.com/s/eaglelake/v24/ptRMTiqbbuNJDOiKj9wG1On4KCFtpe4.woff2)",
+    unicodeRange:
+      "U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215"
+  },
   {
     family: "Faster One",
     src: "url(https://fonts.gstatic.com/s/fasterone/v17/H4ciBXCHmdfClFb-vWhf-LyYhw.woff2)",
@@ -129,6 +135,12 @@ const fonts = [
     unicodeRange:
       "U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD"
   },
+  {
+    family: "Lugrasimo",
+    src: "url(https://fonts.gstatic.com/s/lugrasimo/v4/qkBXXvoF_s_eT9c7Y7au455KsgbLMA.woff2)",
+    unicodeRange:
+      "U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215"
+  },
   {
     family: "Kaushan Script",
     src: "url(https://fonts.gstatic.com/s/kaushanscript/v6/qx1LSqts-NtiKcLw4N03IEd0sm1ffa_JvZxsF_BEwQk.woff2)",
diff --git a/modules/io/cloud.js b/modules/io/cloud.js
index b25b6a90..17ca92db 100644
--- a/modules/io/cloud.js
+++ b/modules/io/cloud.js
@@ -60,7 +60,7 @@ window.Cloud = (function () {
 
     async save(fileName, contents) {
       const resp = await this.call("filesUpload", {path: "/" + fileName, contents});
-      DEBUG && console.info("Dropbox response:", resp);
+      DEBUG.cloud && console.info("Dropbox response:", resp);
       return true;
     },
 
@@ -104,7 +104,7 @@ window.Cloud = (function () {
 
     // Callback function for auth window
     async setDropBoxToken(token) {
-      DEBUG && console.info("Access token:", token);
+      DEBUG.cloud && console.info("Access token:", token);
       setToken(this.name, token);
       await this.connect(token);
       this.authWindow.close();
@@ -131,7 +131,7 @@ window.Cloud = (function () {
         allow_download: true
       };
       const resp = await this.call("sharingCreateSharedLinkWithSettings", {path, settings});
-      DEBUG && console.info("Dropbox link object:", resp.result);
+      DEBUG.cloud && console.info("Dropbox link object:", resp.result);
       return resp.result.url;
     }
   };
diff --git a/modules/io/export.js b/modules/io/export.js
index 0d1286b9..4afa5f34 100644
--- a/modules/io/export.js
+++ b/modules/io/export.js
@@ -175,6 +175,7 @@ async function getMapURL(type, options) {
     noWater = false,
     noScaleBar = false,
     noIce = false,
+    noVignette = false,
     fullMap = false
   } = options || {};
 
@@ -199,6 +200,7 @@ async function getMapURL(type, options) {
     clone.select("#oceanPattern").attr("opacity", 0);
   }
   if (noIce) clone.select("#ice")?.remove();
+  if (noVignette) clone.select("#vignette")?.remove();
   if (fullMap) {
     // reset transform to show the whole map
     clone.attr("width", graphWidth).attr("height", graphHeight);
@@ -318,6 +320,40 @@ async function getMapURL(type, options) {
     if (pattern) cloneDefs.appendChild(pattern.cloneNode(true));
   }
 
+  {
+    // replace external marker icons
+    const externalMarkerImages = cloneEl.querySelectorAll('#markers image[href]:not([href=""])');
+    const imageHrefs = Array.from(externalMarkerImages).map(img => img.getAttribute("href"));
+
+    for (const url of imageHrefs) {
+      await new Promise(resolve => {
+        getBase64(url, base64 => {
+          externalMarkerImages.forEach(img => {
+            if (img.getAttribute("href") === url) img.setAttribute("href", base64);
+          });
+          resolve();
+        });
+      });
+    }
+  }
+
+  {
+    // replace external regiment icons
+    const externalRegimentImages = cloneEl.querySelectorAll('#armies image[href]:not([href=""])');
+    const imageHrefs = Array.from(externalRegimentImages).map(img => img.getAttribute("href"));
+
+    for (const url of imageHrefs) {
+      await new Promise(resolve => {
+        getBase64(url, base64 => {
+          externalRegimentImages.forEach(img => {
+            if (img.getAttribute("href") === url) img.setAttribute("href", base64);
+          });
+          resolve();
+        });
+      });
+    }
+  }
+
   if (!cloneEl.getElementById("fogging-cont")) cloneEl.getElementById("fog")?.remove(); // remove unused fog
   if (!cloneEl.getElementById("regions")) cloneEl.getElementById("statePaths")?.remove(); // removed unused statePaths
   if (!cloneEl.getElementById("labels")) cloneEl.getElementById("textPaths")?.remove(); // removed unused textPaths
@@ -440,14 +476,24 @@ function inlineStyle(clone) {
   emptyG.remove();
 }
 
-function saveGeoJSON_Cells() {
+function saveGeoJsonCells() {
+  const {cells, vertices} = pack;
   const json = {type: "FeatureCollection", features: []};
-  const cells = pack.cells;
+
   const getPopulation = i => {
     const [r, u] = getCellPopulation(i);
     return rn(r + u);
   };
-  const getHeight = i => parseInt(getFriendlyHeight([cells.p[i][0], cells.p[i][1]]));
+
+  const getHeight = i => parseInt(getFriendlyHeight([...cells.p[i]]));
+
+  function getCellCoordinates(cellVertices) {
+    const coordinates = cellVertices.map(vertex => {
+      const [x, y] = vertices.p[vertex];
+      return getCoordinates(x, y, 4);
+    });
+    return [[...coordinates, coordinates[0]]];
+  }
 
   cells.i.forEach(i => {
     const coordinates = getCellCoordinates(cells.v[i]);
@@ -470,20 +516,13 @@ function saveGeoJSON_Cells() {
   downloadFile(JSON.stringify(json), fileName, "application/json");
 }
 
-function saveGeoJSON_Routes() {
-  const {cells, burgs} = pack;
-  let points = cells.p.map(([x, y], cellId) => {
-    const burgId = cells.burg[cellId];
-    if (burgId) return [burgs[burgId].x, burgs[burgId].y];
-    return [x, y];
-  });
-
-  const features = pack.routes.map(route => {
-    const coordinates = route.points || getRoutePoints(route, points);
+function saveGeoJsonRoutes() {
+  const features = pack.routes.map(({i, points, group, name = null}) => {
+    const coordinates = points.map(([x, y]) => getCoordinates(x, y, 4));
     return {
       type: "Feature",
       geometry: {type: "LineString", coordinates},
-      properties: {id: route.id, group: route.group}
+      properties: {id: i, group, name}
     };
   });
   const json = {type: "FeatureCollection", features};
@@ -492,30 +531,31 @@ function saveGeoJSON_Routes() {
   downloadFile(JSON.stringify(json), fileName, "application/json");
 }
 
-function saveGeoJSON_Rivers() {
-  const json = {type: "FeatureCollection", features: []};
-
-  rivers.selectAll("path").each(function () {
-    const river = pack.rivers.find(r => r.i === +this.id.slice(5));
-    if (!river) return;
-
-    const coordinates = getRiverPoints(this);
-    const properties = {...river, id: this.id};
-    const feature = {type: "Feature", geometry: {type: "LineString", coordinates}, properties};
-    json.features.push(feature);
-  });
+function saveGeoJsonRivers() {
+  const features = pack.rivers.map(
+    ({i, cells, points, source, mouth, parent, basin, widthFactor, sourceWidth, discharge, name, type}) => {
+      if (!cells || cells.length < 2) return;
+      const meanderedPoints = Rivers.addMeandering(cells, points);
+      const coordinates = meanderedPoints.map(([x, y]) => getCoordinates(x, y, 4));
+      return {
+        type: "Feature",
+        geometry: {type: "LineString", coordinates},
+        properties: {id: i, source, mouth, parent, basin, widthFactor, sourceWidth, discharge, name, type}
+      };
+    }
+  );
+  const json = {type: "FeatureCollection", features};
 
   const fileName = getFileName("Rivers") + ".geojson";
   downloadFile(JSON.stringify(json), fileName, "application/json");
 }
 
-function saveGeoJSON_Markers() {
+function saveGeoJsonMarkers() {
   const features = pack.markers.map(marker => {
     const {i, type, icon, x, y, size, fill, stroke} = marker;
     const coordinates = getCoordinates(x, y, 4);
-    const id = `marker${i}`;
-    const note = notes.find(note => note.id === id);
-    const properties = {id, type, icon, x, y, ...note, size, fill, stroke};
+    const note = notes.find(note => note.id === "marker" + i);
+    const properties = {id: i, type, icon, x, y, ...note, size, fill, stroke};
     return {type: "Feature", geometry: {type: "Point", coordinates}, properties};
   });
 
@@ -524,22 +564,3 @@ function saveGeoJSON_Markers() {
   const fileName = getFileName("Markers") + ".geojson";
   downloadFile(JSON.stringify(json), fileName, "application/json");
 }
-
-function getCellCoordinates(vertices) {
-  const p = pack.vertices.p;
-  const coordinates = vertices.map(n => getCoordinates(p[n][0], p[n][1], 2));
-  return [coordinates.concat([coordinates[0]])];
-}
-
-function getRiverPoints(node) {
-  let points = [];
-  const l = node.getTotalLength() / 2; // half-length
-  const increment = 0.25; // defines density of points
-  for (let i = l, c = i; i >= 0; i -= increment, c += increment) {
-    const p1 = node.getPointAtLength(i);
-    const p2 = node.getPointAtLength(c);
-    const [x, y] = getCoordinates((p1.x + p2.x) / 2, (p1.y + p2.y) / 2, 4);
-    points.push([x, y]);
-  }
-  return points;
-}
diff --git a/modules/io/load.js b/modules/io/load.js
index 6d655485..ccfccecb 100644
--- a/modules/io/load.js
+++ b/modules/io/load.js
@@ -1,4 +1,5 @@
 "use strict";
+
 // Functions to load and parse .map/.gz files
 async function quickLoad() {
   const blob = await ldb.get("lastMap");
@@ -12,7 +13,7 @@ async function quickLoad() {
 async function loadFromDropbox() {
   const mapPath = byId("loadFromDropboxSelect")?.value;
 
-  DEBUG && console.info("Loading map from Dropbox:", mapPath);
+  console.info("Loading map from Dropbox:", mapPath);
   const blob = await Cloud.providers.dropbox.load(mapPath);
   uploadMap(blob);
 }
@@ -95,6 +96,7 @@ function showUploadErrorMessage(error, URL, random) {
     title: "Loading error",
     width: "32em",
     buttons: {
+      "Clear cache": () => cleanupData(),
       OK: function () {
         $(this).dialog("close");
       }
@@ -104,26 +106,28 @@ function showUploadErrorMessage(error, URL, random) {
 
 function uploadMap(file, callback) {
   uploadMap.timeStart = performance.now();
-  const OLDEST_SUPPORTED_VERSION = 0.7;
-  const currentVersion = parseFloat(version);
 
   const fileReader = new FileReader();
   fileReader.onloadend = async function (fileLoadedEvent) {
     if (callback) callback();
     byId("coas").innerHTML = ""; // remove auto-generated emblems
+
     const result = fileLoadedEvent.target.result;
-    const [mapData, mapVersion] = await parseLoadedResult(result);
-
-    const isInvalid = !mapData || isNaN(mapVersion) || mapData.length < 26 || !mapData[5];
-    const isUpdated = mapVersion === currentVersion;
-    const isAncient = mapVersion < OLDEST_SUPPORTED_VERSION;
-    const isNewer = mapVersion > currentVersion;
-    const isOutdated = mapVersion < currentVersion;
+    const {mapData, mapVersion} = await parseLoadedResult(result);
 
+    const isInvalid = !mapData || !isValidVersion(mapVersion) || mapData.length < 10 || !mapData[5];
     if (isInvalid) return showUploadMessage("invalid", mapData, mapVersion);
-    if (isUpdated) return parseLoadedData(mapData);
+
+    const isUpdated = compareVersions(mapVersion, VERSION).isEqual;
+    if (isUpdated) return showUploadMessage("updated", mapData, mapVersion);
+
+    const isAncient = compareVersions(mapVersion, "0.70.0").isOlder;
     if (isAncient) return showUploadMessage("ancient", mapData, mapVersion);
+
+    const isNewer = compareVersions(mapVersion, VERSION).isNewer;
     if (isNewer) return showUploadMessage("newer", mapData, mapVersion);
+
+    const isOutdated = compareVersions(mapVersion, VERSION).isOlder;
     if (isOutdated) return showUploadMessage("outdated", mapData, mapVersion);
   };
 
@@ -149,53 +153,65 @@ async function uncompress(compressedData) {
 async function parseLoadedResult(result) {
   try {
     const resultAsString = new TextDecoder().decode(result);
+
     // data can be in FMG internal format or base64 encoded
     const isDelimited = resultAsString.substring(0, 10).includes("|");
-    const decoded = isDelimited ? resultAsString : decodeURIComponent(atob(resultAsString));
+    let content = isDelimited ? resultAsString : decodeURIComponent(atob(resultAsString));
 
-    const mapData = decoded.split("\r\n");
-    const mapVersion = parseFloat(mapData[0].split("|")[0] || mapData[0]);
-    return [mapData, mapVersion];
+    // fix if svg part has CRLF line endings instead of LF
+    const svgMatch = content.match(/<svg[^>]*id="map"[\s\S]*?<\/svg>/);
+    const svgContent = svgMatch[0];
+    const hasCrlfEndings = svgContent.includes("\r\n");
+    if (hasCrlfEndings) {
+      const correctedSvgContent = svgContent.replace(/\r\n/g, "\n");
+      content = content.replace(svgContent, correctedSvgContent);
+    }
+
+    const mapData = content.split("\r\n"); // split by CRLF
+    const mapVersion = parseMapVersion(mapData[0].split("|")[0] || mapData[0] || "");
+
+    return {mapData, mapVersion};
   } catch (error) {
-    // map file can be compressed with gzip
-    const uncompressedData = await uncompress(result);
+    const uncompressedData = await uncompress(result); // file can be gzip compressed
     if (uncompressedData) return parseLoadedResult(uncompressedData);
 
     ERROR && console.error(error);
-    return [null, null];
+    return {mapData: null, mapVersion: null};
   }
 }
 
 function showUploadMessage(type, mapData, mapVersion) {
-  const archive = link("https://github.com/Azgaar/Fantasy-Map-Generator/wiki/Changelog", "archived version");
-  let message, title, canBeLoaded;
+  let message, title;
 
   if (type === "invalid") {
-    message = `The file does not look like a valid save file.<br>Please check the data format`;
+    message = "The file does not look like a valid save file.<br>Please check the data format";
     title = "Invalid file";
-    canBeLoaded = false;
+  } else if (type === "updated") {
+    parseLoadedData(mapData, mapVersion);
+    return;
   } else if (type === "ancient") {
+    const archive = link("https://github.com/Azgaar/Fantasy-Map-Generator/wiki/Changelog", "archived version");
     message = `The map version you are trying to load (${mapVersion}) is too old and cannot be updated to the current version.<br>Please keep using an ${archive}`;
     title = "Ancient file";
-    canBeLoaded = false;
   } else if (type === "newer") {
     message = `The map version you are trying to load (${mapVersion}) is newer than the current version.<br>Please load the file in the appropriate version`;
     title = "Newer file";
-    canBeLoaded = false;
   } else if (type === "outdated") {
-    INFO && console.info(`Loading map. Auto-update from ${mapVersion} to ${version}`);
+    INFO && console.info(`Loading map. Auto-updating from ${mapVersion} to ${VERSION}`);
     parseLoadedData(mapData, mapVersion);
     return;
   }
 
   alertMessage.innerHTML = message;
-  const buttons = {
-    OK: function () {
-      $(this).dialog("close");
-      if (canBeLoaded) parseLoadedData(mapData, mapVersion);
+  $("#alert").dialog({
+    title,
+    buttons: {
+      "Clear cache": () => cleanupData(),
+      OK: function () {
+        $(this).dialog("close");
+      }
     }
-  };
-  $("#alert").dialog({title, buttons});
+  });
 }
 
 async function parseLoadedData(data, mapVersion) {
@@ -205,31 +221,29 @@ async function parseLoadedData(data, mapVersion) {
     customization = 0;
     if (customizationMenu.offsetParent) styleTab.click();
 
-    const params = data[0].split("|");
-    void (function parseParameters() {
+    {
+      const params = data[0].split("|");
       if (params[3]) {
         seed = params[3];
         optionsSeed.value = seed;
-      }
+        INFO && console.group("Loaded Map " + seed);
+      } else INFO && console.group("Loaded Map");
       if (params[4]) graphWidth = +params[4];
       if (params[5]) graphHeight = +params[5];
       mapId = params[6] ? +params[6] : Date.now();
-    })();
+    }
 
-    INFO && console.group("Loaded Map " + seed);
-
-    // TODO: move all to options object
-    void (function parseSettings() {
+    {
       const settings = data[1].split("|");
       if (settings[0]) applyOption(distanceUnitInput, settings[0]);
-      if (settings[1]) distanceScale = distanceScaleInput.value = distanceScaleOutput.value = settings[1];
+      if (settings[1]) distanceScale = distanceScaleInput.value = settings[1];
       if (settings[2]) areaUnit.value = settings[2];
       if (settings[3]) applyOption(heightUnit, settings[3]);
-      if (settings[4]) heightExponentInput.value = heightExponentOutput.value = settings[4];
+      if (settings[4]) heightExponentInput.value = settings[4];
       if (settings[5]) temperatureScale.value = settings[5];
       // setting 6-11 (scaleBar) are part of style now, kept as "" in newer versions for compatibility
-      if (settings[12]) populationRate = populationRateInput.value = populationRateOutput.value = settings[12];
-      if (settings[13]) urbanization = urbanizationInput.value = urbanizationOutput.value = settings[13];
+      if (settings[12]) populationRate = populationRateInput.value = settings[12];
+      if (settings[13]) urbanization = urbanizationInput.value = settings[13];
       if (settings[14]) mapSizeInput.value = mapSizeOutput.value = minmax(settings[14], 1, 100);
       if (settings[15]) latitudeInput.value = latitudeOutput.value = minmax(settings[15], 0, 100);
       if (settings[18]) precInput.value = precOutput.value = settings[18];
@@ -241,18 +255,19 @@ async function parseLoadedData(data, mapVersion) {
       if (settings[21]) hideLabels.checked = +settings[21];
       if (settings[22]) stylePreset.value = settings[22];
       if (settings[23]) rescaleLabels.checked = +settings[23];
-      if (settings[24]) urbanDensity = urbanDensityInput.value = urbanDensityOutput.value = +settings[24];
+      if (settings[24]) urbanDensity = urbanDensityInput.value = +settings[24];
       if (settings[25]) longitudeInput.value = longitudeOutput.value = minmax(settings[25] || 50, 0, 100);
-    })();
+      if (settings[26]) growthRate.value = settings[26];
+    }
 
-    void (function applyOptionsToUI() {
+    {
       stateLabelsModeInput.value = options.stateLabelsMode;
       yearInput.value = options.year;
       eraInput.value = options.era;
       shapeRendering.value = viewbox.attr("shape-rendering") || "geometricPrecision";
-    })();
+    }
 
-    void (function parseConfiguration() {
+    {
       if (data[2]) mapCoordinates = JSON.parse(data[2]);
       if (data[4]) notes = JSON.parse(data[4]);
       if (data[33]) rulers.fromString(data[33]);
@@ -268,13 +283,14 @@ async function parseLoadedData(data, mapVersion) {
           declareFont(usedFont);
         });
       }
+    }
 
+    {
       const biomes = data[3].split("|");
       biomesData = Biomes.getDefault();
       biomesData.color = biomes[0].split(",");
       biomesData.habitability = biomes[1].split(",").map(h => +h);
       biomesData.name = biomes[2].split(",");
-
       // push custom biomes if any
       for (let i = biomesData.i.length; i < biomesData.name.length; i++) {
         biomesData.i.push(biomesData.i.length);
@@ -282,14 +298,14 @@ async function parseLoadedData(data, mapVersion) {
         biomesData.icons.push([]);
         biomesData.cost.push(50);
       }
-    })();
+    }
 
-    void (function replaceSVG() {
+    {
       svg.remove();
       document.body.insertAdjacentHTML("afterbegin", data[5]);
-    })();
+    }
 
-    void (function redefineElements() {
+    {
       svg = d3.select("#map");
       defs = svg.select("#deftemp");
       viewbox = svg.select("#viewbox");
@@ -339,38 +355,33 @@ async function parseLoadedData(data, mapVersion) {
       fogging = viewbox.select("#fogging");
       debug = viewbox.select("#debug");
       burgLabels = labels.select("#burgLabels");
-    })();
 
-    void (function addMissingElements() {
       if (!texture.size()) {
         texture = viewbox
           .insert("g", "#landmass")
           .attr("id", "texture")
           .attr("data-href", "./images/textures/plaster.jpg");
       }
-
       if (!emblems.size()) {
         emblems = viewbox.insert("g", "#labels").attr("id", "emblems").style("display", "none");
       }
-    })();
+    }
 
-    void (function parseGridData() {
+    {
       grid = JSON.parse(data[6]);
-
       const {cells, vertices} = calculateVoronoi(grid.points, grid.boundary);
       grid.cells = cells;
       grid.vertices = vertices;
-
       grid.cells.h = Uint8Array.from(data[7].split(","));
       grid.cells.prec = Uint8Array.from(data[8].split(","));
       grid.cells.f = Uint16Array.from(data[9].split(","));
       grid.cells.t = Int8Array.from(data[10].split(","));
       grid.cells.temp = Int8Array.from(data[11].split(","));
-    })();
+    }
 
-    void (function parsePackData() {
+    {
       reGraph();
-      reMarkFeatures();
+      Features.markupPack();
       pack.features = JSON.parse(data[12]);
       pack.cultures = JSON.parse(data[13]);
       pack.states = JSON.parse(data[14]);
@@ -380,22 +391,21 @@ async function parseLoadedData(data, mapVersion) {
       pack.rivers = data[32] ? JSON.parse(data[32]) : [];
       pack.markers = data[35] ? JSON.parse(data[35]) : [];
       pack.routes = data[37] ? JSON.parse(data[37]) : [];
-
-      const cells = pack.cells;
-      cells.biome = Uint8Array.from(data[16].split(","));
-      cells.burg = Uint16Array.from(data[17].split(","));
-      cells.conf = Uint8Array.from(data[18].split(","));
-      cells.culture = Uint16Array.from(data[19].split(","));
-      cells.fl = Uint16Array.from(data[20].split(","));
-      cells.pop = Float32Array.from(data[21].split(","));
-      cells.r = Uint16Array.from(data[22].split(","));
-      // data[23] for deprecated cells.road
-      cells.s = Uint16Array.from(data[24].split(","));
-      cells.state = Uint16Array.from(data[25].split(","));
-      cells.religion = data[26] ? Uint16Array.from(data[26].split(",")) : new Uint16Array(cells.i.length);
-      cells.province = data[27] ? Uint16Array.from(data[27].split(",")) : new Uint16Array(cells.i.length);
-      // data[28] for deprecated cells.crossroad
-      cells.routes = data[36] ? JSON.parse(data[36]) : {};
+      pack.zones = data[38] ? JSON.parse(data[38]) : [];
+      pack.cells.biome = Uint8Array.from(data[16].split(","));
+      pack.cells.burg = Uint16Array.from(data[17].split(","));
+      pack.cells.conf = Uint8Array.from(data[18].split(","));
+      pack.cells.culture = Uint16Array.from(data[19].split(","));
+      pack.cells.fl = Uint16Array.from(data[20].split(","));
+      pack.cells.pop = Float32Array.from(data[21].split(","));
+      pack.cells.r = Uint16Array.from(data[22].split(","));
+      // data[23] had deprecated cells.road
+      pack.cells.s = Uint16Array.from(data[24].split(","));
+      pack.cells.state = Uint16Array.from(data[25].split(","));
+      pack.cells.religion = data[26] ? Uint16Array.from(data[26].split(",")) : new Uint16Array(pack.cells.i.length);
+      pack.cells.province = data[27] ? Uint16Array.from(data[27].split(",")) : new Uint16Array(pack.cells.i.length);
+      // data[28] had deprecated cells.crossroad
+      pack.cells.routes = data[36] ? JSON.parse(data[36]) : {};
 
       if (data[31]) {
         const namesDL = data[31].split("/");
@@ -406,9 +416,9 @@ async function parseLoadedData(data, mapVersion) {
           nameBases[i] = {name: e[0], min: e[1], max: e[2], d: e[3], m: e[4], b};
         });
       }
-    })();
+    }
 
-    void (function restoreLayersState() {
+    {
       const isVisible = selection => selection.node() && selection.style("display") !== "none";
       const isVisibleNode = node => node && node.style.display !== "none";
       const hasChildren = selection => selection.node()?.hasChildNodes();
@@ -422,7 +432,7 @@ async function parseLoadedData(data, mapVersion) {
 
       // turn on active layers
       if (hasChild(texture, "image")) turnOn("toggleTexture");
-      if (hasChildren(terrs)) turnOn("toggleHeight");
+      if (hasChildren(terrs.select("#landHeights"))) turnOn("toggleHeight");
       if (hasChildren(biomes)) turnOn("toggleBiomes");
       if (hasChildren(cells)) turnOn("toggleCells");
       if (hasChildren(gridOverlay)) turnOn("toggleGrid");
@@ -437,13 +447,13 @@ async function parseLoadedData(data, mapVersion) {
       if (hasChildren(zones) && isVisible(zones)) turnOn("toggleZones");
       if (isVisible(borders) && hasChild(borders, "path")) turnOn("toggleBorders");
       if (isVisible(routes) && hasChild(routes, "path")) turnOn("toggleRoutes");
-      if (hasChildren(temperature)) turnOn("toggleTemp");
+      if (hasChildren(temperature)) turnOn("toggleTemperature");
       if (hasChild(population, "line")) turnOn("togglePopulation");
       if (hasChildren(ice)) turnOn("toggleIce");
-      if (hasChild(prec, "circle")) turnOn("togglePrec");
+      if (hasChild(prec, "circle")) turnOn("togglePrecipitation");
       if (isVisible(emblems) && hasChild(emblems, "use")) turnOn("toggleEmblems");
       if (isVisible(labels)) turnOn("toggleLabels");
-      if (isVisible(icons)) turnOn("toggleIcons");
+      if (isVisible(icons)) turnOn("toggleBurgIcons");
       if (hasChildren(armies) && isVisible(armies)) turnOn("toggleMilitary");
       if (hasChildren(markers)) turnOn("toggleMarkers");
       if (isVisible(ruler)) turnOn("toggleRulers");
@@ -451,20 +461,19 @@ async function parseLoadedData(data, mapVersion) {
       if (isVisibleNode(byId("vignette"))) turnOn("toggleVignette");
 
       getCurrentPreset();
-    })();
+    }
 
-    void (function restoreEvents() {
+    {
       scaleBar.on("mousemove", () => tip("Click to open Units Editor")).on("click", () => editUnits());
       legend
         .on("mousemove", () => tip("Drag to change the position. Click to hide the legend"))
         .on("click", () => clearLegend());
-    })();
+    }
 
     {
       // dynamically import and run auto-update script
-      const versionNumber = parseFloat(params[0]);
-      const {resolveVersionConflicts} = await import("../dynamic/auto-update.js?v=1.99.01");
-      resolveVersionConflicts(versionNumber);
+      const {resolveVersionConflicts} = await import("../dynamic/auto-update.js?v=1.108.0");
+      resolveVersionConflicts(mapVersion);
     }
 
     // add custom heightmap color scheme if any
@@ -481,19 +490,23 @@ async function parseLoadedData(data, mapVersion) {
       if (textureHref) updateTextureSelectValue(textureHref);
     }
 
-    void (function checkDataIntegrity() {
-      const cells = pack.cells;
+    // data integrity checks
+    {
+      const {cells, vertices} = pack;
 
-      if (pack.cells.i.length !== pack.cells.state.length) {
-        const message = "Data integrity check. Striping issue detected. To fix edit the heightmap in ERASE mode";
-        ERROR && console.error(message);
+      const cellsMismatch = cells.i.length !== cells.state.length;
+      const featureVerticesMismatch = pack.features.some(f => f?.vertices?.some(vertex => !vertices.p[vertex]));
+
+      if (cellsMismatch || featureVerticesMismatch) {
+        const message = "[Data integrity] Striping issue detected. To fix try to edit the heightmap in ERASE mode";
+        throw new Error(message);
       }
 
       const invalidStates = [...new Set(cells.state)].filter(s => !pack.states[s] || pack.states[s].removed);
       invalidStates.forEach(s => {
         const invalidCells = cells.i.filter(i => cells.state[i] === s);
         invalidCells.forEach(i => (cells.state[i] = 0));
-        ERROR && console.error("Data integrity check. Invalid state", s, "is assigned to cells", invalidCells);
+        ERROR && console.error("[Data integrity] Invalid state", s, "is assigned to cells", invalidCells);
       });
 
       const invalidProvinces = [...new Set(cells.province)].filter(
@@ -502,14 +515,14 @@ async function parseLoadedData(data, mapVersion) {
       invalidProvinces.forEach(p => {
         const invalidCells = cells.i.filter(i => cells.province[i] === p);
         invalidCells.forEach(i => (cells.province[i] = 0));
-        ERROR && console.error("Data integrity check. Invalid province", p, "is assigned to cells", invalidCells);
+        ERROR && console.error("[Data integrity] Invalid province", p, "is assigned to cells", invalidCells);
       });
 
       const invalidCultures = [...new Set(cells.culture)].filter(c => !pack.cultures[c] || pack.cultures[c].removed);
       invalidCultures.forEach(c => {
         const invalidCells = cells.i.filter(i => cells.culture[i] === c);
         invalidCells.forEach(i => (cells.province[i] = 0));
-        ERROR && console.error("Data integrity check. Invalid culture", c, "is assigned to cells", invalidCells);
+        ERROR && console.error("[Data integrity] Invalid culture", c, "is assigned to cells", invalidCells);
       });
 
       const invalidReligions = [...new Set(cells.religion)].filter(
@@ -518,14 +531,14 @@ async function parseLoadedData(data, mapVersion) {
       invalidReligions.forEach(r => {
         const invalidCells = cells.i.filter(i => cells.religion[i] === r);
         invalidCells.forEach(i => (cells.religion[i] = 0));
-        ERROR && console.error("Data integrity check. Invalid religion", r, "is assigned to cells", invalidCells);
+        ERROR && console.error("[Data integrity] Invalid religion", r, "is assigned to cells", invalidCells);
       });
 
       const invalidFeatures = [...new Set(cells.f)].filter(f => f && !pack.features[f]);
       invalidFeatures.forEach(f => {
         const invalidCells = cells.i.filter(i => cells.f[i] === f);
         // No fix as for now
-        ERROR && console.error("Data integrity check. Invalid feature", f, "is assigned to cells", invalidCells);
+        ERROR && console.error("[Data integrity] Invalid feature", f, "is assigned to cells", invalidCells);
       });
 
       const invalidBurgs = [...new Set(cells.burg)].filter(
@@ -534,7 +547,7 @@ async function parseLoadedData(data, mapVersion) {
       invalidBurgs.forEach(burgId => {
         const invalidCells = cells.i.filter(i => cells.burg[i] === burgId);
         invalidCells.forEach(i => (cells.burg[i] = 0));
-        ERROR && console.error("Data integrity check. Invalid burg", burgId, "is assigned to cells", invalidCells);
+        ERROR && console.error("[Data integrity] Invalid burg", burgId, "is assigned to cells", invalidCells);
       });
 
       const invalidRivers = [...new Set(cells.r)].filter(r => r && !pack.rivers.find(river => river.i === r));
@@ -542,21 +555,20 @@ async function parseLoadedData(data, mapVersion) {
         const invalidCells = cells.i.filter(i => cells.r[i] === r);
         invalidCells.forEach(i => (cells.r[i] = 0));
         rivers.select("river" + r).remove();
-        ERROR && console.error("Data integrity check. Invalid river", r, "is assigned to cells", invalidCells);
+        ERROR && console.error("[Data integrity] Invalid river", r, "is assigned to cells", invalidCells);
       });
 
       pack.burgs.forEach(burg => {
         if (typeof burg.capital === "boolean") burg.capital = Number(burg.capital);
 
         if (!burg.i && burg.lock) {
-          ERROR && console.error(`Data integrity check. Burg 0 is marked as locked, removing the status`);
+          ERROR && console.error(`[Data integrity] Burg 0 is marked as locked, removing the status`);
           delete burg.lock;
           return;
         }
 
         if (burg.removed && burg.lock) {
-          ERROR &&
-            console.error(`Data integrity check. Removed burg ${burg.i} is marked as locked. Unlocking the burg`);
+          ERROR && console.error(`[Data integrity] Removed burg ${burg.i} is marked as locked. Unlocking the burg`);
           delete burg.lock;
           return;
         }
@@ -565,36 +577,34 @@ async function parseLoadedData(data, mapVersion) {
 
         if (burg.cell === undefined || burg.x === undefined || burg.y === undefined) {
           ERROR &&
-            console.error(
-              `Data integrity check. Burg ${burg.i} is missing cell info or coordinates. Removing the burg`
-            );
+            console.error(`[Data integrity] Burg ${burg.i} is missing cell info or coordinates. Removing the burg`);
           burg.removed = true;
         }
 
         if (burg.port < 0) {
-          ERROR && console.error("Data integrity check. Burg", burg.i, "has invalid port value", burg.port);
+          ERROR && console.error("[Data integrity] Burg", burg.i, "has invalid port value", burg.port);
           burg.port = 0;
         }
 
         if (burg.cell >= cells.i.length) {
-          ERROR && console.error("Data integrity check. Burg", burg.i, "is linked to invalid cell", burg.cell);
+          ERROR && console.error("[Data integrity] Burg", burg.i, "is linked to invalid cell", burg.cell);
           burg.cell = findCell(burg.x, burg.y);
           cells.i.filter(i => cells.burg[i] === burg.i).forEach(i => (cells.burg[i] = 0));
           cells.burg[burg.cell] = burg.i;
         }
 
         if (burg.state && !pack.states[burg.state]) {
-          ERROR && console.error("Data integrity check. Burg", burg.i, "is linked to invalid state", burg.state);
+          ERROR && console.error("[Data integrity] Burg", burg.i, "is linked to invalid state", burg.state);
           burg.state = 0;
         }
 
         if (burg.state && pack.states[burg.state].removed) {
-          ERROR && console.error("Data integrity check. Burg", burg.i, "is linked to removed state", burg.state);
+          ERROR && console.error("[Data integrity] Burg", burg.i, "is linked to removed state", burg.state);
           burg.state = 0;
         }
 
         if (burg.state === undefined) {
-          ERROR && console.error("Data integrity check. Burg", burg.i, "has no state data");
+          ERROR && console.error("[Data integrity] Burg", burg.i, "has no state data");
           burg.state = 0;
         }
       });
@@ -608,7 +618,7 @@ async function parseLoadedData(data, mapVersion) {
         if (!state.i && capitalBurgs.length) {
           ERROR &&
             console.error(
-              `Data integrity check. Neutral burgs (${capitalBurgs
+              `[Data integrity] Neutral burgs (${capitalBurgs
                 .map(b => b.i)
                 .join(", ")}) marked as capitals. Moving them to towns`
             );
@@ -622,7 +632,7 @@ async function parseLoadedData(data, mapVersion) {
         }
 
         if (capitalBurgs.length > 1) {
-          const message = `Data integrity check. State ${state.i} has multiple capitals (${capitalBurgs
+          const message = `[Data integrity] State ${state.i} has multiple capitals (${capitalBurgs
             .map(b => b.i)
             .join(", ")}) assigned. Keeping the first as capital and moving others to towns`;
           ERROR && console.error(message);
@@ -638,7 +648,7 @@ async function parseLoadedData(data, mapVersion) {
 
         if (state.i && stateBurgs.length && !capitalBurgs.length) {
           ERROR &&
-            console.error(`Data integrity check. State ${state.i} has no capital. Assigning the first burg as capital`);
+            console.error(`[Data integrity] State ${state.i} has no capital. Assigning the first burg as capital`);
           stateBurgs[0].capital = 1;
           moveBurgToGroup(stateBurgs[0].i, "cities");
         }
@@ -647,17 +657,48 @@ async function parseLoadedData(data, mapVersion) {
       pack.provinces.forEach(p => {
         if (!p.i || p.removed) return;
         if (pack.states[p.state] && !pack.states[p.state].removed) return;
-        ERROR && console.error("Data integrity check. Province", p.i, "is linked to removed state", p.state);
-        p.removed = true; // remove incorrect province
+        ERROR &&
+          console.error(
+            `[Data integrity] Province ${p.i} is linked to removed state ${p.state}. Removing the province`
+          );
+        p.removed = true;
       });
 
+      pack.routes.forEach(route => {
+        if (!route.points || route.points.length < 2) {
+          ERROR && console.error(`[Data integrity] Route ${route.i} has less than 2 points. Removing the route`);
+          Routes.remove(route);
+        }
+      });
+
+      for (const from in pack.cells.routes) {
+        const value = pack.cells.routes[from];
+        if (!value) continue;
+
+        if (Object.keys(value).length === 0) {
+          // remove empty object
+          delete pack.cells.routes[from];
+          continue;
+        }
+
+        for (const to in value) {
+          const routeId = value[to];
+          const route = pack.routes.find(r => r.i === routeId);
+          if (!route) {
+            ERROR &&
+              console.error(`[Data integrity] Route ${routeId} from ${from} to ${to} is missing. Removing the route`);
+            delete pack.cells.routes[from][to];
+          }
+        }
+      }
+
       {
         const markerIds = [];
         let nextId = last(pack.markers)?.i + 1 || 0;
 
         pack.markers.forEach(marker => {
           if (markerIds[marker.i]) {
-            ERROR && console.error("Data integrity check. Marker", marker.i, "has non-unique id. Changing to", nextId);
+            ERROR && console.error("[Data integrity] Marker", marker.i, "has non-unique id. Changing to", nextId);
 
             const domElements = document.querySelectorAll("#marker" + marker.i);
             if (domElements[1]) domElements[1].id = "marker" + nextId; // rename 2nd dom element
@@ -675,20 +716,25 @@ async function parseLoadedData(data, mapVersion) {
         // sort markers by index
         pack.markers.sort((a, b) => a.i - b.i);
       }
-    })();
+    }
 
-    fitMapToScreen();
+    {
+      // remove href from emblems, to trigger rendering on load
+      emblems.selectAll("use").attr("href", null);
+    }
 
-    // remove href from emblems, to trigger rendering on load
-    emblems.selectAll("use").attr("href", null);
+    {
+      // draw data layers (not kept in svg)
+      if (rulers && layerIsOn("toggleRulers")) rulers.draw();
+      if (layerIsOn("toggleGrid")) drawGrid();
+    }
 
-    // draw data layers (no kept in svg)
-    if (rulers && layerIsOn("toggleRulers")) rulers.draw();
-    if (layerIsOn("toggleGrid")) drawGrid();
-
-    if (window.restoreDefaultEvents) restoreDefaultEvents();
-    focusOn(); // based on searchParams focus on point, cell or burg
-    invokeActiveZooming();
+    {
+      if (window.restoreDefaultEvents) restoreDefaultEvents();
+      focusOn(); // based on searchParams focus on point, cell or burg
+      invokeActiveZooming();
+      fitMapToScreen();
+    }
 
     WARN && console.warn(`TOTAL: ${rn((performance.now() - uploadMap.timeStart) / 1000, 2)}s`);
     showStatistics();
@@ -698,14 +744,15 @@ async function parseLoadedData(data, mapVersion) {
     ERROR && console.error(error);
     clearMainTip();
 
-    alertMessage.innerHTML = /* html */ `An error is occured on map loading. Select a different file to load, <br>generate a new random map or cancel the loading.<br>Map version: ${mapVersion}. Generator version: ${version}.
+    alertMessage.innerHTML = /* html */ `An error is occured on map loading. Select a different file to load, <br>generate a new random map or cancel the loading.<br>Map version: ${mapVersion}. Generator version: ${VERSION}.
       <p id="errorBox">${parseError(error)}</p>`;
 
     $("#alert").dialog({
       resizable: false,
       title: "Loading error",
-      maxWidth: "50em",
+      maxWidth: "40em",
       buttons: {
+        "Clear cache": () => cleanupData(),
         "Select file": function () {
           $(this).dialog("close");
           mapToLoad.click();
diff --git a/modules/io/save.js b/modules/io/save.js
index 73e6845f..304fef59 100644
--- a/modules/io/save.js
+++ b/modules/io/save.js
@@ -41,7 +41,7 @@ function prepareMapData() {
   const date = new Date();
   const dateString = date.getFullYear() + "-" + (date.getMonth() + 1) + "-" + date.getDate();
   const license = "File can be loaded in azgaar.github.io/Fantasy-Map-Generator";
-  const params = [version, license, dateString, seed, graphWidth, graphHeight, mapId].join("|");
+  const params = [VERSION, license, dateString, seed, graphWidth, graphHeight, mapId].join("|");
   const settings = [
     distanceUnitInput.value,
     distanceScale,
@@ -68,7 +68,8 @@ function prepareMapData() {
     stylePreset.value,
     +rescaleLabels.checked,
     urbanDensity,
-    longitudeOutput.value
+    longitudeOutput.value,
+    growthRate.value
   ].join("|");
   const coords = JSON.stringify(mapCoordinates);
   const biomes = [biomesData.color, biomesData.habitability, biomesData.name].join("|");
@@ -100,6 +101,7 @@ function prepareMapData() {
   const markers = JSON.stringify(pack.markers);
   const cellRoutes = JSON.stringify(pack.cells.routes);
   const routes = JSON.stringify(pack.routes);
+  const zones = JSON.stringify(pack.zones);
 
   // store name array only if not the same as default
   const defaultNB = Names.getNameBases();
@@ -152,7 +154,8 @@ function prepareMapData() {
     fonts,
     markers,
     cellRoutes,
-    routes
+    routes,
+    zones
   ].join("\r\n");
   return mapData;
 }
diff --git a/modules/lakes.js b/modules/lakes.js
index ba6adb80..d95b87a9 100644
--- a/modules/lakes.js
+++ b/modules/lakes.js
@@ -1,98 +1,87 @@
 "use strict";
 
 window.Lakes = (function () {
-  const setClimateData = function (h) {
-    const cells = pack.cells;
-    const lakeOutCells = new Uint16Array(cells.i.length);
+  const LAKE_ELEVATION_DELTA = 0.1;
 
-    pack.features.forEach(f => {
-      if (f.type !== "lake") return;
+  // check if lake can be potentially open (not in deep depression)
+  const detectCloseLakes = h => {
+    const {cells} = pack;
+    const ELEVATION_LIMIT = +byId("lakeElevationLimitOutput").value;
 
-      // default flux: sum of precipitation around lake
-      f.flux = f.shoreline.reduce((acc, c) => acc + grid.cells.prec[cells.g[c]], 0);
+    pack.features.forEach(feature => {
+      if (feature.type !== "lake") return;
+      delete feature.closed;
 
-      // temperature and evaporation to detect closed lakes
-      f.temp =
-        f.cells < 6
-          ? grid.cells.temp[cells.g[f.firstCell]]
-          : rn(d3.mean(f.shoreline.map(c => grid.cells.temp[cells.g[c]])), 1);
-      const height = (f.height - 18) ** heightExponentInput.value; // height in meters
-      const evaporation = ((700 * (f.temp + 0.006 * height)) / 50 + 75) / (80 - f.temp); // based on Penman formula, [1-11]
-      f.evaporation = rn(evaporation * f.cells);
-
-      // no outlet for lakes in depressed areas
-      if (f.closed) return;
-
-      // lake outlet cell
-      f.outCell = f.shoreline[d3.scan(f.shoreline, (a, b) => h[a] - h[b])];
-      lakeOutCells[f.outCell] = f.i;
-    });
-
-    return lakeOutCells;
-  };
-
-  // get array of land cells aroound lake
-  const getShoreline = function (lake) {
-    const uniqueCells = new Set();
-    if (!lake.vertices) lake.vertices = [];
-    lake.vertices.forEach(v => pack.vertices.c[v].forEach(c => pack.cells.h[c] >= 20 && uniqueCells.add(c)));
-    lake.shoreline = [...uniqueCells];
-  };
-
-  const prepareLakeData = h => {
-    const cells = pack.cells;
-    const ELEVATION_LIMIT = +document.getElementById("lakeElevationLimitOutput").value;
-
-    pack.features.forEach(f => {
-      if (f.type !== "lake") return;
-      delete f.flux;
-      delete f.inlets;
-      delete f.outlet;
-      delete f.height;
-      delete f.closed;
-      !f.shoreline && Lakes.getShoreline(f);
-
-      // lake surface height is as lowest land cells around
-      const min = f.shoreline.sort((a, b) => h[a] - h[b])[0];
-      f.height = h[min] - 0.1;
-
-      // check if lake can be open (not in deep depression)
-      if (ELEVATION_LIMIT === 80) {
-        f.closed = false;
+      const MAX_ELEVATION = feature.height + ELEVATION_LIMIT;
+      if (MAX_ELEVATION > 99) {
+        feature.closed = false;
         return;
       }
 
-      let deep = true;
-      const threshold = f.height + ELEVATION_LIMIT;
-      const queue = [min];
+      let isDeep = true;
+      const lowestShorelineCell = feature.shoreline.sort((a, b) => h[a] - h[b])[0];
+      const queue = [lowestShorelineCell];
       const checked = [];
-      checked[min] = true;
+      checked[lowestShorelineCell] = true;
 
-      // check if elevated lake can potentially pour to another water body
-      while (deep && queue.length) {
-        const q = queue.pop();
+      while (queue.length && isDeep) {
+        const cellId = queue.pop();
 
-        for (const n of cells.c[q]) {
-          if (checked[n]) continue;
-          if (h[n] >= threshold) continue;
+        for (const neibCellId of cells.c[cellId]) {
+          if (checked[neibCellId]) continue;
+          if (h[neibCellId] >= MAX_ELEVATION) continue;
 
-          if (h[n] < 20) {
-            const nFeature = pack.features[cells.f[n]];
-            if (nFeature.type === "ocean" || f.height > nFeature.height) {
-              deep = false;
-              break;
-            }
+          if (h[neibCellId] < 20) {
+            const nFeature = pack.features[cells.f[neibCellId]];
+            if (nFeature.type === "ocean" || feature.height > nFeature.height) isDeep = false;
           }
 
-          checked[n] = true;
-          queue.push(n);
+          checked[neibCellId] = true;
+          queue.push(neibCellId);
         }
       }
 
-      f.closed = deep;
+      feature.closed = isDeep;
     });
   };
 
+  const defineClimateData = function (heights) {
+    const {cells, features} = pack;
+    const lakeOutCells = new Uint16Array(cells.i.length);
+
+    features.forEach(feature => {
+      if (feature.type !== "lake") return;
+      feature.flux = getFlux(feature);
+      feature.temp = getLakeTemp(feature);
+      feature.evaporation = getLakeEvaporation(feature);
+      if (feature.closed) return; // no outlet for lakes in depressed areas
+
+      feature.outCell = getLowestShoreCell(feature);
+      lakeOutCells[feature.outCell] = feature.i;
+    });
+
+    return lakeOutCells;
+
+    function getFlux(lake) {
+      return lake.shoreline.reduce((acc, c) => acc + grid.cells.prec[cells.g[c]], 0);
+    }
+
+    function getLakeTemp(lake) {
+      if (lake.cells < 6) return grid.cells.temp[cells.g[lake.firstCell]];
+      return rn(d3.mean(lake.shoreline.map(c => grid.cells.temp[cells.g[c]])), 1);
+    }
+
+    function getLakeEvaporation(lake) {
+      const height = (lake.height - 18) ** heightExponentInput.value; // height in meters
+      const evaporation = ((700 * (lake.temp + 0.006 * height)) / 50 + 75) / (80 - lake.temp); // based on Penman formula, [1-11]
+      return rn(evaporation * lake.cells);
+    }
+
+    function getLowestShoreCell(lake) {
+      return lake.shoreline.sort((a, b) => heights[a] - heights[b])[0];
+    }
+  };
+
   const cleanupLakeData = function () {
     for (const feature of pack.features) {
       if (feature.type !== "lake") continue;
@@ -111,23 +100,10 @@ window.Lakes = (function () {
     }
   };
 
-  const defineGroup = function () {
-    for (const feature of pack.features) {
-      if (feature.type !== "lake") continue;
-      const lakeEl = lakes.select(`[data-f="${feature.i}"]`).node();
-      if (!lakeEl) continue;
-
-      feature.group = getGroup(feature);
-      document.getElementById(feature.group).appendChild(lakeEl);
-    }
-  };
-
-  const generateName = function () {
-    Math.random = aleaPRNG(seed);
-    for (const feature of pack.features) {
-      if (feature.type !== "lake") continue;
-      feature.name = getName(feature);
-    }
+  const getHeight = function (feature) {
+    const heights = pack.cells.h;
+    const minShoreHeight = d3.min(feature.shoreline.map(cellId => heights[cellId])) || 20;
+    return rn(minShoreHeight - LAKE_ELEVATION_DELTA, 2);
   };
 
   const getName = function (feature) {
@@ -136,19 +112,5 @@ window.Lakes = (function () {
     return Names.getCulture(culture);
   };
 
-  function getGroup(feature) {
-    if (feature.temp < -3) return "frozen";
-    if (feature.height > 60 && feature.cells < 10 && feature.firstCell % 10 === 0) return "lava";
-
-    if (!feature.inlets && !feature.outlet) {
-      if (feature.evaporation > feature.flux * 4) return "dry";
-      if (feature.cells < 3 && feature.firstCell % 10 === 0) return "sinkhole";
-    }
-
-    if (!feature.outlet && feature.evaporation > feature.flux) return "salt";
-
-    return "freshwater";
-  }
-
-  return {setClimateData, cleanupLakeData, prepareLakeData, defineGroup, generateName, getName, getShoreline};
+  return {defineClimateData, cleanupLakeData, detectCloseLakes, getHeight, getName};
 })();
diff --git a/modules/markers-generator.js b/modules/markers-generator.js
index d08f8807..367cdd5f 100644
--- a/modules/markers-generator.js
+++ b/modules/markers-generator.js
@@ -11,7 +11,7 @@ window.Markers = (function () {
     /*
       Default markers config:
       type - short description (snake-case)
-      icon - unicode character, make sure it's supported by most of the browsers. Source: emojipedia.org
+      icon - unicode character or url to image
       dx: icon offset in x direction, in pixels
       dy: icon offset in y direction, in pixels
       min: minimum number of candidates to add at least 1 marker
@@ -117,6 +117,7 @@ window.Markers = (function () {
       while (quantity && candidates.length) {
         const [cell] = extractAnyElement(candidates);
         const marker = addMarker({icon, type, dx, dy, px}, {cell});
+        if (!marker) continue;
         add("marker" + marker.i, cell);
         quantity--;
       }
@@ -150,6 +151,7 @@ window.Markers = (function () {
   }
 
   function addMarker(base, marker) {
+    if (marker.cell === undefined) return;
     const i = last(pack.markers)?.i + 1 || 0;
     const [x, y] = getMarkerCoordinates(marker.cell);
     marker = {...base, x, y, ...marker, i};
diff --git a/modules/military-generator.js b/modules/military-generator.js
index df2f2892..5aea87db 100644
--- a/modules/military-generator.js
+++ b/modules/military-generator.js
@@ -2,7 +2,7 @@
 
 window.Military = (function () {
   const generate = function () {
-    TIME && console.time("generateMilitaryForces");
+    TIME && console.time("generateMilitary");
     const {cells, states} = pack;
     const {p} = cells;
     const valid = states.filter(s => s.i && !s.removed); // valid states
@@ -252,8 +252,6 @@ window.Military = (function () {
       delete s.temp; // do not store temp data
     });
 
-    redraw();
-
     function createRegiments(nodes, s) {
       if (!nodes.length) return [];
 
@@ -312,19 +310,9 @@ window.Military = (function () {
       return regiments;
     }
 
-    TIME && console.timeEnd("generateMilitaryForces");
+    TIME && console.timeEnd("generateMilitary");
   };
 
-  function redraw() {
-    const validStates = pack.states.filter(s => s.i && !s.removed);
-    armies.selectAll("g > g").each(function () {
-      const index = notes.findIndex(n => n.id === this.id);
-      if (index != -1) notes.splice(index, 1);
-    });
-    armies.selectAll("g").remove();
-    validStates.forEach(s => drawRegiments(s.military, s.i));
-  }
-
   const getDefaultOptions = function () {
     return [
       {icon: "⚔️", name: "infantry", rural: 0.25, urban: 0.2, crew: 1, power: 1, type: "melee", separate: 0},
@@ -335,122 +323,6 @@ window.Military = (function () {
     ];
   };
 
-  const drawRegiments = function (regiments, s) {
-    const size = +armies.attr("box-size");
-    const w = d => (d.n ? size * 4 : size * 6);
-    const h = size * 2;
-    const x = d => rn(d.x - w(d) / 2, 2);
-    const y = d => rn(d.y - size, 2);
-
-    const baseColor = pack.states[s].color[0] === "#" ? pack.states[s].color : "#999";
-    const darkerColor = d3.color(baseColor).darker().hex();
-    const army = armies
-      .append("g")
-      .attr("id", "army" + s)
-      .attr("fill", baseColor)
-      .attr("color", darkerColor);
-
-    const g = army
-      .selectAll("g")
-      .data(regiments)
-      .enter()
-      .append("g")
-      .attr("id", d => "regiment" + s + "-" + d.i)
-      .attr("data-name", d => d.name)
-      .attr("data-state", s)
-      .attr("data-id", d => d.i)
-      .attr("transform", d => (d.angle ? `rotate(${d.angle})` : null))
-      .attr("transform-origin", d => `${d.x}px ${d.y}px`);
-    g.append("rect")
-      .attr("x", d => x(d))
-      .attr("y", d => y(d))
-      .attr("width", d => w(d))
-      .attr("height", h);
-    g.append("text")
-      .attr("x", d => d.x)
-      .attr("y", d => d.y)
-      .text(d => getTotal(d));
-    g.append("rect")
-      .attr("fill", "currentColor")
-      .attr("x", d => x(d) - h)
-      .attr("y", d => y(d))
-      .attr("width", h)
-      .attr("height", h);
-    g.append("text")
-      .attr("class", "regimentIcon")
-      .attr("x", d => x(d) - size)
-      .attr("y", d => d.y)
-      .text(d => d.icon);
-  };
-
-  const drawRegiment = function (reg, stateId) {
-    const size = +armies.attr("box-size");
-    const w = reg.n ? size * 4 : size * 6;
-    const h = size * 2;
-    const x1 = rn(reg.x - w / 2, 2);
-    const y1 = rn(reg.y - size, 2);
-
-    let army = armies.select("g#army" + stateId);
-    if (!army.size()) {
-      const baseColor = pack.states[stateId].color[0] === "#" ? pack.states[stateId].color : "#999";
-      const darkerColor = d3.color(baseColor).darker().hex();
-      army = armies
-        .append("g")
-        .attr("id", "army" + stateId)
-        .attr("fill", baseColor)
-        .attr("color", darkerColor);
-    }
-
-    const g = army
-      .append("g")
-      .attr("id", "regiment" + stateId + "-" + reg.i)
-      .attr("data-name", reg.name)
-      .attr("data-state", stateId)
-      .attr("data-id", reg.i)
-      .attr("transform", `rotate(${reg.angle || 0})`)
-      .attr("transform-origin", `${reg.x}px ${reg.y}px`);
-    g.append("rect").attr("x", x1).attr("y", y1).attr("width", w).attr("height", h);
-    g.append("text").attr("x", reg.x).attr("y", reg.y).text(getTotal(reg));
-    g.append("rect")
-      .attr("fill", "currentColor")
-      .attr("x", x1 - h)
-      .attr("y", y1)
-      .attr("width", h)
-      .attr("height", h);
-    g.append("text")
-      .attr("class", "regimentIcon")
-      .attr("x", x1 - size)
-      .attr("y", reg.y)
-      .text(reg.icon);
-  };
-
-  // move one regiment to another
-  const moveRegiment = function (reg, x, y) {
-    const el = armies.select("g#army" + reg.state).select("g#regiment" + reg.state + "-" + reg.i);
-    if (!el.size()) return;
-
-    const duration = Math.hypot(reg.x - x, reg.y - y) * 8;
-    reg.x = x;
-    reg.y = y;
-    const size = +armies.attr("box-size");
-    const w = reg.n ? size * 4 : size * 6;
-    const h = size * 2;
-    const x1 = x => rn(x - w / 2, 2);
-    const y1 = y => rn(y - size, 2);
-
-    const move = d3.transition().duration(duration).ease(d3.easeSinInOut);
-    el.select("rect").transition(move).attr("x", x1(x)).attr("y", y1(y));
-    el.select("text").transition(move).attr("x", x).attr("y", y);
-    el.selectAll("rect:nth-of-type(2)")
-      .transition(move)
-      .attr("x", x1(x) - h)
-      .attr("y", y1(y));
-    el.select(".regimentIcon")
-      .transition(move)
-      .attr("x", x1(x) - size)
-      .attr("y", y);
-  };
-
   // utilize si function to make regiment total text fit regiment box
   const getTotal = reg => (reg.a > (reg.n ? 999 : 99999) ? si(reg.a) : reg.a);
 
@@ -503,21 +375,19 @@ window.Military = (function () {
       : "";
 
     const campaign = s.campaigns ? ra(s.campaigns) : null;
-    const year = campaign ? rand(campaign.start, campaign.end) : gauss(options.year - 100, 150, 1, options.year - 6);
+    const year = campaign
+      ? rand(campaign.start, campaign.end || options.year)
+      : gauss(options.year - 100, 150, 1, options.year - 6);
     const conflict = campaign ? ` during the ${campaign.name}` : "";
     const legend = `Regiment was formed in ${year} ${options.era}${conflict}. ${station}${troops}`;
-    notes.push({id: `regiment${s.i}-${r.i}`, name: `${r.icon} ${r.name}`, legend});
+    notes.push({id: `regiment${s.i}-${r.i}`, name: r.name, legend});
   };
 
   return {
     generate,
-    redraw,
     getDefaultOptions,
     getName,
     generateNote,
-    drawRegiments,
-    drawRegiment,
-    moveRegiment,
     getTotal,
     getEmblem
   };
diff --git a/modules/names-generator.js b/modules/names-generator.js
index 52bea286..c35afedc 100644
--- a/modules/names-generator.js
+++ b/modules/names-generator.js
@@ -48,18 +48,28 @@ window.Names = (function () {
     return chain;
   };
 
-  // update chain for specific base
-  const updateChain = i => (chains[i] = nameBases[i] || nameBases[i].b ? calculateChain(nameBases[i].b) : null);
+  const updateChain = i => {
+    chains[i] = nameBases[i]?.b ? calculateChain(nameBases[i].b) : null;
+  };
 
-  // update chains for all used bases
-  const clearChains = () => (chains = []);
+  const clearChains = () => {
+    chains = [];
+  };
 
   // generate name using Markov's chain
   const getBase = function (base, min, max, dupl) {
-    if (base === undefined) {
-      ERROR && console.error("Please define a base");
-      return;
+    if (base === undefined) return ERROR && console.error("Please define a base");
+
+    if (nameBases[base] === undefined) {
+      if (nameBases[0]) {
+        WARN && console.warn("Namebase " + base + " is not found. First available namebase will be used");
+        base = 0;
+      } else {
+        ERROR && console.error("Namebase " + base + " is not found");
+        return "ERROR";
+      }
     }
+
     if (!chains[base]) updateChain(base);
 
     const data = chains[base];
@@ -141,16 +151,8 @@ window.Names = (function () {
 
   // generate short name for base
   const getBaseShort = function (base) {
-    if (nameBases[base] === undefined) {
-      tip(
-        `Namebase ${base} does not exist. Please upload custom namebases of change the base in Cultures Editor`,
-        false,
-        "error"
-      );
-      base = 1;
-    }
-    const min = nameBases[base].min - 1;
-    const max = Math.max(nameBases[base].max - 2, min);
+    const min = nameBases[base] ? nameBases[base].min - 1 : null;
+    const max = min ? Math.max(nameBases[base].max - 2, min) : null;
     return getBase(base, min, max, "", 0);
   };
 
@@ -286,7 +288,7 @@ window.Names = (function () {
       {name: "Basque", i: 20, min: 4, max: 11, d: "r", m: .1, b: "Agurain,Aia,Aiara,Albiztur,Alkiza,Altzaga,Amorebieta,Amurrio,Andoain,Anoeta,Antzuola,Arakaldo,Arantzazu,Arbatzegi,Areatza,Arratzua,Arrieta,Artea,Artziniega,Asteasu,Astigarraga,Ataun,Atxondo,Aulesti,Azkoitia,Azpeitia,Bakio,Baliarrain,Barakaldo,Barrika,Barrundia,Basauri,Beasain,Bedia,Beizama,Belauntza,Berastegi,Bergara,Bermeo,Bernedo,Berriatua,Berriz,Bidania,Bilar,Bilbao,Busturia,Deba,Derio,Donostia,Dulantzi,Durango,Ea,Eibar,Elantxobe,Elduain,Elgeta,Elgoibar,Elorrio,Erandio,Ergoitia,Ermua,Errenteria,Errezil,Eskoriatza,Eskuernaga,Etxebarri,Etxebarria,Ezkio,Forua,Gabiria,Gaintza,Galdakao,Gamiz,Garai,Gasteiz,Gatzaga,Gaubea,Gautegiz,Gaztelu,Gernika,Gerrikaitz,Getaria,Getxo,Gizaburuaga,Goiatz,Gorliz,Gorriaga,Harana,Hernani,Hondarribia,Ibarra,Ibarrangelu,Idiazabal,Iekora,Igorre,Ikaztegieta,Irun,Irura,Iruraiz,Itsaso,Itsasondo,Iurreta,Izurtza,Jatabe,Kanpezu,Karrantza,Kortezubi,Kripan,Kuartango,Lanestosa,Lantziego,Larrabetzu,Lasarte,Laukiz,Lazkao,Leaburu,Legazpi,Legorreta,Legutio,Leintz,Leioa,Lekeitio,Lemoa,Lemoiz,Leza,Lezama,Lezo,Lizartza,Maeztu,Mallabia,Manaria,Markina,Maruri,Menaka,Mendaro,Mendata,Mendexa,Morga,Mundaka,Mungia,Munitibar,Murueta,Muskiz,Mutiloa,Mutriku,Nabarniz,Oiartzun,Oion,Okondo,Olaberria,Onati,Ondarroa,Ordizia,Orendain,Orexa,Oria,Orio,Ormaiztegi,Orozko,Ortuella,Otegi,Otxandio,Pasaia,Plentzia,Santurtzi,Sestao,Sondika,Soraluze,Sukarrieta,Tolosa,Trapagaran,Turtzioz,Ubarrundia,Ubide,Ugao,Urdua,Urduliz,Urizaharra,Urkabustaiz,Urnieta,Urretxu,Usurbil,Xemein,Zabaleta,Zaia,Zaldibar,Zambrana,Zamudio,Zaratamo,Zarautz,Zeberio,Zegama,Zerain,Zestoa,Zierbena,Zigoitia,Ziortza,Zuia,Zumaia,Zumarraga"},
       {name: "Nigerian", i: 21, min: 4, max: 10, d: "", m: .3, b: "Abadogo,Abafon,Adealesu,Adeto,Adyongo,Afaga,Afamju,Agigbigi,Agogoke,Ahute,Aiyelaboro,Ajebe,Ajola,Akarekwu,Akunuba,Alawode,Alkaijji,Amangam,Amgbaye,Amtasa,Amunigun,Animahun,Anyoko,Arapagi,Asande,Awgbagba,Awhum,Awodu,Babateduwa,Bandakwai,Bangdi,Bilikani,Birnindodo,Braidu,Bulakawa,Buriburi,Cainnan,Chakum,Chondugh,Dagwarga,Darpi,Dokatofa,Dozere,Ebelibri,Efem,Ekoku,Ekpe,Ewhoeviri,Galea,Gamen,Ganjin,Gantetudu,Gargar,Garinbode,Gbure,Gerti,Gidan,Gitabaremu,Giyagiri,Giyawa,Gmawa,Golakochi,Golumba,Gunji,Gwambula,Gwodoti,Hayinlere,Hayinmaialewa,Hirishi,Hombo,Ibefum,Iberekodo,Icharge,Idofin,Idofinoka,Igbogo,Ijoko,Ijuwa,Ikawga,Ikhin,Ikpakidout,Ikpeoniong,Imuogo,Ipawo,Ipinlerere,Isicha,Itakpa,Jangi,Jare,Jataudakum,Jaurogomki,Jepel,Kafinmalama,Katab,Katanga,Katinda,Katirije,Kaurakimba,Keffinshanu,Kellumiri,Kiagbodor,Kirbutu,Kita,Kogogo,Kopje,Korokorosei,Kotoku,Kuata,Kujum,Kukau,Kunboon,Kuonubogbene,Kurawe,Kushinahu,Kwaramakeri,Ladimeji,Lafiaro,Lahaga,Laindebajanle,Laindegoro,Lakati,Litenswa,Maba,Madarzai,Maianita,Malikansaa,Mata,Megoyo,Meku,Miama,Modi,Mshi,Msugh,Muduvu,Murnachehu,Namnai,Ndamanma,Ndiwulunbe,Ndonutim,Ngbande,Nguengu,Ntoekpe,Nyajo,Nyior,Odajie,Ogbaga,Ogultu,Ogunbunmi,Ojopode,Okehin,Olugunna,Omotunde,Onipede,Onma,Orhere,Orya,Otukwang,Otunade,Rampa,Rimi,Rugan,Rumbukawa,Sabiu,Sangabama,Sarabe,Seboregetore,Shafar,Shagwa,Shata,Shengu,Sokoron,Sunnayu,Tafoki,Takula,Talontan,Tarhemba,Tayu,Ter,Timtim,Timyam,Tindirke,Tokunbo,Torlwam,Tseakaadza,Tseanongo,Tsebeeve,Tsepaegh,Tuba,Tumbo,Tungalombo,Tunganyakwe,Uhkirhi,Umoru,Umuabai,Umuajuju,Unchida,Ungua,Unguwar,Unongo,Usha,Utongbo,Vembera,Wuro,Yanbashi,Yanmedi,Yoku,Zarunkwari,Zilumo,Zulika"},
       {name: "Celtic", i: 22, min: 4, max: 12, d: "nld", m: 0, b: "Aberaman,Aberangell,Aberarth,Aberavon,Aberbanc,Aberbargoed,Aberbeeg,Abercanaid,Abercarn,Abercastle,Abercegir,Abercraf,Abercregan,Abercych,Abercynon,Aberdare,Aberdaron,Aberdaugleddau,Aberdeen,Aberdulais,Aberdyfi,Aberedw,Abereiddy,Abererch,Abereron,Aberfan,Aberffraw,Aberffrwd,Abergavenny,Abergele,Aberglasslyn,Abergorlech,Abergwaun,Abergwesyn,Abergwili,Abergwynfi,Abergwyngregyn,Abergynolwyn,Aberhafesp,Aberhonddu,Aberkenfig,Aberllefenni,Abermain,Abermaw,Abermorddu,Abermule,Abernant,Aberpennar,Aberporth,Aberriw,Abersoch,Abersychan,Abertawe,Aberteifi,Aberthin,Abertillery,Abertridwr,Aberystwyth,Achininver,Afonhafren,Alisaha,Anfosadh,Antinbhearmor,Ardenna,Attacon,Banwen,Beira,Bhrura,Bleddfa,Boioduro,Bona,Boskyny,Boslowenpolbrogh,Boudobriga,Bravon,Brigant,Briganta,Briva,Brosnach,Caersws,Cambodunum,Cambra,Caracta,Catumagos,Centobriga,Ceredigion,Chalain,Chearbhallain,Chlasaigh,Chormaic,Cuileannach,Dinn,Diwa,Dubingen,Duibhidighe,Duro,Ebora,Ebruac,Eburodunum,Eccles,Egloskuri,Eighe,Eireann,Elerghi,Ferkunos,Fhlaithnin,Gallbhuaile,Genua,Ghrainnse,Gwyles,Heartsease,Hebron,Hordh,Inbhear,Inbhir,Inbhirair,Innerleithen,Innerleven,Innerwick,Inver,Inveraldie,Inverallan,Inveralmond,Inveramsay,Inveran,Inveraray,Inverarnan,Inverbervie,Inverclyde,Inverell,Inveresk,Inverfarigaig,Invergarry,Invergordon,Invergowrie,Inverhaddon,Inverkeilor,Inverkeithing,Inverkeithney,Inverkip,Inverleigh,Inverleith,Inverloch,Inverlochlarig,Inverlochy,Invermay,Invermoriston,Inverness,Inveroran,Invershin,Inversnaid,Invertrossachs,Inverugie,Inveruglas,Inverurie,Iubhrach,Karardhek,Kilninver,Kirkcaldy,Kirkintilloch,Krake,Lanngorrow,Latense,Leming,Lindomagos,Llanaber,Llandidiwg,Llandyrnog,Llanfarthyn,Llangadwaldr,Llansanwyr,Lochinver,Lugduno,Magoduro,Mheara,Monmouthshire,Nanshiryarth,Narann,Novioduno,Nowijonago,Octoduron,Penning,Pheofharain,Ponsmeur,Raithin,Ricomago,Rossinver,Salodurum,Seguia,Sentica,Theorsa,Tobargeal,Trealaw,Trefesgob,Trewedhenek,Trewythelan,Tuaisceart,Uige,Vitodurum,Windobona"},
-      {name: "Mesopotamian", i: 23, min: 4, max: 9, d: "srpl", m: .1, b: "Adab,Adamndun,Adma,Admatum,Agrab,Akkad,Akshak,Amnanum,Andarig,Anshan,Apiru,Apum,Arantu,Arbid,Arpachiyah,Arpad,Arrapha,Ashlakka,Assur,Awan,Babilim,Bad-Tibira,Balawat,Barsip,Birtu,Bit-Bunakki,Borsippa,Chuera,Dashrah,Der,Dilbat,Diniktum,Doura,Dur-Kurigalzu,Dur-Sharrukin,Dur-Untash,Dûr-gurgurri,Ebla,Ekallatum,Ekalte,Emar,Erbil,Eresh,Eridu,Eshnunn,Eshnunna,Gargamish,Gasur,Gawra,Gibil,Girsu,Gizza,Habirun,Habur,Hadatu,Hakkulan,Halab,Halabit,Hamazi,Hamoukar,Haradum,Harbidum,Harran,Harranu,Hassuna,Hatarikka,Hatra,Hissar,Hiyawa,Hormirzad,Ida-Maras,Idamaraz,Idu,Imerishu,Imgur-Enlil,Irisagrig,Irnina,Irridu,Isin,Issinnitum,Iturungal,Izubitum,Jarmo,Jemdet,Kabnak,Kadesh,Kahat,Kalhu,Kar-Shulmanu-Asharedu,Kar-Tukulti-Ninurta,Kar-Šulmānu-ašarēdu,Karana,Karatepe,Kartukulti,Kazallu,Kesh,Kidsha,Kinza,Kish,Kisiga,Kisurra,Kuara,Kurda,Kurruhanni,Kutha,Lagaba,Lagash,Larak,Larsa,Leilan,Malgium,Marad,Mardaman,Mari,Marlik,Mashkan,Mashkan-shapir,Matutem,Me-Turan,Meliddu,Mumbaqat,Nabada,Nagar,Nanagugal,Nerebtum,Nigin,Nimrud,Nina,Nineveh,Ninua,Nippur,Niru,Niya,Nuhashe,Nuhasse,Nuzi,Puzrish-Dagan,Qalatjarmo,Qatara,Qatna,Qattunan,Qidshu,Rapiqum,Rawda,Sagaz,Shaduppum,Shaggaratum,Shalbatu,Shanidar,Sharrukin,Shawwan,Shehna,Shekhna,Shemshara,Shibaniba,Shubat-Enlil,Shurkutir,Shuruppak,Shusharra,Shushin,Sikan,Sippar,Sippar-Amnanum,Sippar-sha-Annunitum,Subatum,Susuka,Tadmor,Tarbisu,Telul,Terqa,Tirazish,Tisbon,Tuba,Tushhan,Tuttul,Tutub,Ubaid,Umma,Ur,Urah,Urbilum,Urkesh,Ursa'um,Uruk,Urum,Uzarlulu,Warka,Washukanni,Zabalam,Zarri-Amnan"},
+      {name: "Mesopotamian", i: 23, min: 4, max: 9, d: "srpl", m: .1, b: "Adab,Adamndun,Adma,Admatum,Agrab,Akkad,Akshak,Amnanum,Andarig,Anshan,Apiru,Apum,Arantu,Arbid,Arpachiyah,Arpad,Arrapha,Ashlakka,Assur,Awan,Babilim,Bad-Tibira,Balawat,Barsip,Birtu,Bit-Bunakki,Borsippa,Chuera,Dashrah,Der,Dilbat,Diniktum,Doura,Dur-Kurigalzu,Dur-Sharrukin,Dur-Untash,Dûr-gurgurri,Ebla,Ekallatum,Ekalte,Emar,Erbil,Eresh,Eridu,Eshnunn,Eshnunna,Gargamish,Gasur,Gawra,Gibil,Girsu,Gizza,Habirun,Habur,Hadatu,Hakkulan,Halab,Halabit,Hamazi,Hamoukar,Haradum,Harbidum,Harran,Harranu,Hassuna,Hatarikka,Hatra,Hissar,Hiyawa,Hormirzad,Ida-Maras,Idamaraz,Idu,Imerishu,Imgur-Enlil,Irisagrig,Irnina,Irridu,Isin,Issinnitum,Iturungal,Izubitum,Jarmo,Jemdet,Kabnak,Kadesh,Kahat,Kalhu,Kar-Shulmanu-Asharedu,Kar-Tukulti-Ninurta,Kar-shulmanu-asharedu,Karana,Karatepe,Kartukulti,Kazallu,Kesh,Kidsha,Kinza,Kish,Kisiga,Kisurra,Kuara,Kurda,Kurruhanni,Kutha,Lagaba,Lagash,Larak,Larsa,Leilan,Malgium,Marad,Mardaman,Mari,Marlik,Mashkan,Mashkan-shapir,Matutem,Me-Turan,Meliddu,Mumbaqat,Nabada,Nagar,Nanagugal,Nerebtum,Nigin,Nimrud,Nina,Nineveh,Ninua,Nippur,Niru,Niya,Nuhashe,Nuhasse,Nuzi,Puzrish-Dagan,Qalatjarmo,Qatara,Qatna,Qattunan,Qidshu,Rapiqum,Rawda,Sagaz,Shaduppum,Shaggaratum,Shalbatu,Shanidar,Sharrukin,Shawwan,Shehna,Shekhna,Shemshara,Shibaniba,Shubat-Enlil,Shurkutir,Shuruppak,Shusharra,Shushin,Sikan,Sippar,Sippar-Amnanum,Sippar-sha-Annunitum,Subatum,Susuka,Tadmor,Tarbisu,Telul,Terqa,Tirazish,Tisbon,Tuba,Tushhan,Tuttul,Tutub,Ubaid,Umma,Ur,Urah,Urbilum,Urkesh,Ursa'um,Uruk,Urum,Uzarlulu,Warka,Washukanni,Zabalam,Zarri-Amnan"},
       {name: "Iranian", i: 24, min: 5, max: 11, d: "", m: .1, b: "Abali,Abrisham,Absard,Abuzeydabad,Afus,Alavicheh,Alikosh,Amol,Anarak,Anbar,Andisheh,Anshan,Aran,Ardabil,Arderica,Ardestan,Arjomand,Asgaran,Asgharabad,Ashian,Awan,Babajan,Badrud,Bafran,Baghestan,Baghshad,Bahadoran,Baharan Shahr,Baharestan,Bakun,Bam,Baqershahr,Barzok,Bastam,Behistun,Bitistar,Bumahen,Bushehr,Chadegan,Chahardangeh,Chamgardan,Chermahin,Choghabonut,Chugan,Damaneh,Damavand,Darabgard,Daran,Dastgerd,Dehaq,Dehaqan,Dezful,Dizicheh,Dorcheh,Dowlatabad,Duruntash,Ecbatana,Eslamshahr,Estakhr,Ezhiyeh,Falavarjan,Farrokhi,Fasham,Ferdowsieh,Fereydunshahr,Ferunabad,Firuzkuh,Fuladshahr,Ganjdareh,Ganzak,Gaz,Geoy,Godin,Goldasht,Golestan,Golpayegan,Golshahr,Golshan,Gorgab,Guged,Habibabad,Hafshejan,Hajjifiruz,Hana,Harand,Hasanabad,Hasanlu,Hashtgerd,Hecatompylos,Hormirzad,Imanshahr,Isfahan,Jandaq,Javadabad,Jiroft,Jowsheqan ,Jowzdan,Kabnak,Kahrizak,Kahriz Sang,Kangavar,Karaj,Karkevand,Kashan,Kelishad,Kermanshah,Khaledabad,Khansar,Khorramabad,Khur,Khvorzuq,Kilan,Komeh,Komeshcheh,Konar,Kuhpayeh,Kul,Kushk,Lavasan,Laybid,Liyan,Lyan,Mahabad,Mahallat,Majlesi,Malard,Manzariyeh,Marlik,Meshkat,Meymeh,Miandasht,Mish,Mobarakeh,Nahavand,Nain,Najafabad,Naqshe,Narezzash,Nasimshahr,Nasirshahr,Nasrabad,Natanz,Neyasar,Nikabad,Nimvar,Nushabad,Pakdasht,Parand,Pardis,Parsa,Pasargadai,Patigrabana,Pir Bakran,Pishva,Qahderijan,Qahjaverestan,Qamsar,Qarchak,Qods,Rabat,Ray-shahr,Rezvanshahr,Rhages,Robat Karim,Rozveh,Rudehen,Sabashahr,Safadasht,Sagzi,Salehieh,Sandal,Sarvestan,Sedeh,Sefidshahr,Semirom,Semnan,Shadpurabad,Shah,Shahdad,Shahedshahr,Shahin,Shahpour,Shahr,Shahreza,Shahriar,Sharifabad,Shemshak,Shiraz,Shushan,Shushtar,Sialk,Sin,Sukhteh,Tabas,Tabriz,Takhte,Talkhuncheh,Talli,Tarq,Temukan,Tepe,Tiran,Tudeshk,Tureng,Urmia,Vahidieh,Vahrkana,Vanak,Varamin,Varnamkhast,Varzaneh,Vazvan,Yahya,Yarim,Yasuj,Zarrin Shahr,Zavareh,Zayandeh,Zazeran,Ziar,Zibashahr,Zranka"},
       {name: "Hawaiian", i: 25, min: 5, max: 10, d: "auo", m: 1, b: "Aapueo,Ahoa,Ahuakaio,Ahupau,Alaakua,Alae,Alaeloa,Alamihi,Aleamai,Alena,Alio,Aupokopoko,Halakaa,Haleu,Haliimaile,Hamoa,Hanakaoo,Hanaulu,Hanawana,Hanehoi,Haou,Hikiaupea,Hokuula,Honohina,Honokahua,Honokeana,Honokohau,Honolulu,Honomaele,Hononana,Honopou,Hoolawa,Huelo,Kaalaea,Kaapahu,Kaeo,Kahalehili,Kahana,Kahuai,Kailua,Kainehe,Kakalahale,Kakanoni,Kalenanui,Kaleoaihe,Kalialinui,Kalihi,Kalimaohe,Kaloi,Kamani,Kamehame,Kanahena,Kaniaula,Kaonoulu,Kapaloa,Kapohue,Kapuaikini,Kapunakea,Kauau,Kaulalo,Kaulanamoa,Kauluohana,Kaumakani,Kaumanu,Kaunauhane,Kaupakulua,Kawaloa,Keaa,Keaaula,Keahua,Keahuapono,Kealahou,Keanae,Keauhou,Kelawea,Keokea,Keopuka,Kikoo,Kipapa,Koakupuna,Koali,Kolokolo,Kopili,Kou,Kualapa,Kuhiwa,Kuholilea,Kuhua,Kuia,Kuikui,Kukoae,Kukohia,Kukuiaeo,Kukuipuka,Kukuiula,Kulahuhu,Lapakea,Lapueo,Launiupoko,Lole,Maalo,Mahinahina,Mailepai,Makaakini,Makaalae,Makaehu,Makaiwa,Makaliua,Makapipi,Makapuu,Maluaka,Manawainui,Mehamenui,Moalii,Moanui,Mohopili,Mokae,Mokuia,Mokupapa,Mooiki,Mooloa,Moomuku,Muolea,Nakaaha,Nakalepo,Nakaohu,Nakapehu,Nakula,Napili,Niniau,Nuu,Oloewa,Olowalu,Omaopio,Onau,Onouli,Opaeula,Opana,Opikoula,Paakea,Paeahu,Paehala,Paeohi,Pahoa,Paia,Pakakia,Palauea,Palemo,Paniau,Papaaea,Papaanui,Papaauhau,Papaka,Papauluana,Pauku,Paunau,Pauwalu,Pauwela,Pohakanele,Polaiki,Polanui,Polapola,Poopoo,Poponui,Poupouwela,Puahoowali,Puakea,Puako,Pualaea,Puehuehu,Pueokauiki,Pukaauhuhu,Pukuilua,Pulehu,Puolua,Puou,Puuhaehae,Puuiki,Puuki,Puulani,Puunau,Puuomaile,Uaoa,Uhao,Ukumehame,Ulaino,Ulumalu,Wahikuli,Waianae,Waianu,Waiawa,Waiehu,Waieli,Waikapu,Wailamoa,Wailaulau,Wainee,Waiohole,Waiohonu,Waiohuli,Waiokama,Waiokila,Waiopai,Waiopua,Waipao,Waipionui,Waipouli"},
       {name: "Karnataka", i: 26, min: 5, max: 11, d: "tnl", m: 0, b: "Adityapatna,Adyar,Afzalpur,Aland,Alnavar,Alur,Ambikanagara,Anekal,Ankola,Annigeri,Arkalgud,Arsikere,Athni,Aurad,Badami,Bagalkot,Bagepalli,Bail,Bajpe,Bangalore,Bangarapet,Bankapura,Bannur,Bantval,Basavakalyan,Basavana,Belgaum,Beltangadi,Belur,Bhadravati,Bhalki,Bhatkal,Bhimarayanagudi,Bidar,Bijapur,Bilgi,Birur,Bommasandra,Byadgi,Challakere,Chamarajanagar,Channagiri,Channapatna,Channarayapatna,Chik,Chikmagalur,Chiknayakanhalli,Chikodi,Chincholi,Chintamani,Chitapur,Chitgoppa,Chitradurga,Dandeli,Dargajogihalli,Devadurga,Devanahalli,Dod,Donimalai,Gadag,Gajendragarh,Gangawati,Gauribidanur,Gokak,Gonikoppal,Gubbi,Gudibanda,Gulbarga,Guledgudda,Gundlupet,Gurmatkal,Haliyal,Hangal,Harapanahalli,Harihar,Hassan,Hatti,Haveri,Hebbagodi,Heggadadevankote,Hirekerur,Holalkere,Hole,Homnabad,Honavar,Honnali,Hoovina,Hosakote,Hosanagara,Hosdurga,Hospet,Hubli,Hukeri,Hungund,Hunsur,Ilkal,Indi,Jagalur,Jamkhandi,Jevargi,Jog,Kadigenahalli,Kadur,Kalghatgi,Kamalapuram,Kampli,Kanakapura,Karkal,Karwar,Khanapur,Kodiyal,Kolar,Kollegal,Konnur,Koppa,Koppal,Koratagere,Kotturu,Krishnarajanagara,Krishnarajasagara,Krishnarajpet,Kudchi,Kudligi,Kudremukh,Kumta,Kundapura,Kundgol,Kunigal,Kurgunta,Kushalnagar,Kushtagi,Lakshmeshwar,Lingsugur,Londa,Maddur,Madhugiri,Madikeri,Mahalingpur,Malavalli,Mallar,Malur,Mandya,Mangalore,Manvi,Molakalmuru,Mudalgi,Mudbidri,Muddebihal,Mudgal,Mudhol,Mudigere,Mulbagal,Mulgund,Mulki,Mulur,Mundargi,Mundgod,Munirabad,Mysore,Nagamangala,Nanjangud,Narasimharajapura,Naregal,Nargund,Navalgund,Nipani,Pandavapura,Pavagada,Piriyapatna,Pudu,Puttur,Rabkavi,Raichur,Ramanagaram,Ramdurg,Ranibennur,Raybag,Robertson,Ron,Sadalgi,Sagar,Sakleshpur,Saligram,Sandur,Sankeshwar,Saundatti,Savanur,Sedam,Shahabad,Shahpur,Shaktinagar,Shiggaon,Shikarpur,Shirhatti,Shorapur,Shrirangapattana,Siddapur,Sidlaghatta,Sindgi,Sindhnur,Sira,Siralkoppa,Sirsi,Siruguppa,Somvarpet,Sorab,Sringeri,Srinivaspur,Sulya,Talikota,Tarikere,Tekkalakote,Terdal,Thumbe,Tiptur,Tirthahalli,Tirumakudal,Tumkur,Turuvekere,Udupi,Vijayapura,Wadi,Yadgir,Yelandur,Yelbarga,Yellapur,Yenagudde"},
diff --git a/modules/provinces-generator.js b/modules/provinces-generator.js
new file mode 100644
index 00000000..c0f8e8f7
--- /dev/null
+++ b/modules/provinces-generator.js
@@ -0,0 +1,257 @@
+"use strict";
+
+window.Provinces = (function () {
+  const forms = {
+    Monarchy: {County: 22, Earldom: 6, Shire: 2, Landgrave: 2, Margrave: 2, Barony: 2, Captaincy: 1, Seneschalty: 1},
+    Republic: {Province: 6, Department: 2, Governorate: 2, District: 1, Canton: 1, Prefecture: 1},
+    Theocracy: {Parish: 3, Deanery: 1},
+    Union: {Province: 1, State: 1, Canton: 1, Republic: 1, County: 1, Council: 1},
+    Anarchy: {Council: 1, Commune: 1, Community: 1, Tribe: 1},
+    Wild: {Territory: 10, Land: 5, Region: 2, Tribe: 1, Clan: 1, Dependency: 1, Area: 1}
+  };
+
+  const generate = (regenerate = false, regenerateLockedStates = false) => {
+    TIME && console.time("generateProvinces");
+    const localSeed = regenerate ? generateSeed() : seed;
+    Math.random = aleaPRNG(localSeed);
+
+    const {cells, states, burgs} = pack;
+    const provinces = [0]; // 0 index is reserved for "no province"
+    const provinceIds = new Uint16Array(cells.i.length);
+
+    const isProvinceLocked = province => province.lock || (!regenerateLockedStates && states[province.state]?.lock);
+    const isProvinceCellLocked = cell => provinceIds[cell] && isProvinceLocked(provinces[provinceIds[cell]]);
+
+    if (regenerate) {
+      pack.provinces.forEach(province => {
+        if (!province.i || province.removed || !isProvinceLocked(province)) return;
+
+        const newId = provinces.length;
+        for (const i of cells.i) {
+          if (cells.province[i] === province.i) provinceIds[i] = newId;
+        }
+
+        province.i = newId;
+        provinces.push(province);
+      });
+    }
+
+    const provincesRatio = +byId("provincesRatio").value;
+    const max = provincesRatio == 100 ? 1000 : gauss(20, 5, 5, 100) * provincesRatio ** 0.5; // max growth
+
+    // generate provinces for selected burgs
+    states.forEach(s => {
+      s.provinces = [];
+      if (!s.i || s.removed) return;
+      if (provinces.length) s.provinces = provinces.filter(p => p.state === s.i).map(p => p.i); // locked provinces ids
+      if (s.lock && !regenerateLockedStates) return; // don't regenerate provinces of a locked state
+
+      const stateBurgs = burgs
+        .filter(b => b.state === s.i && !b.removed && !provinceIds[b.cell])
+        .sort((a, b) => b.population * gauss(1, 0.2, 0.5, 1.5, 3) - a.population)
+        .sort((a, b) => b.capital - a.capital);
+      if (stateBurgs.length < 2) return; // at least 2 provinces are required
+      const provincesNumber = Math.max(Math.ceil((stateBurgs.length * provincesRatio) / 100), 2);
+
+      const form = Object.assign({}, forms[s.form]);
+
+      for (let i = 0; i < provincesNumber; i++) {
+        const provinceId = provinces.length;
+        const center = stateBurgs[i].cell;
+        const burg = stateBurgs[i].i;
+        const c = stateBurgs[i].culture;
+        const nameByBurg = P(0.5);
+        const name = nameByBurg ? stateBurgs[i].name : Names.getState(Names.getCultureShort(c), c);
+        const formName = rw(form);
+        form[formName] += 10;
+        const fullName = name + " " + formName;
+        const color = getMixedColor(s.color);
+        const kinship = nameByBurg ? 0.8 : 0.4;
+        const type = BurgsAndStates.getType(center, burg.port);
+        const coa = COA.generate(stateBurgs[i].coa, kinship, null, type);
+        coa.shield = COA.getShield(c, s.i);
+
+        s.provinces.push(provinceId);
+        provinces.push({i: provinceId, state: s.i, center, burg, name, formName, fullName, color, coa});
+      }
+    });
+
+    // expand generated provinces
+    const queue = new FlatQueue();
+    const cost = [];
+
+    provinces.forEach(p => {
+      if (!p.i || p.removed || isProvinceLocked(p)) return;
+      provinceIds[p.center] = p.i;
+      queue.push({e: p.center, province: p.i, state: p.state, p: 0}, 0);
+      cost[p.center] = 1;
+    });
+
+    while (queue.length) {
+      const {e, p, province, state} = queue.pop();
+
+      cells.c[e].forEach(e => {
+        if (isProvinceCellLocked(e)) return; // do not overwrite cell of locked provinces
+
+        const land = cells.h[e] >= 20;
+        if (!land && !cells.t[e]) return; // cannot pass deep ocean
+        if (land && cells.state[e] !== state) return;
+        const evevation = cells.h[e] >= 70 ? 100 : cells.h[e] >= 50 ? 30 : cells.h[e] >= 20 ? 10 : 100;
+        const totalCost = p + evevation;
+
+        if (totalCost > max) return;
+        if (!cost[e] || totalCost < cost[e]) {
+          if (land) provinceIds[e] = province; // assign province to a cell
+          cost[e] = totalCost;
+          queue.push({e, province, state, p: totalCost}, totalCost);
+        }
+      });
+    }
+
+    // justify provinces shapes a bit
+    for (const i of cells.i) {
+      if (cells.burg[i]) continue; // do not overwrite burgs
+      if (isProvinceCellLocked(i)) continue; // do not overwrite cell of locked provinces
+
+      const neibs = cells.c[i]
+        .filter(c => cells.state[c] === cells.state[i] && !isProvinceCellLocked(c))
+        .map(c => provinceIds[c]);
+      const adversaries = neibs.filter(c => c !== provinceIds[i]);
+      if (adversaries.length < 2) continue;
+
+      const buddies = neibs.filter(c => c === provinceIds[i]).length;
+      if (buddies.length > 2) continue;
+
+      const competitors = adversaries.map(p => adversaries.reduce((s, v) => (v === p ? s + 1 : s), 0));
+      const max = d3.max(competitors);
+      if (buddies >= max) continue;
+
+      provinceIds[i] = adversaries[competitors.indexOf(max)];
+    }
+
+    // add "wild" provinces if some cells don't have a province assigned
+    const noProvince = Array.from(cells.i).filter(i => cells.state[i] && !provinceIds[i]); // cells without province assigned
+    states.forEach(s => {
+      if (!s.i || s.removed) return;
+      if (s.lock && !regenerateLockedStates) return;
+      if (!s.provinces.length) return;
+
+      const coreProvinceNames = s.provinces.map(p => provinces[p]?.name);
+      const colonyNamePool = [s.name, ...coreProvinceNames].filter(name => name && !/new/i.test(name));
+      const getColonyName = () => {
+        if (colonyNamePool.length < 1) return null;
+
+        const index = rand(colonyNamePool.length - 1);
+        const spliced = colonyNamePool.splice(index, 1);
+        return spliced[0] ? `New ${spliced[0]}` : null;
+      };
+
+      let stateNoProvince = noProvince.filter(i => cells.state[i] === s.i && !provinceIds[i]);
+      while (stateNoProvince.length) {
+        // add new province
+        const provinceId = provinces.length;
+        const burgCell = stateNoProvince.find(i => cells.burg[i]);
+        const center = burgCell ? burgCell : stateNoProvince[0];
+        const burg = burgCell ? cells.burg[burgCell] : 0;
+        provinceIds[center] = provinceId;
+
+        // expand province
+        const cost = [];
+        cost[center] = 1;
+        queue.push({e: center, p: 0}, 0);
+        while (queue.length) {
+          const {e, p} = queue.pop();
+
+          cells.c[e].forEach(nextCellId => {
+            if (provinceIds[nextCellId]) return;
+            const land = cells.h[nextCellId] >= 20;
+            if (cells.state[nextCellId] && cells.state[nextCellId] !== s.i) return;
+            const ter = land ? (cells.state[nextCellId] === s.i ? 3 : 20) : cells.t[nextCellId] ? 10 : 30;
+            const totalCost = p + ter;
+
+            if (totalCost > max) return;
+            if (!cost[nextCellId] || totalCost < cost[nextCellId]) {
+              if (land && cells.state[nextCellId] === s.i) provinceIds[nextCellId] = provinceId; // assign province to a cell
+              cost[nextCellId] = totalCost;
+              queue.push({e: nextCellId, p: totalCost}, totalCost);
+            }
+          });
+        }
+
+        // generate "wild" province name
+        const c = cells.culture[center];
+        const f = pack.features[cells.f[center]];
+        const color = getMixedColor(s.color);
+
+        const provCells = stateNoProvince.filter(i => provinceIds[i] === provinceId);
+        const singleIsle = provCells.length === f.cells && !provCells.find(i => cells.f[i] !== f.i);
+        const isleGroup = !singleIsle && !provCells.find(i => pack.features[cells.f[i]].group !== "isle");
+        const colony = !singleIsle && !isleGroup && P(0.5) && !isPassable(s.center, center);
+
+        const name = (() => {
+          const colonyName = colony && P(0.8) && getColonyName();
+          if (colonyName) return colonyName;
+          if (burgCell && P(0.5)) return burgs[burg].name;
+          return Names.getState(Names.getCultureShort(c), c);
+        })();
+
+        const formName = (() => {
+          if (singleIsle) return "Island";
+          if (isleGroup) return "Islands";
+          if (colony) return "Colony";
+          return rw(forms["Wild"]);
+        })();
+
+        const fullName = name + " " + formName;
+
+        const dominion = colony ? P(0.95) : singleIsle || isleGroup ? P(0.7) : P(0.3);
+        const kinship = dominion ? 0 : 0.4;
+        const type = BurgsAndStates.getType(center, burgs[burg]?.port);
+        const coa = COA.generate(s.coa, kinship, dominion, type);
+        coa.shield = COA.getShield(c, s.i);
+
+        provinces.push({i: provinceId, state: s.i, center, burg, name, formName, fullName, color, coa});
+        s.provinces.push(provinceId);
+
+        // check if there is a land way within the same state between two cells
+        function isPassable(from, to) {
+          if (cells.f[from] !== cells.f[to]) return false; // on different islands
+          const passableQueue = [from],
+            used = new Uint8Array(cells.i.length),
+            state = cells.state[from];
+          while (passableQueue.length) {
+            const current = passableQueue.pop();
+            if (current === to) return true; // way is found
+            cells.c[current].forEach(c => {
+              if (used[c] || cells.h[c] < 20 || cells.state[c] !== state) return;
+              passableQueue.push(c);
+              used[c] = 1;
+            });
+          }
+          return false; // way is not found
+        }
+
+        // re-check
+        stateNoProvince = noProvince.filter(i => cells.state[i] === s.i && !provinceIds[i]);
+      }
+    });
+
+    cells.province = provinceIds;
+    pack.provinces = provinces;
+
+    TIME && console.timeEnd("generateProvinces");
+  };
+
+  // calculate pole of inaccessibility for each province
+  const getPoles = () => {
+    const getType = cellId => pack.cells.province[cellId];
+    const poles = getPolesOfInaccessibility(pack, getType);
+
+    pack.provinces.forEach(province => {
+      if (!province.i || province.removed) return;
+      province.pole = poles[province.i] || [0, 0];
+    });
+  };
+
+  return {generate, getPoles};
+})();
diff --git a/modules/relief-icons.js b/modules/relief-icons.js
deleted file mode 100644
index 498886df..00000000
--- a/modules/relief-icons.js
+++ /dev/null
@@ -1,128 +0,0 @@
-"use strict";
-
-window.ReliefIcons = (function () {
-  const ReliefIcons = function () {
-    TIME && console.time("drawRelief");
-    terrain.selectAll("*").remove();
-
-    const cells = pack.cells;
-    const density = terrain.attr("density") || 0.4;
-    const size = 2 * (terrain.attr("size") || 1);
-    const mod = 0.2 * size; // size modifier
-    const relief = [];
-
-    for (const i of cells.i) {
-      const height = cells.h[i];
-      if (height < 20) continue; // no icons on water
-      if (cells.r[i]) continue; // no icons on rivers
-      const biome = cells.biome[i];
-      if (height < 50 && biomesData.iconsDensity[biome] === 0) continue; // no icons for this biome
-
-      const polygon = getPackPolygon(i);
-      const [minX, maxX] = d3.extent(polygon, p => p[0]);
-      const [minY, maxY] = d3.extent(polygon, p => p[1]);
-
-      if (height < 50) placeBiomeIcons(i, biome);
-      else placeReliefIcons(i);
-
-      function placeBiomeIcons() {
-        const iconsDensity = biomesData.iconsDensity[biome] / 100;
-        const radius = 2 / iconsDensity / density;
-        if (Math.random() > iconsDensity * 10) return;
-
-        for (const [cx, cy] of poissonDiscSampler(minX, minY, maxX, maxY, radius)) {
-          if (!d3.polygonContains(polygon, [cx, cy])) continue;
-          let h = (4 + Math.random()) * size;
-          const icon = getBiomeIcon(i, biomesData.icons[biome]);
-          if (icon === "#relief-grass-1") h *= 1.2;
-          relief.push({i: icon, x: rn(cx - h, 2), y: rn(cy - h, 2), s: rn(h * 2, 2)});
-        }
-      }
-
-      function placeReliefIcons(i) {
-        const radius = 2 / density;
-        const [icon, h] = getReliefIcon(i, height);
-
-        for (const [cx, cy] of poissonDiscSampler(minX, minY, maxX, maxY, radius)) {
-          if (!d3.polygonContains(polygon, [cx, cy])) continue;
-          relief.push({i: icon, x: rn(cx - h, 2), y: rn(cy - h, 2), s: rn(h * 2, 2)});
-        }
-      }
-
-      function getReliefIcon(i, h) {
-        const temp = grid.cells.temp[pack.cells.g[i]];
-        const type = h > 70 && temp < 0 ? "mountSnow" : h > 70 ? "mount" : "hill";
-        const size = h > 70 ? (h - 45) * mod : minmax((h - 40) * mod, 3, 6);
-        return [getIcon(type), size];
-      }
-    }
-
-    // sort relief icons by y+size
-    relief.sort((a, b) => a.y + a.s - (b.y + b.s));
-
-    let reliefHTML = "";
-    for (const r of relief) {
-      reliefHTML += `<use href="${r.i}" x="${r.x}" y="${r.y}" width="${r.s}" height="${r.s}"/>`;
-    }
-    terrain.html(reliefHTML);
-
-    TIME && console.timeEnd("drawRelief");
-  };
-
-  function getBiomeIcon(i, b) {
-    let type = b[Math.floor(Math.random() * b.length)];
-    const temp = grid.cells.temp[pack.cells.g[i]];
-    if (type === "conifer" && temp < 0) type = "coniferSnow";
-    return getIcon(type);
-  }
-
-  function getVariant(type) {
-    switch (type) {
-      case "mount":
-        return rand(2, 7);
-      case "mountSnow":
-        return rand(1, 6);
-      case "hill":
-        return rand(2, 5);
-      case "conifer":
-        return 2;
-      case "coniferSnow":
-        return 1;
-      case "swamp":
-        return rand(2, 3);
-      case "cactus":
-        return rand(1, 3);
-      case "deadTree":
-        return rand(1, 2);
-      default:
-        return 2;
-    }
-  }
-
-  function getOldIcon(type) {
-    switch (type) {
-      case "mountSnow":
-        return "mount";
-      case "vulcan":
-        return "mount";
-      case "coniferSnow":
-        return "conifer";
-      case "cactus":
-        return "dune";
-      case "deadTree":
-        return "dune";
-      default:
-        return type;
-    }
-  }
-
-  function getIcon(type) {
-    const set = terrain.attr("set") || "simple";
-    if (set === "simple") return "#relief-" + getOldIcon(type) + "-1";
-    if (set === "colored") return "#relief-" + type + "-" + getVariant(type);
-    if (set === "gray") return "#relief-" + type + "-" + getVariant(type) + "-bw";
-    return "#relief-" + getOldIcon(type) + "-1"; // simple
-  }
-
-  return ReliefIcons;
-})();
diff --git a/modules/religions-generator.js b/modules/religions-generator.js
index ca60466b..2bb972db 100644
--- a/modules/religions-generator.js
+++ b/modules/religions-generator.js
@@ -457,7 +457,7 @@ window.Religions = (function () {
     const lockedReligions = pack.religions?.filter(r => r.i && r.lock && !r.removed) || [];
 
     const folkReligions = generateFolkReligions();
-    const organizedReligions = generateOrganizedReligions(+religionsInput.value, lockedReligions);
+    const organizedReligions = generateOrganizedReligions(+religionsNumber.value, lockedReligions);
 
     const namedReligions = specifyReligions([...folkReligions, ...organizedReligions]);
     const indexedReligions = combineReligions(namedReligions, lockedReligions);
@@ -695,23 +695,24 @@ window.Religions = (function () {
     const {cells, routes} = pack;
     const religionIds = spreadFolkReligions(religions);
 
-    const queue = new PriorityQueue({comparator: (a, b) => a.p - b.p});
+    const queue = new FlatQueue();
     const cost = [];
 
-    const maxExpansionCost = (cells.i.length / 20) * neutralInput.value; // limit cost for organized religions growth
+    // limit cost for organized religions growth
+    const maxExpansionCost = (cells.i.length / 20) * byId("growthRate").valueAsNumber;
 
     religions
       .filter(r => r.i && !r.lock && r.type !== "Folk" && !r.removed)
       .forEach(r => {
         religionIds[r.center] = r.i;
-        queue.queue({e: r.center, p: 0, r: r.i, s: cells.state[r.center]});
+        queue.push({e: r.center, p: 0, r: r.i, s: cells.state[r.center]}, 0);
         cost[r.center] = 1;
       });
 
     const religionsMap = new Map(religions.map(r => [r.i, r]));
 
     while (queue.length) {
-      const {e: cellId, p, r, s: state} = queue.dequeue();
+      const {e: cellId, p, r, s: state} = queue.pop();
       const {culture, expansion, expansionism} = religionsMap.get(r);
 
       cells.c[cellId].forEach(nextCell => {
@@ -731,7 +732,7 @@ window.Religions = (function () {
           if (cells.culture[nextCell]) religionIds[nextCell] = r; // assign religion to cell
           cost[nextCell] = totalCost;
 
-          queue.queue({e: nextCell, p: totalCost, r, s: state});
+          queue.push({e: nextCell, p: totalCost, r, s: state}, totalCost);
         }
       });
     }
diff --git a/modules/renderers/draw-borders.js b/modules/renderers/draw-borders.js
new file mode 100644
index 00000000..f0f3006e
--- /dev/null
+++ b/modules/renderers/draw-borders.js
@@ -0,0 +1,120 @@
+"use strict";
+
+function drawBorders() {
+  TIME && console.time("drawBorders");
+  const {cells, vertices} = pack;
+
+  const statePath = [];
+  const provincePath = [];
+  const checked = {};
+
+  const isLand = cellId => cells.h[cellId] >= 20;
+
+  for (let cellId = 0; cellId < cells.i.length; cellId++) {
+    if (!cells.state[cellId]) continue;
+    const provinceId = cells.province[cellId];
+    const stateId = cells.state[cellId];
+
+    // bordering cell of another province
+    if (provinceId) {
+      const provToCell = cells.c[cellId].find(neibId => {
+        const neibProvinceId = cells.province[neibId];
+        return (
+          neibProvinceId &&
+          provinceId > neibProvinceId &&
+          !checked[`prov-${provinceId}-${neibProvinceId}-${cellId}`] &&
+          cells.state[neibId] === stateId
+        );
+      });
+
+      if (provToCell !== undefined) {
+        const addToChecked = cellId => (checked[`prov-${provinceId}-${cells.province[provToCell]}-${cellId}`] = true);
+        const border = getBorder({type: "province", fromCell: cellId, toCell: provToCell, addToChecked});
+
+        if (border) {
+          provincePath.push(border);
+          cellId--; // check the same cell again
+          continue;
+        }
+      }
+    }
+
+    // if cell is on state border
+    const stateToCell = cells.c[cellId].find(neibId => {
+      const neibStateId = cells.state[neibId];
+      return isLand(neibId) && stateId > neibStateId && !checked[`state-${stateId}-${neibStateId}-${cellId}`];
+    });
+
+    if (stateToCell !== undefined) {
+      const addToChecked = cellId => (checked[`state-${stateId}-${cells.state[stateToCell]}-${cellId}`] = true);
+      const border = getBorder({type: "state", fromCell: cellId, toCell: stateToCell, addToChecked});
+
+      if (border) {
+        statePath.push(border);
+        cellId--; // check the same cell again
+        continue;
+      }
+    }
+  }
+
+  svg.select("#borders").selectAll("path").remove();
+  svg.select("#stateBorders").append("path").attr("d", statePath.join(" "));
+  svg.select("#provinceBorders").append("path").attr("d", provincePath.join(" "));
+
+  function getBorder({type, fromCell, toCell, addToChecked}) {
+    const getType = cellId => cells[type][cellId];
+    const isTypeFrom = cellId => cellId < cells.i.length && getType(cellId) === getType(fromCell);
+    const isTypeTo = cellId => cellId < cells.i.length && getType(cellId) === getType(toCell);
+
+    addToChecked(fromCell);
+    const startingVertex = cells.v[fromCell].find(v => vertices.c[v].some(i => isLand(i) && isTypeTo(i)));
+    if (startingVertex === undefined) return null;
+
+    const checkVertex = vertex =>
+      vertices.c[vertex].some(isTypeFrom) && vertices.c[vertex].some(c => isLand(c) && isTypeTo(c));
+    const chain = getVerticesLine({vertices, startingVertex, checkCell: isTypeFrom, checkVertex, addToChecked});
+    if (chain.length > 1) return "M" + chain.map(cellId => vertices.p[cellId]).join(" ");
+
+    return null;
+  }
+
+  // connect vertices to chain to form a border
+  function getVerticesLine({vertices, startingVertex, checkCell, checkVertex, addToChecked}) {
+    let chain = []; // vertices chain to form a path
+    let next = startingVertex;
+    const MAX_ITERATIONS = vertices.c.length;
+
+    for (let run = 0; run < 2; run++) {
+      // first run: from any vertex to a border edge
+      // second run: from found border edge to another edge
+      chain = [];
+
+      for (let i = 0; i < MAX_ITERATIONS; i++) {
+        const previous = chain.at(-1);
+        const current = next;
+        chain.push(current);
+
+        const neibCells = vertices.c[current];
+        neibCells.map(addToChecked);
+
+        const [c1, c2, c3] = neibCells.map(checkCell);
+        const [v1, v2, v3] = vertices.v[current].map(checkVertex);
+        const [vertex1, vertex2, vertex3] = vertices.v[current];
+
+        if (v1 && vertex1 !== previous && c1 !== c2) next = vertex1;
+        else if (v2 && vertex2 !== previous && c2 !== c3) next = vertex2;
+        else if (v3 && vertex3 !== previous && c1 !== c3) next = vertex3;
+
+        if (next === current || next === startingVertex) {
+          if (next === startingVertex) chain.push(startingVertex);
+          startingVertex = next;
+          break;
+        }
+      }
+    }
+
+    return chain;
+  }
+
+  TIME && console.timeEnd("drawBorders");
+}
diff --git a/modules/renderers/draw-burg-icons.js b/modules/renderers/draw-burg-icons.js
new file mode 100644
index 00000000..8e11bf3b
--- /dev/null
+++ b/modules/renderers/draw-burg-icons.js
@@ -0,0 +1,69 @@
+"use strict";
+
+function drawBurgIcons() {
+  TIME && console.time("drawBurgIcons");
+
+  icons.selectAll("circle, use").remove(); // cleanup
+
+  // capitals
+  const capitals = pack.burgs.filter(b => b.capital && !b.removed);
+  const capitalIcons = burgIcons.select("#cities");
+  const capitalSize = capitalIcons.attr("size") || 1;
+  const capitalAnchors = anchors.selectAll("#cities");
+  const capitalAnchorsSize = capitalAnchors.attr("size") || 2;
+
+  capitalIcons
+    .selectAll("circle")
+    .data(capitals)
+    .enter()
+    .append("circle")
+    .attr("id", d => "burg" + d.i)
+    .attr("data-id", d => d.i)
+    .attr("cx", d => d.x)
+    .attr("cy", d => d.y)
+    .attr("r", capitalSize);
+
+  capitalAnchors
+    .selectAll("use")
+    .data(capitals.filter(c => c.port))
+    .enter()
+    .append("use")
+    .attr("xlink:href", "#icon-anchor")
+    .attr("data-id", d => d.i)
+    .attr("x", d => rn(d.x - capitalAnchorsSize * 0.47, 2))
+    .attr("y", d => rn(d.y - capitalAnchorsSize * 0.47, 2))
+    .attr("width", capitalAnchorsSize)
+    .attr("height", capitalAnchorsSize);
+
+  // towns
+  const towns = pack.burgs.filter(b => b.i && !b.capital && !b.removed);
+  const townIcons = burgIcons.select("#towns");
+  const townSize = townIcons.attr("size") || 0.5;
+  const townsAnchors = anchors.selectAll("#towns");
+  const townsAnchorsSize = townsAnchors.attr("size") || 1;
+
+  townIcons
+    .selectAll("circle")
+    .data(towns)
+    .enter()
+    .append("circle")
+    .attr("id", d => "burg" + d.i)
+    .attr("data-id", d => d.i)
+    .attr("cx", d => d.x)
+    .attr("cy", d => d.y)
+    .attr("r", townSize);
+
+  townsAnchors
+    .selectAll("use")
+    .data(towns.filter(c => c.port))
+    .enter()
+    .append("use")
+    .attr("xlink:href", "#icon-anchor")
+    .attr("data-id", d => d.i)
+    .attr("x", d => rn(d.x - townsAnchorsSize * 0.47, 2))
+    .attr("y", d => rn(d.y - townsAnchorsSize * 0.47, 2))
+    .attr("width", townsAnchorsSize)
+    .attr("height", townsAnchorsSize);
+
+  TIME && console.timeEnd("drawBurgIcons");
+}
diff --git a/modules/renderers/draw-burg-labels.js b/modules/renderers/draw-burg-labels.js
new file mode 100644
index 00000000..69c3956b
--- /dev/null
+++ b/modules/renderers/draw-burg-labels.js
@@ -0,0 +1,41 @@
+"use strict";
+
+function drawBurgLabels() {
+  TIME && console.time("drawBurgLabels");
+
+  burgLabels.selectAll("text").remove(); // cleanup
+
+  const capitals = pack.burgs.filter(b => b.capital && !b.removed);
+  const capitalSize = burgIcons.select("#cities").attr("size") || 1;
+  burgLabels
+    .select("#cities")
+    .selectAll("text")
+    .data(capitals)
+    .enter()
+    .append("text")
+    .attr("text-rendering", "optimizeSpeed")
+    .attr("id", d => "burgLabel" + d.i)
+    .attr("data-id", d => d.i)
+    .attr("x", d => d.x)
+    .attr("y", d => d.y)
+    .attr("dy", `${capitalSize * -1.5}px`)
+    .text(d => d.name);
+
+  const towns = pack.burgs.filter(b => b.i && !b.capital && !b.removed);
+  const townSize = burgIcons.select("#towns").attr("size") || 0.5;
+  burgLabels
+    .select("#towns")
+    .selectAll("text")
+    .data(towns)
+    .enter()
+    .append("text")
+    .attr("text-rendering", "optimizeSpeed")
+    .attr("id", d => "burgLabel" + d.i)
+    .attr("data-id", d => d.i)
+    .attr("x", d => d.x)
+    .attr("y", d => d.y)
+    .attr("dy", `${townSize * -2}px`)
+    .text(d => d.name);
+
+  TIME && console.timeEnd("drawBurgLabels");
+}
diff --git a/modules/renderers/draw-emblems.js b/modules/renderers/draw-emblems.js
new file mode 100644
index 00000000..13781239
--- /dev/null
+++ b/modules/renderers/draw-emblems.js
@@ -0,0 +1,129 @@
+"use strict";
+
+function drawEmblems() {
+  TIME && console.time("drawEmblems");
+  const {states, provinces, burgs} = pack;
+
+  const validStates = states.filter(s => s.i && !s.removed && s.coa && s.coa.size !== 0);
+  const validProvinces = provinces.filter(p => p.i && !p.removed && p.coa && p.coa.size !== 0);
+  const validBurgs = burgs.filter(b => b.i && !b.removed && b.coa && b.coa.size !== 0);
+
+  const getStateEmblemsSize = () => {
+    const startSize = minmax((graphHeight + graphWidth) / 40, 10, 100);
+    const statesMod = 1 + validStates.length / 100 - (15 - validStates.length) / 200; // states number modifier
+    const sizeMod = +emblems.select("#stateEmblems").attr("data-size") || 1;
+    return rn((startSize / statesMod) * sizeMod); // target size ~50px on 1536x754 map with 15 states
+  };
+
+  const getProvinceEmblemsSize = () => {
+    const startSize = minmax((graphHeight + graphWidth) / 100, 5, 70);
+    const provincesMod = 1 + validProvinces.length / 1000 - (115 - validProvinces.length) / 1000; // states number modifier
+    const sizeMod = +emblems.select("#provinceEmblems").attr("data-size") || 1;
+    return rn((startSize / provincesMod) * sizeMod); // target size ~20px on 1536x754 map with 115 provinces
+  };
+
+  const getBurgEmblemSize = () => {
+    const startSize = minmax((graphHeight + graphWidth) / 185, 2, 50);
+    const burgsMod = 1 + validBurgs.length / 1000 - (450 - validBurgs.length) / 1000; // states number modifier
+    const sizeMod = +emblems.select("#burgEmblems").attr("data-size") || 1;
+    return rn((startSize / burgsMod) * sizeMod); // target size ~8.5px on 1536x754 map with 450 burgs
+  };
+
+  const sizeBurgs = getBurgEmblemSize();
+  const burgCOAs = validBurgs.map(burg => {
+    const {x, y} = burg;
+    const size = burg.coa.size || 1;
+    const shift = (sizeBurgs * size) / 2;
+    return {type: "burg", i: burg.i, x: burg.coa.x || x, y: burg.coa.y || y, size, shift};
+  });
+
+  const sizeProvinces = getProvinceEmblemsSize();
+  const provinceCOAs = validProvinces.map(province => {
+    const [x, y] = province.pole || pack.cells.p[province.center];
+    const size = province.coa.size || 1;
+    const shift = (sizeProvinces * size) / 2;
+    return {type: "province", i: province.i, x: province.coa.x || x, y: province.coa.y || y, size, shift};
+  });
+
+  const sizeStates = getStateEmblemsSize();
+  const stateCOAs = validStates.map(state => {
+    const [x, y] = state.pole || pack.cells.p[state.center];
+    const size = state.coa.size || 1;
+    const shift = (sizeStates * size) / 2;
+    return {type: "state", i: state.i, x: state.coa.x || x, y: state.coa.y || y, size, shift};
+  });
+
+  const nodes = burgCOAs.concat(provinceCOAs).concat(stateCOAs);
+  const simulation = d3
+    .forceSimulation(nodes)
+    .alphaMin(0.6)
+    .alphaDecay(0.2)
+    .velocityDecay(0.6)
+    .force(
+      "collision",
+      d3.forceCollide().radius(d => d.shift)
+    )
+    .stop();
+
+  d3.timeout(function () {
+    const n = Math.ceil(Math.log(simulation.alphaMin()) / Math.log(1 - simulation.alphaDecay()));
+    for (let i = 0; i < n; ++i) {
+      simulation.tick();
+    }
+
+    const burgNodes = nodes.filter(node => node.type === "burg");
+    const burgString = burgNodes
+      .map(
+        d =>
+          `<use data-i="${d.i}" x="${rn(d.x - d.shift)}" y="${rn(d.y - d.shift)}" width="${d.size}em" height="${
+            d.size
+          }em"/>`
+      )
+      .join("");
+    emblems.select("#burgEmblems").attr("font-size", sizeBurgs).html(burgString);
+
+    const provinceNodes = nodes.filter(node => node.type === "province");
+    const provinceString = provinceNodes
+      .map(
+        d =>
+          `<use data-i="${d.i}" x="${rn(d.x - d.shift)}" y="${rn(d.y - d.shift)}" width="${d.size}em" height="${
+            d.size
+          }em"/>`
+      )
+      .join("");
+    emblems.select("#provinceEmblems").attr("font-size", sizeProvinces).html(provinceString);
+
+    const stateNodes = nodes.filter(node => node.type === "state");
+    const stateString = stateNodes
+      .map(
+        d =>
+          `<use data-i="${d.i}" x="${rn(d.x - d.shift)}" y="${rn(d.y - d.shift)}" width="${d.size}em" height="${
+            d.size
+          }em"/>`
+      )
+      .join("");
+    emblems.select("#stateEmblems").attr("font-size", sizeStates).html(stateString);
+
+    invokeActiveZooming();
+  });
+
+  TIME && console.timeEnd("drawEmblems");
+}
+
+const getDataAndType = id => {
+  if (id === "burgEmblems") return [pack.burgs, "burg"];
+  if (id === "provinceEmblems") return [pack.provinces, "province"];
+  if (id === "stateEmblems") return [pack.states, "state"];
+  throw new Error(`Unknown emblem type: ${id}`);
+};
+
+async function renderGroupCOAs(g) {
+  const [data, type] = getDataAndType(g.id);
+
+  for (let use of g.children) {
+    const i = +use.dataset.i;
+    const id = type + "COA" + i;
+    COArenderer.trigger(id, data[i].coa);
+    use.setAttribute("href", "#" + id);
+  }
+}
diff --git a/modules/renderers/draw-features.js b/modules/renderers/draw-features.js
new file mode 100644
index 00000000..0112a0ae
--- /dev/null
+++ b/modules/renderers/draw-features.js
@@ -0,0 +1,66 @@
+"use strict";
+
+function drawFeatures() {
+  TIME && console.time("drawFeatures");
+
+  const html = {
+    paths: [],
+    landMask: [],
+    waterMask: ['<rect x="0" y="0" width="100%" height="100%" fill="white" />'],
+    coastline: {},
+    lakes: {}
+  };
+
+  for (const feature of pack.features) {
+    if (!feature || feature.type === "ocean") continue;
+
+    html.paths.push(`<path d="${getFeaturePath(feature)}" id="feature_${feature.i}" data-f="${feature.i}"></path>`);
+
+    if (feature.type === "lake") {
+      html.landMask.push(`<use href="#feature_${feature.i}" data-f="${feature.i}" fill="black"></use>`);
+
+      const lakeGroup = feature.group || "freshwater";
+      if (!html.lakes[lakeGroup]) html.lakes[lakeGroup] = [];
+      html.lakes[lakeGroup].push(`<use href="#feature_${feature.i}" data-f="${feature.i}"></use>`);
+    } else {
+      html.landMask.push(`<use href="#feature_${feature.i}" data-f="${feature.i}" fill="white"></use>`);
+      html.waterMask.push(`<use href="#feature_${feature.i}" data-f="${feature.i}" fill="black"></use>`);
+
+      const coastlineGroup = feature.group === "lake_island" ? "lake_island" : "sea_island";
+      if (!html.coastline[coastlineGroup]) html.coastline[coastlineGroup] = [];
+      html.coastline[coastlineGroup].push(`<use href="#feature_${feature.i}" data-f="${feature.i}"></use>`);
+    }
+  }
+
+  defs.select("#featurePaths").html(html.paths.join(""));
+  defs.select("#land").html(html.landMask.join(""));
+  defs.select("#water").html(html.waterMask.join(""));
+
+  coastline.selectAll("g").each(function () {
+    const paths = html.coastline[this.id] || [];
+    d3.select(this).html(paths.join(""));
+  });
+
+  lakes.selectAll("g").each(function () {
+    const paths = html.lakes[this.id] || [];
+    d3.select(this).html(paths.join(""));
+  });
+
+  TIME && console.timeEnd("drawFeatures");
+}
+
+function getFeaturePath(feature) {
+  const points = feature.vertices.map(vertex => pack.vertices.p[vertex]);
+  if (points.some(point => point === undefined)) {
+    ERROR && console.error("Undefined point in getFeaturePath");
+    return "";
+  }
+
+  const simplifiedPoints = simplify(points, 0.3);
+  const clippedPoints = clipPoly(simplifiedPoints, 1);
+
+  const lineGen = d3.line().curve(d3.curveBasisClosed);
+  const path = round(lineGen(clippedPoints)) + "Z";
+
+  return path;
+}
diff --git a/modules/renderers/draw-heightmap.js b/modules/renderers/draw-heightmap.js
new file mode 100644
index 00000000..cefed230
--- /dev/null
+++ b/modules/renderers/draw-heightmap.js
@@ -0,0 +1,144 @@
+"use strict";
+
+function drawHeightmap() {
+  TIME && console.time("drawHeightmap");
+
+  const ocean = terrs.select("#oceanHeights");
+  const land = terrs.select("#landHeights");
+
+  ocean.selectAll("*").remove();
+  land.selectAll("*").remove();
+
+  const paths = new Array(101);
+  const {cells, vertices} = grid;
+  const used = new Uint8Array(cells.i.length);
+  const heights = Array.from(cells.i).sort((a, b) => cells.h[a] - cells.h[b]);
+
+  // ocean cells
+  const renderOceanCells = Boolean(+ocean.attr("data-render"));
+  if (renderOceanCells) {
+    const skip = +ocean.attr("skip") + 1 || 1;
+    const relax = +ocean.attr("relax") || 0;
+    lineGen.curve(d3[ocean.attr("curve") || "curveBasisClosed"]);
+
+    let currentLayer = 0;
+    for (const i of heights) {
+      const h = cells.h[i];
+      if (h > currentLayer) currentLayer += skip;
+      if (h < currentLayer) continue;
+      if (currentLayer >= 20) break;
+      if (used[i]) continue; // already marked
+      const onborder = cells.c[i].some(n => cells.h[n] < h);
+      if (!onborder) continue;
+      const vertex = cells.v[i].find(v => vertices.c[v].some(i => cells.h[i] < h));
+      const chain = connectVertices(cells, vertices, vertex, h, used);
+      if (chain.length < 3) continue;
+      const points = simplifyLine(chain, relax).map(v => vertices.p[v]);
+      if (!paths[h]) paths[h] = "";
+      paths[h] += round(lineGen(points));
+    }
+  }
+
+  // land cells
+  {
+    const skip = +land.attr("skip") + 1 || 1;
+    const relax = +land.attr("relax") || 0;
+    lineGen.curve(d3[land.attr("curve") || "curveBasisClosed"]);
+
+    let currentLayer = 20;
+    for (const i of heights) {
+      const h = cells.h[i];
+      if (h > currentLayer) currentLayer += skip;
+      if (h < currentLayer) continue;
+      if (currentLayer > 100) break; // no layers possible with height > 100
+      if (used[i]) continue; // already marked
+      const onborder = cells.c[i].some(n => cells.h[n] < h);
+      if (!onborder) continue;
+
+      const startVertex = cells.v[i].find(v => vertices.c[v].some(i => cells.h[i] < h));
+      const chain = connectVertices(cells, vertices, startVertex, h, used);
+      if (chain.length < 3) continue;
+
+      const points = simplifyLine(chain, relax).map(v => vertices.p[v]);
+      if (!paths[h]) paths[h] = "";
+      paths[h] += round(lineGen(points));
+    }
+  }
+
+  // render paths
+  for (const height of d3.range(0, 101)) {
+    const group = height < 20 ? ocean : land;
+    const scheme = getColorScheme(group.attr("scheme"));
+
+    if (height === 0 && renderOceanCells) {
+      // draw base ocean layer
+      group
+        .append("rect")
+        .attr("x", 0)
+        .attr("y", 0)
+        .attr("width", graphWidth)
+        .attr("height", graphHeight)
+        .attr("fill", scheme(1));
+    }
+
+    if (height === 20) {
+      // draw base land layer
+      group
+        .append("rect")
+        .attr("x", 0)
+        .attr("y", 0)
+        .attr("width", graphWidth)
+        .attr("height", graphHeight)
+        .attr("fill", scheme(0.8));
+    }
+
+    if (paths[height] && paths[height].length >= 10) {
+      const terracing = group.attr("terracing") / 10 || 0;
+      const color = getColor(height, scheme);
+
+      if (terracing) {
+        group
+          .append("path")
+          .attr("d", paths[height])
+          .attr("transform", "translate(.7,1.4)")
+          .attr("fill", d3.color(color).darker(terracing))
+          .attr("data-height", height);
+      }
+      group.append("path").attr("d", paths[height]).attr("fill", color).attr("data-height", height);
+    }
+  }
+
+  // connect vertices to chain: specific case for heightmap
+  function connectVertices(cells, vertices, start, h, used) {
+    const MAX_ITERATIONS = vertices.c.length;
+
+    const n = cells.i.length;
+    const chain = []; // vertices chain to form a path
+    for (let i = 0, current = start; i === 0 || (current !== start && i < MAX_ITERATIONS); i++) {
+      const prev = chain[chain.length - 1]; // previous vertex in chain
+      chain.push(current); // add current vertex to sequence
+      const c = vertices.c[current]; // cells adjacent to vertex
+      c.filter(c => cells.h[c] === h).forEach(c => (used[c] = 1));
+      const c0 = c[0] >= n || cells.h[c[0]] < h;
+      const c1 = c[1] >= n || cells.h[c[1]] < h;
+      const c2 = c[2] >= n || cells.h[c[2]] < h;
+      const v = vertices.v[current]; // neighboring vertices
+      if (v[0] !== prev && c0 !== c1) current = v[0];
+      else if (v[1] !== prev && c1 !== c2) current = v[1];
+      else if (v[2] !== prev && c0 !== c2) current = v[2];
+      if (current === chain[chain.length - 1]) {
+        ERROR && console.error("Next vertex is not found");
+        break;
+      }
+    }
+    return chain;
+  }
+
+  function simplifyLine(chain, simplification) {
+    if (!simplification) return chain;
+    const n = simplification + 1; // filter each nth element
+    return chain.filter((d, i) => i % n === 0);
+  }
+
+  TIME && console.timeEnd("drawHeightmap");
+}
diff --git a/modules/renderers/draw-markers.js b/modules/renderers/draw-markers.js
new file mode 100644
index 00000000..f7466a55
--- /dev/null
+++ b/modules/renderers/draw-markers.js
@@ -0,0 +1,53 @@
+"use strict";
+
+function drawMarkers() {
+  TIME && console.time("drawMarkers");
+
+  const rescale = +markers.attr("rescale");
+  const pinned = +markers.attr("pinned");
+
+  const markersData = pinned ? pack.markers.filter(({pinned}) => pinned) : pack.markers;
+  const html = markersData.map(marker => drawMarker(marker, rescale));
+  markers.html(html.join(""));
+
+  TIME && console.timeEnd("drawMarkers");
+}
+
+// prettier-ignore
+const pinShapes = {
+  bubble: (fill, stroke) => `<path d="M6,19 l9,10 L24,19" fill="${stroke}" stroke="none" /><circle cx="15" cy="15" r="10" fill="${fill}" stroke="${stroke}"/>`,
+  pin: (fill, stroke) => `<path d="m 15,3 c -5.5,0 -9.7,4.09 -9.7,9.3 0,6.8 9.7,17 9.7,17 0,0 9.7,-10.2 9.7,-17 C 24.7,7.09 20.5,3 15,3 Z" fill="${fill}" stroke="${stroke}"/>`,
+  square: (fill, stroke) => `<path d="m 20,25 -5,4 -5,-4 z" fill="${stroke}"/><path d="M 5,5 H 25 V 25 H 5 Z" fill="${fill}" stroke="${stroke}"/>`,
+  squarish: (fill, stroke) => `<path d="m 5,5 h 20 v 20 h -6 l -4,4 -4,-4 H 5 Z" fill="${fill}" stroke="${stroke}" />`,
+  diamond: (fill, stroke) => `<path d="M 2,15 15,1 28,15 15,29 Z" fill="${fill}" stroke="${stroke}" />`,
+  hex: (fill, stroke) => `<path d="M 15,29 4.61,21 V 9 L 15,3 25.4,9 v 12 z" fill="${fill}" stroke="${stroke}" />`,
+  hexy: (fill, stroke) => `<path d="M 15,29 6,21 5,8 15,4 25,8 24,21 Z" fill="${fill}" stroke="${stroke}" />`,
+  shieldy: (fill, stroke) => `<path d="M 15,29 6,21 5,7 c 0,0 5,-3 10,-3 5,0 10,3 10,3 l -1,14 z" fill="${fill}" stroke="${stroke}" />`,
+  shield: (fill, stroke) => `<path d="M 4.6,5.2 H 25 v 6.7 A 20.3,20.4 0 0 1 15,29 20.3,20.4 0 0 1 4.6,11.9 Z" fill="${fill}" stroke="${stroke}" />`,
+  pentagon: (fill, stroke) => `<path d="M 4,16 9,4 h 12 l 5,12 -11,13 z" fill="${fill}" stroke="${stroke}" />`,
+  heptagon: (fill, stroke) => `<path d="M 15,29 6,22 4,12 10,4 h 10 l 6,8 -2,10 z" fill="${fill}" stroke="${stroke}" />`,
+  circle: (fill, stroke) => `<circle cx="15" cy="15" r="11" fill="${fill}" stroke="${stroke}" />`,
+  no: () => ""
+};
+
+const getPin = (shape = "bubble", fill = "#fff", stroke = "#000") => {
+  const shapeFunction = pinShapes[shape] || pinShapes.bubble;
+  return shapeFunction(fill, stroke);
+};
+
+function drawMarker(marker, rescale = 1) {
+  const {i, icon, x, y, dx = 50, dy = 50, px = 12, size = 30, pin, fill, stroke} = marker;
+  const id = `marker${i}`;
+  const zoomSize = rescale ? Math.max(rn(size / 5 + 24 / scale, 2), 1) : size;
+  const viewX = rn(x - zoomSize / 2, 1);
+  const viewY = rn(y - zoomSize, 1);
+
+  const isExternal = icon.startsWith("http") || icon.startsWith("data:image");
+
+  return /* html */ `
+    <svg id="${id}" viewbox="0 0 30 30" width="${zoomSize}" height="${zoomSize}" x="${viewX}" y="${viewY}">
+      <g>${getPin(pin, fill, stroke)}</g>
+      <text x="${dx}%" y="${dy}%" font-size="${px}px" >${isExternal ? "" : icon}</text>
+      <image x="${dx / 2}%" y="${dy / 2}%" width="${px}px" height="${px}px" href="${isExternal ? icon : ""}" />
+    </svg>`;
+}
diff --git a/modules/renderers/draw-military.js b/modules/renderers/draw-military.js
new file mode 100644
index 00000000..a332130f
--- /dev/null
+++ b/modules/renderers/draw-military.js
@@ -0,0 +1,155 @@
+"use strict";
+
+function drawMilitary() {
+  TIME && console.time("drawMilitary");
+
+  armies.selectAll("g").remove();
+  pack.states.filter(s => s.i && !s.removed).forEach(s => drawRegiments(s.military, s.i));
+
+  TIME && console.timeEnd("drawMilitary");
+}
+
+const drawRegiments = function (regiments, s) {
+  const size = +armies.attr("box-size");
+  const w = d => (d.n ? size * 4 : size * 6);
+  const h = size * 2;
+  const x = d => rn(d.x - w(d) / 2, 2);
+  const y = d => rn(d.y - size, 2);
+
+  const baseColor = pack.states[s].color[0] === "#" ? pack.states[s].color : "#999";
+  const darkerColor = d3.color(baseColor).darker().hex();
+  const army = armies
+    .append("g")
+    .attr("id", "army" + s)
+    .attr("fill", baseColor)
+    .attr("color", darkerColor);
+
+  const g = army
+    .selectAll("g")
+    .data(regiments)
+    .enter()
+    .append("g")
+    .attr("id", d => "regiment" + s + "-" + d.i)
+    .attr("data-name", d => d.name)
+    .attr("data-state", s)
+    .attr("data-id", d => d.i)
+    .attr("transform", d => (d.angle ? `rotate(${d.angle})` : null))
+    .attr("transform-origin", d => `${d.x}px ${d.y}px`);
+  g.append("rect")
+    .attr("x", d => x(d))
+    .attr("y", d => y(d))
+    .attr("width", d => w(d))
+    .attr("height", h);
+  g.append("text")
+    .attr("x", d => d.x)
+    .attr("y", d => d.y)
+    .attr("text-rendering", "optimizeSpeed")
+    .text(d => Military.getTotal(d));
+  g.append("rect")
+    .attr("fill", "currentColor")
+    .attr("x", d => x(d) - h)
+    .attr("y", d => y(d))
+    .attr("width", h)
+    .attr("height", h);
+  g.append("text")
+    .attr("class", "regimentIcon")
+    .attr("text-rendering", "optimizeSpeed")
+    .attr("x", d => x(d) - size)
+    .attr("y", d => d.y)
+    .text(d => (d.icon.startsWith("http") || d.icon.startsWith("data:image") ? "" : d.icon));
+  g.append("image")
+    .attr("class", "regimentImage")
+    .attr("x", d => x(d) - h)
+    .attr("y", d => y(d))
+    .attr("height", h)
+    .attr("width", h)
+    .attr("href", d => (d.icon.startsWith("http") || d.icon.startsWith("data:image") ? d.icon : ""));
+};
+
+const drawRegiment = function (reg, stateId) {
+  const size = +armies.attr("box-size");
+  const w = reg.n ? size * 4 : size * 6;
+  const h = size * 2;
+  const x1 = rn(reg.x - w / 2, 2);
+  const y1 = rn(reg.y - size, 2);
+
+  let army = armies.select("g#army" + stateId);
+  if (!army.size()) {
+    const baseColor = pack.states[stateId].color[0] === "#" ? pack.states[stateId].color : "#999";
+    const darkerColor = d3.color(baseColor).darker().hex();
+    army = armies
+      .append("g")
+      .attr("id", "army" + stateId)
+      .attr("fill", baseColor)
+      .attr("color", darkerColor);
+  }
+
+  const g = army
+    .append("g")
+    .attr("id", "regiment" + stateId + "-" + reg.i)
+    .attr("data-name", reg.name)
+    .attr("data-state", stateId)
+    .attr("data-id", reg.i)
+    .attr("transform", `rotate(${reg.angle || 0})`)
+    .attr("transform-origin", `${reg.x}px ${reg.y}px`);
+  g.append("rect").attr("x", x1).attr("y", y1).attr("width", w).attr("height", h);
+  g.append("text")
+    .attr("x", reg.x)
+    .attr("y", reg.y)
+    .attr("text-rendering", "optimizeSpeed")
+    .text(Military.getTotal(reg));
+  g.append("rect")
+    .attr("fill", "currentColor")
+    .attr("x", x1 - h)
+    .attr("y", y1)
+    .attr("width", h)
+    .attr("height", h);
+  g.append("text")
+    .attr("class", "regimentIcon")
+    .attr("text-rendering", "optimizeSpeed")
+    .attr("x", x1 - size)
+    .attr("y", reg.y)
+    .text(reg.icon.startsWith("http") || reg.icon.startsWith("data:image") ? "" : reg.icon);
+  g.append("image")
+    .attr("class", "regimentImage")
+    .attr("x", x1 - h)
+    .attr("y", y1)
+    .attr("height", h)
+    .attr("width", h)
+    .attr("href", reg.icon.startsWith("http") || reg.icon.startsWith("data:image") ? reg.icon : "");
+};
+
+// move one regiment to another
+const moveRegiment = function (reg, x, y) {
+  const el = armies.select("g#army" + reg.state).select("g#regiment" + reg.state + "-" + reg.i);
+  if (!el.size()) return;
+
+  const duration = Math.hypot(reg.x - x, reg.y - y) * 8;
+  reg.x = x;
+  reg.y = y;
+  const size = +armies.attr("box-size");
+  const w = reg.n ? size * 4 : size * 6;
+  const h = size * 2;
+  const x1 = x => rn(x - w / 2, 2);
+  const y1 = y => rn(y - size, 2);
+
+  const move = d3.transition().duration(duration).ease(d3.easeSinInOut);
+  el.select("rect").transition(move).attr("x", x1(x)).attr("y", y1(y));
+  el.select("text").transition(move).attr("x", x).attr("y", y);
+  el.selectAll("rect:nth-of-type(2)")
+    .transition(move)
+    .attr("x", x1(x) - h)
+    .attr("y", y1(y));
+  el.select(".regimentIcon")
+    .transition(move)
+    .attr("x", x1(x) - size)
+    .attr("y", y)
+    .attr("height", "6")
+    .attr("width", "6");
+  el.select(".regimentImage")
+    .transition(move)
+    .attr("x", x1(x) - h)
+    .attr("y", y1(y))
+    .attr("height", "6")
+    .attr("width", "6");
+};
diff --git a/modules/renderers/draw-relief-icons.js b/modules/renderers/draw-relief-icons.js
new file mode 100644
index 00000000..ffa0b69c
--- /dev/null
+++ b/modules/renderers/draw-relief-icons.js
@@ -0,0 +1,124 @@
+"use strict";
+
+function drawReliefIcons() {
+  TIME && console.time("drawRelief");
+  terrain.selectAll("*").remove();
+
+  const cells = pack.cells;
+  const density = terrain.attr("density") || 0.4;
+  const size = 2 * (terrain.attr("size") || 1);
+  const mod = 0.2 * size; // size modifier
+  const relief = [];
+
+  for (const i of cells.i) {
+    const height = cells.h[i];
+    if (height < 20) continue; // no icons on water
+    if (cells.r[i]) continue; // no icons on rivers
+    const biome = cells.biome[i];
+    if (height < 50 && biomesData.iconsDensity[biome] === 0) continue; // no icons for this biome
+
+    const polygon = getPackPolygon(i);
+    const [minX, maxX] = d3.extent(polygon, p => p[0]);
+    const [minY, maxY] = d3.extent(polygon, p => p[1]);
+
+    if (height < 50) placeBiomeIcons(i, biome);
+    else placeReliefIcons(i);
+
+    function placeBiomeIcons() {
+      const iconsDensity = biomesData.iconsDensity[biome] / 100;
+      const radius = 2 / iconsDensity / density;
+      if (Math.random() > iconsDensity * 10) return;
+
+      for (const [cx, cy] of poissonDiscSampler(minX, minY, maxX, maxY, radius)) {
+        if (!d3.polygonContains(polygon, [cx, cy])) continue;
+        let h = (4 + Math.random()) * size;
+        const icon = getBiomeIcon(i, biomesData.icons[biome]);
+        if (icon === "#relief-grass-1") h *= 1.2;
+        relief.push({i: icon, x: rn(cx - h, 2), y: rn(cy - h, 2), s: rn(h * 2, 2)});
+      }
+    }
+
+    function placeReliefIcons(i) {
+      const radius = 2 / density;
+      const [icon, h] = getReliefIcon(i, height);
+
+      for (const [cx, cy] of poissonDiscSampler(minX, minY, maxX, maxY, radius)) {
+        if (!d3.polygonContains(polygon, [cx, cy])) continue;
+        relief.push({i: icon, x: rn(cx - h, 2), y: rn(cy - h, 2), s: rn(h * 2, 2)});
+      }
+    }
+
+    function getReliefIcon(i, h) {
+      const temp = grid.cells.temp[pack.cells.g[i]];
+      const type = h > 70 && temp < 0 ? "mountSnow" : h > 70 ? "mount" : "hill";
+      const size = h > 70 ? (h - 45) * mod : minmax((h - 40) * mod, 3, 6);
+      return [getIcon(type), size];
+    }
+  }
+
+  // sort relief icons by y+size
+  relief.sort((a, b) => a.y + a.s - (b.y + b.s));
+
+  const reliefHTML = new Array(relief.length);
+  for (const r of relief) {
+    reliefHTML.push(`<use href="${r.i}" x="${r.x}" y="${r.y}" width="${r.s}" height="${r.s}"/>`);
+  }
+  terrain.html(reliefHTML.join(""));
+
+  TIME && console.timeEnd("drawRelief");
+
+  function getBiomeIcon(i, b) {
+    let type = b[Math.floor(Math.random() * b.length)];
+    const temp = grid.cells.temp[pack.cells.g[i]];
+    if (type === "conifer" && temp < 0) type = "coniferSnow";
+    return getIcon(type);
+  }
+
+  function getVariant(type) {
+    switch (type) {
+      case "mount":
+        return rand(2, 7);
+      case "mountSnow":
+        return rand(1, 6);
+      case "hill":
+        return rand(2, 5);
+      case "conifer":
+        return 2;
+      case "coniferSnow":
+        return 1;
+      case "swamp":
+        return rand(2, 3);
+      case "cactus":
+        return rand(1, 3);
+      case "deadTree":
+        return rand(1, 2);
+      default:
+        return 2;
+    }
+  }
+
+  function getOldIcon(type) {
+    switch (type) {
+      case "mountSnow":
+        return "mount";
+      case "vulcan":
+        return "mount";
+      case "coniferSnow":
+        return "conifer";
+      case "cactus":
+        return "dune";
+      case "deadTree":
+        return "dune";
+      default:
+        return type;
+    }
+  }
+
+  function getIcon(type) {
+    const set = terrain.attr("set") || "simple";
+    if (set === "simple") return "#relief-" + getOldIcon(type) + "-1";
+    if (set === "colored") return "#relief-" + type + "-" + getVariant(type);
+    if (set === "gray") return "#relief-" + type + "-" + getVariant(type) + "-bw";
+    return "#relief-" + getOldIcon(type) + "-1"; // simple
+  }
+}
diff --git a/modules/renderers/draw-scalebar.js b/modules/renderers/draw-scalebar.js
new file mode 100644
index 00000000..b318f0be
--- /dev/null
+++ b/modules/renderers/draw-scalebar.js
@@ -0,0 +1,103 @@
+"use strict";
+
+function drawScaleBar(scaleBar, scaleLevel) {
+  if (!scaleBar.size() || scaleBar.style("display") === "none") return;
+
+  const unit = distanceUnitInput.value;
+  const size = +scaleBar.attr("data-bar-size");
+
+  const length = getLength(scaleLevel, size);
+  scaleBar.select("#scaleBarContent").remove(); // redraw content every time
+  const content = scaleBar.append("g").attr("id", "scaleBarContent");
+
+  const lines = content.append("g");
+  lines
+    .append("line")
+    .attr("x1", 0.5)
+    .attr("y1", 0)
+    .attr("x2", length + size - 0.5)
+    .attr("y2", 0)
+    .attr("stroke-width", size)
+    .attr("stroke", "white");
+  lines
+    .append("line")
+    .attr("x1", 0)
+    .attr("y1", size)
+    .attr("x2", length + size)
+    .attr("y2", size)
+    .attr("stroke-width", size)
+    .attr("stroke", "#3d3d3d");
+  lines
+    .append("line")
+    .attr("x1", 0)
+    .attr("y1", 0)
+    .attr("x2", length + size)
+    .attr("y2", 0)
+    .attr("stroke-width", rn(size * 3, 2))
+    .attr("stroke-dasharray", size + " " + rn(length / 5 - size, 2))
+    .attr("stroke", "#3d3d3d");
+
+  const texts = content.append("g").attr("text-anchor", "middle").attr("font-family", "var(--serif)");
+  texts
+    .selectAll("text")
+    .data(d3.range(0, 6))
+    .enter()
+    .append("text")
+    .attr("text-rendering", "optimizeSpeed")
+    .attr("x", d => rn((d * length) / 5, 2))
+    .attr("y", 0)
+    .attr("dy", "-.6em")
+    .text(d => rn((((d * length) / 5) * distanceScale) / scaleLevel) + (d < 5 ? "" : " " + unit));
+
+  const label = scaleBar.attr("data-label");
+  if (label) {
+    texts
+      .append("text")
+      .attr("text-rendering", "optimizeSpeed")
+      .attr("x", (length + 1) / 2)
+      .attr("dy", ".6em")
+      .attr("dominant-baseline", "text-before-edge")
+      .text(label);
+  }
+
+  const scaleBarBack = scaleBar.select("#scaleBarBack");
+  if (scaleBarBack.size()) {
+    const bbox = content.node().getBBox();
+    const paddingTop = +scaleBarBack.attr("data-top") || 0;
+    const paddingLeft = +scaleBarBack.attr("data-left") || 0;
+    const paddingRight = +scaleBarBack.attr("data-right") || 0;
+    const paddingBottom = +scaleBarBack.attr("data-bottom") || 0;
+
+    scaleBar
+      .select("#scaleBarBack")
+      .attr("x", -paddingLeft)
+      .attr("y", -paddingTop)
+      .attr("width", bbox.width + paddingRight)
+      .attr("height", bbox.height + paddingBottom);
+  }
+}
+
+function getLength(scaleLevel) {
+  const init = 100;
+
+  const size = +scaleBar.attr("data-bar-size");
+  let val = (init * size * distanceScale) / scaleLevel; // bar length in distance unit
+  if (val > 900) val = rn(val, -3); // round to 1000
+  else if (val > 90) val = rn(val, -2); // round to 100
+  else if (val > 9) val = rn(val, -1); // round to 10
+  else val = rn(val); // round to 1
+  const length = (val * scaleLevel) / distanceScale; // actual length in pixels on this scale
+  return length;
+}
+
+function fitScaleBar(scaleBar, fullWidth, fullHeight) {
+  if (!scaleBar.select("rect").size() || scaleBar.style("display") === "none") return;
+
+  const posX = +scaleBar.attr("data-x") || 99;
+  const posY = +scaleBar.attr("data-y") || 99;
+  const bbox = scaleBar.select("rect").node().getBBox();
+
+  const x = rn((fullWidth * posX) / 100 - bbox.width + 10);
+  const y = rn((fullHeight * posY) / 100 - bbox.height + 20);
+  scaleBar.attr("transform", `translate(${x},${y})`);
+}
diff --git a/modules/renderers/state-labels.js b/modules/renderers/draw-state-labels.js
similarity index 53%
rename from modules/renderers/state-labels.js
rename to modules/renderers/draw-state-labels.js
index b0cf3001..9586a9c1 100644
--- a/modules/renderers/state-labels.js
+++ b/modules/renderers/draw-state-labels.js
@@ -2,7 +2,7 @@
 
 // list - an optional array of stateIds to regenerate
 function drawStateLabels(list) {
-  console.time("drawStateLabels");
+  TIME && console.time("drawStateLabels");
 
   // temporary make the labels visible
   const layerDisplay = labels.style("display");
@@ -14,11 +14,11 @@ function drawStateLabels(list) {
   // increase step to 15 or 30 to make it faster and more horyzontal
   // decrease step to 5 to improve accuracy
   const ANGLE_STEP = 9;
-  const raycast = precalculateAngles(ANGLE_STEP);
+  const angles = precalculateAngles(ANGLE_STEP);
 
-  const INITIAL_DISTANCE = 10;
-  const DISTANCE_STEP = 15;
-  const MAX_ITERATIONS = 100;
+  const LENGTH_START = 5;
+  const LENGTH_STEP = 5;
+  const LENGTH_MAX = 300;
 
   const labelPaths = getLabelPaths();
   const letterLength = checkExampleLetterLength();
@@ -35,87 +35,27 @@ function drawStateLabels(list) {
       if (list && !list.includes(state.i)) continue;
 
       const offset = getOffsetWidth(state.cells);
-      const maxLakeSize = state.cells / 50;
+      const maxLakeSize = state.cells / 20;
       const [x0, y0] = state.pole;
 
-      const offsetPoints = new Map(
-        (offset ? raycast : []).map(({angle, x: x1, y: y1}) => {
-          const [x, y] = [x0 + offset * x1, y0 + offset * y1];
-          return [angle, {x, y}];
-        })
-      );
-
-      const distances = raycast.map(({angle, x: dx, y: dy, modifier}) => {
-        let distanceMin;
-        const distance1 = getMaxDistance(state.i, {x: x0, y: y0}, dx, dy, maxLakeSize);
-
-        if (offset) {
-          const point2 = offsetPoints.get(angle - 90 < 0 ? angle + 270 : angle - 90);
-          const distance2 = getMaxDistance(state.i, point2, dx, dy, maxLakeSize);
-
-          const point3 = offsetPoints.get(angle + 90 >= 360 ? angle - 270 : angle + 90);
-          const distance3 = getMaxDistance(state.i, point3, dx, dy, maxLakeSize);
-
-          distanceMin = Math.min(distance1, distance2, distance3);
-        } else {
-          distanceMin = distance1;
-        }
-
-        const [x, y] = [x0 + distanceMin * dx, y0 + distanceMin * dy];
-        return {angle, distance: distanceMin * modifier, x, y};
+      const rays = angles.map(({angle, dx, dy}) => {
+        const {length, x, y} = raycast({stateId: state.i, x0, y0, dx, dy, maxLakeSize, offset});
+        return {angle, length, x, y};
       });
+      const [ray1, ray2] = findBestRayPair(rays);
 
-      const {
-        angle,
-        x: x1,
-        y: y1
-      } = distances.reduce(
-        (acc, {angle, distance, x, y}) => {
-          if (distance > acc.distance) return {angle, distance, x, y};
-          return acc;
-        },
-        {angle: 0, distance: 0, x: 0, y: 0}
-      );
+      const pathPoints = [[ray1.x, ray1.y], state.pole, [ray2.x, ray2.y]];
+      if (ray1.x > ray2.x) pathPoints.reverse();
 
-      const oppositeAngle = angle >= 180 ? angle - 180 : angle + 180;
-      const {x: x2, y: y2} = distances.reduce(
-        (acc, {angle, distance, x, y}) => {
-          const angleDif = getAnglesDif(angle, oppositeAngle);
-          const score = distance * getAngleModifier(angleDif);
-          if (score > acc.score) return {angle, score, x, y};
-          return acc;
-        },
-        {angle: 0, score: 0, x: 0, y: 0}
-      );
+      if (DEBUG.stateLabels) {
+        drawPoint(state.pole, {color: "black", radius: 1});
+        drawPath(pathPoints, {color: "black", width: 0.2});
+      }
 
-      const pathPoints = [[x1, y1], state.pole, [x2, y2]];
-      if (x1 > x2) pathPoints.reverse();
       labelPaths.push([state.i, pathPoints]);
     }
 
     return labelPaths;
-
-    function getMaxDistance(stateId, point, dx, dy, maxLakeSize) {
-      let distance = INITIAL_DISTANCE;
-
-      for (let i = 0; i < MAX_ITERATIONS; i++) {
-        const [x, y] = [point.x + distance * dx, point.y + distance * dy];
-        const cellId = findCell(x, y, DISTANCE_STEP);
-
-        // drawPoint([x, y], {color: cellId && isPassable(cellId) ? "blue" : "red", radius: 0.8});
-
-        if (!cellId || !isPassable(cellId)) break;
-        distance += DISTANCE_STEP;
-      }
-
-      return distance;
-
-      function isPassable(cellId) {
-        const feature = features[cells.f[cellId]];
-        if (feature.type === "lake") return feature.cells <= maxLakeSize;
-        return stateIds[cellId] === stateId;
-      }
-    }
   }
 
   function checkExampleLetterLength() {
@@ -129,7 +69,7 @@ function drawStateLabels(list) {
 
   function drawLabelPath(letterLength) {
     const mode = options.stateLabelsMode || "auto";
-    const lineGen = d3.line().curve(d3.curveBundle.beta(1));
+    const lineGen = d3.line().curve(d3.curveNatural);
 
     const textGroup = d3.select("g#labels > g#states");
     const pathGroup = d3.select("defs > g#deftemp > g#textPaths");
@@ -166,6 +106,7 @@ function drawStateLabels(list) {
 
       const textElement = textGroup
         .append("text")
+        .attr("text-rendering", "optimizeSpeed")
         .attr("id", "stateLabel" + stateId)
         .append("textPath")
         .attr("startOffset", "50%")
@@ -192,35 +133,15 @@ function drawStateLabels(list) {
       const text = pathLength > state.fullName.length * 1.8 ? state.fullName : state.name;
       textElement.innerHTML = `<tspan x="0">${text}</tspan>`;
 
-      const correctedRatio = minmax(rn((pathLength / text.length) * 50), 40, 130);
+      const correctedRatio = minmax(rn((pathLength / text.length) * 50), 50, 130);
       textElement.setAttribute("font-size", correctedRatio + "%");
     }
   }
 
-  // point offset to reduce label overlap with state borders
   function getOffsetWidth(cellsNumber) {
-    if (cellsNumber < 80) return 0;
-    if (cellsNumber < 140) return 5;
-    if (cellsNumber < 200) return 15;
-    if (cellsNumber < 300) return 20;
-    if (cellsNumber < 500) return 25;
-    return 30;
-  }
-
-  // difference between two angles in range [0, 180]
-  function getAnglesDif(angle1, angle2) {
-    return 180 - Math.abs(Math.abs(angle1 - angle2) - 180);
-  }
-
-  // score multiplier based on angle difference betwee left and right sides
-  function getAngleModifier(angleDif) {
-    if (angleDif === 0) return 1;
-    if (angleDif <= 15) return 0.95;
-    if (angleDif <= 30) return 0.9;
-    if (angleDif <= 45) return 0.6;
-    if (angleDif <= 60) return 0.3;
-    if (angleDif <= 90) return 0.1;
-    return 0; // >90
+    if (cellsNumber < 40) return 0;
+    if (cellsNumber < 200) return 5;
+    return 10;
   }
 
   function precalculateAngles(step) {
@@ -228,37 +149,135 @@ function drawStateLabels(list) {
     const RAD = Math.PI / 180;
 
     for (let angle = 0; angle < 360; angle += step) {
-      const x = Math.cos(angle * RAD);
-      const y = Math.sin(angle * RAD);
-      const angleDif = 90 - Math.abs((angle % 180) - 90);
-      const modifier = 1 - angleDif / 120; // [0.25, 1]
-      angles.push({angle, modifier, x, y});
+      const dx = Math.cos(angle * RAD);
+      const dy = Math.sin(angle * RAD);
+      angles.push({angle, dx, dy});
     }
 
     return angles;
   }
 
+  function raycast({stateId, x0, y0, dx, dy, maxLakeSize, offset}) {
+    let ray = {length: 0, x: x0, y: y0};
+
+    for (let length = LENGTH_START; length < LENGTH_MAX; length += LENGTH_STEP) {
+      const [x, y] = [x0 + length * dx, y0 + length * dy];
+      // offset points are perpendicular to the ray
+      const offset1 = [x + -dy * offset, y + dx * offset];
+      const offset2 = [x + dy * offset, y + -dx * offset];
+
+      if (DEBUG.stateLabels) {
+        drawPoint([x, y], {color: isInsideState(x, y) ? "blue" : "red", radius: 0.8});
+        drawPoint(offset1, {color: isInsideState(...offset1) ? "blue" : "red", radius: 0.4});
+        drawPoint(offset2, {color: isInsideState(...offset2) ? "blue" : "red", radius: 0.4});
+      }
+
+      const inState = isInsideState(x, y) && isInsideState(...offset1) && isInsideState(...offset2);
+      if (!inState) break;
+      ray = {length, x, y};
+    }
+
+    return ray;
+
+    function isInsideState(x, y) {
+      if (x < 0 || x > graphWidth || y < 0 || y > graphHeight) return false;
+      const cellId = findCell(x, y);
+
+      const feature = features[cells.f[cellId]];
+      if (feature.type === "lake") return isInnerLake(feature) || isSmallLake(feature);
+
+      return stateIds[cellId] === stateId;
+    }
+
+    function isInnerLake(feature) {
+      return feature.shoreline.every(cellId => stateIds[cellId] === stateId);
+    }
+
+    function isSmallLake(feature) {
+      return feature.cells <= maxLakeSize;
+    }
+  }
+
+  function findBestRayPair(rays) {
+    let bestPair = null;
+    let bestScore = -Infinity;
+
+    for (let i = 0; i < rays.length; i++) {
+      const score1 = rays[i].length * scoreRayAngle(rays[i].angle);
+
+      for (let j = i + 1; j < rays.length; j++) {
+        const score2 = rays[j].length * scoreRayAngle(rays[j].angle);
+        const pairScore = (score1 + score2) * scoreCurvature(rays[i].angle, rays[j].angle);
+
+        if (pairScore > bestScore) {
+          bestScore = pairScore;
+          bestPair = [rays[i], rays[j]];
+        }
+      }
+    }
+
+    return bestPair;
+  }
+
+  function scoreRayAngle(angle) {
+    const normalizedAngle = Math.abs(angle % 180); // [0, 180]
+    const horizontality = Math.abs(normalizedAngle - 90) / 90; // [0, 1]
+
+    if (horizontality === 1) return 1; // Best: horizontal
+    if (horizontality >= 0.75) return 0.9; // Very good: slightly slanted
+    if (horizontality >= 0.5) return 0.6; // Good: moderate slant
+    if (horizontality >= 0.25) return 0.5; // Acceptable: more slanted
+    if (horizontality >= 0.15) return 0.2; // Poor: almost vertical
+    return 0.1; // Very poor: almost vertical
+  }
+
+  function scoreCurvature(angle1, angle2) {
+    const delta = getAngleDelta(angle1, angle2);
+    const similarity = evaluateArc(angle1, angle2);
+
+    if (delta === 180) return 1; // straight line: best
+    if (delta < 90) return 0; // acute: not allowed
+    if (delta < 120) return 0.6 * similarity;
+    if (delta < 140) return 0.7 * similarity;
+    if (delta < 160) return 0.8 * similarity;
+
+    return similarity;
+  }
+
+  function getAngleDelta(angle1, angle2) {
+    let delta = Math.abs(angle1 - angle2) % 360;
+    if (delta > 180) delta = 360 - delta; // [0, 180]
+    return delta;
+  }
+
+  // compute arc similarity towards x-axis
+  function evaluateArc(angle1, angle2) {
+    const proximity1 = Math.abs((angle1 % 180) - 90);
+    const proximity2 = Math.abs((angle2 % 180) - 90);
+    return 1 - Math.abs(proximity1 - proximity2) / 90;
+  }
+
   function getLinesAndRatio(mode, name, fullName, pathLength) {
-    // short name
-    if (mode === "short" || (mode === "auto" && pathLength <= name.length)) {
-      const lines = splitInTwo(name);
+    if (mode === "short") return getShortOneLine();
+    if (pathLength > fullName.length * 2) return getFullOneLine();
+    return getFullTwoLines();
+
+    function getShortOneLine() {
+      const ratio = pathLength / name.length;
+      return [[name], minmax(rn(ratio * 60), 50, 150)];
+    }
+
+    function getFullOneLine() {
+      const ratio = pathLength / fullName.length;
+      return [[fullName], minmax(rn(ratio * 70), 70, 170)];
+    }
+
+    function getFullTwoLines() {
+      const lines = splitInTwo(fullName);
       const longestLineLength = d3.max(lines.map(({length}) => length));
       const ratio = pathLength / longestLineLength;
-      return [lines, minmax(rn(ratio * 60), 50, 150)];
+      return [lines, minmax(rn(ratio * 60), 70, 150)];
     }
-
-    // full name: one line
-    if (pathLength > fullName.length * 2) {
-      const lines = [fullName];
-      const ratio = pathLength / lines[0].length;
-      return [lines, minmax(rn(ratio * 70), 70, 170)];
-    }
-
-    // full name: two lines
-    const lines = splitInTwo(fullName);
-    const longestLineLength = d3.max(lines.map(({length}) => length));
-    const ratio = pathLength / longestLineLength;
-    return [lines, minmax(rn(ratio * 60), 70, 150)];
   }
 
   // check whether multi-lined label is mostly inside the state. If no, replace it with short name label
@@ -289,5 +308,5 @@ function drawStateLabels(list) {
     return false;
   }
 
-  console.timeEnd("drawStateLabels");
+  TIME && console.timeEnd("drawStateLabels");
 }
diff --git a/modules/renderers/draw-temperature.js b/modules/renderers/draw-temperature.js
new file mode 100644
index 00000000..51dc32f5
--- /dev/null
+++ b/modules/renderers/draw-temperature.js
@@ -0,0 +1,104 @@
+"use strict";
+
+function drawTemperature() {
+  TIME && console.time("drawTemperature");
+
+  temperature.selectAll("*").remove();
+  lineGen.curve(d3.curveBasisClosed);
+  const scheme = d3.scaleSequential(d3.interpolateSpectral);
+
+  const tMax = +byId("temperatureEquatorOutput").max;
+  const tMin = +byId("temperatureEquatorOutput").min;
+  const delta = tMax - tMin;
+
+  const {cells, vertices} = grid;
+  const n = cells.i.length;
+
+  const checkedCells = new Uint8Array(n);
+  const addToChecked = cellId => (checkedCells[cellId] = 1);
+
+  const min = d3.min(cells.temp);
+  const max = d3.max(cells.temp);
+  const step = Math.max(Math.round(Math.abs(min - max) / 5), 1);
+
+  const isolines = d3.range(min + step, max, step);
+  const chains = [];
+  const labels = []; // store label coordinates
+
+  for (const cellId of cells.i) {
+    const t = cells.temp[cellId];
+    if (checkedCells[cellId] || !isolines.includes(t)) continue;
+
+    const startingVertex = findStart(cellId, t);
+    if (!startingVertex) continue;
+    checkedCells[cellId] = 1;
+
+    const ofSameType = cellId => cells.temp[cellId] >= t;
+    const chain = connectVertices({vertices, startingVertex, ofSameType, addToChecked});
+    const relaxed = chain.filter((v, i) => i % 4 === 0 || vertices.c[v].some(c => c >= n));
+    if (relaxed.length < 6) continue;
+
+    const points = relaxed.map(v => vertices.p[v]);
+    chains.push([t, points]);
+    addLabel(points, t);
+  }
+
+  // min temp isoline covers all graph
+  temperature
+    .append("path")
+    .attr("d", `M0,0 h${graphWidth} v${graphHeight} h${-graphWidth} Z`)
+    .attr("fill", scheme(1 - (min - tMin) / delta))
+    .attr("stroke", "none");
+
+  for (const t of isolines) {
+    const path = chains
+      .filter(c => c[0] === t)
+      .map(c => round(lineGen(c[1])))
+      .join("");
+    if (!path) continue;
+    const fill = scheme(1 - (t - tMin) / delta),
+      stroke = d3.color(fill).darker(0.2);
+    temperature.append("path").attr("d", path).attr("fill", fill).attr("stroke", stroke);
+  }
+
+  const tempLabels = temperature.append("g").attr("id", "tempLabels").attr("fill-opacity", 1);
+  tempLabels
+    .selectAll("text")
+    .data(labels)
+    .enter()
+    .append("text")
+    .attr("x", d => d[0])
+    .attr("y", d => d[1])
+    .text(d => convertTemperature(d[2]));
+
+  // find cell with temp < isotherm and find vertex to start path detection
+  function findStart(i, t) {
+    if (cells.b[i]) return cells.v[i].find(v => vertices.c[v].some(c => c >= n)); // map border cell
+    return cells.v[i][cells.c[i].findIndex(c => cells.temp[c] < t || !cells.temp[c])];
+  }
+
+  function addLabel(points, t) {
+    const xCenter = svgWidth / 2;
+
+    // add label on isoline top center
+    const tc =
+      points[d3.scan(points, (a, b) => a[1] - b[1] + (Math.abs(a[0] - xCenter) - Math.abs(b[0] - xCenter)) / 2)];
+    pushLabel(tc[0], tc[1], t);
+
+    // add label on isoline bottom center
+    if (points.length > 20) {
+      const bc =
+        points[d3.scan(points, (a, b) => b[1] - a[1] + (Math.abs(a[0] - xCenter) - Math.abs(b[0] - xCenter)) / 2)];
+      const dist2 = (tc[1] - bc[1]) ** 2 + (tc[0] - bc[0]) ** 2; // square distance between this and top point
+      if (dist2 > 100) pushLabel(bc[0], bc[1], t);
+    }
+  }
+
+  function pushLabel(x, y, t) {
+    if (x < 20 || x > svgWidth - 20) return;
+    if (y < 20 || y > svgHeight - 20) return;
+    labels.push([x, y, t]);
+  }
+
+  TIME && console.timeEnd("drawTemperature");
+}
diff --git a/modules/resample.js b/modules/resample.js
new file mode 100644
index 00000000..21349b9e
--- /dev/null
+++ b/modules/resample.js
@@ -0,0 +1,367 @@
+"use strict";
+
+window.Resample = (function () {
+  /*
+    generate new map based on an existing one (resampling parentMap)
+    parentMap: {grid, pack, notes} from original map
+    projection: f(Number, Number) -> [Number, Number]
+    inverse: f(Number, Number) -> [Number, Number]
+    scale: Number
+  */
+  function process({projection, inverse, scale}) {
+    const parentMap = {grid: deepCopy(grid), pack: deepCopy(pack), notes: deepCopy(notes)};
+    const riversData = saveRiversData(pack.rivers);
+
+    grid = generateGrid();
+    pack = {};
+    notes = parentMap.notes;
+
+    resamplePrimaryGridData(parentMap, inverse, scale);
+
+    Features.markupGrid();
+    addLakesInDeepDepressions();
+    openNearSeaLakes();
+
+    OceanLayers();
+    calculateMapCoordinates();
+    calculateTemperatures();
+
+    reGraph();
+    Features.markupPack();
+    createDefaultRuler();
+
+    restoreCellData(parentMap, inverse, scale);
+    restoreRivers(riversData, projection, scale);
+    restoreCultures(parentMap, projection);
+    restoreBurgs(parentMap, projection, scale);
+    restoreStates(parentMap, projection);
+    restoreRoutes(parentMap, projection);
+    restoreReligions(parentMap, projection);
+    restoreProvinces(parentMap);
+    restoreFeatureDetails(parentMap, inverse);
+    restoreMarkers(parentMap, projection);
+    restoreZones(parentMap, projection, scale);
+
+    showStatistics();
+  }
+
+  function resamplePrimaryGridData(parentMap, inverse, scale) {
+    grid.cells.h = new Uint8Array(grid.points.length);
+    grid.cells.temp = new Int8Array(grid.points.length);
+    grid.cells.prec = new Uint8Array(grid.points.length);
+
+    grid.points.forEach(([x, y], newGridCell) => {
+      const [parentX, parentY] = inverse(x, y);
+      const parentPackCell = parentMap.pack.cells.q.find(parentX, parentY, Infinity)[2];
+      const parentGridCell = parentMap.pack.cells.g[parentPackCell];
+
+      grid.cells.h[newGridCell] = parentMap.grid.cells.h[parentGridCell];
+      grid.cells.temp[newGridCell] = parentMap.grid.cells.temp[parentGridCell];
+      grid.cells.prec[newGridCell] = parentMap.grid.cells.prec[parentGridCell];
+    });
+
+    if (scale >= 2) smoothHeightmap();
+  }
+
+  function smoothHeightmap() {
+    grid.cells.h.forEach((height, newGridCell) => {
+      const heights = [height, ...grid.cells.c[newGridCell].map(c => grid.cells.h[c])];
+      const meanHeight = d3.mean(heights);
+      grid.cells.h[newGridCell] = isWater(grid, newGridCell) ? Math.min(meanHeight, 19) : Math.max(meanHeight, 20);
+    });
+  }
+
+  function restoreCellData(parentMap, inverse, scale) {
+    pack.cells.biome = new Uint8Array(pack.cells.i.length);
+    pack.cells.fl = new Uint16Array(pack.cells.i.length);
+    pack.cells.s = new Int16Array(pack.cells.i.length);
+    pack.cells.pop = new Float32Array(pack.cells.i.length);
+    pack.cells.culture = new Uint16Array(pack.cells.i.length);
+    pack.cells.state = new Uint16Array(pack.cells.i.length);
+    pack.cells.burg = new Uint16Array(pack.cells.i.length);
+    pack.cells.religion = new Uint16Array(pack.cells.i.length);
+    pack.cells.province = new Uint16Array(pack.cells.i.length);
+
+    const parentPackCellGroups = groupCellsByType(parentMap.pack);
+    const parentPackLandCellsQuadtree = d3.quadtree(parentPackCellGroups.land);
+
+    for (const newPackCell of pack.cells.i) {
+      const [x, y] = inverse(...pack.cells.p[newPackCell]);
+      if (isWater(pack, newPackCell)) continue;
+
+      const parentPackCell = parentPackLandCellsQuadtree.find(x, y, Infinity)[2];
+      const parentCellArea = parentMap.pack.cells.area[parentPackCell];
+      const areaRatio = pack.cells.area[newPackCell] / parentCellArea;
+      const scaleRatio = areaRatio / scale;
+
+      pack.cells.biome[newPackCell] = parentMap.pack.cells.biome[parentPackCell];
+      pack.cells.fl[newPackCell] = parentMap.pack.cells.fl[parentPackCell];
+      pack.cells.s[newPackCell] = parentMap.pack.cells.s[parentPackCell] * scaleRatio;
+      pack.cells.pop[newPackCell] = parentMap.pack.cells.pop[parentPackCell] * scaleRatio;
+      pack.cells.culture[newPackCell] = parentMap.pack.cells.culture[parentPackCell];
+      pack.cells.state[newPackCell] = parentMap.pack.cells.state[parentPackCell];
+      pack.cells.religion[newPackCell] = parentMap.pack.cells.religion[parentPackCell];
+      pack.cells.province[newPackCell] = parentMap.pack.cells.province[parentPackCell];
+    }
+  }
+
+  function saveRiversData(parentRivers) {
+    return parentRivers.map(river => {
+      const meanderedPoints = Rivers.addMeandering(river.cells, river.points);
+      return {...river, meanderedPoints};
+    });
+  }
+
+  function restoreRivers(riversData, projection, scale) {
+    pack.cells.r = new Uint16Array(pack.cells.i.length);
+    pack.cells.conf = new Uint8Array(pack.cells.i.length);
+
+    pack.rivers = riversData
+      .map(river => {
+        let wasInMap = true;
+        const points = [];
+
+        river.meanderedPoints.forEach(([parentX, parentY]) => {
+          const [x, y] = projection(parentX, parentY);
+          const inMap = isInMap(x, y);
+          if (inMap || wasInMap) points.push([rn(x, 2), rn(y, 2)]);
+          wasInMap = inMap;
+        });
+        if (points.length < 2) return null;
+
+        const cells = points.map(point => findCell(...point));
+        cells.forEach(cellId => {
+          if (pack.cells.r[cellId]) pack.cells.conf[cellId] = 1;
+          pack.cells.r[cellId] = river.i;
+        });
+
+        const widthFactor = river.widthFactor * scale;
+        return {...river, cells, points, source: cells.at(0), mouth: cells.at(-2), widthFactor};
+      })
+      .filter(Boolean);
+
+    pack.rivers.forEach(river => {
+      river.basin = Rivers.getBasin(river.i);
+      river.length = Rivers.getApproximateLength(river.points);
+    });
+  }
+
+  function restoreCultures(parentMap, projection) {
+    const validCultures = new Set(pack.cells.culture);
+    const culturePoles = getPolesOfInaccessibility(pack, cellId => pack.cells.culture[cellId]);
+    pack.cultures = parentMap.pack.cultures.map(culture => {
+      if (!culture.i || culture.removed) return culture;
+      if (!validCultures.has(culture.i)) return {...culture, removed: true, lock: false};
+
+      const [xp, yp] = projection(...parentMap.pack.cells.p[culture.center]);
+      const [x, y] = [rn(xp, 2), rn(yp, 2)];
+      const centerCoords = isInMap(x, y) ? [x, y] : culturePoles[culture.i];
+      const center = findCell(...centerCoords);
+      return {...culture, center};
+    });
+  }
+
+  function restoreBurgs(parentMap, projection, scale) {
+    const packLandCellsQuadtree = d3.quadtree(groupCellsByType(pack).land);
+    const findLandCell = (x, y) => packLandCellsQuadtree.find(x, y, Infinity)?.[2];
+
+    pack.burgs = parentMap.pack.burgs.map(burg => {
+      if (!burg.i || burg.removed) return burg;
+      burg.population *= scale; // adjust for populationRate change
+
+      const [xp, yp] = projection(burg.x, burg.y);
+      if (!isInMap(xp, yp)) return {...burg, removed: true, lock: false};
+
+      const closestCell = findCell(xp, yp);
+      const cell = isWater(pack, closestCell) ? findLandCell(xp, yp) : closestCell;
+
+      if (pack.cells.burg[cell]) {
+        WARN && console.warn(`Cell ${cell} already has a burg. Removing burg ${burg.name} (${burg.i})`);
+        return {...burg, removed: true, lock: false};
+      }
+
+      pack.cells.burg[cell] = burg.i;
+      const [x, y] = getBurgCoordinates(burg, closestCell, cell, xp, yp);
+      return {...burg, cell, x, y};
+    });
+
+    function getBurgCoordinates(burg, closestCell, cell, xp, yp) {
+      const haven = pack.cells.haven[cell];
+      if (burg.port && haven) return BurgsAndStates.getCloseToEdgePoint(cell, haven);
+
+      if (closestCell !== cell) return pack.cells.p[cell];
+      return [rn(xp, 2), rn(yp, 2)];
+    }
+  }
+
+  function restoreStates(parentMap, projection) {
+    const validStates = new Set(pack.cells.state);
+    pack.states = parentMap.pack.states.map(state => {
+      if (!state.i || state.removed) return state;
+      if (validStates.has(state.i)) return state;
+      return {...state, removed: true, lock: false};
+    });
+
+    BurgsAndStates.getPoles();
+    const regimentCellsMap = {};
+    const VERTICAL_GAP = 8;
+
+    pack.states = pack.states.map(state => {
+      if (!state.i || state.removed) return state;
+
+      const capital = pack.burgs[state.capital];
+      state.center = !capital || capital.removed ? findCell(...state.pole) : capital.cell;
+
+      const military = state.military.map(regiment => {
+        const cellCoords = projection(...parentMap.pack.cells.p[regiment.cell]);
+        const cell = isInMap(...cellCoords) ? findCell(...cellCoords) : state.center;
+
+        const [xPos, yPos] = projection(regiment.x, regiment.y);
+        const [xBase, yBase] = projection(regiment.bx, regiment.by);
+        const [xCell, yCell] = pack.cells.p[cell];
+
+        const regsOnCell = regimentCellsMap[cell] || 0;
+        regimentCellsMap[cell] = regsOnCell + 1;
+
+        const name =
+          isInMap(xPos, yPos) || regiment.name.includes("[relocated]") ? regiment.name : `[relocated] ${regiment.name}`;
+
+        const pos = isInMap(xPos, yPos)
+          ? {x: rn(xPos, 2), y: rn(yPos, 2)}
+          : {x: xCell, y: yCell + regsOnCell * VERTICAL_GAP};
+
+        const base = isInMap(xBase, yBase) ? {bx: rn(xBase, 2), by: rn(yBase, 2)} : {bx: xCell, by: yCell};
+
+        return {...regiment, cell, name, ...base, ...pos};
+      });
+
+      const neighbors = state.neighbors.filter(stateId => validStates.has(stateId));
+      return {...state, neighbors, military};
+    });
+  }
+
+  function restoreRoutes(parentMap, projection) {
+    pack.routes = parentMap.pack.routes
+      .map(route => {
+        let wasInMap = true;
+        const points = [];
+
+        route.points.forEach(([parentX, parentY]) => {
+          const [x, y] = projection(parentX, parentY);
+          const inMap = isInMap(x, y);
+          if (inMap || wasInMap) points.push([rn(x, 2), rn(y, 2)]);
+          wasInMap = inMap;
+        });
+        if (points.length < 2) return null;
+
+        const bbox = [0, 0, graphWidth, graphHeight];
+        const clipped = lineclip(points, bbox)[0].map(([x, y]) => [rn(x, 2), rn(y, 2), findCell(x, y)]);
+        const firstCell = clipped[0][2];
+        const feature = pack.cells.f[firstCell];
+        return {...route, feature, points: clipped};
+      })
+      .filter(Boolean);
+
+    pack.cells.routes = Routes.buildLinks(pack.routes);
+  }
+
+  function restoreReligions(parentMap, projection) {
+    const validReligions = new Set(pack.cells.religion);
+    const religionPoles = getPolesOfInaccessibility(pack, cellId => pack.cells.religion[cellId]);
+
+    pack.religions = parentMap.pack.religions.map(religion => {
+      if (!religion.i || religion.removed) return religion;
+      if (!validReligions.has(religion.i)) return {...religion, removed: true, lock: false};
+
+      const [xp, yp] = projection(...parentMap.pack.cells.p[religion.center]);
+      const [x, y] = [rn(xp, 2), rn(yp, 2)];
+      const centerCoords = isInMap(x, y) ? [x, y] : religionPoles[religion.i];
+      const center = findCell(...centerCoords);
+      return {...religion, center};
+    });
+  }
+
+  function restoreProvinces(parentMap) {
+    const validProvinces = new Set(pack.cells.province);
+    pack.provinces = parentMap.pack.provinces.map(province => {
+      if (!province.i || province.removed) return province;
+      if (!validProvinces.has(province.i)) return {...province, removed: true, lock: false};
+
+      return province;
+    });
+
+    Provinces.getPoles();
+
+    pack.provinces.forEach(province => {
+      if (!province.i || province.removed) return;
+      const capital = pack.burgs[province.burg];
+      province.center = !capital?.removed ? capital.cell : findCell(...province.pole);
+    });
+  }
+
+  function restoreMarkers(parentMap, projection) {
+    pack.markers = parentMap.pack.markers;
+    pack.markers.forEach(marker => {
+      const [x, y] = projection(marker.x, marker.y);
+      if (!isInMap(x, y)) Markers.deleteMarker(marker.i);
+
+      const cell = findCell(x, y);
+      marker.x = rn(x, 2);
+      marker.y = rn(y, 2);
+      marker.cell = cell;
+    });
+  }
+
+  function restoreZones(parentMap, projection, scale) {
+    const getSearchRadius = cellId => Math.sqrt(parentMap.pack.cells.area[cellId] / Math.PI) * scale;
+
+    pack.zones = parentMap.pack.zones.map(zone => {
+      const cells = zone.cells
+        .map(cellId => {
+          const [x, y] = projection(...parentMap.pack.cells.p[cellId]);
+          if (!isInMap(x, y)) return null;
+          return findAll(x, y, getSearchRadius(cellId));
+        })
+        .filter(Boolean)
+        .flat();
+
+      return {...zone, cells: unique(cells)};
+    });
+  }
+
+  function restoreFeatureDetails(parentMap, inverse) {
+    pack.features.forEach(feature => {
+      if (!feature) return;
+      const [x, y] = pack.cells.p[feature.firstCell];
+      const [parentX, parentY] = inverse(x, y);
+      const parentCell = parentMap.pack.cells.q.find(parentX, parentY, Infinity)[2];
+      if (parentCell === undefined) return;
+      const parentFeature = parentMap.pack.features[parentMap.pack.cells.f[parentCell]];
+
+      if (parentFeature.group) feature.group = parentFeature.group;
+      if (parentFeature.name) feature.name = parentFeature.name;
+      if (parentFeature.height) feature.height = parentFeature.height;
+    });
+  }
+
+  function groupCellsByType(graph) {
+    return graph.cells.p.reduce(
+      (acc, [x, y], cellId) => {
+        const group = isWater(graph, cellId) ? "water" : "land";
+        acc[group].push([x, y, cellId]);
+        return acc;
+      },
+      {land: [], water: []}
+    );
+  }
+
+  function isWater(graph, cellId) {
+    return graph.cells.h[cellId] < 20;
+  }
+
+  function isInMap(x, y) {
+    return x >= 0 && x <= graphWidth && y >= 0 && y <= graphHeight;
+  }
+
+  return {process};
+})();
diff --git a/modules/river-generator.js b/modules/river-generator.js
index fd8a95b4..254e1af8 100644
--- a/modules/river-generator.js
+++ b/modules/river-generator.js
@@ -8,6 +8,7 @@ window.Rivers = (function () {
 
     const riversData = {}; // rivers data
     const riverParents = {};
+
     const addCellToRiver = function (cell, river) {
       if (!riversData[river]) riversData[river] = [cell];
       else riversData[river].push(cell);
@@ -19,7 +20,7 @@ window.Rivers = (function () {
     let riverNext = 1; // first river id is 1
 
     const h = alterHeights();
-    Lakes.prepareLakeData(h);
+    Lakes.detectCloseLakes(h);
     resolveDepressions(h);
     drainWater();
     defineRivers();
@@ -35,14 +36,12 @@ window.Rivers = (function () {
     TIME && console.timeEnd("generateRivers");
 
     function drainWater() {
-      //const MIN_FLUX_TO_FORM_RIVER = 10 * distanceScale;
       const MIN_FLUX_TO_FORM_RIVER = 30;
       const cellsNumberModifier = (pointsInput.dataset.cells / 10000) ** 0.25;
 
       const prec = grid.cells.prec;
-      const area = pack.cells.area;
       const land = cells.i.filter(i => h[i] >= 20).sort((a, b) => h[b] - h[a]);
-      const lakeOutCells = Lakes.setClimateData(h);
+      const lakeOutCells = Lakes.defineClimateData(h);
 
       land.forEach(function (i) {
         cells.fl[i] += prec[cells.g[i]] / cellsNumberModifier; // add flux from precipitation
@@ -191,7 +190,15 @@ window.Rivers = (function () {
         const meanderedPoints = addMeandering(riverCells);
         const discharge = cells.fl[mouth]; // m3 in second
         const length = getApproximateLength(meanderedPoints);
-        const width = getWidth(getOffset(discharge, meanderedPoints.length, widthFactor, 0));
+        const sourceWidth = getSourceWidth(cells.fl[source]);
+        const width = getWidth(
+          getOffset({
+            flux: discharge,
+            pointIndex: meanderedPoints.length,
+            widthFactor,
+            startingWidth: sourceWidth
+          })
+        );
 
         pack.rivers.push({
           i: riverId,
@@ -201,7 +208,7 @@ window.Rivers = (function () {
           length,
           width,
           widthFactor,
-          sourceWidth: 0,
+          sourceWidth,
           parent,
           cells: riverCells
         });
@@ -307,59 +314,49 @@ window.Rivers = (function () {
 
   // add points at 1/3 and 2/3 of a line between adjacents river cells
   const addMeandering = function (riverCells, riverPoints = null, meandering = 0.5) {
-    const {fl, conf, h} = pack.cells;
+    const {fl, h} = pack.cells;
     const meandered = [];
     const lastStep = riverCells.length - 1;
     const points = getRiverPoints(riverCells, riverPoints);
     let step = h[riverCells[0]] < 20 ? 1 : 10;
 
-    let fluxPrev = 0;
-    const getFlux = (step, flux) => (step === lastStep ? fluxPrev : flux);
-
     for (let i = 0; i <= lastStep; i++, step++) {
       const cell = riverCells[i];
       const isLastCell = i === lastStep;
 
       const [x1, y1] = points[i];
-      const flux1 = getFlux(i, fl[cell]);
-      fluxPrev = flux1;
 
-      meandered.push([x1, y1, flux1]);
+      meandered.push([x1, y1, fl[cell]]);
       if (isLastCell) break;
 
       const nextCell = riverCells[i + 1];
       const [x2, y2] = points[i + 1];
 
       if (nextCell === -1) {
-        meandered.push([x2, y2, fluxPrev]);
+        meandered.push([x2, y2, fl[cell]]);
         break;
       }
 
       const dist2 = (x2 - x1) ** 2 + (y2 - y1) ** 2; // square distance between cells
       if (dist2 <= 25 && riverCells.length >= 6) continue;
 
-      const flux2 = getFlux(i + 1, fl[nextCell]);
-      const keepInitialFlux = conf[nextCell] || flux1 === flux2;
-
       const meander = meandering + 1 / step + Math.max(meandering - step / 100, 0);
       const angle = Math.atan2(y2 - y1, x2 - x1);
       const sinMeander = Math.sin(angle) * meander;
       const cosMeander = Math.cos(angle) * meander;
 
-      if (step < 10 && (dist2 > 64 || (dist2 > 36 && riverCells.length < 5))) {
+      if (step < 20 && (dist2 > 64 || (dist2 > 36 && riverCells.length < 5))) {
         // if dist2 is big or river is small add extra points at 1/3 and 2/3 of segment
         const p1x = (x1 * 2 + x2) / 3 + -sinMeander;
         const p1y = (y1 * 2 + y2) / 3 + cosMeander;
         const p2x = (x1 + x2 * 2) / 3 + sinMeander / 2;
         const p2y = (y1 + y2 * 2) / 3 - cosMeander / 2;
-        const [p1fl, p2fl] = keepInitialFlux ? [flux1, flux1] : [(flux1 * 2 + flux2) / 3, (flux1 + flux2 * 2) / 3];
-        meandered.push([p1x, p1y, p1fl], [p2x, p2y, p2fl]);
+        meandered.push([p1x, p1y, 0], [p2x, p2y, 0]);
       } else if (dist2 > 25 || riverCells.length < 6) {
         // if dist is medium or river is small add 1 extra middlepoint
         const p1x = (x1 + x2) / 2 + -sinMeander;
         const p1y = (y1 + y2) / 2 + cosMeander;
-        const p1fl = keepInitialFlux ? flux1 : (flux1 + flux2) / 2;
-        meandered.push([p1x, p1y, p1fl]);
+        meandered.push([p1x, p1y, 0]);
       }
     }
 
@@ -386,29 +383,35 @@ window.Rivers = (function () {
   };
 
   const FLUX_FACTOR = 500;
-  const MAX_FLUX_WIDTH = 2;
+  const MAX_FLUX_WIDTH = 1;
   const LENGTH_FACTOR = 200;
-  const STEP_WIDTH = 1 / LENGTH_FACTOR;
+  const LENGTH_STEP_WIDTH = 1 / LENGTH_FACTOR;
   const LENGTH_PROGRESSION = [1, 1, 2, 3, 5, 8, 13, 21, 34].map(n => n / LENGTH_FACTOR);
-  const MAX_PROGRESSION = last(LENGTH_PROGRESSION);
 
-  const getOffset = (flux, pointNumber, widthFactor, startingWidth = 0) => {
-    const fluxWidth = Math.min(flux ** 0.9 / FLUX_FACTOR, MAX_FLUX_WIDTH);
-    const lengthWidth = pointNumber * STEP_WIDTH + (LENGTH_PROGRESSION[pointNumber] || MAX_PROGRESSION);
+  const getOffset = ({flux, pointIndex, widthFactor, startingWidth}) => {
+    if (pointIndex === 0) return startingWidth;
+
+    const fluxWidth = Math.min(flux ** 0.7 / FLUX_FACTOR, MAX_FLUX_WIDTH);
+    const lengthWidth = pointIndex * LENGTH_STEP_WIDTH + (LENGTH_PROGRESSION[pointIndex] || LENGTH_PROGRESSION.at(-1));
     return widthFactor * (lengthWidth + fluxWidth) + startingWidth;
   };
 
+  const getSourceWidth = flux => rn(Math.min(flux ** 0.9 / FLUX_FACTOR, MAX_FLUX_WIDTH), 2);
+
   // build polygon from a list of points and calculated offset (width)
-  const getRiverPath = function (points, widthFactor, startingWidth = 0) {
+  const getRiverPath = (points, widthFactor, startingWidth) => {
+    lineGen.curve(d3.curveCatmullRom.alpha(0.1));
     const riverPointsLeft = [];
     const riverPointsRight = [];
+    let flux = 0;
 
-    for (let p = 0; p < points.length; p++) {
-      const [x0, y0] = points[p - 1] || points[p];
-      const [x1, y1, flux] = points[p];
-      const [x2, y2] = points[p + 1] || points[p];
+    for (let pointIndex = 0; pointIndex < points.length; pointIndex++) {
+      const [x0, y0] = points[pointIndex - 1] || points[pointIndex];
+      const [x1, y1, pointFlux] = points[pointIndex];
+      const [x2, y2] = points[pointIndex + 1] || points[pointIndex];
+      if (pointFlux > flux) flux = pointFlux;
 
-      const offset = getOffset(flux, p, widthFactor, startingWidth);
+      const offset = getOffset({flux, pointIndex, widthFactor, startingWidth});
       const angle = Math.atan2(y0 - y2, x0 - x2);
       const sinOffset = Math.sin(angle) * offset;
       const cosOffset = Math.cos(angle) * offset;
@@ -508,6 +511,7 @@ window.Rivers = (function () {
     getBasin,
     getWidth,
     getOffset,
+    getSourceWidth,
     getApproximateLength,
     getRiverPoints,
     remove,
diff --git a/modules/routes-generator.js b/modules/routes-generator.js
index 376e9d03..c0aa7681 100644
--- a/modules/routes-generator.js
+++ b/modules/routes-generator.js
@@ -1,6 +1,15 @@
 const ROUTES_SHARP_ANGLE = 135;
 const ROUTES_VERY_SHARP_ANGLE = 115;
 
+const MIN_PASSABLE_SEA_TEMP = -4;
+const ROUTE_TYPE_MODIFIERS = {
+  "-1": 1, // coastline
+  "-2": 1.8, // sea
+  "-3": 4, // open sea
+  "-4": 6, // ocean
+  default: 8 // far ocean
+};
+
 window.Routes = (function () {
   function generate(lockedRoutes = []) {
     const {capitalsByFeature, burgsByFeature, portsByFeature} = sortBurgsByFeature(pack.burgs);
@@ -118,10 +127,9 @@ window.Routes = (function () {
     }
 
     function findPathSegments({isWater, connections, start, exit}) {
-      const from = findPath(isWater, start, exit, connections);
-      if (!from) return [];
-
-      const pathCells = restorePath(start, exit, from);
+      const getCost = createCostEvaluator({isWater, connections});
+      const pathCells = findPath(start, current => current === exit, getCost);
+      if (!pathCells) return [];
       const segments = getRouteSegments(pathCells, connections);
       return segments;
     }
@@ -172,29 +180,61 @@ window.Routes = (function () {
 
       return routesMerged > 1 ? mergeRoutes(routes) : routes;
     }
+  }
 
-    function buildLinks(routes) {
-      const links = {};
+  function createCostEvaluator({isWater, connections}) {
+    return isWater ? getWaterPathCost : getLandPathCost;
 
-      for (const {points, i: routeId} of routes) {
-        const cells = points.map(p => p[2]);
+    function getLandPathCost(current, next) {
+      if (pack.cells.h[next] < 20) return Infinity; // ignore water cells
 
-        for (let i = 0; i < cells.length - 1; i++) {
-          const cellId = cells[i];
-          const nextCellId = cells[i + 1];
+      const habitability = biomesData.habitability[pack.cells.biome[next]];
+      if (!habitability) return Infinity; // inhabitable cells are not passable (e.g. glacier)
 
-          if (cellId !== nextCellId) {
-            if (!links[cellId]) links[cellId] = {};
-            links[cellId][nextCellId] = routeId;
+      const distanceCost = dist2(pack.cells.p[current], pack.cells.p[next]);
+      const habitabilityModifier = 1 + Math.max(100 - habitability, 0) / 1000; // [1, 1.1];
+      const heightModifier = 1 + Math.max(pack.cells.h[next] - 25, 25) / 25; // [1, 3];
+      const connectionModifier = connections.has(`${current}-${next}`) ? 0.5 : 1;
+      const burgModifier = pack.cells.burg[next] ? 1 : 3;
 
-            if (!links[nextCellId]) links[nextCellId] = {};
-            links[nextCellId][cellId] = routeId;
-          }
+      const pathCost = distanceCost * habitabilityModifier * heightModifier * connectionModifier * burgModifier;
+      return pathCost;
+    }
+
+    function getWaterPathCost(current, next) {
+      if (pack.cells.h[next] >= 20) return Infinity; // ignore land cells
+      if (grid.cells.temp[pack.cells.g[next]] < MIN_PASSABLE_SEA_TEMP) return Infinity; // ignore too cold cells
+
+      const distanceCost = dist2(pack.cells.p[current], pack.cells.p[next]);
+      const typeModifier = ROUTE_TYPE_MODIFIERS[pack.cells.t[next]] || ROUTE_TYPE_MODIFIERS.default;
+      const connectionModifier = connections.has(`${current}-${next}`) ? 0.5 : 1;
+
+      const pathCost = distanceCost * typeModifier * connectionModifier;
+      return pathCost;
+    }
+  }
+
+  function buildLinks(routes) {
+    const links = {};
+
+    for (const {points, i: routeId} of routes) {
+      const cells = points.map(p => p[2]);
+
+      for (let i = 0; i < cells.length - 1; i++) {
+        const cellId = cells[i];
+        const nextCellId = cells[i + 1];
+
+        if (cellId !== nextCellId) {
+          if (!links[cellId]) links[cellId] = {};
+          links[cellId][nextCellId] = routeId;
+
+          if (!links[nextCellId]) links[nextCellId] = {};
+          links[nextCellId][cellId] = routeId;
         }
       }
-
-      return links;
     }
+
+    return links;
   }
 
   function preparePointsArray() {
@@ -249,109 +289,6 @@ window.Routes = (function () {
     return data; // [[x, y, cell], [x, y, cell]];
   }
 
-  const MIN_PASSABLE_SEA_TEMP = -4;
-  const TYPE_MODIFIERS = {
-    "-1": 1, // coastline
-    "-2": 1.8, // sea
-    "-3": 4, // open sea
-    "-4": 6, // ocean
-    default: 8 // far ocean
-  };
-
-  function findPath(isWater, start, exit, connections) {
-    const {temp} = grid.cells;
-    const {cells} = pack;
-
-    const from = [];
-    const cost = [];
-    const queue = new FlatQueue();
-    queue.push(start, 0);
-
-    return isWater ? findWaterPath() : findLandPath();
-
-    function findLandPath() {
-      while (queue.length) {
-        const priority = queue.peekValue();
-        const next = queue.pop();
-
-        for (const neibCellId of cells.c[next]) {
-          if (neibCellId === exit) {
-            from[neibCellId] = next;
-            return from;
-          }
-
-          if (cells.h[neibCellId] < 20) continue; // ignore water cells
-          const habitability = biomesData.habitability[cells.biome[neibCellId]];
-          if (!habitability) continue; // inhabitable cells are not passable (eg. lava, glacier)
-
-          const distanceCost = dist2(cells.p[next], cells.p[neibCellId]);
-          const habitabilityModifier = 1 + Math.max(100 - habitability, 0) / 1000; // [1, 1.1];
-          const heightModifier = 1 + Math.max(cells.h[neibCellId] - 25, 25) / 25; // [1, 3];
-          const connectionModifier = connections.has(`${next}-${neibCellId}`) ? 1 : 2;
-          const burgModifier = cells.burg[neibCellId] ? 1 : 3;
-
-          const cellsCost = distanceCost * habitabilityModifier * heightModifier * connectionModifier * burgModifier;
-          const totalCost = priority + cellsCost;
-
-          if (totalCost >= cost[neibCellId]) continue;
-          from[neibCellId] = next;
-          cost[neibCellId] = totalCost;
-          queue.push(neibCellId, totalCost);
-        }
-      }
-
-      return null; // path is not found
-    }
-
-    function findWaterPath() {
-      while (queue.length) {
-        const priority = queue.peekValue();
-        const next = queue.pop();
-
-        for (const neibCellId of cells.c[next]) {
-          if (neibCellId === exit) {
-            from[neibCellId] = next;
-            return from;
-          }
-
-          if (cells.h[neibCellId] >= 20) continue; // ignore land cells
-          if (temp[cells.g[neibCellId]] < MIN_PASSABLE_SEA_TEMP) continue; // ignore too cold cells
-
-          const distanceCost = dist2(cells.p[next], cells.p[neibCellId]);
-          const typeModifier = TYPE_MODIFIERS[cells.t[neibCellId]] || TYPE_MODIFIERS.default;
-          const connectionModifier = connections.has(`${next}-${neibCellId}`) ? 1 : 2;
-
-          const cellsCost = distanceCost * typeModifier * connectionModifier;
-          const totalCost = priority + cellsCost;
-
-          if (totalCost >= cost[neibCellId]) continue;
-          from[neibCellId] = next;
-          cost[neibCellId] = totalCost;
-          queue.push(neibCellId, totalCost);
-        }
-      }
-
-      return null; // path is not found
-    }
-  }
-
-  function restorePath(start, end, from) {
-    const cells = [];
-
-    let current = end;
-    let prev = end;
-
-    while (current !== start) {
-      cells.push(current);
-      prev = from[current];
-      current = prev;
-    }
-
-    cells.push(current);
-
-    return cells;
-  }
-
   function getRouteSegments(pathCells, connections) {
     const segments = [];
     let segment = [];
@@ -422,21 +359,16 @@ window.Routes = (function () {
 
   // connect cell with routes system by land
   function connect(cellId) {
-    if (isConnected(cellId)) return;
+    const getCost = createCostEvaluator({isWater: false, connections: new Map()});
+    const pathCells = findPath(cellId, isConnected, getCost);
+    if (!pathCells) return;
 
-    const {cells, routes} = pack;
-
-    const path = findConnectionPath(cellId);
-    if (!path) return;
-
-    const pathCells = restorePath(...path);
     const pointsArray = preparePointsArray();
     const points = getPoints("trails", pathCells, pointsArray);
-    const feature = cells.f[cellId];
-
-    const routeId = Math.max(...routes.map(route => route.i)) + 1;
+    const feature = pack.cells.f[cellId];
+    const routeId = getNextId();
     const newRoute = {i: routeId, group: "trails", feature, points};
-    routes.push(newRoute);
+    pack.routes.push(newRoute);
 
     for (let i = 0; i < pathCells.length; i++) {
       const cellId = pathCells[i];
@@ -446,43 +378,6 @@ window.Routes = (function () {
 
     return newRoute;
 
-    function findConnectionPath(start) {
-      const from = [];
-      const cost = [];
-      const queue = new FlatQueue();
-      queue.push(start, 0);
-
-      while (queue.length) {
-        const priority = queue.peekValue();
-        const next = queue.pop();
-
-        for (const neibCellId of cells.c[next]) {
-          if (isConnected(neibCellId)) {
-            from[neibCellId] = next;
-            return [start, neibCellId, from];
-          }
-
-          if (cells.h[neibCellId] < 20) continue; // ignore water cells
-          const habitability = biomesData.habitability[cells.biome[neibCellId]];
-          if (!habitability) continue; // inhabitable cells are not passable (eg. lava, glacier)
-
-          const distanceCost = dist2(cells.p[next], cells.p[neibCellId]);
-          const habitabilityModifier = 1 + Math.max(100 - habitability, 0) / 1000; // [1, 1.1];
-          const heightModifier = 1 + Math.max(cells.h[neibCellId] - 25, 25) / 25; // [1, 3];
-
-          const cellsCost = distanceCost * habitabilityModifier * heightModifier;
-          const totalCost = priority + cellsCost;
-
-          if (totalCost >= cost[neibCellId]) continue;
-          from[neibCellId] = next;
-          cost[neibCellId] = totalCost;
-          queue.push(neibCellId, totalCost);
-        }
-      }
-
-      return null; // path is not found
-    }
-
     function addConnection(from, to, routeId) {
       const routes = pack.cells.routes;
 
@@ -496,7 +391,7 @@ window.Routes = (function () {
 
   // utility functions
   function isConnected(cellId) {
-    const {routes} = pack.cells;
+    const routes = pack.cells.routes;
     return routes[cellId] && Object.keys(routes[cellId]).length > 0;
   }
 
@@ -507,22 +402,34 @@ window.Routes = (function () {
 
   function getRoute(from, to) {
     const routeId = pack.cells.routes[from]?.[to];
-    return routeId === undefined ? null : pack.routes[routeId];
+    if (routeId === undefined) return null;
+
+    const route = pack.routes.find(route => route.i === routeId);
+    if (!route) return null;
+
+    return route;
   }
 
   function hasRoad(cellId) {
     const connections = pack.cells.routes[cellId];
     if (!connections) return false;
-    return Object.values(connections).some(routeId => pack.routes[routeId].group === "roads");
+
+    return Object.values(connections).some(routeId => {
+      const route = pack.routes.find(route => route.i === routeId);
+      if (!route) return false;
+      return route.group === "roads";
+    });
   }
 
   function isCrossroad(cellId) {
     const connections = pack.cells.routes[cellId];
     if (!connections) return false;
-    return (
-      Object.keys(connections).length > 3 ||
-      Object.values(connections).filter(routeId => pack.routes[routeId].group === "roads").length > 2
-    );
+    if (Object.keys(connections).length > 3) return true;
+    const roadConnections = Object.values(connections).filter(routeId => {
+      const route = pack.routes.find(route => route.i === routeId);
+      return route?.group === "roads";
+    });
+    return roadConnections.length > 2;
   }
 
   // name generator data
@@ -706,11 +613,16 @@ window.Routes = (function () {
     return path.getTotalLength();
   }
 
+  function getNextId() {
+    return pack.routes.length ? Math.max(...pack.routes.map(r => r.i)) + 1 : 0;
+  }
+
   function remove(route) {
     const routes = pack.cells.routes;
 
     for (const point of route.points) {
       const from = point[2];
+      if (!routes[from]) continue;
 
       for (const [to, routeId] of Object.entries(routes[from])) {
         if (routeId === route.i) {
@@ -721,14 +633,12 @@ window.Routes = (function () {
     }
 
     pack.routes = pack.routes.filter(r => r.i !== route.i);
-    viewbox
-      .select("#routes")
-      .select("#route" + route.i)
-      .remove();
+    viewbox.select("#route" + route.i).remove();
   }
 
   return {
     generate,
+    buildLinks,
     connect,
     isConnected,
     areConnected,
@@ -738,6 +648,7 @@ window.Routes = (function () {
     generateName,
     getPath,
     getLength,
+    getNextId,
     remove
   };
 })();
diff --git a/modules/submap.js b/modules/submap.js
index 6a9593ca..3c783fb0 100644
--- a/modules/submap.js
+++ b/modules/submap.js
@@ -1,31 +1,26 @@
 "use strict";
-/*
-Cell resampler module used by submapper and resampler (transform)
-main function: resample(options);
-*/
 
 window.Submap = (function () {
   const isWater = (pack, id) => pack.cells.h[id] < 20;
   const inMap = (x, y) => x > 0 && x < graphWidth && y > 0 && y < graphHeight;
 
-  function resample(parentMap, options) {
-    /*
+  /*
     generate new map based on an existing one (resampling parentMap)
     parentMap: {seed, grid, pack} from original map
     options = {
-          projection: f(Number,Number)->[Number, Number]
-                      function to calculate new coordinates
-          inverse: g(Number,Number)->[Number, Number]
-                    inverse of f
-          depressRivers: Bool     carve out riverbeds?
-          smoothHeightMap: Bool   run smooth filter on heights
-          addLakesInDepressions:  call FMG original funtion on heightmap
+      projection: f(Number,Number)->[Number, Number]
+                  function to calculate new coordinates
+      inverse: g(Number,Number)->[Number, Number]
+                inverse of f
+      depressRivers: Bool     carve out riverbeds?
+      smoothHeightMap: Bool   run smooth filter on heights
+      addLakesInDepressions:  call FMG original funtion on heightmap
 
-          lockMarkers: Bool       Auto lock all copied markers
-          lockBurgs: Bool         Auto lock all copied burgs
+      lockMarkers: Bool       Auto lock all copied markers
+      lockBurgs: Bool         Auto lock all copied burgs
       }
     */
-
+  function resample(parentMap, options) {
     const projection = options.projection;
     const inverse = options.inverse;
     const stage = s => INFO && console.info("SUBMAP:", s);
@@ -36,9 +31,7 @@ window.Submap = (function () {
     seed = parentMap.seed;
     Math.random = aleaPRNG(seed);
     INFO && console.group("SubMap with seed: " + seed);
-    DEBUG && console.info("Using Options:", options);
 
-    // create new grid
     applyGraphSize();
     grid = generateGrid();
 
@@ -53,7 +46,7 @@ window.Submap = (function () {
       }
     };
 
-    stage("Resampling heightmap, temperature and precipitation.");
+    stage("Resampling heightmap, temperature and precipitation");
     // resample heightmap from old WorldState
     const n = grid.points.length;
     grid.cells.h = new Uint8Array(n); // heightmap
@@ -87,7 +80,7 @@ window.Submap = (function () {
     }
 
     if (options.depressRivers) {
-      stage("Generating riverbeds.");
+      stage("Generating riverbeds");
       const rbeds = new Uint16Array(grid.cells.i.length);
 
       // and erode riverbeds
@@ -96,7 +89,7 @@ window.Submap = (function () {
           if (oldpc < 0) return; // ignore out-of-map marker (-1)
           const oldc = parentMap.pack.cells.g[oldpc];
           const targetCells = forwardGridMap[oldc];
-          if (!targetCells) throw "TargetCell shouldn't be empty.";
+          if (!targetCells) throw "TargetCell shouldn't be empty";
           targetCells.forEach(c => {
             if (grid.cells.h[c] < 20) return;
             rbeds[c] = 1;
@@ -110,33 +103,27 @@ window.Submap = (function () {
       });
     }
 
-    stage("Detect features, ocean and generating lakes.");
-    markFeatures();
-    markupGridOcean();
+    stage("Detect features, ocean and generating lakes");
+    Features.markupGrid();
 
-    // Warning: addLakesInDeepDepressions can be very slow!
-    if (options.addLakesInDepressions) {
-      addLakesInDeepDepressions();
-      openNearSeaLakes();
-    }
+    addLakesInDeepDepressions();
+    openNearSeaLakes();
 
     OceanLayers();
 
     calculateMapCoordinates();
-    // calculateTemperatures();
-    // generatePrecipitation();
-    stage("Cell cleanup.");
+    calculateTemperatures();
+    generatePrecipitation();
+    stage("Cell cleanup");
     reGraph();
 
     // remove misclassified cells
-    stage("Define coastline.");
-    drawCoastline();
+    stage("Define coastline");
+    Features.markupPack();
+    createDefaultRuler();
 
-    /****************************************************/
-    /* Packed Graph */
-    /****************************************************/
+    // Packed Graph
     const oldCells = parentMap.pack.cells;
-    // const reverseMap = new Map(); // cellmap from new -> oldcell
     const forwardMap = parentMap.pack.cells.p.map(_ => []); // old -> [newcelllist]
 
     const pn = pack.cells.i.length;
@@ -147,7 +134,7 @@ window.Submap = (function () {
     cells.religion = new Uint16Array(pn);
     cells.province = new Uint16Array(pn);
 
-    stage("Resampling culture, state and religion map.");
+    stage("Resampling culture, state and religion map");
     for (const [id, gridCellId] of cells.g.entries()) {
       const oldGridId = reverseGridMap[gridCellId];
       if (oldGridId === undefined) {
@@ -206,14 +193,12 @@ window.Submap = (function () {
       forwardMap[oldid].push(id);
     }
 
-    stage("Regenerating river network.");
+    stage("Regenerating river network");
     Rivers.generate();
-    drawRivers();
-    Lakes.defineGroup();
 
     // biome calculation based on (resampled) grid.cells.temp and prec
     // it's safe to recalculate.
-    stage("Regenerating Biome.");
+    stage("Regenerating Biome");
     Biomes.define();
     // recalculate suitability and population
     // TODO: normalize according to the base-map
@@ -234,11 +219,11 @@ window.Submap = (function () {
       c.center = newCenters.length ? newCenters[0] : pack.cells.culture.findIndex(x => x === i);
     });
 
-    stage("Porting and locking burgs.");
+    stage("Porting and locking burgs");
     copyBurgs(parentMap, projection, options);
 
     // transfer states, mark states without land as removed.
-    stage("Porting states.");
+    stage("Porting states");
     const validStates = new Set(pack.cells.state);
     pack.states = parentMap.pack.states;
     // keep valid states and neighbors only
@@ -252,9 +237,10 @@ window.Submap = (function () {
         ? pack.burgs[s.capital].cell // capital is the best bet
         : pack.cells.state.findIndex(x => x === i); // otherwise use the first valid cell
     });
+    BurgsAndStates.getPoles();
 
     // transfer provinces, mark provinces without land as removed.
-    stage("Porting provinces.");
+    stage("Porting provinces");
     const validProvinces = new Set(pack.cells.province);
     pack.provinces = parentMap.pack.provinces;
     // mark uneccesary provinces
@@ -267,20 +253,15 @@ window.Submap = (function () {
       const newCenters = forwardMap[p.center];
       p.center = newCenters.length ? newCenters[0] : pack.cells.province.findIndex(x => x === i);
     });
+    Provinces.getPoles();
 
-    BurgsAndStates.drawBurgs();
-
-    stage("Regenerating routes network.");
+    stage("Regenerating routes network");
     regenerateRoutes();
 
-    drawStates();
-    drawBorders();
-    drawStateLabels();
-
     Rivers.specify();
-    Lakes.generateName();
+    Features.specify();
 
-    stage("Porting military.");
+    stage("Porting military");
     for (const s of pack.states) {
       if (!s.military) continue;
       for (const m of s.military) {
@@ -291,9 +272,8 @@ window.Submap = (function () {
       }
       s.military = s.military.filter(m => m.cell).map((m, i) => ({...m, i}));
     }
-    Military.redraw();
 
-    stage("Copying markers.");
+    stage("Copying markers");
     for (const m of pack.markers) {
       const [x, y] = projection(m.x, m.y);
       if (!inMap(x, y)) {
@@ -307,14 +287,12 @@ window.Submap = (function () {
     }
     if (layerIsOn("toggleMarkers")) drawMarkers();
 
-    stage("Redraw emblems.");
-    drawEmblems();
-    stage("Regenerating Zones.");
-    addZones();
+    stage("Regenerating Zones");
+    Zones.generate();
     Names.getMapName();
-    stage("Restoring Notes.");
+    stage("Restoring Notes");
     notes = parentMap.notes;
-    stage("Submap done.");
+    stage("Submap done");
 
     WARN && console.warn(`TOTAL: ${rn((performance.now() - timeStart) / 1000, 2)}s`);
     showStatistics();
@@ -394,7 +372,7 @@ window.Submap = (function () {
           b.removed = true;
           return;
         }
-        DEBUG && console.info(`Moving ${b.name} from ${cityCell} to ${newCell} near ${neighbor}.`);
+
         [b.x, b.y] = b.port ? getCloseToEdgePoint(newCell, neighbor) : cells.p[newCell];
         if (b.port) b.port = cells.f[neighbor]; // copy feature number
         b.cell = newCell;
diff --git a/modules/ui/3d.js b/modules/ui/3d.js
index 81356130..f0b29661 100644
--- a/modules/ui/3d.js
+++ b/modules/ui/3d.js
@@ -373,7 +373,7 @@ window.ThreeD = (function () {
       }
 
       // icons
-      if (layerIsOn("toggleIcons")) {
+      if (layerIsOn("toggleBurgIcons")) {
         const geometry = isCity ? city_icon_geometry : town_icon_geometry;
         const material = isCity ? city_icon_material : town_icon_material;
         const iconMesh = new THREE.Mesh(geometry, material);
@@ -444,6 +444,7 @@ window.ThreeD = (function () {
       const url = await getMapURL("mesh", {
         noLabels: options.labels3d,
         noWater: options.extendedWater,
+        noViewbox: true,
         fullMap: true
       });
       const canvas = document.createElement("canvas");
@@ -623,7 +624,7 @@ window.ThreeD = (function () {
       material.map = texture;
       if (addMesh) addGlobe3dMesh();
     };
-    img2.src = await getMapURL("mesh", {noScaleBar: true, fullMap: true});
+    img2.src = await getMapURL("mesh", {noScaleBar: true, fullMap: true, noVignette: true});
   }
 
   function addGlobe3dMesh() {
diff --git a/modules/ui/ai-generator.js b/modules/ui/ai-generator.js
new file mode 100644
index 00000000..8ef13cf6
--- /dev/null
+++ b/modules/ui/ai-generator.js
@@ -0,0 +1,228 @@
+"use strict";
+
+const PROVIDERS = {
+  openai: {
+    keyLink: "https://platform.openai.com/account/api-keys",
+    generate: generateWithOpenAI
+  },
+  anthropic: {
+    keyLink: "https://console.anthropic.com/account/keys",
+    generate: generateWithAnthropic
+  },
+  ollama: {
+    keyLink: "https://github.com/Azgaar/Fantasy-Map-Generator/wiki/Ollama-text-generation",
+    generate: generateWithOllama
+  }
+};
+
+const DEFAULT_MODEL = "gpt-4o-mini";
+
+const MODELS = {
+  "gpt-4o-mini": "openai",
+  "chatgpt-4o-latest": "openai",
+  "gpt-4o": "openai",
+  "gpt-4-turbo": "openai",
+  o3: "openai",
+  "o3-mini": "openai",
+  "o3-pro": "openai",
+  "o4-mini": "openai",
+  "claude-opus-4-20250514": "anthropic",
+  "claude-sonnet-4-20250514": "anthropic",
+  "claude-3-5-haiku-latest": "anthropic",
+  "claude-3-5-sonnet-latest": "anthropic",
+  "claude-3-opus-latest": "anthropic",
+  "ollama (local models)": "ollama"
+};
+
+const SYSTEM_MESSAGE = "I'm working on my fantasy map.";
+
+async function generateWithOpenAI({key, model, prompt, temperature, onContent}) {
+  const headers = {
+    "Content-Type": "application/json",
+    Authorization: `Bearer ${key}`
+  };
+
+  const messages = [
+    {role: "system", content: SYSTEM_MESSAGE},
+    {role: "user", content: prompt}
+  ];
+
+  const response = await fetch("https://api.openai.com/v1/chat/completions", {
+    method: "POST",
+    headers,
+    body: JSON.stringify({model, messages, temperature, stream: true})
+  });
+
+  const getContent = json => {
+    const content = json.choices?.[0]?.delta?.content;
+    if (content) onContent(content);
+  };
+
+  await handleStream(response, getContent);
+}
+
+async function generateWithAnthropic({key, model, prompt, temperature, onContent}) {
+  const headers = {
+    "Content-Type": "application/json",
+    "x-api-key": key,
+    "anthropic-version": "2023-06-01",
+    "anthropic-dangerous-direct-browser-access": "true"
+  };
+
+  const messages = [{role: "user", content: prompt}];
+
+  const response = await fetch("https://api.anthropic.com/v1/messages", {
+    method: "POST",
+    headers,
+    body: JSON.stringify({model, system: SYSTEM_MESSAGE, messages, temperature, max_tokens: 4096, stream: true})
+  });
+
+  const getContent = json => {
+    const content = json.delta?.text;
+    if (content) onContent(content);
+  };
+
+  await handleStream(response, getContent);
+}
+
+async function generateWithOllama({key, model, prompt, temperature, onContent}) {
+  const ollamaModelName = key; // for Ollama, 'key' is the actual model name entered by the user
+
+  const response = await fetch("http://localhost:11434/api/generate", {
+    method: "POST",
+    headers: {"Content-Type": "application/json"},
+    body: JSON.stringify({
+      model: ollamaModelName,
+      prompt,
+      system: SYSTEM_MESSAGE,
+      options: {temperature},
+      stream: true
+    })
+  });
+
+  const getContent = json => {
+    if (json.response) onContent(json.response);
+  };
+
+  await handleStream(response, getContent);
+}
+
+async function handleStream(response, getContent) {
+  if (!response.ok) {
+    let errorMessage = `Failed to generate (${response.status} ${response.statusText})`;
+    try {
+      const json = await response.json();
+      errorMessage = json.error?.message || json.error || errorMessage;
+    } catch {}
+    throw new Error(errorMessage);
+  }
+
+  const reader = response.body.getReader();
+  const decoder = new TextDecoder("utf-8");
+  let buffer = "";
+
+  while (true) {
+    const {done, value} = await reader.read();
+    if (done) break;
+
+    buffer += decoder.decode(value, {stream: true});
+    const lines = buffer.split("\n");
+
+    for (let i = 0; i < lines.length - 1; i++) {
+      const line = lines[i].trim();
+      if (!line) continue;
+      if (line === "data: [DONE]") break;
+
+      try {
+        const parsed = line.startsWith("data: ") ? JSON.parse(line.slice(6)) : JSON.parse(line);
+        getContent(parsed);
+      } catch (error) {
+        ERROR && console.error("Failed to parse line:", line, error);
+      }
+    }
+
+    buffer = lines.at(-1);
+  }
+}
+
+function generateWithAi(defaultPrompt, onApply) {
+  updateValues();
+
+  $("#aiGenerator").dialog({
+    title: "AI Text Generator",
+    position: {my: "center", at: "center", of: "svg"},
+    resizable: false,
+    buttons: {
+      Generate: function (e) {
+        generate(e.target);
+      },
+      Apply: function () {
+        const result = byId("aiGeneratorResult").value;
+        if (!result) return tip("No result to apply", true, "error", 4000);
+        onApply(result);
+        $(this).dialog("close");
+      },
+      Close: function () {
+        $(this).dialog("close");
+      }
+    }
+  });
+
+  if (modules.generateWithAi) return;
+  modules.generateWithAi = true;
+
+  byId("aiGeneratorKeyHelp").on("click", function (e) {
+    const model = byId("aiGeneratorModel").value;
+    const provider = MODELS[model];
+    openURL(PROVIDERS[provider].keyLink);
+  });
+
+  function updateValues() {
+    byId("aiGeneratorResult").value = "";
+    byId("aiGeneratorPrompt").value = defaultPrompt;
+    byId("aiGeneratorTemperature").value = localStorage.getItem("fmg-ai-temperature") || "1";
+
+    const select = byId("aiGeneratorModel");
+    select.options.length = 0;
+    Object.keys(MODELS).forEach(model => select.options.add(new Option(model, model)));
+    select.value = localStorage.getItem("fmg-ai-model");
+    if (!select.value || !MODELS[select.value]) select.value = DEFAULT_MODEL;
+
+    const provider = MODELS[select.value];
+    byId("aiGeneratorKey").value = localStorage.getItem(`fmg-ai-kl-${provider}`) || "";
+  }
+
+  async function generate(button) {
+    const key = byId("aiGeneratorKey").value;
+    if (!key) return tip("Please enter an API key", true, "error", 4000);
+
+    const model = byId("aiGeneratorModel").value;
+    if (!model) return tip("Please select a model", true, "error", 4000);
+    localStorage.setItem("fmg-ai-model", model);
+
+    const provider = MODELS[model];
+    localStorage.setItem(`fmg-ai-kl-${provider}`, key);
+
+    const prompt = byId("aiGeneratorPrompt").value;
+    if (!prompt) return tip("Please enter a prompt", true, "error", 4000);
+
+    const temperature = byId("aiGeneratorTemperature").valueAsNumber;
+    if (isNaN(temperature)) return tip("Temperature must be a number", true, "error", 4000);
+    localStorage.setItem("fmg-ai-temperature", temperature);
+
+    try {
+      button.disabled = true;
+      const resultArea = byId("aiGeneratorResult");
+      resultArea.disabled = true;
+      resultArea.value = "";
+      const onContent = content => (resultArea.value += content);
+
+      await PROVIDERS[provider].generate({key, model, prompt, temperature, onContent});
+    } catch (error) {
+      return tip(error.message, true, "error", 4000);
+    } finally {
+      button.disabled = false;
+      byId("aiGeneratorResult").disabled = false;
+    }
+  }
+}
diff --git a/modules/ui/battle-screen.js b/modules/ui/battle-screen.js
index 12ad7bdd..d56ea3f8 100644
--- a/modules/ui/battle-screen.js
+++ b/modules/ui/battle-screen.js
@@ -36,45 +36,31 @@ class Battle {
     modules.Battle = true;
 
     // add listeners
-    document.getElementById("battleType").addEventListener("click", ev => this.toggleChange(ev));
-    document
-      .getElementById("battleType")
-      .nextElementSibling.addEventListener("click", ev => Battle.prototype.context.changeType(ev));
-    document
-      .getElementById("battleNameShow")
-      .addEventListener("click", () => Battle.prototype.context.showNameSection());
-    document
-      .getElementById("battleNamePlace")
-      .addEventListener("change", ev => (Battle.prototype.context.place = ev.target.value));
-    document.getElementById("battleNameFull").addEventListener("change", ev => Battle.prototype.context.changeName(ev));
-    document
-      .getElementById("battleNameCulture")
-      .addEventListener("click", () => Battle.prototype.context.generateName("culture"));
-    document
-      .getElementById("battleNameRandom")
-      .addEventListener("click", () => Battle.prototype.context.generateName("random"));
-    document.getElementById("battleNameHide").addEventListener("click", this.hideNameSection);
-    document.getElementById("battleAddRegiment").addEventListener("click", this.addSide);
-    document.getElementById("battleRoll").addEventListener("click", () => Battle.prototype.context.randomize());
-    document.getElementById("battleRun").addEventListener("click", () => Battle.prototype.context.run());
-    document.getElementById("battleApply").addEventListener("click", () => Battle.prototype.context.applyResults());
-    document.getElementById("battleCancel").addEventListener("click", () => Battle.prototype.context.cancelResults());
-    document.getElementById("battleWiki").addEventListener("click", () => wiki("Battle-Simulator"));
+    byId("battleType").on("click", ev => this.toggleChange(ev));
+    byId("battleType").nextElementSibling.on("click", ev => Battle.prototype.context.changeType(ev));
+    byId("battleNameShow").on("click", () => Battle.prototype.context.showNameSection());
+    byId("battleNamePlace").on("change", ev => (Battle.prototype.context.place = ev.target.value));
+    byId("battleNameFull").on("change", ev => Battle.prototype.context.changeName(ev));
+    byId("battleNameCulture").on("click", () => Battle.prototype.context.generateName("culture"));
+    byId("battleNameRandom").on("click", () => Battle.prototype.context.generateName("random"));
+    byId("battleNameHide").on("click", this.hideNameSection);
+    byId("battleAddRegiment").on("click", this.addSide);
+    byId("battleRoll").on("click", () => Battle.prototype.context.randomize());
+    byId("battleRun").on("click", () => Battle.prototype.context.run());
+    byId("battleApply").on("click", () => Battle.prototype.context.applyResults());
+    byId("battleCancel").on("click", () => Battle.prototype.context.cancelResults());
+    byId("battleWiki").on("click", () => wiki("Battle-Simulator"));
 
-    document.getElementById("battlePhase_attackers").addEventListener("click", ev => this.toggleChange(ev));
-    document
-      .getElementById("battlePhase_attackers")
-      .nextElementSibling.addEventListener("click", ev => Battle.prototype.context.changePhase(ev, "attackers"));
-    document.getElementById("battlePhase_defenders").addEventListener("click", ev => this.toggleChange(ev));
-    document
-      .getElementById("battlePhase_defenders")
-      .nextElementSibling.addEventListener("click", ev => Battle.prototype.context.changePhase(ev, "defenders"));
-    document
-      .getElementById("battleDie_attackers")
-      .addEventListener("click", () => Battle.prototype.context.rollDie("attackers"));
-    document
-      .getElementById("battleDie_defenders")
-      .addEventListener("click", () => Battle.prototype.context.rollDie("defenders"));
+    byId("battlePhase_attackers").on("click", ev => this.toggleChange(ev));
+    byId("battlePhase_attackers").nextElementSibling.on("click", ev =>
+      Battle.prototype.context.changePhase(ev, "attackers")
+    );
+    byId("battlePhase_defenders").on("click", ev => this.toggleChange(ev));
+    byId("battlePhase_defenders").nextElementSibling.on("click", ev =>
+      Battle.prototype.context.changePhase(ev, "defenders")
+    );
+    byId("battleDie_attackers").on("click", () => Battle.prototype.context.rollDie("attackers"));
+    byId("battleDie_defenders").on("click", () => Battle.prototype.context.rollDie("defenders"));
   }
 
   defineType() {
@@ -97,20 +83,16 @@ class Battle {
   }
 
   setType() {
-    document.getElementById("battleType").className = "icon-button-" + this.type;
+    byId("battleType").className = "icon-button-" + this.type;
 
-    const sideSpecific = document.getElementById("battlePhases_" + this.type + "_attackers");
-    const attackers = sideSpecific
-      ? sideSpecific.content
-      : document.getElementById("battlePhases_" + this.type).content;
-    const defenders = sideSpecific
-      ? document.getElementById("battlePhases_" + this.type + "_defenders").content
-      : attackers;
+    const sideSpecific = byId("battlePhases_" + this.type + "_attackers");
+    const attackers = sideSpecific ? sideSpecific.content : byId("battlePhases_" + this.type).content;
+    const defenders = sideSpecific ? byId("battlePhases_" + this.type + "_defenders").content : attackers;
 
-    document.getElementById("battlePhase_attackers").nextElementSibling.innerHTML = "";
-    document.getElementById("battlePhase_defenders").nextElementSibling.innerHTML = "";
-    document.getElementById("battlePhase_attackers").nextElementSibling.append(attackers.cloneNode(true));
-    document.getElementById("battlePhase_defenders").nextElementSibling.append(defenders.cloneNode(true));
+    byId("battlePhase_attackers").nextElementSibling.innerHTML = "";
+    byId("battlePhase_defenders").nextElementSibling.innerHTML = "";
+    byId("battlePhase_attackers").nextElementSibling.append(attackers.cloneNode(true));
+    byId("battlePhase_defenders").nextElementSibling.append(defenders.cloneNode(true));
   }
 
   definePlace() {
@@ -149,7 +131,9 @@ class Battle {
 
     for (const u of options.military) {
       const label = capitalize(u.name.replace(/_/g, " "));
-      headers += `<th data-tip="${label}">${u.icon}</th>`;
+      const isExternal = u.icon.startsWith("http") || u.icon.startsWith("data:image");
+      const iconHTML = isExternal ? `<img src="${u.icon}" width="15" height="15">` : u.icon;
+      headers += `<th data-tip="${label}">${iconHTML}</th>`;
     }
 
     headers += "<th data-tip='Total military''>Total</th></tr></thead>";
@@ -163,9 +147,13 @@ class Battle {
     const state = pack.states[regiment.state];
     const distance = (Math.hypot(this.y - regiment.by, this.x - regiment.bx) * distanceScale) | 0; // distance between regiment and its base
     const color = state.color[0] === "#" ? state.color : "#999";
+
+    const isExternal = regiment.icon.startsWith("http") || regiment.icon.startsWith("data:image");
+    const iconHtml = isExternal
+      ? `<image href="${regiment.icon}" x="0.1em" y="0.1em" width="1.2em" height="1.2em"></image>`
+      : `<text x="50%" y="1em" style="text-anchor: middle">${regiment.icon}</text>`;
     const icon = `<svg width="1.4em" height="1.4em" style="margin-bottom: -.6em; stroke: #333">
-      <rect x="0" y="0" width="100%" height="100%" fill="${color}"></rect>
-      <text x="0" y="1.04em" style="">${regiment.icon}</text></svg>`;
+      <rect x="0" y="0" width="100%" height="100%" fill="${color}"></rect>${iconHtml}</svg>`;
     const body = `<tbody id="battle${state.i}-${regiment.i}">`;
 
     let initial = `<tr class="battleInitial"><td>${icon}</td><td class="regiment" data-tip="${
@@ -200,7 +188,7 @@ class Battle {
   }
 
   addSide() {
-    const body = document.getElementById("regimentSelectorBody");
+    const body = byId("regimentSelectorBody");
     const context = Battle.prototype.context;
     const regiments = pack.states
       .filter(s => s.military && !s.removed)
@@ -246,7 +234,7 @@ class Battle {
     });
 
     applySorting(regimentSelectorHeader);
-    body.addEventListener("click", selectLine);
+    body.on("click", selectLine);
 
     function selectLine(ev) {
       if (ev.target.className === "inactive") {
@@ -277,7 +265,7 @@ class Battle {
         const shift = side === "attackers" ? attackers.length * -8 : (defenders.length - 1) * 8;
         regiment.px = regiment.x;
         regiment.py = regiment.y;
-        Military.moveRegiment(regiment, defenders[0].x, defenders[0].y + shift);
+        moveRegiment(regiment, defenders[0].x, defenders[0].y + shift);
       });
     }
 
@@ -289,15 +277,15 @@ class Battle {
 
   showNameSection() {
     document.querySelectorAll("#battleBottom > button").forEach(el => (el.style.display = "none"));
-    document.getElementById("battleNameSection").style.display = "inline-block";
+    byId("battleNameSection").style.display = "inline-block";
 
-    document.getElementById("battleNamePlace").value = this.place;
-    document.getElementById("battleNameFull").value = this.name;
+    byId("battleNamePlace").value = this.place;
+    byId("battleNameFull").value = this.name;
   }
 
   hideNameSection() {
     document.querySelectorAll("#battleBottom > button").forEach(el => (el.style.display = "inline-block"));
-    document.getElementById("battleNameSection").style.display = "none";
+    byId("battleNameSection").style.display = "none";
   }
 
   changeName(ev) {
@@ -310,8 +298,8 @@ class Battle {
       type === "culture"
         ? Names.getCulture(pack.cells.culture[this.cell], null, null, "")
         : Names.getBase(rand(nameBases.length - 1));
-    document.getElementById("battleNamePlace").value = this.place = place;
-    document.getElementById("battleNameFull").value = this.name = this.defineName();
+    byId("battleNamePlace").value = this.place = place;
+    byId("battleNameFull").value = this.name = this.defineName();
     $("#battleScreen").dialog({title: this.name});
   }
 
@@ -495,7 +483,7 @@ class Battle {
     this[side].power =
       d3.sum(options.military.map(u => (forces[u.name] || 0) * u.power * scheme[phase][u.type])) / adjuster;
     const UIvalue = this[side].power ? Math.max(this[side].power | 0, 1) : 0;
-    document.getElementById("battlePower_" + side).innerHTML = UIvalue;
+    byId("battlePower_" + side).innerHTML = UIvalue;
   }
 
   getInitialMorale() {
@@ -509,7 +497,7 @@ class Battle {
   }
 
   updateMorale(side) {
-    const morale = document.getElementById("battleMorale_" + side);
+    const morale = byId("battleMorale_" + side);
     morale.dataset.tip = morale.dataset.tip.replace(morale.value, "");
     morale.value = this[side].morale | 0;
     morale.dataset.tip += morale.value;
@@ -524,7 +512,7 @@ class Battle {
   }
 
   rollDie(side) {
-    const el = document.getElementById("battleDie_" + side);
+    const el = byId("battleDie_" + side);
     const prev = +el.innerHTML;
     do {
       el.innerHTML = rand(1, 6);
@@ -672,11 +660,11 @@ class Battle {
     this.attackers.phase = phase[0];
     this.defenders.phase = phase[1];
 
-    const buttonA = document.getElementById("battlePhase_attackers");
+    const buttonA = byId("battlePhase_attackers");
     buttonA.className = "icon-button-" + this.attackers.phase;
     buttonA.dataset.tip = buttonA.nextElementSibling.querySelector("[data-phase='" + phase[0] + "']").dataset.tip;
 
-    const buttonD = document.getElementById("battlePhase_defenders");
+    const buttonD = byId("battlePhase_defenders");
     buttonD.className = "icon-button-" + this.defenders.phase;
     buttonD.dataset.tip = buttonD.nextElementSibling.querySelector("[data-phase='" + phase[1] + "']").dataset.tip;
   }
@@ -760,7 +748,7 @@ class Battle {
 
   updateTable(side) {
     for (const r of this[side].regiments) {
-      const tbody = document.getElementById("battle" + r.state + "-" + r.i);
+      const tbody = byId("battle" + r.state + "-" + r.i);
       const battleCasualties = tbody.querySelector(".battleCasualties");
       const battleSurvivors = tbody.querySelector(".battleSurvivors");
 
@@ -794,7 +782,7 @@ class Battle {
     button.style.opacity = 0.5;
     div.style.display = "block";
 
-    document.getElementsByTagName("body")[0].addEventListener("click", hideSection, {once: true});
+    document.getElementsByTagName("body")[0].on("click", hideSection, {once: true});
   }
 
   changeType(ev) {
@@ -811,7 +799,7 @@ class Battle {
   changePhase(ev, side) {
     if (ev.target.tagName !== "BUTTON") return;
     const phase = (this[side].phase = ev.target.dataset.phase);
-    const button = document.getElementById("battlePhase_" + side);
+    const button = byId("battlePhase_" + side);
     button.className = "icon-button-" + phase;
     button.dataset.tip = ev.target.dataset.tip;
     this.calculateStrength(side);
@@ -873,6 +861,8 @@ class Battle {
       r.u = Object.assign({}, r.survivors);
       r.a = d3.sum(Object.values(r.u)); // reg total
       armies.select(`g#${id} > text`).text(Military.getTotal(r)); // update reg box
+
+      moveRegiment(r, r.px, r.py); // move regiment back to initial position
     }
 
     const i = last(pack.markers)?.i + 1 || 0;
@@ -881,7 +871,7 @@ class Battle {
       const marker = {i, x: this.x, y: this.y, cell: this.cell, icon: "⚔️", type: "battlefields", dy: 52};
       pack.markers.push(marker);
       const markerHTML = drawMarker(marker);
-      document.getElementById("markers").insertAdjacentHTML("beforeend", markerHTML);
+      byId("markers").insertAdjacentHTML("beforeend", markerHTML);
     }
 
     const getSide = (regs, n) =>
@@ -909,7 +899,9 @@ class Battle {
 
   cancelResults() {
     // move regiments back to initial positions
-    this.attackers.regiments.concat(this.defenders.regiments).forEach(r => Military.moveRegiment(r, r.px, r.py));
+    this.attackers.regiments.forEach(r => moveRegiment(r, r.px, r.py));
+    this.defenders.regiments.forEach(r => moveRegiment(r, r.px, r.py));
+
     $("#battleScreen").dialog("close");
     this.cleanData();
   }
diff --git a/modules/ui/biomes-editor.js b/modules/ui/biomes-editor.js
index 8f2400f0..8c50993d 100644
--- a/modules/ui/biomes-editor.js
+++ b/modules/ui/biomes-editor.js
@@ -317,7 +317,7 @@ function editBiomes() {
   }
 
   function regenerateIcons() {
-    ReliefIcons();
+    drawReliefIcons();
     if (!layerIsOn("toggleRelief")) toggleRelief();
   }
 
@@ -383,7 +383,7 @@ function editBiomes() {
   }
 
   function dragBiomeBrush() {
-    const r = +biomesManuallyBrush.value;
+    const r = +biomesBrush.value;
 
     d3.event.on("drag", () => {
       if (!d3.event.dx && !d3.event.dy) return;
@@ -425,7 +425,7 @@ function editBiomes() {
   function moveBiomeBrush() {
     showMainTip();
     const point = d3.mouse(this);
-    const radius = +biomesManuallyBrush.value;
+    const radius = +biomesBrush.value;
     moveCircle(point[0], point[1], radius);
   }
 
diff --git a/modules/ui/burg-editor.js b/modules/ui/burg-editor.js
index a90a11d8..13e32850 100644
--- a/modules/ui/burg-editor.js
+++ b/modules/ui/burg-editor.js
@@ -2,7 +2,7 @@
 function editBurg(id) {
   if (customization) return;
   closeDialogs(".stable");
-  if (!layerIsOn("toggleIcons")) toggleIcons();
+  if (!layerIsOn("toggleBurgIcons")) toggleBurgIcons();
   if (!layerIsOn("toggleLabels")) toggleLabels();
 
   const burg = id || d3.event.target.dataset.id;
@@ -47,6 +47,7 @@ function editBurg(id) {
   byId("burgEmblem").addEventListener("click", openEmblemEdit);
   byId("burgTogglePreview").addEventListener("click", toggleBurgPreview);
   byId("burgEditEmblem").addEventListener("click", openEmblemEdit);
+  byId("burgLocate").addEventListener("click", zoomIntoBurg);
   byId("burgRelocate").addEventListener("click", toggleRelocateBurg);
   byId("burglLegend").addEventListener("click", editBurgLegend);
   byId("burgLock").addEventListener("click", toggleBurgLockButton);
@@ -74,7 +75,8 @@ function editBurg(id) {
 
     const temperature = grid.cells.temp[pack.cells.g[b.cell]];
     byId("burgTemperature").innerHTML = convertTemperature(temperature);
-    byId("burgTemperatureLikeIn").innerHTML = getTemperatureLikeness(temperature);
+    byId("burgTemperatureLikeIn").dataset.tip =
+      "Average yearly temperature is like in " + getTemperatureLikeness(temperature);
     byId("burgElevation").innerHTML = getHeight(pack.cells.h[b.cell]);
 
     // toggle features
@@ -228,34 +230,26 @@ function editBurg(id) {
     const burgsToRemove = burgsInGroup.filter(b => !(pack.burgs[b].capital || pack.burgs[b].lock));
     const capital = burgsToRemove.length < burgsInGroup.length;
 
-    alertMessage.innerHTML = /* html */ `Are you sure you want to remove ${
-      basic || capital ? "all unlocked elements in the burg group" : "the entire burg group"
-    }?
-      <br />Please note that capital or locked burgs will not be deleted. <br /><br />Burgs to be removed: ${
-        burgsToRemove.length
-      }`;
-    $("#alert").dialog({
-      resizable: false,
+    confirmationDialog({
       title: "Remove burg group",
-      buttons: {
-        Remove: function () {
-          $(this).dialog("close");
-          $("#burgEditor").dialog("close");
-          hideGroupSection();
-          burgsToRemove.forEach(b => removeBurg(b));
+      message: `Are you sure you want to remove ${
+        basic || capital ? "all unlocked elements in the burg group" : "the entire burg group"
+      }?<br />Please note that capital or locked burgs will not be deleted. <br /><br />Burgs to be removed: ${
+        burgsToRemove.length
+      }. This action cannot be reverted`,
+      confirm: "Remove",
+      onConfirm: () => {
+        $("#burgEditor").dialog("close");
+        hideGroupSection();
+        burgsToRemove.forEach(b => removeBurg(b));
 
-          if (!basic && !capital) {
-            // entirely remove group
-            const labelG = document.querySelector("#burgLabels > #" + group.id);
-            const iconG = document.querySelector("#burgIcons > #" + group.id);
-            const anchorG = document.querySelector("#anchors > #" + group.id);
-            if (labelG) labelG.remove();
-            if (iconG) iconG.remove();
-            if (anchorG) anchorG.remove();
-          }
-        },
-        Cancel: function () {
-          $(this).dialog("close");
+        if (!basic && !capital) {
+          const labelG = document.querySelector("#burgLabels > #" + group.id);
+          const iconG = document.querySelector("#burgIcons > #" + group.id);
+          const anchorG = document.querySelector("#anchors > #" + group.id);
+          if (labelG) labelG.remove();
+          if (iconG) iconG.remove();
+          if (anchorG) anchorG.remove();
         }
       }
     });
@@ -405,6 +399,14 @@ function editBurg(id) {
     byId("burgTogglePreview").className = options.showBurgPreview ? "icon-map" : "icon-map-o";
   }
 
+  function zoomIntoBurg() {
+    const id = +elSelected.attr("data-id");
+    const burg = pack.burgs[id];
+    const x = burg.x;
+    const y = burg.y;
+    zoomTo(x, y, 8, 2000);
+  }
+
   function toggleRelocateBurg() {
     const toggler = byId("toggleCells");
     byId("burgRelocate").classList.toggle("pressed");
@@ -509,19 +511,13 @@ function editBurg(id) {
         }
       });
     } else {
-      alertMessage.innerHTML = "Are you sure you want to remove the burg?";
-      $("#alert").dialog({
-        resizable: false,
+      confirmationDialog({
         title: "Remove burg",
-        buttons: {
-          Remove: function () {
-            $(this).dialog("close");
-            removeBurg(id); // see Editors module
-            $("#burgEditor").dialog("close");
-          },
-          Cancel: function () {
-            $(this).dialog("close");
-          }
+        message: "Are you sure you want to remove the burg? <br>This action cannot be reverted",
+        confirm: "Remove",
+        onConfirm: () => {
+          removeBurg(id); // see Editors module
+          $("#burgEditor").dialog("close");
         }
       });
     }
@@ -535,46 +531,47 @@ function editBurg(id) {
 }
 
 // in °C, array from -1 °C; source: https://en.wikipedia.org/wiki/List_of_cities_by_average_temperature
+const meanTempCityMap = {
+  "-5": "Snag (Yukon)",
+  "-4": "Yellowknife (Canada)",
+  "-3": "Okhotsk (Russia)",
+  "-2": "Fairbanks (Alaska)",
+  "-1": "Nuuk (Greenland)",
+  0: "Murmansk (Russia)",
+  1: "Arkhangelsk (Russia)",
+  2: "Anchorage (Alaska)",
+  3: "Tromsø (Norway)",
+  4: "Reykjavik (Iceland)",
+  5: "Harbin (China)",
+  6: "Stockholm (Sweden)",
+  7: "Montreal (Canada)",
+  8: "Prague (Czechia)",
+  9: "Copenhagen (Denmark)",
+  10: "London (England)",
+  11: "Antwerp (Belgium)",
+  12: "Paris (France)",
+  13: "Milan (Italy)",
+  14: "Washington (D.C.)",
+  15: "Rome (Italy)",
+  16: "Dubrovnik (Croatia)",
+  17: "Lisbon (Portugal)",
+  18: "Barcelona (Spain)",
+  19: "Marrakesh (Morocco)",
+  20: "Alexandria (Egypt)",
+  21: "Tegucigalpa (Honduras)",
+  22: "Guangzhou (China)",
+  23: "Rio de Janeiro (Brazil)",
+  24: "Dakar (Senegal)",
+  25: "Miami (USA)",
+  26: "Jakarta (Indonesia)",
+  27: "Mogadishu (Somalia)",
+  28: "Bangkok (Thailand)",
+  29: "Niamey (Niger)",
+  30: "Khartoum (Sudan)"
+};
+
 function getTemperatureLikeness(temperature) {
-  if (temperature < -5) return "Yakutsk";
-  const cities = [
-    "Snag (Yukon)",
-    "Yellowknife (Canada)",
-    "Okhotsk (Russia)",
-    "Fairbanks (Alaska)",
-    "Nuuk (Greenland)",
-    "Murmansk", // -5 - 0
-    "Arkhangelsk",
-    "Anchorage",
-    "Tromsø",
-    "Reykjavik",
-    "Riga",
-    "Stockholm",
-    "Halifax",
-    "Prague",
-    "Copenhagen",
-    "London", // 1 - 10
-    "Antwerp",
-    "Paris",
-    "Milan",
-    "Batumi",
-    "Rome",
-    "Dubrovnik",
-    "Lisbon",
-    "Barcelona",
-    "Marrakesh",
-    "Alexandria", // 11 - 20
-    "Tegucigalpa",
-    "Guangzhou",
-    "Rio de Janeiro",
-    "Dakar",
-    "Miami",
-    "Jakarta",
-    "Mogadishu",
-    "Bangkok",
-    "Aden",
-    "Khartoum"
-  ]; // 21 - 30
-  if (temperature > 30) return "Mecca";
-  return cities[temperature + 5] || null;
+  if (temperature < -5) return "Yakutsk (Russia)";
+  if (temperature > 30) return "Mecca (Saudi Arabia)";
+  return meanTempCityMap[temperature] || null;
 }
diff --git a/modules/ui/burgs-overview.js b/modules/ui/burgs-overview.js
index b4dd8639..2a487b67 100644
--- a/modules/ui/burgs-overview.js
+++ b/modules/ui/burgs-overview.js
@@ -2,7 +2,7 @@
 function overviewBurgs(settings = {stateId: null, cultureId: null}) {
   if (customization) return;
   closeDialogs("#burgsOverview, .stable");
-  if (!layerIsOn("toggleIcons")) toggleIcons();
+  if (!layerIsOn("toggleBurgIcons")) toggleBurgIcons();
   if (!layerIsOn("toggleLabels")) toggleLabels();
 
   const body = byId("burgsBody");
@@ -75,7 +75,7 @@ function overviewBurgs(settings = {stateId: null, cultureId: null}) {
     for (const b of filtered) {
       const population = b.population * populationRate * urbanization;
       totalPopulation += population;
-      const type = b.capital && b.port ? "a-capital-port" : b.capital ? "c-capital" : b.port ? "p-port" : "z-burg";
+      const features = b.capital && b.port ? "a-capital-port" : b.capital ? "c-capital" : b.port ? "p-port" : "z-burg";
       const state = pack.states[b.state].name;
       const prov = pack.cells.province[b.cell];
       const province = prov ? pack.provinces[prov].name : "";
@@ -89,7 +89,7 @@ function overviewBurgs(settings = {stateId: null, cultureId: null}) {
         data-province="${province}"
         data-culture="${culture}"
         data-population=${population}
-        data-type="${type}"
+        data-features="${features}"
       >
         <span data-tip="Click to zoom into view" class="icon-dot-circled pointer"></span>
         <input data-tip="Burg name. Click and type to change" class="burgName" value="${
@@ -101,15 +101,16 @@ function overviewBurgs(settings = {stateId: null, cultureId: null}) {
           ${getCultureOptions(b.culture)}
         </select>
         <span data-tip="Burg population" class="icon-male"></span>
-        <input data-tip="Burg population. Type to change" class="burgPopulation" value=${si(population)} />
-        <div class="burgType">
+        <input data-tip="Burg population. Type to change" value=${si(
+          population
+        )} class="burgPopulation" style="width: 5em" />
+        <div style="width: 3em">
           <span
             data-tip="${b.capital ? " This burg is a state capital" : "Click to assign a capital status"}"
-            class="icon-star-empty${b.capital ? "" : " inactive pointer"}"
-          ></span>
+            class="icon-star-empty${b.capital ? "" : " inactive pointer"}" style="padding: 0 1px;"></span>
           <span data-tip="Click to toggle port status" class="icon-anchor pointer${
             b.port ? "" : " inactive"
-          }" style="font-size:.9em"></span>
+          }" style="font-size: .9em; padding: 0 1px;"></span>
         </div>
         <span data-tip="Edit burg" class="icon-pencil"></span>
         <span class="locks pointer ${
@@ -154,9 +155,9 @@ function overviewBurgs(settings = {stateId: null, cultureId: null}) {
   }
 
   function burgHighlightOn(event) {
-    if (!layerIsOn("toggleLabels")) toggleLabels();
     const burg = +event.target.dataset.id;
-    burgLabels.select("[data-id='" + burg + "']").classed("drag", true);
+    const label = burgLabels.select("[data-id='" + burg + "']");
+    if (label.size()) label.classed("drag", true);
   }
 
   function burgHighlightOff() {
@@ -245,7 +246,7 @@ function overviewBurgs(settings = {stateId: null, cultureId: null}) {
 
     confirmationDialog({
       title: "Remove burg",
-      message: "Are you sure you want to remove the burg? This actiove cannot be reverted",
+      message: "Are you sure you want to remove the burg? <br>This action cannot be reverted",
       confirm: "Remove",
       onConfirm: () => {
         removeBurg(burg);
@@ -340,8 +341,8 @@ function overviewBurgs(settings = {stateId: null, cultureId: null}) {
       .sum(d => d.population)
       .sort((a, b) => b.value - a.value);
 
-    const width = 150 + 200 * uiSizeOutput.value;
-    const height = 150 + 200 * uiSizeOutput.value;
+    const width = 150 + 200 * uiSize.value;
+    const height = 150 + 200 * uiSize.value;
     const margin = {top: 0, right: -50, bottom: -10, left: -50};
     const w = width - margin.left - margin.right;
     const h = height - margin.top - margin.bottom;
@@ -607,7 +608,7 @@ function overviewBurgs(settings = {stateId: null, cultureId: null}) {
     const activeBurgs = pack.burgs.filter(b => b.i && !b.removed);
     const allLocked = activeBurgs.every(burg => burg.lock);
 
-    pack.burgs.forEach(burg => {
+    activeBurgs.forEach(burg => {
       burg.lock = !allLocked;
     });
 
diff --git a/modules/ui/coastline-editor.js b/modules/ui/coastline-editor.js
index 2f918cd9..6ba14afe 100644
--- a/modules/ui/coastline-editor.js
+++ b/modules/ui/coastline-editor.js
@@ -1,5 +1,6 @@
 "use strict";
-function editCoastline(node = d3.event.target) {
+
+function editCoastline() {
   if (customization) return;
   closeDialogs(".stable");
   if (layerIsOn("toggleCells")) toggleCells();
@@ -12,6 +13,7 @@ function editCoastline(node = d3.event.target) {
   });
 
   debug.append("g").attr("id", "vertices");
+  const node = d3.event.target;
   elSelected = d3.select(node);
   selectCoastlineGroup(node);
   drawCoastlineVertices();
@@ -21,93 +23,98 @@ function editCoastline(node = d3.event.target) {
   modules.editCoastline = true;
 
   // add listeners
-  document.getElementById("coastlineGroupsShow").addEventListener("click", showGroupSection);
-  document.getElementById("coastlineGroup").addEventListener("change", changeCoastlineGroup);
-  document.getElementById("coastlineGroupAdd").addEventListener("click", toggleNewGroupInput);
-  document.getElementById("coastlineGroupName").addEventListener("change", createNewGroup);
-  document.getElementById("coastlineGroupRemove").addEventListener("click", removeCoastlineGroup);
-  document.getElementById("coastlineGroupsHide").addEventListener("click", hideGroupSection);
-  document.getElementById("coastlineEditStyle").addEventListener("click", editGroupStyle);
+  byId("coastlineGroupsShow").on("click", showGroupSection);
+  byId("coastlineGroup").on("change", changeCoastlineGroup);
+  byId("coastlineGroupAdd").on("click", toggleNewGroupInput);
+  byId("coastlineGroupName").on("change", createNewGroup);
+  byId("coastlineGroupRemove").on("click", removeCoastlineGroup);
+  byId("coastlineGroupsHide").on("click", hideGroupSection);
+  byId("coastlineEditStyle").on("click", editGroupStyle);
 
   function drawCoastlineVertices() {
-    const f = +elSelected.attr("data-f"); // feature id
-    const v = pack.features[f].vertices; // coastline outer vertices
+    const featureId = +elSelected.attr("data-f");
+    const {vertices, area} = pack.features[featureId];
 
-    const l = pack.cells.i.length;
-    const c = [...new Set(v.map(v => pack.vertices.c[v]).flat())].filter(c => c < l);
+    const cellsNumber = pack.cells.i.length;
+    const neibCells = unique(vertices.map(v => pack.vertices.c[v]).flat()).filter(cellId => cellId < cellsNumber);
     debug
       .select("#vertices")
       .selectAll("polygon")
-      .data(c)
+      .data(neibCells)
       .enter()
       .append("polygon")
-      .attr("points", d => getPackPolygon(d))
+      .attr("points", getPackPolygon)
       .attr("data-c", d => d);
 
     debug
       .select("#vertices")
       .selectAll("circle")
-      .data(v)
+      .data(vertices)
       .enter()
       .append("circle")
       .attr("cx", d => pack.vertices.p[d][0])
       .attr("cy", d => pack.vertices.p[d][1])
       .attr("r", 0.4)
       .attr("data-v", d => d)
-      .call(d3.drag().on("drag", dragVertex))
-      .on("mousemove", () => tip("Drag to move the vertex, please use for fine-tuning only. Edit heightmap to change actual cell heights"));
+      .call(d3.drag().on("drag", handleVertexDrag).on("end", handleVertexDragEnd))
+      .on("mousemove", () =>
+        tip("Drag to move the vertex. Please use for fine-tuning only. Edit heightmap to change actual cell heights!")
+      );
 
-    const area = pack.features[f].area;
     coastlineArea.innerHTML = si(getArea(area)) + " " + getAreaUnit();
   }
 
-  function dragVertex() {
-    const x = rn(d3.event.x, 2),
-      y = rn(d3.event.y, 2);
+  function handleVertexDrag() {
+    const {vertices, features} = pack;
+
+    const x = rn(d3.event.x, 2);
+    const y = rn(d3.event.y, 2);
     this.setAttribute("cx", x);
     this.setAttribute("cy", y);
-    const v = +this.dataset.v;
-    pack.vertices.p[v] = [x, y];
-    debug
-      .select("#vertices")
-      .selectAll("polygon")
-      .attr("points", d => getPackPolygon(d));
-    redrawCoastline();
+
+    const vertexId = d3.select(this).datum();
+    vertices.p[vertexId] = [x, y];
+
+    const featureId = +elSelected.attr("data-f");
+    const feature = features[featureId];
+
+    // change coastline path
+    defs.select("#featurePaths > path#feature_" + featureId).attr("d", getFeaturePath(feature));
+
+    // update area
+    const points = feature.vertices.map(vertex => vertices.p[vertex]);
+    feature.area = Math.abs(d3.polygonArea(points));
+    coastlineArea.innerHTML = si(getArea(feature.area)) + " " + getAreaUnit();
+
+    // update cell
+    debug.select("#vertices").selectAll("polygon").attr("points", getPackPolygon);
   }
 
-  function redrawCoastline() {
-    lineGen.curve(d3.curveBasisClosed);
-    const f = +elSelected.attr("data-f");
-    const vertices = pack.features[f].vertices;
-    const points = clipPoly(
-      vertices.map(v => pack.vertices.p[v]),
-      1
-    );
-    const d = round(lineGen(points));
-    elSelected.attr("d", d);
-    defs.select("mask#land > path#land_" + f).attr("d", d); // update land mask
-    defs.select("mask#water > path#water_" + f).attr("d", d); // update water mask
-
-    const area = Math.abs(d3.polygonArea(points));
-    coastlineArea.innerHTML = si(getArea(area)) + " " + getAreaUnit();
+  function handleVertexDragEnd() {
+    if (layerIsOn("toggleStates")) drawStates();
+    if (layerIsOn("toggleProvinces")) drawProvinces();
+    if (layerIsOn("toggleBorders")) drawBorders();
+    if (layerIsOn("toggleBiomes")) drawBiomes();
+    if (layerIsOn("toggleReligions")) drawReligions();
+    if (layerIsOn("toggleCultures")) drawCultures();
   }
 
   function showGroupSection() {
     document.querySelectorAll("#coastlineEditor > button").forEach(el => (el.style.display = "none"));
-    document.getElementById("coastlineGroupsSelection").style.display = "inline-block";
+    byId("coastlineGroupsSelection").style.display = "inline-block";
   }
 
   function hideGroupSection() {
     document.querySelectorAll("#coastlineEditor > button").forEach(el => (el.style.display = "inline-block"));
-    document.getElementById("coastlineGroupsSelection").style.display = "none";
-    document.getElementById("coastlineGroupName").style.display = "none";
-    document.getElementById("coastlineGroupName").value = "";
-    document.getElementById("coastlineGroup").style.display = "inline-block";
+    byId("coastlineGroupsSelection").style.display = "none";
+    byId("coastlineGroupName").style.display = "none";
+    byId("coastlineGroupName").value = "";
+    byId("coastlineGroup").style.display = "inline-block";
   }
 
   function selectCoastlineGroup(node) {
     const group = node.parentNode.id;
-    const select = document.getElementById("coastlineGroup");
+    const select = byId("coastlineGroup");
     select.options.length = 0; // remove all options
 
     coastline.selectAll("g").each(function () {
@@ -116,7 +123,7 @@ function editCoastline(node = d3.event.target) {
   }
 
   function changeCoastlineGroup() {
-    document.getElementById(this.value).appendChild(elSelected.node());
+    byId(this.value).appendChild(elSelected.node());
   }
 
   function toggleNewGroupInput() {
@@ -131,54 +138,44 @@ function editCoastline(node = d3.event.target) {
   }
 
   function createNewGroup() {
-    if (!this.value) {
-      tip("Please provide a valid group name");
-      return;
-    }
+    if (!this.value) return tip("Please provide a valid group name");
+
     const group = this.value
       .toLowerCase()
       .replace(/ /g, "_")
       .replace(/[^\w\s]/gi, "");
 
-    if (document.getElementById(group)) {
-      tip("Element with this id already exists. Please provide a unique name", false, "error");
-      return;
-    }
+    if (byId(group)) return tip("Element with this id already exists. Please provide a unique name", false, "error");
 
-    if (Number.isFinite(+group.charAt(0))) {
-      tip("Group name should start with a letter", false, "error");
-      return;
-    }
+    if (Number.isFinite(+group.charAt(0))) return tip("Group name should start with a letter", false, "error");
 
     // just rename if only 1 element left
     const oldGroup = elSelected.node().parentNode;
     const basic = ["sea_island", "lake_island"].includes(oldGroup.id);
     if (!basic && oldGroup.childElementCount === 1) {
-      document.getElementById("coastlineGroup").selectedOptions[0].remove();
-      document.getElementById("coastlineGroup").options.add(new Option(group, group, false, true));
+      byId("coastlineGroup").selectedOptions[0].remove();
+      byId("coastlineGroup").options.add(new Option(group, group, false, true));
       oldGroup.id = group;
       toggleNewGroupInput();
-      document.getElementById("coastlineGroupName").value = "";
+      byId("coastlineGroupName").value = "";
       return;
     }
 
     // create a new group
     const newGroup = elSelected.node().parentNode.cloneNode(false);
-    document.getElementById("coastline").appendChild(newGroup);
+    byId("coastline").appendChild(newGroup);
     newGroup.id = group;
-    document.getElementById("coastlineGroup").options.add(new Option(group, group, false, true));
-    document.getElementById(group).appendChild(elSelected.node());
+    byId("coastlineGroup").options.add(new Option(group, group, false, true));
+    byId(group).appendChild(elSelected.node());
 
     toggleNewGroupInput();
-    document.getElementById("coastlineGroupName").value = "";
+    byId("coastlineGroupName").value = "";
   }
 
   function removeCoastlineGroup() {
     const group = elSelected.node().parentNode.id;
-    if (["sea_island", "lake_island"].includes(group)) {
-      tip("This is one of the default groups, it cannot be removed", false, "error");
-      return;
-    }
+    if (["sea_island", "lake_island"].includes(group))
+      return tip("This is one of the default groups, it cannot be removed", false, "error");
 
     const count = elSelected.node().parentNode.childElementCount;
     alertMessage.innerHTML = /* html */ `Are you sure you want to remove the group? All coastline elements of the group (${count}) will be moved under
@@ -190,14 +187,14 @@ function editCoastline(node = d3.event.target) {
       buttons: {
         Remove: function () {
           $(this).dialog("close");
-          const sea = document.getElementById("sea_island");
-          const groupEl = document.getElementById(group);
+          const sea = byId("sea_island");
+          const groupEl = byId(group);
           while (groupEl.childNodes.length) {
             sea.appendChild(groupEl.childNodes[0]);
           }
           groupEl.remove();
-          document.getElementById("coastlineGroup").selectedOptions[0].remove();
-          document.getElementById("coastlineGroup").value = "sea_island";
+          byId("coastlineGroup").selectedOptions[0].remove();
+          byId("coastlineGroup").value = "sea_island";
         },
         Cancel: function () {
           $(this).dialog("close");
diff --git a/modules/ui/editors.js b/modules/ui/editors.js
index dfaeb9a2..3ebff350 100644
--- a/modules/ui/editors.js
+++ b/modules/ui/editors.js
@@ -8,33 +8,30 @@ function restoreDefaultEvents() {
   svg.call(zoom);
   viewbox.style("cursor", "default").on(".drag", null).on("click", clicked).on("touchmove mousemove", onMouseMove);
   legend.call(d3.drag().on("start", dragLegendBox));
+  svg.call(zoom);
 }
 
-// on viewbox click event - run function based on target
+// handle viewbox click
 function clicked() {
   const el = d3.event.target;
-  if (!el || !el.parentElement || !el.parentElement.parentElement) return;
-  const parent = el.parentElement;
-  const grand = parent.parentElement;
-  const great = grand.parentElement;
-  const p = d3.mouse(this);
-  const i = findCell(p[0], p[1]);
+  const parent = el?.parentElement;
+  const grand = parent?.parentElement;
+  const great = grand?.parentElement;
+  const ancestor = great?.parentElement;
+  if (!ancestor) return;
 
   if (grand.id === "emblems") editEmblem();
   else if (parent.id === "rivers") editRiver(el.id);
   else if (grand.id === "routes") editRoute(el.id);
-  else if (el.tagName === "tspan" && grand.parentNode.parentNode.id === "labels") editLabel();
+  else if (ancestor.id === "labels" && el.tagName === "tspan") editLabel();
   else if (grand.id === "burgLabels") editBurg();
   else if (grand.id === "burgIcons") editBurg();
   else if (parent.id === "ice") editIce();
   else if (parent.id === "terrain") editReliefIcon();
   else if (grand.id === "markers" || great.id === "markers") editMarker();
   else if (grand.id === "coastline") editCoastline();
+  else if (grand.id === "lakes") editLake();
   else if (great.id === "armies") editRegiment();
-  else if (pack.cells.t[i] === 1) {
-    const node = byId("island_" + pack.cells.f[i]);
-    editCoastline(node);
-  } else if (grand.id === "lakes") editLake();
 }
 
 // clear elSelected variable
@@ -182,6 +179,7 @@ function addBurg(point) {
   burgLabels
     .select("#towns")
     .append("text")
+    .attr("text-rendering", "optimizeSpeed")
     .attr("id", "burgLabel" + i)
     .attr("data-id", i)
     .attr("x", x)
@@ -397,12 +395,12 @@ function createVillageGeneratorLink(burg) {
   else if (cells.r[cell]) tags.push("river");
   else if (pop < 200 && each(4)(cell)) tags.push("pond");
 
-  const connections = pack.cells.routes[cell] || {};
-  const roads = Object.values(connections).filter(routeId => {
-    const route = pack.routes[routeId];
+  const roadsNumber = Object.values(pack.cells.routes[cell] || {}).filter(routeId => {
+    const route = pack.routes.find(route => route.i === routeId);
+    if (!route) return false;
     return route.group === "roads" || route.group === "trails";
   }).length;
-  tags.push(roads > 1 ? "highway" : roads === 1 ? "dead end" : "isolated");
+  tags.push(roadsNumber > 1 ? "highway" : roadsNumber === 1 ? "dead end" : "isolated");
 
   const biome = cells.biome[cell];
   const arableBiomes = cells.r[cell] ? [1, 2, 3, 4, 5, 6, 7, 8] : [5, 6, 7, 8];
@@ -467,6 +465,7 @@ function drawLegend(name, data) {
 
       labels
         .append("text")
+        .attr("text-rendering", "optimizeSpeed")
         .text(data[i][2])
         .attr("x", offset + colorBoxSize * 1.6)
         .attr("y", fontSize / 1.6 + lineHeight + l * lineHeight + vOffset);
@@ -477,6 +476,7 @@ function drawLegend(name, data) {
   const offset = colOffset + legend.node().getBBox().width / 2;
   labels
     .append("text")
+    .attr("text-rendering", "optimizeSpeed")
     .attr("text-anchor", "middle")
     .attr("font-weight", "bold")
     .attr("font-size", "1.2em")
@@ -516,13 +516,14 @@ function fitLegendBox() {
 
 // draw legend with the same data, but using different settings
 function redrawLegend() {
-  if (!legend.select("rect").size()) return;
-  const name = legend.select("#legendLabel").text();
-  const data = legend
-    .attr("data")
-    .split("|")
-    .map(l => l.split(","));
-  drawLegend(name, data);
+  if (legend.select("rect").size()) {
+    const name = legend.select("#legendLabel").text();
+    const data = legend
+      .attr("data")
+      .split("|")
+      .map(l => l.split(","));
+    drawLegend(name, data);
+  }
 }
 
 function dragLegendBox() {
@@ -1167,25 +1168,66 @@ function selectIcon(initial, callback) {
       const cell = row.insertCell(i % 17);
       cell.innerHTML = icons[i];
     }
+
+    // find external images used as icons and show them
+    const externalResources = new Set();
+    const isExternal = url => url.startsWith("http") || url.startsWith("data:image");
+
+    options.military.forEach(unit => {
+      if (isExternal(unit.icon)) externalResources.add(unit.icon);
+    });
+
+    pack.states.forEach(state => {
+      state?.military?.forEach(regiment => {
+        if (isExternal(regiment.icon)) externalResources.add(regiment.icon);
+      });
+    });
+
+    externalResources.forEach(addExternalImage);
   }
 
-  input.oninput = e => callback(input.value);
+  input.oninput = () => callback(input.value);
+
   table.onclick = e => {
     if (e.target.tagName === "TD") {
       input.value = e.target.textContent;
       callback(input.value);
     }
   };
+
   table.onmouseover = e => {
     if (e.target.tagName === "TD") tip(`Click to select ${e.target.textContent} icon`);
   };
 
+  function addExternalImage(url) {
+    const addedIcons = byId("addedIcons");
+    const image = document.createElement("div");
+    image.style.cssText = `width: 2.2em; height: 2.2em; background-size: cover; background-image: url(${url})`;
+    addedIcons.appendChild(image);
+    image.onclick = () => callback(url);
+  }
+
+  byId("addImage").onclick = function () {
+    const input = this.previousElementSibling;
+    const ulr = input.value;
+    if (!ulr) return tip("Enter image URL to add", false, "error", 4000);
+    if (!ulr.match(/^((http|https):\/\/)|data\:image\//)) return tip("Enter valid URL", false, "error", 4000);
+    addExternalImage(ulr);
+    callback(ulr);
+    input.value = "";
+  };
+
+  byId("addedIcons")
+    .querySelectorAll("div")
+    .forEach(div => {
+      div.onclick = () => callback(div.style.backgroundImage.slice(5, -2));
+    });
+
   $("#iconSelector").dialog({
     width: fitContent(),
     title: "Select Icon",
     buttons: {
       Apply: function () {
-        callback(input.value || "⠀");
         $(this).dialog("close");
       },
       Close: function () {
@@ -1251,18 +1293,18 @@ function refreshAllEditors() {
 // dynamically loaded editors
 async function editStates() {
   if (customization) return;
-  const Editor = await import("../dynamic/editors/states-editor.js?v=1.99.00");
+  const Editor = await import("../dynamic/editors/states-editor.js?v=1.108.1");
   Editor.open();
 }
 
 async function editCultures() {
   if (customization) return;
-  const Editor = await import("../dynamic/editors/cultures-editor.js?v=1.96.01");
+  const Editor = await import("../dynamic/editors/cultures-editor.js?v=1.105.23");
   Editor.open();
 }
 
 async function editReligions() {
   if (customization) return;
-  const Editor = await import("../dynamic/editors/religions-editor.js?v=1.96.00");
+  const Editor = await import("../dynamic/editors/religions-editor.js?v=1.104.0");
   Editor.open();
 }
diff --git a/modules/ui/general.js b/modules/ui/general.js
index f665902d..6e276bd6 100644
--- a/modules/ui/general.js
+++ b/modules/ui/general.js
@@ -153,21 +153,26 @@ function showMapTooltip(point, e, i, g) {
 
   if (group === "routes") {
     const routeId = +e.target.id.slice(5);
-    const name = pack.routes[routeId]?.name;
-    if (name) return tip(`${name}. Click to edit the Route`);
-    return tip("Click to edit the Route");
+    const route = pack.routes.find(route => route.i === routeId);
+    if (route) {
+      if (route.name) return tip(`${route.name}. Click to edit the Route`);
+      return tip("Click to edit the Route");
+    }
   }
 
   if (group === "terrain") return tip("Click to edit the Relief Icon");
 
   if (subgroup === "burgLabels" || subgroup === "burgIcons") {
-    const burg = +path[path.length - 10].dataset.id;
-    const b = pack.burgs[burg];
-    const population = si(b.population * populationRate * urbanization);
-    tip(`${b.name}. Population: ${population}. Click to edit`);
-    if (burgsOverview?.offsetParent) highlightEditorLine(burgsOverview, burg, 5000);
-    return;
+    const burgId = +path[path.length - 10].dataset.id;
+    if (burgId) {
+      const burg = pack.burgs[burgId];
+      const population = si(burg.population * populationRate * urbanization);
+      tip(`${burg.name}. Population: ${population}. Click to edit`);
+      if (burgsOverview?.offsetParent) highlightEditorLine(burgsOverview, burgId, 5000);
+      return;
+    }
   }
+
   if (group === "labels") return tip("Click to edit the Label");
 
   if (group === "markers") return tip("Click to edit the Marker. Hold Shift to not close the assosiated note");
@@ -199,18 +204,20 @@ function showMapTooltip(point, e, i, g) {
   if (group === "coastline") return tip("Click to edit the coastline");
 
   if (group === "zones") {
-    const zone = path[path.length - 8];
-    tip(zone.dataset.description);
-    if (zonesEditor?.offsetParent) highlightEditorLine(zonesEditor, zone.id, 5000);
+    const element = path[path.length - 8];
+    const zoneId = +element.dataset.id;
+    const zone = pack.zones.find(zone => zone.i === zoneId);
+    tip(zone.name);
+    if (zonesEditor?.offsetParent) highlightEditorLine(zonesEditor, zoneId, 5000);
     return;
   }
 
   if (group === "ice") return tip("Click to edit the Ice");
 
   // covering elements
-  if (layerIsOn("togglePrec") && land) tip("Annual Precipitation: " + getFriendlyPrecipitation(i));
+  if (layerIsOn("togglePrecipitation") && land) tip("Annual Precipitation: " + getFriendlyPrecipitation(i));
   else if (layerIsOn("togglePopulation")) tip(getPopulationTip(i));
-  else if (layerIsOn("toggleTemp")) tip("Temperature: " + convertTemperature(grid.cells.temp[g]));
+  else if (layerIsOn("toggleTemperature")) tip("Temperature: " + convertTemperature(grid.cells.temp[g]));
   else if (layerIsOn("toggleBiomes") && pack.cells.biome[i]) {
     const biome = pack.cells.biome[i];
     tip("Biome: " + biomesData.name[biome]);
@@ -256,10 +263,11 @@ function updateCellInfo(point, i, g) {
   const f = cells.f[i];
   infoLat.innerHTML = toDMS(getLatitude(y, 4), "lat");
   infoLon.innerHTML = toDMS(getLongitude(x, 4), "lon");
+  infoGeozone.innerHTML = getGeozone(getLatitude(y, 4));
 
   infoCell.innerHTML = i;
   infoArea.innerHTML = cells.area[i] ? si(getArea(cells.area[i])) + " " + getAreaUnit() : "n/a";
-  infoEvelation.innerHTML = getElevation(pack.features[f], pack.cells.h[i]);
+  infoElevation.innerHTML = getElevation(pack.features[f], pack.cells.h[i]);
   infoDepth.innerHTML = getDepth(pack.features[f], point);
   infoTemp.innerHTML = convertTemperature(grid.cells.temp[g]);
   infoPrec.innerHTML = cells.h[i] >= 20 ? getFriendlyPrecipitation(i) : "n/a";
@@ -283,6 +291,18 @@ function updateCellInfo(point, i, g) {
   infoBiome.innerHTML = biomesData.name[cells.biome[i]];
 }
 
+function getGeozone(latitude) {
+  if (latitude > 66.5) return "Arctic";
+  if (latitude > 35) return "Temperate North";
+  if (latitude > 23.5) return "Subtropical North";
+  if (latitude > 1) return "Tropical North";
+  if (latitude > -1) return "Equatorial";
+  if (latitude > -23.5) return "Tropical South";
+  if (latitude > -35) return "Subtropical South";
+  if (latitude > -66.5) return "Temperate South";
+  return "Antarctic";
+}
+
 // convert coordinate to DMS format
 function toDMS(coord, c) {
   const degrees = Math.floor(Math.abs(coord));
@@ -426,17 +446,17 @@ function highlightEmblemElement(type, el) {
 
 // assign lock behavior
 document.querySelectorAll("[data-locked]").forEach(function (e) {
-  e.addEventListener("mouseover", function (event) {
+  e.addEventListener("mouseover", function (e) {
+    e.stopPropagation();
     if (this.className === "icon-lock")
       tip("Click to unlock the option and allow it to be randomized on new map generation");
     else tip("Click to lock the option and always use the current value on new map generation");
-    event.stopPropagation();
   });
 
   e.addEventListener("click", function () {
-    const id = this.id.slice(5);
-    if (this.className === "icon-lock") unlock(id);
-    else lock(id);
+    const ids = this.dataset.ids ? this.dataset.ids.split(",") : [this.id.slice(5)];
+    const fn = this.className === "icon-lock" ? unlock : lock;
+    ids.forEach(fn);
   });
 });
 
diff --git a/modules/ui/heightmap-editor.js b/modules/ui/heightmap-editor.js
index 2cec7437..20fa201c 100644
--- a/modules/ui/heightmap-editor.js
+++ b/modules/ui/heightmap-editor.js
@@ -75,7 +75,8 @@ function editHeightmap(options) {
       changeOnlyLand.checked = true;
     } else if (mode === "risk") {
       defs.selectAll("#land, #water").selectAll("path").remove();
-      viewbox.selectAll("#coastline path, #lakes path, #oceanLayers path").remove();
+      defs.select("#featurePaths").selectAll("path").remove();
+      viewbox.selectAll("#coastline use, #lakes path, #oceanLayers path").remove();
       changeOnlyLand.checked = false;
     }
 
@@ -90,7 +91,7 @@ function editHeightmap(options) {
     if (!sessionStorage.getItem("noExitButtonAnimation")) {
       sessionStorage.setItem("noExitButtonAnimation", true);
       exitCustomization.style.opacity = 0;
-      const width = 12 * uiSizeOutput.value * 11;
+      const width = 12 * uiSize.value * 11;
       exitCustomization.style.right = (svgWidth - width) / 2 + "px";
       exitCustomization.style.bottom = svgHeight / 2 + "px";
       exitCustomization.style.transform = "scale(2)";
@@ -111,7 +112,9 @@ function editHeightmap(options) {
     layersPreset.value = "heightmap";
     layersPreset.disabled = true;
     mockHeightmap();
+
     viewbox.on("touchmove mousemove", moveCursor);
+    svg.on("dblclick.zoom", null);
 
     if (tool === "templateEditor") openTemplateEditor();
     else if (tool === "imageConverter") openImageConverter();
@@ -136,7 +139,7 @@ function editHeightmap(options) {
       return;
     }
 
-    moveCircle(x, y, brushRadius.valueAsNumber, "#333");
+    moveCircle(x, y, heightmapBrushRadius.valueAsNumber, "#333");
   }
 
   // get user-friendly (real-world) height value from map data
@@ -157,11 +160,7 @@ function editHeightmap(options) {
   // Exit customization mode
   function finalizeHeightmap() {
     if (viewbox.select("#heights").selectAll("*").size() < 200)
-      return tip(
-        "Insufficient land area! There should be at least 200 land cells to finalize the heightmap",
-        null,
-        "error"
-      );
+      return tip("Insufficient land area. There should be at least 200 land cells!", null, "error");
     if (byId("imageConverter").offsetParent) return tip("Please exit the Image Conversion mode first", null, "error");
 
     delete window.edits; // remove global variable
@@ -173,6 +172,7 @@ function editHeightmap(options) {
     if (byId("options").querySelector(".tab > button.active").id === "toolsTab") toolsContent.style.display = "block";
     layersPreset.disabled = false;
     exitCustomization.style.display = "none"; // hide finalize button
+
     restoreDefaultEvents();
     clearMainTip();
     closeDialogs();
@@ -187,6 +187,7 @@ function editHeightmap(options) {
     else if (mode === "risk") restoreRiskedData();
 
     // restore initial layers
+    drawFeatures();
     byId("heights").remove();
     turnButtonOff("toggleHeight");
     document
@@ -215,8 +216,7 @@ function editHeightmap(options) {
     pack.religions = [];
 
     const erosionAllowed = allowErosion.checked;
-    markFeatures();
-    markupGridOcean();
+    Features.markupGrid();
     if (erosionAllowed) {
       addLakesInDeepDepressions();
       openNearSeaLakes();
@@ -225,7 +225,7 @@ function editHeightmap(options) {
     calculateTemperatures();
     generatePrecipitation();
     reGraph();
-    drawCoastline();
+    Features.markupPack();
 
     Rivers.generate(erosionAllowed);
 
@@ -237,8 +237,6 @@ function editHeightmap(options) {
       }
     }
 
-    drawRivers();
-    Lakes.defineGroup();
     Biomes.define();
     rankCells();
 
@@ -249,19 +247,16 @@ function editHeightmap(options) {
     Routes.generate();
     Religions.generate();
     BurgsAndStates.defineStateForms();
-    BurgsAndStates.generateProvinces();
+    Provinces.generate();
+    Provinces.getPoles();
     BurgsAndStates.defineBurgFeatures();
 
-    drawStates();
-    drawBorders();
-    drawStateLabels();
-
     Rivers.specify();
-    Lakes.generateName();
+    Features.specify();
 
     Military.generate();
     Markers.generate();
-    addZones();
+    Zones.generate();
     TIME && console.timeEnd("regenerateErasedData");
     INFO && console.groupEnd("Edit Heightmap");
   }
@@ -338,14 +333,13 @@ function editHeightmap(options) {
       zone.selectAll("*").remove();
     });
 
-    markFeatures();
-    markupGridOcean();
+    Features.markupGrid();
     if (erosionAllowed) addLakesInDeepDepressions();
     OceanLayers();
     calculateTemperatures();
     generatePrecipitation();
     reGraph();
-    drawCoastline();
+    Features.markupPack();
 
     if (erosionAllowed) Rivers.generate(true);
 
@@ -439,13 +433,9 @@ function editHeightmap(options) {
       c.center = findCell(c.x, c.y);
     }
 
-    drawStateLabels();
-    drawStates();
-    drawBorders();
-
     if (erosionAllowed) {
       Rivers.specify();
-      Lakes.generateName();
+      Features.specify();
     }
 
     // restore zones from grid
@@ -489,10 +479,14 @@ function editHeightmap(options) {
     updateHistory();
   }
 
+  function getColor(value, scheme = getColorScheme()) {
+    return scheme(1 - (value < 20 ? value - 5 : value) / 100);
+  }
+
   // draw or update heightmap
   function mockHeightmap() {
     const data = renderOcean.checked ? grid.cells.i : grid.cells.i.filter(i => grid.cells.h[i] >= 20);
-    const scheme = getColorScheme();
+
     viewbox
       .select("#heights")
       .selectAll("polygon")
@@ -500,13 +494,12 @@ function editHeightmap(options) {
       .join("polygon")
       .attr("points", d => getGridPolygon(d))
       .attr("id", d => "cell" + d)
-      .attr("fill", d => getColor(grid.cells.h[d], scheme));
+      .attr("fill", d => getColor(grid.cells.h[d]));
   }
 
   // draw or update heightmap for a selection of cells
   function mockHeightmapSelection(selection) {
     const ocean = renderOcean.checked;
-    const scheme = getColorScheme();
 
     selection.forEach(function (i) {
       let cell = viewbox.select("#heights").select("#cell" + i);
@@ -518,7 +511,7 @@ function editHeightmap(options) {
           .append("polygon")
           .attr("points", getGridPolygon(i))
           .attr("id", "cell" + i);
-      cell.attr("fill", getColor(grid.cells.h[i], scheme));
+      cell.attr("fill", getColor(grid.cells.h[i]));
     });
   }
 
@@ -664,7 +657,7 @@ function editHeightmap(options) {
       const fromCell = +lineCircle.attr("data-cell");
       debug.selectAll("*").remove();
 
-      const power = byId("linePower").valueAsNumber;
+      const power = byId("heightmapLinePower").valueAsNumber;
       if (power === 0) return tip("Power should not be zero", false, "error");
 
       const heights = grid.cells.h;
@@ -686,7 +679,7 @@ function editHeightmap(options) {
     }
 
     function dragBrush() {
-      const r = brushRadius.valueAsNumber;
+      const r = heightmapBrushRadius.valueAsNumber;
       const [x, y] = d3.mouse(this);
       const start = findGridCell(x, y, grid);
 
@@ -704,7 +697,7 @@ function editHeightmap(options) {
     }
 
     function changeHeightForSelection(selection, start) {
-      const power = brushPower.valueAsNumber;
+      const power = heightmapBrushPower.valueAsNumber;
 
       const interpolate = d3.interpolateRound(power, 1);
       const land = changeOnlyLand.checked;
@@ -1349,7 +1342,7 @@ function editHeightmap(options) {
         return lum | 0; // land
       };
 
-      const scheme = d3.range(101).map(i => getColor(i, color()));
+      const scheme = d3.range(101).map(i => getColor(i));
       const hues = scheme.map(rgb => d3.hsl(rgb).h | 0);
       const getHeightByScheme = function (color) {
         let height = scheme.indexOf(color);
diff --git a/modules/ui/hotkeys.js b/modules/ui/hotkeys.js
index 3af5f4f3..4b1e626d 100644
--- a/modules/ui/hotkeys.js
+++ b/modules/ui/hotkeys.js
@@ -18,10 +18,9 @@ function handleKeyup(event) {
 
   event.stopPropagation();
 
-  const {code, key, ctrlKey, metaKey, shiftKey, altKey} = event;
+  const {code, key, ctrlKey, metaKey, shiftKey} = event;
   const ctrl = ctrlKey || metaKey || key === "Control";
   const shift = shiftKey || key === "Shift";
-  const alt = altKey || key === "Alt";
 
   if (code === "F1") showInfo();
   else if (code === "F2") regeneratePrompt();
@@ -30,7 +29,7 @@ function handleKeyup(event) {
   else if (code === "Tab") toggleOptions(event);
   else if (code === "Escape") closeAllDialogs();
   else if (code === "Delete") removeElementOnKey();
-  else if (code === "KeyO" && document.getElementById("canvas3d")) toggle3dOptions();
+  else if (code === "KeyO" && byId("canvas3d")) toggle3dOptions();
   else if (ctrl && code === "KeyQ") toggleSaveReminder();
   else if (ctrl && code === "KeyS") saveMap("machine");
   else if (ctrl && code === "KeyC") saveMap("dropbox");
@@ -60,11 +59,6 @@ function handleKeyup(event) {
   else if (key === "#") toggleAddRiver();
   else if (key === "$") createRoute();
   else if (key === "%") toggleAddMarker();
-  else if (alt && code === "KeyB") console.table(pack.burgs);
-  else if (alt && code === "KeyS") console.table(pack.states);
-  else if (alt && code === "KeyC") console.table(pack.cultures);
-  else if (alt && code === "KeyR") console.table(pack.religions);
-  else if (alt && code === "KeyF") console.table(pack.features);
   else if (code === "KeyX") toggleTexture();
   else if (code === "KeyH") toggleHeight();
   else if (code === "KeyB") toggleBiomes();
@@ -81,13 +75,13 @@ function handleKeyup(event) {
   else if (code === "KeyD") toggleBorders();
   else if (code === "KeyR") toggleReligions();
   else if (code === "KeyU") toggleRoutes();
-  else if (code === "KeyT") toggleTemp();
+  else if (code === "KeyT") toggleTemperature();
   else if (code === "KeyN") togglePopulation();
   else if (code === "KeyJ") toggleIce();
-  else if (code === "KeyA") togglePrec();
+  else if (code === "KeyA") togglePrecipitation();
   else if (code === "KeyY") toggleEmblems();
   else if (code === "KeyL") toggleLabels();
-  else if (code === "KeyI") toggleIcons();
+  else if (code === "KeyI") toggleBurgIcons();
   else if (code === "KeyM") toggleMilitary();
   else if (code === "KeyK") toggleMarkers();
   else if (code === "Equal" && !customization) toggleRulers();
@@ -123,24 +117,21 @@ function allowHotkeys() {
 function handleSizeChange(key) {
   let brush = null;
 
-  if (document.getElementById("brushRadius")?.offsetParent) brush = document.getElementById("brushRadius");
-  else if (document.getElementById("linePower")?.offsetParent) brush = document.getElementById("linePower");
-  else if (document.getElementById("biomesManuallyBrush")?.offsetParent)
-    brush = document.getElementById("biomesManuallyBrush");
-  else if (document.getElementById("statesManuallyBrush")?.offsetParent)
-    brush = document.getElementById("statesManuallyBrush");
-  else if (document.getElementById("provincesManuallyBrush")?.offsetParent)
-    brush = document.getElementById("provincesManuallyBrush");
-  else if (document.getElementById("culturesManuallyBrush")?.offsetParent)
-    brush = document.getElementById("culturesManuallyBrush");
-  else if (document.getElementById("zonesBrush")?.offsetParent) brush = document.getElementById("zonesBrush");
-  else if (document.getElementById("religionsManuallyBrush")?.offsetParent)
-    brush = document.getElementById("religionsManuallyBrush");
+  if (byId("heightmapBrushRadius")?.offsetParent) brush = byId("heightmapBrushRadius");
+  else if (byId("heightmapLinePower")?.offsetParent) brush = byId("heightmapLinePower");
+  else if (byId("biomesBrush")?.offsetParent) brush = byId("biomesBrush");
+  else if (byId("culturesBrush")?.offsetParent) brush = byId("culturesBrush");
+  else if (byId("statesBrush")?.offsetParent) brush = byId("statesBrush");
+  else if (byId("provincesBrush")?.offsetParent) brush = byId("provincesBrush");
+  else if (byId("religionsBrush")?.offsetParent) brush = byId("religionsBrush");
+  else if (byId("zonesBrush")?.offsetParent) brush = byId("zonesBrush");
 
   if (brush) {
     const change = key === "-" ? -5 : 5;
-    const value = minmax(+brush.value + change, +brush.min, +brush.max);
-    brush.value = document.getElementById(brush.id + "Number").value = value;
+    const min = +brush.getAttribute("min") || 5;
+    const max = +brush.getAttribute("max") || 100;
+    const value = +brush.value + change;
+    brush.value = minmax(value, min, max);
     return;
   }
 
diff --git a/modules/ui/labels-editor.js b/modules/ui/labels-editor.js
index d19de7ae..8c47ec99 100644
--- a/modules/ui/labels-editor.js
+++ b/modules/ui/labels-editor.js
@@ -26,28 +26,32 @@ function editLabel() {
   modules.editLabel = true;
 
   // add listeners
-  document.getElementById("labelGroupShow").addEventListener("click", showGroupSection);
-  document.getElementById("labelGroupHide").addEventListener("click", hideGroupSection);
-  document.getElementById("labelGroupSelect").addEventListener("click", changeGroup);
-  document.getElementById("labelGroupInput").addEventListener("change", createNewGroup);
-  document.getElementById("labelGroupNew").addEventListener("click", toggleNewGroupInput);
-  document.getElementById("labelGroupRemove").addEventListener("click", removeLabelsGroup);
+  byId("labelGroupShow").on("click", showGroupSection);
+  byId("labelGroupHide").on("click", hideGroupSection);
+  byId("labelGroupSelect").on("click", changeGroup);
+  byId("labelGroupInput").on("change", createNewGroup);
+  byId("labelGroupNew").on("click", toggleNewGroupInput);
+  byId("labelGroupRemove").on("click", removeLabelsGroup);
 
-  document.getElementById("labelTextShow").addEventListener("click", showTextSection);
-  document.getElementById("labelTextHide").addEventListener("click", hideTextSection);
-  document.getElementById("labelText").addEventListener("input", changeText);
-  document.getElementById("labelTextRandom").addEventListener("click", generateRandomName);
+  byId("labelTextShow").on("click", showTextSection);
+  byId("labelTextHide").on("click", hideTextSection);
+  byId("labelText").on("input", changeText);
+  byId("labelTextRandom").on("click", generateRandomName);
 
-  document.getElementById("labelEditStyle").addEventListener("click", editGroupStyle);
+  byId("labelEditStyle").on("click", editGroupStyle);
 
-  document.getElementById("labelSizeShow").addEventListener("click", showSizeSection);
-  document.getElementById("labelSizeHide").addEventListener("click", hideSizeSection);
-  document.getElementById("labelStartOffset").addEventListener("input", changeStartOffset);
-  document.getElementById("labelRelativeSize").addEventListener("input", changeRelativeSize);
+  byId("labelSizeShow").on("click", showSizeSection);
+  byId("labelSizeHide").on("click", hideSizeSection);
+  byId("labelStartOffset").on("input", changeStartOffset);
+  byId("labelRelativeSize").on("input", changeRelativeSize);
 
-  document.getElementById("labelAlign").addEventListener("click", editLabelAlign);
-  document.getElementById("labelLegend").addEventListener("click", editLabelLegend);
-  document.getElementById("labelRemoveSingle").addEventListener("click", removeLabel);
+  byId("labelLetterSpacingShow").on("click", showLetterSpacingSection);
+  byId("labelLetterSpacingHide").on("click", hideLetterSpacingSection);
+  byId("labelLetterSpacingSize").on("input", changeLetterSpacingSize);
+
+  byId("labelAlign").on("click", editLabelAlign);
+  byId("labelLegend").on("click", editLabelLegend);
+  byId("labelRemoveSingle").on("click", removeLabel);
 
   function showEditorTips() {
     showMainTip();
@@ -62,12 +66,12 @@ function editLabel() {
     const group = text.parentNode.id;
 
     if (group === "states" || group === "burgLabels") {
-      document.getElementById("labelGroupShow").style.display = "none";
+      byId("labelGroupShow").style.display = "none";
       return;
     }
 
     hideGroupSection();
-    const select = document.getElementById("labelGroupSelect");
+    const select = byId("labelGroupSelect");
     select.options.length = 0; // remove all options
 
     labels.selectAll(":scope > g").each(function () {
@@ -78,17 +82,17 @@ function editLabel() {
   }
 
   function updateValues(textPath) {
-    document.getElementById("labelText").value = [...textPath.querySelectorAll("tspan")]
-      .map(tspan => tspan.textContent)
-      .join("|");
-    document.getElementById("labelStartOffset").value = parseFloat(textPath.getAttribute("startOffset"));
-    document.getElementById("labelRelativeSize").value = parseFloat(textPath.getAttribute("font-size"));
+    byId("labelText").value = [...textPath.querySelectorAll("tspan")].map(tspan => tspan.textContent).join("|");
+    byId("labelStartOffset").value = parseFloat(textPath.getAttribute("startOffset"));
+    byId("labelRelativeSize").value = parseFloat(textPath.getAttribute("font-size"));
+    let letterSpacingSize = textPath.getAttribute("letter-spacing") ? textPath.getAttribute("letter-spacing") : 0;
+    byId("labelLetterSpacingSize").value = parseFloat(letterSpacingSize);
   }
 
   function drawControlPointsAndLine() {
     debug.select("#controlPoints").remove();
     debug.append("g").attr("id", "controlPoints").attr("transform", elSelected.attr("transform"));
-    const path = document.getElementById("textPath_" + elSelected.attr("id"));
+    const path = byId("textPath_" + elSelected.attr("id"));
     debug.select("#controlPoints").append("path").attr("d", path.getAttribute("d")).on("click", addInterimControlPoint);
     const l = path.getTotalLength();
     if (!l) return;
@@ -117,8 +121,8 @@ function editLabel() {
   }
 
   function redrawLabelPath() {
-    const path = document.getElementById("textPath_" + elSelected.attr("id"));
-    lineGen.curve(d3.curveBundle.beta(1));
+    const path = byId("textPath_" + elSelected.attr("id"));
+    lineGen.curve(d3.curveNatural);
     const points = [];
     debug
       .select("#controlPoints")
@@ -188,19 +192,19 @@ function editLabel() {
 
   function showGroupSection() {
     document.querySelectorAll("#labelEditor > button").forEach(el => (el.style.display = "none"));
-    document.getElementById("labelGroupSection").style.display = "inline-block";
+    byId("labelGroupSection").style.display = "inline-block";
   }
 
   function hideGroupSection() {
     document.querySelectorAll("#labelEditor > button").forEach(el => (el.style.display = "inline-block"));
-    document.getElementById("labelGroupSection").style.display = "none";
-    document.getElementById("labelGroupInput").style.display = "none";
-    document.getElementById("labelGroupInput").value = "";
-    document.getElementById("labelGroupSelect").style.display = "inline-block";
+    byId("labelGroupSection").style.display = "none";
+    byId("labelGroupInput").style.display = "none";
+    byId("labelGroupInput").value = "";
+    byId("labelGroupSelect").style.display = "inline-block";
   }
 
   function changeGroup() {
-    document.getElementById(this.value).appendChild(elSelected.node());
+    byId(this.value).appendChild(elSelected.node());
   }
 
   function toggleNewGroupInput() {
@@ -224,7 +228,7 @@ function editLabel() {
       .replace(/ /g, "_")
       .replace(/[^\w\s]/gi, "");
 
-    if (document.getElementById(group)) {
+    if (byId(group)) {
       tip("Element with this id already exists. Please provide a unique name", false, "error");
       return;
     }
@@ -237,22 +241,22 @@ function editLabel() {
     // just rename if only 1 element left
     const oldGroup = elSelected.node().parentNode;
     if (oldGroup !== "states" && oldGroup !== "addedLabels" && oldGroup.childElementCount === 1) {
-      document.getElementById("labelGroupSelect").selectedOptions[0].remove();
-      document.getElementById("labelGroupSelect").options.add(new Option(group, group, false, true));
+      byId("labelGroupSelect").selectedOptions[0].remove();
+      byId("labelGroupSelect").options.add(new Option(group, group, false, true));
       oldGroup.id = group;
       toggleNewGroupInput();
-      document.getElementById("labelGroupInput").value = "";
+      byId("labelGroupInput").value = "";
       return;
     }
 
     const newGroup = elSelected.node().parentNode.cloneNode(false);
-    document.getElementById("labels").appendChild(newGroup);
+    byId("labels").appendChild(newGroup);
     newGroup.id = group;
-    document.getElementById("labelGroupSelect").options.add(new Option(group, group, false, true));
-    document.getElementById(group).appendChild(elSelected.node());
+    byId("labelGroupSelect").options.add(new Option(group, group, false, true));
+    byId(group).appendChild(elSelected.node());
 
     toggleNewGroupInput();
-    document.getElementById("labelGroupInput").value = "";
+    byId("labelGroupInput").value = "";
   }
 
   function removeLabelsGroup() {
@@ -275,7 +279,7 @@ function editLabel() {
             .select("#" + group)
             .selectAll("text")
             .each(function () {
-              document.getElementById("textPath_" + this.id).remove();
+              byId("textPath_" + this.id).remove();
               this.remove();
             });
           if (!basic) labels.select("#" + group).remove();
@@ -289,16 +293,16 @@ function editLabel() {
 
   function showTextSection() {
     document.querySelectorAll("#labelEditor > button").forEach(el => (el.style.display = "none"));
-    document.getElementById("labelTextSection").style.display = "inline-block";
+    byId("labelTextSection").style.display = "inline-block";
   }
 
   function hideTextSection() {
     document.querySelectorAll("#labelEditor > button").forEach(el => (el.style.display = "inline-block"));
-    document.getElementById("labelTextSection").style.display = "none";
+    byId("labelTextSection").style.display = "none";
   }
 
   function changeText() {
-    const input = document.getElementById("labelText").value;
+    const input = byId("labelText").value;
     const el = elSelected.select("textPath").node();
 
     const lines = input.split("|");
@@ -323,7 +327,7 @@ function editLabel() {
       const culture = pack.cells.culture[cell];
       name = Names.getCulture(culture);
     }
-    document.getElementById("labelText").value = name;
+    byId("labelText").value = name;
     changeText();
   }
 
@@ -334,12 +338,22 @@ function editLabel() {
 
   function showSizeSection() {
     document.querySelectorAll("#labelEditor > button").forEach(el => (el.style.display = "none"));
-    document.getElementById("labelSizeSection").style.display = "inline-block";
+    byId("labelSizeSection").style.display = "inline-block";
   }
 
   function hideSizeSection() {
     document.querySelectorAll("#labelEditor > button").forEach(el => (el.style.display = "inline-block"));
-    document.getElementById("labelSizeSection").style.display = "none";
+    byId("labelSizeSection").style.display = "none";
+  }
+
+  function showLetterSpacingSection() {
+    document.querySelectorAll("#labelEditor > button").forEach(el => (el.style.display = "none"));
+    byId("labelLetterSpacingSection").style.display = "inline-block";
+  }
+
+  function hideLetterSpacingSection() {
+    document.querySelectorAll("#labelEditor > button").forEach(el => (el.style.display = "inline-block"));
+    byId("labelLetterSpacingSection").style.display = "none";
   }
 
   function changeStartOffset() {
@@ -353,6 +367,12 @@ function editLabel() {
     changeText();
   }
 
+  function changeLetterSpacingSize() {
+    elSelected.select("textPath").attr("letter-spacing", this.value + "px");
+    tip("Label letter-spacing size: " + this.value + "px");
+    changeText();
+  }
+
   function editLabelAlign() {
     const bbox = elSelected.node().getBBox();
     const c = [bbox.x + bbox.width / 2, bbox.y + bbox.height / 2];
diff --git a/modules/ui/lakes-editor.js b/modules/ui/lakes-editor.js
index e4977624..55f3fb5b 100644
--- a/modules/ui/lakes-editor.js
+++ b/modules/ui/lakes-editor.js
@@ -15,7 +15,7 @@ function editLake() {
   debug.append("g").attr("id", "vertices");
   elSelected = d3.select(node);
   updateLakeValues();
-  selectLakeGroup(node);
+  selectLakeGroup();
   drawLakeVertices();
   viewbox.on("touchmove mousemove", null);
 
@@ -23,17 +23,15 @@ function editLake() {
   modules.editLake = true;
 
   // add listeners
-  document.getElementById("lakeName").addEventListener("input", changeName);
-  document.getElementById("lakeNameCulture").addEventListener("click", generateNameCulture);
-  document.getElementById("lakeNameRandom").addEventListener("click", generateNameRandom);
-
-  document.getElementById("lakeGroup").addEventListener("change", changeLakeGroup);
-  document.getElementById("lakeGroupAdd").addEventListener("click", toggleNewGroupInput);
-  document.getElementById("lakeGroupName").addEventListener("change", createNewGroup);
-  document.getElementById("lakeGroupRemove").addEventListener("click", removeLakeGroup);
-
-  document.getElementById("lakeEditStyle").addEventListener("click", editGroupStyle);
-  document.getElementById("lakeLegend").addEventListener("click", editLakeLegend);
+  byId("lakeName").on("input", changeName);
+  byId("lakeNameCulture").on("click", generateNameCulture);
+  byId("lakeNameRandom").on("click", generateNameRandom);
+  byId("lakeGroup").on("change", changeLakeGroup);
+  byId("lakeGroupAdd").on("click", toggleNewGroupInput);
+  byId("lakeGroupName").on("change", createNewGroup);
+  byId("lakeGroupRemove").on("click", removeLakeGroup);
+  byId("lakeEditStyle").on("click", editGroupStyle);
+  byId("lakeLegend").on("click", editLakeLegend);
 
   function getLake() {
     const lakeId = +elSelected.attr("data-f");
@@ -41,85 +39,91 @@ function editLake() {
   }
 
   function updateLakeValues() {
-    const cells = pack.cells;
+    const {cells, vertices, rivers} = pack;
 
     const l = getLake();
-    document.getElementById("lakeName").value = l.name;
-    document.getElementById("lakeArea").value = si(getArea(l.area)) + " " + getAreaUnit();
+    byId("lakeName").value = l.name;
+    byId("lakeArea").value = si(getArea(l.area)) + " " + getAreaUnit();
 
-    const length = d3.polygonLength(l.vertices.map(v => pack.vertices.p[v]));
-    document.getElementById("lakeShoreLength").value = si(length * distanceScale) + " " + distanceUnitInput.value;
+    const length = d3.polygonLength(l.vertices.map(v => vertices.p[v]));
+    byId("lakeShoreLength").value = si(length * distanceScale) + " " + distanceUnitInput.value;
 
     const lakeCells = Array.from(cells.i.filter(i => cells.f[i] === l.i));
     const heights = lakeCells.map(i => cells.h[i]);
 
-    document.getElementById("lakeElevation").value = getHeight(l.height);
-    document.getElementById("lakeAverageDepth").value = getHeight(d3.mean(heights), "abs");
-    document.getElementById("lakeMaxDepth").value = getHeight(d3.min(heights), "abs");
+    byId("lakeElevation").value = getHeight(l.height);
+    byId("lakeAverageDepth").value = getHeight(d3.mean(heights), "abs");
+    byId("lakeMaxDepth").value = getHeight(d3.min(heights), "abs");
 
-    document.getElementById("lakeFlux").value = l.flux;
-    document.getElementById("lakeEvaporation").value = l.evaporation;
+    byId("lakeFlux").value = l.flux;
+    byId("lakeEvaporation").value = l.evaporation;
 
-    const inlets = l.inlets && l.inlets.map(inlet => pack.rivers.find(river => river.i === inlet)?.name);
-    const outlet = l.outlet ? pack.rivers.find(river => river.i === l.outlet)?.name : "no";
-    document.getElementById("lakeInlets").value = inlets ? inlets.length : "no";
-    document.getElementById("lakeInlets").title = inlets ? inlets.join(", ") : "";
-    document.getElementById("lakeOutlet").value = outlet;
+    const inlets = l.inlets && l.inlets.map(inlet => rivers.find(river => river.i === inlet)?.name);
+    const outlet = l.outlet ? rivers.find(river => river.i === l.outlet)?.name : "no";
+    byId("lakeInlets").value = inlets ? inlets.length : "no";
+    byId("lakeInlets").title = inlets ? inlets.join(", ") : "";
+    byId("lakeOutlet").value = outlet;
   }
 
   function drawLakeVertices() {
-    const v = getLake().vertices; // lake outer vertices
+    const vertices = getLake().vertices;
 
-    const c = [...new Set(v.map(v => pack.vertices.c[v]).flat())];
+    const neibCells = unique(vertices.map(v => pack.vertices.c[v]).flat());
     debug
       .select("#vertices")
       .selectAll("polygon")
-      .data(c)
+      .data(neibCells)
       .enter()
       .append("polygon")
-      .attr("points", d => getPackPolygon(d))
+      .attr("points", getPackPolygon)
       .attr("data-c", d => d);
 
     debug
       .select("#vertices")
       .selectAll("circle")
-      .data(v)
+      .data(vertices)
       .enter()
       .append("circle")
       .attr("cx", d => pack.vertices.p[d][0])
       .attr("cy", d => pack.vertices.p[d][1])
       .attr("r", 0.4)
       .attr("data-v", d => d)
-      .call(d3.drag().on("drag", dragVertex))
+      .call(d3.drag().on("drag", handleVertexDrag).on("end", handleVertexDragEnd))
       .on("mousemove", () =>
-        tip("Drag to move the vertex, please use for fine-tuning only. Edit heightmap to change actual cell heights")
+        tip("Drag to move the vertex. Please use for fine-tuning only! Edit heightmap to change actual cell heights")
       );
   }
 
-  function dragVertex() {
-    const x = rn(d3.event.x, 2),
-      y = rn(d3.event.y, 2);
+  function handleVertexDrag() {
+    const x = rn(d3.event.x, 2);
+    const y = rn(d3.event.y, 2);
     this.setAttribute("cx", x);
     this.setAttribute("cy", y);
-    const v = +this.dataset.v;
-    pack.vertices.p[v] = [x, y];
-    debug
-      .select("#vertices")
-      .selectAll("polygon")
-      .attr("points", d => getPackPolygon(d));
-    redrawLake();
+
+    const vertexId = d3.select(this).datum();
+    pack.vertices.p[vertexId] = [x, y];
+
+    const feature = getLake();
+
+    // update lake path
+    defs.select("#featurePaths > path#feature_" + feature.i).attr("d", getFeaturePath(feature));
+
+    // update area
+    const points = feature.vertices.map(vertex => pack.vertices.p[vertex]);
+    feature.area = Math.abs(d3.polygonArea(points));
+    byId("lakeArea").value = si(getArea(feature.area)) + " " + getAreaUnit();
+
+    // update cell
+    debug.select("#vertices").selectAll("polygon").attr("points", getPackPolygon);
   }
 
-  function redrawLake() {
-    lineGen.curve(d3.curveBasisClosed);
-    const feature = getLake();
-    const points = feature.vertices.map(v => pack.vertices.p[v]);
-    const d = round(lineGen(points));
-    elSelected.attr("d", d);
-    defs.select("mask#land > path#land_" + feature.i).attr("d", d); // update land mask
-
-    feature.area = Math.abs(d3.polygonArea(points));
-    document.getElementById("lakeArea").value = si(getArea(feature.area)) + " " + getAreaUnit();
+  function handleVertexDragEnd() {
+    if (layerIsOn("toggleStates")) drawStates();
+    if (layerIsOn("toggleProvinces")) drawProvinces();
+    if (layerIsOn("toggleBorders")) drawBorders();
+    if (layerIsOn("toggleBiomes")) drawBiomes();
+    if (layerIsOn("toggleReligions")) drawReligions();
+    if (layerIsOn("toggleCultures")) drawCultures();
   }
 
   function changeName() {
@@ -136,18 +140,18 @@ function editLake() {
     lake.name = lakeName.value = Names.getBase(rand(nameBases.length - 1));
   }
 
-  function selectLakeGroup(node) {
-    const group = node.parentNode.id;
-    const select = document.getElementById("lakeGroup");
-    select.options.length = 0; // remove all options
+  function selectLakeGroup() {
+    const lake = getLake();
 
+    const select = byId("lakeGroup");
+    select.options.length = 0; // remove all options
     lakes.selectAll("g").each(function () {
-      select.options.add(new Option(this.id, this.id, false, this.id === group));
+      select.options.add(new Option(this.id, this.id, false, this.id === lake.group));
     });
   }
 
   function changeLakeGroup() {
-    document.getElementById(this.value).appendChild(elSelected.node());
+    byId(this.value).appendChild(elSelected.node());
     getLake().group = this.value;
   }
 
@@ -172,7 +176,7 @@ function editLake() {
       .replace(/ /g, "_")
       .replace(/[^\w\s]/gi, "");
 
-    if (document.getElementById(group)) {
+    if (byId(group)) {
       tip("Element with this id already exists. Please provide a unique name", false, "error");
       return;
     }
@@ -186,23 +190,23 @@ function editLake() {
     const oldGroup = elSelected.node().parentNode;
     const basic = ["freshwater", "salt", "sinkhole", "frozen", "lava", "dry"].includes(oldGroup.id);
     if (!basic && oldGroup.childElementCount === 1) {
-      document.getElementById("lakeGroup").selectedOptions[0].remove();
-      document.getElementById("lakeGroup").options.add(new Option(group, group, false, true));
+      byId("lakeGroup").selectedOptions[0].remove();
+      byId("lakeGroup").options.add(new Option(group, group, false, true));
       oldGroup.id = group;
       toggleNewGroupInput();
-      document.getElementById("lakeGroupName").value = "";
+      byId("lakeGroupName").value = "";
       return;
     }
 
     // create a new group
     const newGroup = elSelected.node().parentNode.cloneNode(false);
-    document.getElementById("lakes").appendChild(newGroup);
+    byId("lakes").appendChild(newGroup);
     newGroup.id = group;
-    document.getElementById("lakeGroup").options.add(new Option(group, group, false, true));
-    document.getElementById(group).appendChild(elSelected.node());
+    byId("lakeGroup").options.add(new Option(group, group, false, true));
+    byId(group).appendChild(elSelected.node());
 
     toggleNewGroupInput();
-    document.getElementById("lakeGroupName").value = "";
+    byId("lakeGroupName").value = "";
   }
 
   function removeLakeGroup() {
@@ -221,14 +225,14 @@ function editLake() {
       buttons: {
         Remove: function () {
           $(this).dialog("close");
-          const freshwater = document.getElementById("freshwater");
-          const groupEl = document.getElementById(group);
+          const freshwater = byId("freshwater");
+          const groupEl = byId(group);
           while (groupEl.childNodes.length) {
             freshwater.appendChild(groupEl.childNodes[0]);
           }
           groupEl.remove();
-          document.getElementById("lakeGroup").selectedOptions[0].remove();
-          document.getElementById("lakeGroup").value = "freshwater";
+          byId("lakeGroup").selectedOptions[0].remove();
+          byId("lakeGroup").value = "freshwater";
         },
         Cancel: function () {
           $(this).dialog("close");
diff --git a/modules/ui/layers.js b/modules/ui/layers.js
index 0b85aa0c..a1e3b503 100644
--- a/modules/ui/layers.js
+++ b/modules/ui/layers.js
@@ -8,7 +8,7 @@ function getDefaultPresets() {
   return {
     political: [
       "toggleBorders",
-      "toggleIcons",
+      "toggleBurgIcons",
       "toggleIce",
       "toggleLabels",
       "toggleRivers",
@@ -19,8 +19,8 @@ function getDefaultPresets() {
     ],
     cultural: [
       "toggleBorders",
+      "toggleBurgIcons",
       "toggleCultures",
-      "toggleIcons",
       "toggleLabels",
       "toggleRivers",
       "toggleRoutes",
@@ -29,7 +29,7 @@ function getDefaultPresets() {
     ],
     religions: [
       "toggleBorders",
-      "toggleIcons",
+      "toggleBurgIcons",
       "toggleLabels",
       "toggleReligions",
       "toggleRivers",
@@ -37,15 +37,22 @@ function getDefaultPresets() {
       "toggleScaleBar",
       "toggleVignette"
     ],
-    provinces: ["toggleBorders", "toggleIcons", "toggleProvinces", "toggleRivers", "toggleScaleBar", "toggleVignette"],
+    provinces: [
+      "toggleBorders",
+      "toggleBurgIcons",
+      "toggleProvinces",
+      "toggleRivers",
+      "toggleScaleBar",
+      "toggleVignette"
+    ],
     biomes: ["toggleBiomes", "toggleIce", "toggleRivers", "toggleScaleBar", "toggleVignette"],
     heightmap: ["toggleHeight", "toggleRivers", "toggleVignette"],
     physical: ["toggleCoordinates", "toggleHeight", "toggleIce", "toggleRivers", "toggleScaleBar", "toggleVignette"],
     poi: [
       "toggleBorders",
+      "toggleBurgIcons",
       "toggleHeight",
       "toggleIce",
-      "toggleIcons",
       "toggleMarkers",
       "toggleRivers",
       "toggleRoutes",
@@ -54,7 +61,7 @@ function getDefaultPresets() {
     ],
     military: [
       "toggleBorders",
-      "toggleIcons",
+      "toggleBurgIcons",
       "toggleLabels",
       "toggleMilitary",
       "toggleRivers",
@@ -65,7 +72,7 @@ function getDefaultPresets() {
     ],
     emblems: [
       "toggleBorders",
-      "toggleIcons",
+      "toggleBurgIcons",
       "toggleIce",
       "toggleEmblems",
       "toggleRivers",
@@ -92,33 +99,45 @@ function restoreCustomPresets() {
 }
 
 // run on map generation
-function applyPreset() {
-  const preset = localStorage.getItem("preset") || document.getElementById("layersPreset").value;
-  changePreset(preset);
+function applyLayersPreset() {
+  const preset = localStorage.getItem("preset") || byId("layersPreset").value;
+  setLayersPreset(preset);
+
+  const layers = presets[preset]; // layers to be turned on
+  document.querySelectorAll("#mapLayers > li").forEach(el => {
+    const shouldBeOn = layers.includes(el.id);
+    if (shouldBeOn) el.classList.remove("buttonoff");
+    else el.classList.add("buttonoff");
+  });
 }
 
-// toggle layers on preset change
-function changePreset(preset) {
-  const layers = presets[preset]; // layers to be turned on
-  document
-    .getElementById("mapLayers")
-    .querySelectorAll("li")
-    .forEach(function (e) {
-      if (layers.includes(e.id) && !layerIsOn(e.id)) e.click();
-      else if (!layers.includes(e.id) && layerIsOn(e.id)) e.click();
-    });
-  layersPreset.value = preset;
+function setLayersPreset(preset) {
+  byId("layersPreset").value = preset;
   localStorage.setItem("preset", preset);
 
   const isDefault = getDefaultPresets()[preset];
-  removePresetButton.style.display = isDefault ? "none" : "inline-block";
-  savePresetButton.style.display = "none";
-  if (document.getElementById("canvas3d")) setTimeout(ThreeD.update(), 400);
+  byId("removePresetButton").style.display = isDefault ? "none" : "inline-block";
+  byId("savePresetButton").style.display = "none";
+}
+
+// toggle layers on manual preset change
+function handleLayersPresetChange(preset) {
+  setLayersPreset(preset);
+
+  const layers = presets[preset]; // layers to be turned on
+  document.querySelectorAll("#mapLayers > li").forEach(el => {
+    const isOn = layerIsOn(el.id);
+    const shouldBeOn = layers.includes(el.id);
+    if (shouldBeOn && !isOn) el.click();
+    if (isOn && !shouldBeOn) el.click();
+  });
+
+  if (byId("canvas3d")) setTimeout(() => ThreeD.update(), 400);
 }
 
 function savePreset() {
   prompt("Please provide a preset name", {default: ""}, preset => {
-    presets[preset] = Array.from(document.getElementById("mapLayers").querySelectorAll("li:not(.buttonoff)"))
+    presets[preset] = Array.from(byId("mapLayers").querySelectorAll("li:not(.buttonoff)"))
       .map(node => node.id)
       .sort();
     layersPreset.add(new Option(preset, preset, false, true));
@@ -143,17 +162,18 @@ function removePreset() {
 }
 
 function getCurrentPreset() {
-  const layers = Array.from(document.getElementById("mapLayers").querySelectorAll("li:not(.buttonoff)"))
+  const layers = Array.from(document.querySelectorAll("#mapLayers > li:not(.buttonoff)"))
     .map(node => node.id)
     .sort();
-  const defaultPresets = getDefaultPresets();
 
   for (const preset in presets) {
-    if (JSON.stringify(presets[preset]) !== JSON.stringify(layers)) continue;
-    layersPreset.value = preset;
-    removePresetButton.style.display = defaultPresets[preset] ? "none" : "inline-block";
-    savePresetButton.style.display = "none";
-    return;
+    if (JSON.stringify(presets[preset].sort()) === JSON.stringify(layers)) {
+      layersPreset.value = preset;
+      const isDefault = getDefaultPresets()[preset];
+      removePresetButton.style.display = isDefault ? "none" : "inline-block";
+      savePresetButton.style.display = "none";
+      return;
+    }
   }
 
   layersPreset.value = "custom";
@@ -161,31 +181,37 @@ function getCurrentPreset() {
   savePresetButton.style.display = "inline-block";
 }
 
-// run on map regeneration
-function restoreLayers() {
+// run on each map generation
+function drawLayers() {
+  drawFeatures();
   if (layerIsOn("toggleTexture")) drawTexture();
   if (layerIsOn("toggleHeight")) drawHeightmap();
+  if (layerIsOn("toggleBiomes")) drawBiomes();
   if (layerIsOn("toggleCells")) drawCells();
   if (layerIsOn("toggleGrid")) drawGrid();
   if (layerIsOn("toggleCoordinates")) drawCoordinates();
   if (layerIsOn("toggleCompass")) compass.style("display", "block");
-  if (layerIsOn("toggleRoutes")) drawRoutes();
-  if (layerIsOn("toggleTemp")) drawTemp();
-  if (layerIsOn("togglePrec")) drawPrec();
-  if (layerIsOn("togglePopulation")) drawPopulation();
-  if (layerIsOn("toggleBiomes")) drawBiomes();
-  if (layerIsOn("toggleRelief")) ReliefIcons();
-  if (layerIsOn("toggleCultures")) drawCultures();
-  if (layerIsOn("toggleProvinces")) drawProvinces();
+  if (layerIsOn("toggleRivers")) drawRivers();
+  if (layerIsOn("toggleRelief")) drawReliefIcons();
   if (layerIsOn("toggleReligions")) drawReligions();
+  if (layerIsOn("toggleCultures")) drawCultures();
+  if (layerIsOn("toggleStates")) drawStates();
+  if (layerIsOn("toggleProvinces")) drawProvinces();
+  if (layerIsOn("toggleZones")) drawZones();
+  if (layerIsOn("toggleBorders")) drawBorders();
+  if (layerIsOn("toggleRoutes")) drawRoutes();
+  if (layerIsOn("toggleTemperature")) drawTemperature();
+  if (layerIsOn("togglePopulation")) drawPopulation();
   if (layerIsOn("toggleIce")) drawIce();
+  if (layerIsOn("togglePrecipitation")) drawPrecipitation();
   if (layerIsOn("toggleEmblems")) drawEmblems();
+  if (layerIsOn("toggleLabels")) drawLabels();
+  if (layerIsOn("toggleBurgIcons")) drawBurgIcons();
+  if (layerIsOn("toggleMilitary")) drawMilitary();
   if (layerIsOn("toggleMarkers")) drawMarkers();
-
-  // some layers are rendered each time, remove them if they are not on
-  if (!layerIsOn("toggleBorders")) borders.selectAll("path").remove();
-  if (!layerIsOn("toggleStates")) regions.selectAll("path").remove();
-  if (!layerIsOn("toggleRivers")) rivers.selectAll("*").remove();
+  if (layerIsOn("toggleRulers")) rulers.draw();
+  // scale bar
+  // vignette
 }
 
 function toggleHeight(event) {
@@ -203,369 +229,54 @@ function toggleHeight(event) {
   }
 }
 
-function drawHeightmap() {
-  TIME && console.time("drawHeightmap");
-
-  const ocean = terrs.select("#oceanHeights");
-  const land = terrs.select("#landHeights");
-
-  ocean.selectAll("*").remove();
-  land.selectAll("*").remove();
-
-  const paths = new Array(101);
-
-  // ocean cells
-  const renderOceanCells = Boolean(+ocean.attr("data-render"));
-  if (renderOceanCells) {
-    const {cells, vertices} = grid;
-    const used = new Uint8Array(cells.i.length);
-
-    const skip = +ocean.attr("skip") + 1 || 1;
-    const relax = +ocean.attr("relax") || 0;
-    lineGen.curve(d3[ocean.attr("curve") || "curveBasisClosed"]);
-
-    let currentLayer = 0;
-    const heights = Array.from(cells.i).sort((a, b) => cells.h[a] - cells.h[b]);
-
-    for (const i of heights) {
-      const h = cells.h[i];
-      if (h > currentLayer) currentLayer += skip;
-      if (h < currentLayer) continue;
-      if (currentLayer >= 20) break;
-      if (used[i]) continue; // already marked
-      const onborder = cells.c[i].some(n => cells.h[n] < h);
-      if (!onborder) continue;
-      const vertex = cells.v[i].find(v => vertices.c[v].some(i => cells.h[i] < h));
-      const chain = connectVertices(cells, vertices, vertex, h, used);
-      if (chain.length < 3) continue;
-      const points = simplifyLine(chain, relax).map(v => vertices.p[v]);
-      if (!paths[h]) paths[h] = "";
-      paths[h] += round(lineGen(points));
-    }
-  }
-
-  // land cells
-  {
-    const {cells, vertices} = pack;
-    const used = new Uint8Array(cells.i.length);
-
-    const skip = +land.attr("skip") + 1 || 1;
-    const relax = +land.attr("relax") || 0;
-    lineGen.curve(d3[land.attr("curve") || "curveBasisClosed"]);
-
-    let currentLayer = 20;
-    const heights = Array.from(cells.i).sort((a, b) => cells.h[a] - cells.h[b]);
-    for (const i of heights) {
-      const h = cells.h[i];
-      if (h > currentLayer) currentLayer += skip;
-      if (h < currentLayer) continue;
-      if (currentLayer > 100) break; // no layers possible with height > 100
-      if (used[i]) continue; // already marked
-      const onborder = cells.c[i].some(n => cells.h[n] < h);
-      if (!onborder) continue;
-      const vertex = cells.v[i].find(v => vertices.c[v].some(i => cells.h[i] < h));
-      const chain = connectVertices(cells, vertices, vertex, h, used);
-      if (chain.length < 3) continue;
-      const points = simplifyLine(chain, relax).map(v => vertices.p[v]);
-      if (!paths[h]) paths[h] = "";
-      paths[h] += round(lineGen(points));
-    }
-  }
-
-  // render paths
-  for (const height of d3.range(0, 101)) {
-    const group = height < 20 ? ocean : land;
-    const scheme = getColorScheme(group.attr("scheme"));
-
-    if (height === 0 && renderOceanCells) {
-      // draw base ocean layer
-      group
-        .append("rect")
-        .attr("x", 0)
-        .attr("y", 0)
-        .attr("width", graphWidth)
-        .attr("height", graphHeight)
-        .attr("fill", scheme(1));
-    }
-
-    if (height === 20) {
-      // draw base land layer
-      group
-        .append("rect")
-        .attr("x", 0)
-        .attr("y", 0)
-        .attr("width", graphWidth)
-        .attr("height", graphHeight)
-        .attr("fill", scheme(0.8));
-    }
-
-    if (paths[height] && paths[height].length >= 10) {
-      const terracing = group.attr("terracing") / 10 || 0;
-      const color = getColor(height, scheme);
-
-      if (terracing) {
-        group
-          .append("path")
-          .attr("d", paths[height])
-          .attr("transform", "translate(.7,1.4)")
-          .attr("fill", d3.color(color).darker(terracing))
-          .attr("data-height", height);
-      }
-      group.append("path").attr("d", paths[height]).attr("fill", color).attr("data-height", height);
-    }
-  }
-
-  // connect vertices to chain
-  function connectVertices(cells, vertices, start, h, used) {
-    const n = cells.i.length;
-    const chain = []; // vertices chain to form a path
-    for (let i = 0, current = start; i === 0 || (current !== start && i < 20000); i++) {
-      const prev = chain[chain.length - 1]; // previous vertex in chain
-      chain.push(current); // add current vertex to sequence
-      const c = vertices.c[current]; // cells adjacent to vertex
-      c.filter(c => cells.h[c] === h).forEach(c => (used[c] = 1));
-      const c0 = c[0] >= n || cells.h[c[0]] < h;
-      const c1 = c[1] >= n || cells.h[c[1]] < h;
-      const c2 = c[2] >= n || cells.h[c[2]] < h;
-      const v = vertices.v[current]; // neighboring vertices
-      if (v[0] !== prev && c0 !== c1) current = v[0];
-      else if (v[1] !== prev && c1 !== c2) current = v[1];
-      else if (v[2] !== prev && c0 !== c2) current = v[2];
-      if (current === chain[chain.length - 1]) {
-        ERROR && console.error("Next vertex is not found");
-        break;
-      }
-    }
-    return chain;
-  }
-
-  function simplifyLine(chain, simplification) {
-    if (!simplification) return chain;
-    const n = simplification + 1; // filter each nth element
-    return chain.filter((d, i) => i % n === 0);
-  }
-
-  TIME && console.timeEnd("drawHeightmap");
-}
-
-function getColor(value, scheme = getColorScheme("bright")) {
-  return scheme(1 - (value < 20 ? value - 5 : value) / 100);
-}
-
-function toggleTemp(event) {
+function toggleTemperature(event) {
   if (!temperature.selectAll("*").size()) {
-    turnButtonOn("toggleTemp");
-    drawTemp();
+    turnButtonOn("toggleTemperature");
+    drawTemperature();
     if (event && isCtrlClick(event)) editStyle("temperature");
   } else {
-    if (event && isCtrlClick(event)) {
-      editStyle("temperature");
-      return;
-    }
-    turnButtonOff("toggleTemp");
+    if (event && isCtrlClick(event)) return editStyle("temperature");
+    turnButtonOff("toggleTemperature");
     temperature.selectAll("*").remove();
   }
 }
 
-function drawTemp() {
-  TIME && console.time("drawTemp");
-  temperature.selectAll("*").remove();
-  lineGen.curve(d3.curveBasisClosed);
-  const scheme = d3.scaleSequential(d3.interpolateSpectral);
-  const tMax = +temperatureEquatorOutput.max,
-    tMin = +temperatureEquatorOutput.min,
-    delta = tMax - tMin;
-
-  const cells = grid.cells,
-    vertices = grid.vertices,
-    n = cells.i.length;
-  const used = new Uint8Array(n); // to detect already passed cells
-  const min = d3.min(cells.temp),
-    max = d3.max(cells.temp);
-  const step = Math.max(Math.round(Math.abs(min - max) / 5), 1);
-  const isolines = d3.range(min + step, max, step);
-  const chains = [],
-    labels = []; // store label coordinates
-
-  for (const i of cells.i) {
-    const t = cells.temp[i];
-    if (used[i] || !isolines.includes(t)) continue;
-    const start = findStart(i, t);
-    if (!start) continue;
-    used[i] = 1;
-
-    const chain = connectVertices(start, t); // vertices chain to form a path
-    const relaxed = chain.filter((v, i) => i % 4 === 0 || vertices.c[v].some(c => c >= n));
-    if (relaxed.length < 6) continue;
-    const points = relaxed.map(v => vertices.p[v]);
-    chains.push([t, points]);
-    addLabel(points, t);
-  }
-
-  // min temp isoline covers all graph
-  temperature
-    .append("path")
-    .attr("d", `M0,0 h${graphWidth} v${graphHeight} h${-graphWidth} Z`)
-    .attr("fill", scheme(1 - (min - tMin) / delta))
-    .attr("stroke", "none");
-
-  for (const t of isolines) {
-    const path = chains
-      .filter(c => c[0] === t)
-      .map(c => round(lineGen(c[1])))
-      .join("");
-    if (!path) continue;
-    const fill = scheme(1 - (t - tMin) / delta),
-      stroke = d3.color(fill).darker(0.2);
-    temperature.append("path").attr("d", path).attr("fill", fill).attr("stroke", stroke);
-  }
-
-  const tempLabels = temperature.append("g").attr("id", "tempLabels").attr("fill-opacity", 1);
-  tempLabels
-    .selectAll("text")
-    .data(labels)
-    .enter()
-    .append("text")
-    .attr("x", d => d[0])
-    .attr("y", d => d[1])
-    .text(d => convertTemperature(d[2]));
-
-  // find cell with temp < isotherm and find vertex to start path detection
-  function findStart(i, t) {
-    if (cells.b[i]) return cells.v[i].find(v => vertices.c[v].some(c => c >= n)); // map border cell
-    return cells.v[i][cells.c[i].findIndex(c => cells.temp[c] < t || !cells.temp[c])];
-  }
-
-  function addLabel(points, t) {
-    const c = svgWidth / 2; // map center x coordinate
-    // add label on isoline top center
-    const tc = points[d3.scan(points, (a, b) => a[1] - b[1] + (Math.abs(a[0] - c) - Math.abs(b[0] - c)) / 2)];
-    pushLabel(tc[0], tc[1], t);
-
-    // add label on isoline bottom center
-    if (points.length > 20) {
-      const bc = points[d3.scan(points, (a, b) => b[1] - a[1] + (Math.abs(a[0] - c) - Math.abs(b[0] - c)) / 2)];
-      const dist2 = (tc[1] - bc[1]) ** 2 + (tc[0] - bc[0]) ** 2; // square distance between this and top point
-      if (dist2 > 100) pushLabel(bc[0], bc[1], t);
-    }
-  }
-
-  function pushLabel(x, y, t) {
-    if (x < 20 || x > svgWidth - 20) return;
-    if (y < 20 || y > svgHeight - 20) return;
-    labels.push([x, y, t]);
-  }
-
-  // connect vertices to chain
-  function connectVertices(start, t) {
-    const chain = []; // vertices chain to form a path
-    for (let i = 0, current = start; i === 0 || (current !== start && i < 20000); i++) {
-      const prev = chain[chain.length - 1]; // previous vertex in chain
-      chain.push(current); // add current vertex to sequence
-      const c = vertices.c[current]; // cells adjacent to vertex
-      c.filter(c => cells.temp[c] === t).forEach(c => (used[c] = 1));
-      const c0 = c[0] >= n || cells.temp[c[0]] < t;
-      const c1 = c[1] >= n || cells.temp[c[1]] < t;
-      const c2 = c[2] >= n || cells.temp[c[2]] < t;
-      const v = vertices.v[current]; // neighboring vertices
-      if (v[0] !== prev && c0 !== c1) current = v[0];
-      else if (v[1] !== prev && c1 !== c2) current = v[1];
-      else if (v[2] !== prev && c0 !== c2) current = v[2];
-      if (current === chain[chain.length - 1]) {
-        ERROR && console.error("Next vertex is not found");
-        break;
-      }
-    }
-    chain.push(start);
-    return chain;
-  }
-  TIME && console.timeEnd("drawTemp");
-}
-
 function toggleBiomes(event) {
   if (!biomes.selectAll("path").size()) {
     turnButtonOn("toggleBiomes");
     drawBiomes();
     if (event && isCtrlClick(event)) editStyle("biomes");
   } else {
-    if (event && isCtrlClick(event)) {
-      editStyle("biomes");
-      return;
-    }
+    if (event && isCtrlClick(event)) return editStyle("biomes");
     biomes.selectAll("path").remove();
     turnButtonOff("toggleBiomes");
   }
 }
 
 function drawBiomes() {
-  biomes.selectAll("path").remove();
-  const cells = pack.cells,
-    vertices = pack.vertices,
-    n = cells.i.length;
-  const used = new Uint8Array(cells.i.length);
-  const paths = new Array(biomesData.i.length).fill("");
+  TIME && console.time("drawBiomes");
 
-  for (const i of cells.i) {
-    if (!cells.biome[i]) continue; // no need to mark marine biome (liquid water)
-    if (used[i]) continue; // already marked
-    const b = cells.biome[i];
-    const onborder = cells.c[i].some(n => cells.biome[n] !== b);
-    if (!onborder) continue;
-    const edgeVerticle = cells.v[i].find(v => vertices.c[v].some(i => cells.biome[i] !== b));
-    const chain = connectVertices(edgeVerticle, b);
-    if (chain.length < 3) continue;
-    const points = clipPoly(
-      chain.map(v => vertices.p[v]),
-      1
-    );
-    paths[b] += "M" + points.join("L") + "Z";
-  }
-
-  paths.forEach(function (d, i) {
-    if (d.length < 10) return;
-    biomes
-      .append("path")
-      .attr("d", d)
-      .attr("fill", biomesData.color[i])
-      .attr("stroke", biomesData.color[i])
-      .attr("id", "biome" + i);
+  const cells = pack.cells;
+  const bodyPaths = new Array(biomesData.i.length - 1);
+  const isolines = getIsolines(pack, cellId => cells.biome[cellId], {fill: true, waterGap: true});
+  Object.entries(isolines).forEach(([index, {fill, waterGap}]) => {
+    const color = biomesData.color[index];
+    bodyPaths.push(getGappedFillPaths("biome", fill, waterGap, color, index));
   });
 
-  // connect vertices to chain
-  function connectVertices(start, b) {
-    const chain = []; // vertices chain to form a path
-    for (let i = 0, current = start; i === 0 || (current !== start && i < 20000); i++) {
-      const prev = chain[chain.length - 1]; // previous vertex in chain
-      chain.push(current); // add current vertex to sequence
-      const c = vertices.c[current]; // cells adjacent to vertex
-      c.filter(c => cells.biome[c] === b).forEach(c => (used[c] = 1));
-      const c0 = c[0] >= n || cells.biome[c[0]] !== b;
-      const c1 = c[1] >= n || cells.biome[c[1]] !== b;
-      const c2 = c[2] >= n || cells.biome[c[2]] !== b;
-      const v = vertices.v[current]; // neighboring vertices
-      if (v[0] !== prev && c0 !== c1) current = v[0];
-      else if (v[1] !== prev && c1 !== c2) current = v[1];
-      else if (v[2] !== prev && c0 !== c2) current = v[2];
-      if (current === chain[chain.length - 1]) {
-        ERROR && console.error("Next vertex is not found");
-        break;
-      }
-    }
-    return chain;
-  }
+  byId("biomes").innerHTML = bodyPaths.join("");
+
+  TIME && console.timeEnd("drawBiomes");
 }
 
-function togglePrec(event) {
+function togglePrecipitation(event) {
   if (!prec.selectAll("circle").size()) {
-    turnButtonOn("togglePrec");
-    drawPrec();
+    turnButtonOn("togglePrecipitation");
+    drawPrecipitation();
     if (event && isCtrlClick(event)) editStyle("prec");
   } else {
-    if (event && isCtrlClick(event)) {
-      editStyle("prec");
-      return;
-    }
-    turnButtonOff("togglePrec");
+    if (event && isCtrlClick(event)) return editStyle("prec");
+    turnButtonOff("togglePrecipitation");
     const hide = d3.transition().duration(1000).ease(d3.easeSinIn);
     prec.selectAll("text").attr("opacity", 1).transition(hide).attr("opacity", 0);
     prec.selectAll("circle").transition(hide).attr("r", 0).remove();
@@ -573,11 +284,12 @@ function togglePrec(event) {
   }
 }
 
-function drawPrec() {
+function drawPrecipitation() {
+  TIME && console.time("drawPrecipitation");
+
   prec.selectAll("circle").remove();
   const {cells, points} = grid;
 
-  prec.style("display", "block");
   const show = d3.transition().duration(800).ease(d3.easeSinIn);
   prec.selectAll("text").attr("opacity", 0).transition(show).attr("opacity", 1);
 
@@ -586,6 +298,7 @@ function drawPrec() {
   const getRadius = prec => rn(Math.sqrt(prec / 4) / cellsNumberModifier, 2);
 
   prec
+    .style("display", "block")
     .selectAll("circle")
     .data(data)
     .enter()
@@ -595,6 +308,8 @@ function drawPrec() {
     .attr("r", 0)
     .transition(show)
     .attr("r", d => getRadius(cells.prec[d]));
+
+  TIME && console.timeEnd("drawPrecipitation");
 }
 
 function togglePopulation(event) {
@@ -603,11 +318,9 @@ function togglePopulation(event) {
     drawPopulation();
     if (event && isCtrlClick(event)) editStyle("population");
   } else {
-    if (event && isCtrlClick(event)) {
-      editStyle("population");
-      return;
-    }
+    if (event && isCtrlClick(event)) return editStyle("population");
     turnButtonOff("togglePopulation");
+
     const isD3data = population.select("line").datum();
     if (!isD3data) {
       // just remove
@@ -632,17 +345,17 @@ function togglePopulation(event) {
   }
 }
 
-function drawPopulation(event) {
+function drawPopulation() {
   population.selectAll("line").remove();
-  const cells = pack.cells,
-    p = cells.p,
-    burgs = pack.burgs;
+
+  const {cells, burgs} = pack;
   const show = d3.transition().duration(2000).ease(d3.easeSinIn);
 
   const rural = Array.from(
     cells.i.filter(i => cells.pop[i] > 0),
-    i => [p[i][0], p[i][1], p[i][1] - cells.pop[i] / 8]
+    i => [...cells.p[i], cells.p[i][1] - cells.pop[i] / 5]
   );
+
   population
     .select("#rural")
     .selectAll("line")
@@ -656,7 +369,7 @@ function drawPopulation(event) {
     .transition(show)
     .attr("y2", d => d[2]);
 
-  const urban = burgs.filter(b => b.i && !b.removed).map(b => [b.x, b.y, b.y - (b.population / 8) * urbanization]);
+  const urban = burgs.filter(b => b.i && !b.removed).map(b => [b.x, b.y, b.y - (b.population / 5) * urbanization]);
   population
     .select("#urban")
     .selectAll("line")
@@ -678,22 +391,17 @@ function toggleCells(event) {
     drawCells();
     if (event && isCtrlClick(event)) editStyle("cells");
   } else {
-    if (event && isCtrlClick(event)) {
-      editStyle("cells");
-      return;
-    }
+    if (event && isCtrlClick(event)) return editStyle("cells");
     cells.selectAll("path").remove();
     turnButtonOff("toggleCells");
   }
 }
 
 function drawCells() {
-  cells.selectAll("path").remove();
-  const data = customization === 1 ? grid.cells.i : pack.cells.i;
+  const cells = customization === 1 ? grid.cells.i : pack.cells.i;
   const polygon = customization === 1 ? getGridPolygon : getPackPolygon;
-  let path = "";
-  data.forEach(i => (path += "M" + polygon(i)));
-  cells.append("path").attr("d", path);
+  const paths = Array.from(cells).map(i => "M" + polygon(i));
+  byId("cells").innerHTML = `<path d="${paths.join("")}" />`;
 }
 
 function toggleIce(event) {
@@ -703,84 +411,53 @@ function toggleIce(event) {
     if (!ice.selectAll("*").size()) drawIce();
     if (event && isCtrlClick(event)) editStyle("ice");
   } else {
-    if (event && isCtrlClick(event)) {
-      editStyle("ice");
-      return;
-    }
+    if (event && isCtrlClick(event)) return editStyle("ice");
     $("#ice").fadeOut();
     turnButtonOff("toggleIce");
   }
 }
 
 function drawIce() {
-  const {cells, vertices} = grid;
-  const {temp, h} = cells;
-  const n = cells.i.length;
+  TIME && console.time("drawIce");
 
-  const used = new Uint8Array(cells.i.length);
+  const {cells, features} = grid;
+  const {temp, h} = cells;
   Math.random = aleaPRNG(seed);
 
-  const shieldMin = -8; // max temp to form ice shield (glacier)
-  const icebergMax = 1; // max temp to form an iceberg
+  const ICEBERG_MAX_TEMP = 0;
+  const GLACIER_MAX_TEMP = -8;
+  const minMaxTemp = d3.min(temp);
 
-  for (const i of grid.cells.i) {
-    const t = temp[i];
-    if (t > icebergMax) continue; // too warm: no ice
-    if (t > shieldMin && h[i] >= 20) continue; // non-glacier land: no ice
-
-    if (t <= shieldMin) {
-      // very cold: ice shield
-      if (used[i]) continue; // already rendered
-      const onborder = cells.c[i].some(n => temp[n] > shieldMin);
-      if (!onborder) continue; // need to start from onborder cell
-      const vertex = cells.v[i].find(v => vertices.c[v].some(i => temp[i] > shieldMin));
-      const chain = connectVertices(vertex);
-      if (chain.length < 3) continue;
-      const points = clipPoly(chain.map(v => vertices.p[v]));
-      ice.append("polygon").attr("points", points).attr("type", "iceShield");
-      continue;
-    }
-
-    const tNormalized = normalize(t, -8, 2);
-    const randomFactor = t > -5 ? 0.4 + rand() * 1.2 : 1;
-
-    // mildly cold: iceberd
-    if (P(tNormalized ** 0.5 * randomFactor)) continue; // cold: skip some cells
-    if (grid.features[cells.f[i]].type === "lake") continue; // lake: no icebers
-
-    let size = 1 - tNormalized; // iceberg size: 0 = zero size, 1 = full size
-    if (cells.t[i] === -1) size /= 1.3; // coasline: smaller icebers
-    resizePolygon(i, minmax(rn(size * randomFactor, 2), 0.08, 1));
+  // cold land: draw glaciers
+  {
+    const type = "iceShield";
+    const getType = cellId => (h[cellId] >= 20 && temp[cellId] <= GLACIER_MAX_TEMP ? type : null);
+    const isolines = getIsolines(grid, getType, {polygons: true});
+    isolines[type]?.polygons?.forEach(points => {
+      const clipped = clipPoly(points);
+      ice.append("polygon").attr("points", clipped).attr("type", type);
+    });
   }
 
-  function resizePolygon(i, size) {
-    const [cx, cy] = grid.points[i];
-    const points = getGridPolygon(i).map(([x, y]) => [rn(lerp(cx, x, size), 2), rn(lerp(cy, y, size), 2)]);
-    ice.append("polygon").attr("points", points).attr("cell", i).attr("size", size);
+  // cold water: draw icebergs
+  for (const cellId of grid.cells.i) {
+    const t = temp[cellId];
+    if (h[cellId] >= 20) continue; // no icebergs on land
+    if (t > ICEBERG_MAX_TEMP) continue; // too warm: no icebergs
+    if (features[cells.f[cellId]].type === "lake") continue; // no icebers on lakes
+    if (P(0.8)) continue; // skip most of eligible cells
+
+    const randomFactor = 0.8 + rand() * 0.4; // random size factor
+    let baseSize = (1 - normalize(t, minMaxTemp, 1)) * 0.8; // size: 0 = zero size, 1 = full size
+    if (cells.t[cellId] === -1) baseSize /= 1.3; // coasline: smaller icebergs
+    const size = minmax(rn(baseSize * randomFactor, 2), 0.1, 1);
+
+    const [cx, cy] = grid.points[cellId];
+    const points = getGridPolygon(cellId).map(([x, y]) => [rn(lerp(cx, x, size), 2), rn(lerp(cy, y, size), 2)]);
+    ice.append("polygon").attr("points", points).attr("cell", cellId).attr("size", size);
   }
 
-  // connect vertices to chain
-  function connectVertices(start) {
-    const chain = []; // vertices chain to form a path
-    for (let i = 0, current = start; i === 0 || (current !== start && i < 20000); i++) {
-      const prev = last(chain); // previous vertex in chain
-      chain.push(current); // add current vertex to sequence
-      const c = vertices.c[current]; // cells adjacent to vertex
-      c.filter(c => temp[c] <= shieldMin).forEach(c => (used[c] = 1));
-      const c0 = c[0] >= n || temp[c[0]] > shieldMin;
-      const c1 = c[1] >= n || temp[c[1]] > shieldMin;
-      const c2 = c[2] >= n || temp[c[2]] > shieldMin;
-      const v = vertices.v[current]; // neighboring vertices
-      if (v[0] !== prev && c0 !== c1) current = v[0];
-      else if (v[1] !== prev && c1 !== c2) current = v[1];
-      else if (v[2] !== prev && c0 !== c2) current = v[2];
-      if (current === chain[chain.length - 1]) {
-        ERROR && console.error("Next vertex is not found");
-        break;
-      }
-    }
-    return chain;
-  }
+  TIME && console.timeEnd("drawIce");
 }
 
 function toggleCultures(event) {
@@ -791,10 +468,7 @@ function toggleCultures(event) {
     drawCultures();
     if (event && isCtrlClick(event)) editStyle("cults");
   } else {
-    if (event && isCtrlClick(event)) {
-      editStyle("cults");
-      return;
-    }
+    if (event && isCtrlClick(event)) return editStyle("cults");
     cults.selectAll("path").remove();
     turnButtonOff("toggleCultures");
   }
@@ -802,59 +476,17 @@ function toggleCultures(event) {
 
 function drawCultures() {
   TIME && console.time("drawCultures");
+  const {cells, cultures} = pack;
 
-  cults.selectAll("path").remove();
-  const {cells, vertices, cultures} = pack;
-  const n = cells.i.length;
-  const used = new Uint8Array(cells.i.length);
-  const paths = new Array(cultures.length).fill("");
+  const bodyPaths = new Array(cultures.length - 1);
+  const isolines = getIsolines(pack, cellId => cells.culture[cellId], {fill: true, waterGap: true});
+  Object.entries(isolines).forEach(([index, {fill, waterGap}]) => {
+    const color = cultures[index].color;
+    bodyPaths.push(getGappedFillPaths("culture", fill, waterGap, color, index));
+  });
 
-  for (const i of cells.i) {
-    if (!cells.culture[i]) continue;
-    if (used[i]) continue;
-    used[i] = 1;
-    const c = cells.culture[i];
-    const onborder = cells.c[i].some(n => cells.culture[n] !== c);
-    if (!onborder) continue;
-    const vertex = cells.v[i].find(v => vertices.c[v].some(i => cells.culture[i] !== c));
-    const chain = connectVertices(vertex, c);
-    if (chain.length < 3) continue;
-    const points = chain.map(v => vertices.p[v]);
-    paths[c] += "M" + points.join("L") + "Z";
-  }
+  byId("cults").innerHTML = bodyPaths.join("");
 
-  const data = paths.map((p, i) => [p, i]).filter(d => d[0].length > 10);
-  cults
-    .selectAll("path")
-    .data(data)
-    .enter()
-    .append("path")
-    .attr("d", d => d[0])
-    .attr("fill", d => cultures[d[1]].color)
-    .attr("id", d => "culture" + d[1]);
-
-  // connect vertices to chain
-  function connectVertices(start, t) {
-    const chain = []; // vertices chain to form a path
-    for (let i = 0, current = start; i === 0 || (current !== start && i < 20000); i++) {
-      const prev = chain[chain.length - 1]; // previous vertex in chain
-      chain.push(current); // add current vertex to sequence
-      const c = vertices.c[current]; // cells adjacent to vertex
-      c.filter(c => cells.culture[c] === t).forEach(c => (used[c] = 1));
-      const c0 = c[0] >= n || cells.culture[c[0]] !== t;
-      const c1 = c[1] >= n || cells.culture[c[1]] !== t;
-      const c2 = c[2] >= n || cells.culture[c[2]] !== t;
-      const v = vertices.v[current]; // neighboring vertices
-      if (v[0] !== prev && c0 !== c1) current = v[0];
-      else if (v[1] !== prev && c1 !== c2) current = v[1];
-      else if (v[2] !== prev && c0 !== c2) current = v[2];
-      if (current === chain[chain.length - 1]) {
-        ERROR && console.error("Next vertex is not found");
-        break;
-      }
-    }
-    return chain;
-  }
   TIME && console.timeEnd("drawCultures");
 }
 
@@ -865,10 +497,7 @@ function toggleReligions(event) {
     drawReligions();
     if (event && isCtrlClick(event)) editStyle("relig");
   } else {
-    if (event && isCtrlClick(event)) {
-      editStyle("relig");
-      return;
-    }
+    if (event && isCtrlClick(event)) return editStyle("relig");
     relig.selectAll("path").remove();
     turnButtonOff("toggleReligions");
   }
@@ -876,263 +505,60 @@ function toggleReligions(event) {
 
 function drawReligions() {
   TIME && console.time("drawReligions");
+  const {cells, religions} = pack;
 
-  relig.selectAll("path").remove();
-  const {cells, vertices, religions} = pack;
-  const n = cells.i.length;
+  const bodyPaths = new Array(religions.length - 1);
+  const isolines = getIsolines(pack, cellId => cells.religion[cellId], {fill: true, waterGap: true});
+  Object.entries(isolines).forEach(([index, {fill, waterGap}]) => {
+    const color = religions[index].color;
+    bodyPaths.push(getGappedFillPaths("religion", fill, waterGap, color, index));
+  });
 
-  const used = new Uint8Array(cells.i.length);
-  const vArray = new Array(religions.length); // store vertices array
-  const body = new Array(religions.length).fill(""); // store path around each religion
-  const gap = new Array(religions.length).fill(""); // store path along water for each religion to fill the gaps
+  byId("relig").innerHTML = bodyPaths.join("");
 
-  for (const i of cells.i) {
-    if (!cells.religion[i]) continue;
-    if (used[i]) continue;
-    used[i] = 1;
-    const r = cells.religion[i];
-    const onborder = cells.c[i].filter(n => cells.religion[n] !== r);
-    if (!onborder.length) continue;
-    const borderWith = cells.c[i].map(c => cells.religion[c]).find(n => n !== r);
-    const vertex = cells.v[i].find(v => vertices.c[v].some(i => cells.religion[i] === borderWith));
-    const chain = connectVertices(vertex, r, borderWith);
-    if (chain.length < 3) continue;
-    const points = chain.map(v => vertices.p[v[0]]);
-    if (!vArray[r]) vArray[r] = [];
-    vArray[r].push(points);
-    body[r] += "M" + points.join("L") + "Z";
-    gap[r] +=
-      "M" +
-      vertices.p[chain[0][0]] +
-      chain.reduce(
-        (r2, v, i, d) =>
-          !i ? r2 : !v[2] ? r2 + "L" + vertices.p[v[0]] : d[i + 1] && !d[i + 1][2] ? r2 + "M" + vertices.p[v[0]] : r2,
-        ""
-      );
-  }
-
-  const bodyData = body.map((p, i) => [p.length > 10 ? p : null, i, religions[i].color]).filter(d => d[0]);
-  relig
-    .selectAll("path")
-    .data(bodyData)
-    .enter()
-    .append("path")
-    .attr("d", d => d[0])
-    .attr("fill", d => d[2])
-    .attr("id", d => "religion" + d[1]);
-  const gapData = gap.map((p, i) => [p.length > 10 ? p : null, i, religions[i].color]).filter(d => d[0]);
-  relig
-    .selectAll(".path")
-    .data(gapData)
-    .enter()
-    .append("path")
-    .attr("d", d => d[0])
-    .attr("fill", "none")
-    .attr("stroke", d => d[2])
-    .attr("id", d => "religion-gap" + d[1])
-    .attr("stroke-width", "10px");
-
-  // connect vertices to chain
-  function connectVertices(start, t, religion) {
-    const chain = []; // vertices chain to form a path
-    let land = vertices.c[start].some(c => cells.h[c] >= 20 && cells.religion[c] !== t);
-    function check(i) {
-      religion = cells.religion[i];
-      land = cells.h[i] >= 20;
-    }
-
-    for (let i = 0, current = start; i === 0 || (current !== start && i < 20000); i++) {
-      const prev = chain[chain.length - 1] ? chain[chain.length - 1][0] : -1; // previous vertex in chain
-      chain.push([current, religion, land]); // add current vertex to sequence
-      const c = vertices.c[current]; // cells adjacent to vertex
-      c.filter(c => cells.religion[c] === t).forEach(c => (used[c] = 1));
-      const c0 = c[0] >= n || cells.religion[c[0]] !== t;
-      const c1 = c[1] >= n || cells.religion[c[1]] !== t;
-      const c2 = c[2] >= n || cells.religion[c[2]] !== t;
-      const v = vertices.v[current]; // neighboring vertices
-      if (v[0] !== prev && c0 !== c1) {
-        current = v[0];
-        check(c0 ? c[0] : c[1]);
-      } else if (v[1] !== prev && c1 !== c2) {
-        current = v[1];
-        check(c1 ? c[1] : c[2]);
-      } else if (v[2] !== prev && c0 !== c2) {
-        current = v[2];
-        check(c2 ? c[2] : c[0]);
-      }
-      if (current === chain[chain.length - 1][0]) {
-        ERROR && console.error("Next vertex is not found");
-        break;
-      }
-    }
-    return chain;
-  }
   TIME && console.timeEnd("drawReligions");
 }
 
 function toggleStates(event) {
   if (!layerIsOn("toggleStates")) {
     turnButtonOn("toggleStates");
-    regions.style("display", null);
     drawStates();
     if (event && isCtrlClick(event)) editStyle("regions");
   } else {
-    if (event && isCtrlClick(event)) {
-      editStyle("regions");
-      return;
-    }
-    regions.style("display", "none").selectAll("path").remove();
+    if (event && isCtrlClick(event)) return editStyle("regions");
+    regions.selectAll("path").remove();
     turnButtonOff("toggleStates");
   }
 }
 
 function drawStates() {
   TIME && console.time("drawStates");
-  regions.selectAll("path").remove();
+  const {cells, states} = pack;
 
-  const {cells, vertices, features} = pack;
-  const states = pack.states;
-  const n = cells.i.length;
+  const maxLength = states.length - 1;
+  const bodyPaths = new Array(maxLength);
+  const clipPaths = new Array(maxLength);
+  const haloPaths = new Array(maxLength);
 
-  const used = new Uint8Array(cells.i.length);
-  const vArray = new Array(states.length); // store vertices array
-  const body = new Array(states.length).fill(""); // path around each state
-  const gap = new Array(states.length).fill(""); // path along water for each state to fill the gaps
-  const halo = new Array(states.length).fill(""); // path around states, but not lakes
+  const renderHalo = shapeRendering.value === "geometricPrecision";
+  const isolines = getIsolines(pack, cellId => cells.state[cellId], {fill: true, waterGap: true, halo: renderHalo});
+  Object.entries(isolines).forEach(([index, {fill, waterGap, halo}]) => {
+    const color = states[index].color;
+    bodyPaths.push(getGappedFillPaths("state", fill, waterGap, color, index));
 
-  const getStringPoint = v => vertices.p[v[0]].join(",");
-
-  // define inner-state lakes to omit on border render
-  const innerLakes = features.map(feature => {
-    if (feature.type !== "lake") return false;
-    if (!feature.shoreline) Lakes.getShoreline(feature);
-
-    const states = feature.shoreline.map(i => cells.state[i]);
-    return new Set(states).size > 1 ? false : true;
-  });
-
-  for (const i of cells.i) {
-    if (!cells.state[i] || used[i]) continue;
-    const state = cells.state[i];
-
-    const onborder = cells.c[i].some(n => cells.state[n] !== state);
-    if (!onborder) continue;
-
-    const borderWith = cells.c[i].map(c => cells.state[c]).find(n => n !== state);
-    const vertex = cells.v[i].find(v => vertices.c[v].some(i => cells.state[i] === borderWith));
-    const chain = connectVertices(vertex, state);
-
-    const noInnerLakes = chain.filter(v => v[1] !== "innerLake");
-    if (noInnerLakes.length < 3) continue;
-
-    // get path around the state
-    if (!vArray[state]) vArray[state] = [];
-    const points = noInnerLakes.map(v => vertices.p[v[0]]);
-    vArray[state].push(points);
-    body[state] += "M" + points.join("L");
-
-    // connect path for halo
-    let discontinued = true;
-    halo[state] += noInnerLakes
-      .map(v => {
-        if (v[1] === "border") {
-          discontinued = true;
-          return "";
-        }
-
-        const operation = discontinued ? "M" : "L";
-        discontinued = false;
-        return `${operation}${getStringPoint(v)}`;
-      })
-      .join("");
-
-    // connect gaps between state and water into a single path
-    discontinued = true;
-    gap[state] += chain
-      .map(v => {
-        if (v[1] === "land") {
-          discontinued = true;
-          return "";
-        }
-
-        const operation = discontinued ? "M" : "L";
-        discontinued = false;
-        return `${operation}${getStringPoint(v)}`;
-      })
-      .join("");
-  }
-
-  // find state visual center
-  vArray.forEach((ar, i) => {
-    const sorted = ar.sort((a, b) => b.length - a.length); // sort by points number
-    states[i].pole = polylabel(sorted, 1.0); // pole of inaccessibility
-  });
-
-  const bodyData = body.map((p, s) => [p.length > 10 ? p : null, s, states[s].color]).filter(d => d[0]);
-  const gapData = gap.map((p, s) => [p.length > 10 ? p : null, s, states[s].color]).filter(d => d[0]);
-
-  const bodyString = bodyData.map(d => `<path id="state${d[1]}" d="${d[0]}" fill="${d[2]}" stroke="none"/>`).join("");
-  const gapString = gapData.map(d => `<path id="state-gap${d[1]}" d="${d[0]}" fill="none" stroke="${d[2]}"/>`).join("");
-  statesBody.html(bodyString + gapString);
-
-  const isOptimized = shapeRendering.value === "optimizeSpeed";
-  if (!isOptimized) {
-    const haloData = halo.map((p, s) => [p.length > 10 ? p : null, s, states[s].color]).filter(d => d[0]);
-
-    const haloString = haloData
-      .map(d => {
-        const stroke = d3.color(d[2]) ? d3.color(d[2]).darker().hex() : "#666666";
-        return `<path id="state-border${d[1]}" d="${d[0]}" clip-path="url(#state-clip${d[1]})" stroke="${stroke}"/>`;
-      })
-      .join("");
-    statesHalo.html(haloString);
-
-    const clipString = bodyData
-      .map(d => `<clipPath id="state-clip${d[1]}"><use href="#state${d[1]}"/></clipPath>`)
-      .join("");
-    defs.select("#statePaths").html(clipString);
-  }
-
-  function connectVertices(start, state) {
-    const chain = []; // vertices chain to form a path
-    const getType = c => {
-      const borderCell = c.find(i => cells.b[i]);
-      if (borderCell) return "border";
-
-      const waterCell = c.find(i => cells.h[i] < 20);
-      if (!waterCell) return "land";
-      if (innerLakes[cells.f[waterCell]]) return "innerLake";
-      return features[cells.f[waterCell]].type;
-    };
-
-    for (let i = 0, current = start; i === 0 || (current !== start && i < 20000); i++) {
-      const prev = chain.length ? chain[chain.length - 1][0] : -1; // previous vertex in chain
-
-      const c = vertices.c[current]; // cells adjacent to vertex
-      chain.push([current, getType(c)]); // add current vertex to sequence
-
-      c.filter(c => cells.state[c] === state).forEach(c => (used[c] = 1));
-      const c0 = c[0] >= n || cells.state[c[0]] !== state;
-      const c1 = c[1] >= n || cells.state[c[1]] !== state;
-      const c2 = c[2] >= n || cells.state[c[2]] !== state;
-
-      const v = vertices.v[current]; // neighboring vertices
-
-      if (v[0] !== prev && c0 !== c1) current = v[0];
-      else if (v[1] !== prev && c1 !== c2) current = v[1];
-      else if (v[2] !== prev && c0 !== c2) current = v[2];
-
-      if (current === prev) {
-        ERROR && console.error("Next vertex is not found");
-        break;
-      }
+    if (renderHalo) {
+      const haloColor = d3.color(color)?.darker().hex() || "#666666";
+      clipPaths.push(/* html */ `<clipPath id="state-clip${index}"><use href="#state${index}"/></clipPath>`);
+      haloPaths.push(
+        /* html */ `<path id="state-border${index}" d="${halo}" clip-path="url(#state-clip${index})" stroke="${haloColor}"/>`
+      );
     }
+  });
 
-    if (chain.length) chain.push(chain[0]);
-    return chain;
-  }
+  byId("statesBody").innerHTML = bodyPaths.join("");
+  byId("statePaths").innerHTML = renderHalo ? clipPaths.join("") : "";
+  byId("statesHalo").innerHTML = renderHalo ? haloPaths.join("") : "";
 
-  invokeActiveZooming();
   TIME && console.timeEnd("drawStates");
 }
 
@@ -1142,133 +568,19 @@ function toggleBorders(event) {
     drawBorders();
     if (event && isCtrlClick(event)) editStyle("borders");
   } else {
-    if (event && isCtrlClick(event)) {
-      editStyle("borders");
-      return;
-    }
+    if (event && isCtrlClick(event)) return editStyle("borders");
     turnButtonOff("toggleBorders");
     borders.selectAll("path").remove();
   }
 }
 
-// draw state and province borders
-function drawBorders() {
-  TIME && console.time("drawBorders");
-  borders.selectAll("path").remove();
-
-  const {cells, vertices} = pack;
-  const n = cells.i.length;
-
-  const sPath = [];
-  const pPath = [];
-
-  const sUsed = new Array(pack.states.length).fill("").map(_ => []);
-  const pUsed = new Array(pack.provinces.length).fill("").map(_ => []);
-
-  for (let i = 0; i < cells.i.length; i++) {
-    if (!cells.state[i]) continue;
-    const p = cells.province[i];
-    const s = cells.state[i];
-
-    // if cell is on province border
-    const provToCell = cells.c[i].find(
-      n => cells.state[n] === s && p > cells.province[n] && pUsed[p][n] !== cells.province[n]
-    );
-
-    if (provToCell) {
-      const provTo = cells.province[provToCell];
-      pUsed[p][provToCell] = provTo;
-      const vertex = cells.v[i].find(v => vertices.c[v].some(i => cells.province[i] === provTo));
-      const chain = connectVertices(vertex, p, cells.province, provTo, pUsed);
-
-      if (chain.length > 1) {
-        pPath.push("M" + chain.map(c => vertices.p[c]).join(" "));
-        i--;
-        continue;
-      }
-    }
-
-    // if cell is on state border
-    const stateToCell = cells.c[i].find(n => cells.h[n] >= 20 && s > cells.state[n] && sUsed[s][n] !== cells.state[n]);
-    if (stateToCell !== undefined) {
-      const stateTo = cells.state[stateToCell];
-      sUsed[s][stateToCell] = stateTo;
-      const vertex = cells.v[i].find(v => vertices.c[v].some(i => cells.h[i] >= 20 && cells.state[i] === stateTo));
-      const chain = connectVertices(vertex, s, cells.state, stateTo, sUsed);
-
-      if (chain.length > 1) {
-        sPath.push("M" + chain.map(c => vertices.p[c]).join(" "));
-        i--;
-        continue;
-      }
-    }
-  }
-
-  stateBorders.append("path").attr("d", sPath.join(" "));
-  provinceBorders.append("path").attr("d", pPath.join(" "));
-
-  // connect vertices to chain
-  function connectVertices(current, f, array, t, used) {
-    let chain = [];
-    const checkCell = c => c >= n || array[c] !== f;
-    const checkVertex = v =>
-      vertices.c[v].some(c => array[c] === f) && vertices.c[v].some(c => array[c] === t && cells.h[c] >= 20);
-
-    // find starting vertex
-    for (let i = 0; i < 1000; i++) {
-      if (i === 999) ERROR && console.error("Find starting vertex: limit is reached", current, f, t);
-      const p = chain[chain.length - 2] || -1; // previous vertex
-      const v = vertices.v[current],
-        c = vertices.c[current];
-
-      const v0 = checkCell(c[0]) !== checkCell(c[1]) && checkVertex(v[0]);
-      const v1 = checkCell(c[1]) !== checkCell(c[2]) && checkVertex(v[1]);
-      const v2 = checkCell(c[0]) !== checkCell(c[2]) && checkVertex(v[2]);
-      if (v0 + v1 + v2 === 1) break;
-      current = v0 && p !== v[0] ? v[0] : v1 && p !== v[1] ? v[1] : v[2];
-
-      if (current === chain[0]) break;
-      if (current === p) return [];
-      chain.push(current);
-    }
-
-    chain = [current]; // vertices chain to form a path
-    // find path
-    for (let i = 0; i < 1000; i++) {
-      if (i === 999) ERROR && console.error("Find path: limit is reached", current, f, t);
-      const p = chain[chain.length - 2] || -1; // previous vertex
-      const v = vertices.v[current],
-        c = vertices.c[current];
-      c.filter(c => array[c] === t).forEach(c => (used[f][c] = t));
-
-      const v0 = checkCell(c[0]) !== checkCell(c[1]) && checkVertex(v[0]);
-      const v1 = checkCell(c[1]) !== checkCell(c[2]) && checkVertex(v[1]);
-      const v2 = checkCell(c[0]) !== checkCell(c[2]) && checkVertex(v[2]);
-      current = v0 && p !== v[0] ? v[0] : v1 && p !== v[1] ? v[1] : v[2];
-
-      if (current === p) break;
-      if (current === chain[chain.length - 1]) break;
-      if (chain.length > 1 && v0 + v1 + v2 < 2) break;
-      chain.push(current);
-      if (current === chain[0]) break;
-    }
-
-    return chain;
-  }
-
-  TIME && console.timeEnd("drawBorders");
-}
-
 function toggleProvinces(event) {
   if (!layerIsOn("toggleProvinces")) {
     turnButtonOn("toggleProvinces");
     drawProvinces();
     if (event && isCtrlClick(event)) editStyle("provs");
   } else {
-    if (event && isCtrlClick(event)) {
-      editStyle("provs");
-      return;
-    }
+    if (event && isCtrlClick(event)) return editStyle("provs");
     provs.selectAll("*").remove();
     turnButtonOff("toggleProvinces");
   }
@@ -1276,126 +588,29 @@ function toggleProvinces(event) {
 
 function drawProvinces() {
   TIME && console.time("drawProvinces");
-  const labelsOn = provs.attr("data-labels") == 1;
-  provs.selectAll("*").remove();
+  const {cells, provinces} = pack;
 
-  const provinces = pack.provinces;
-  const {body, gap} = getProvincesVertices();
-
-  const g = provs.append("g").attr("id", "provincesBody");
-  const bodyData = body.map((p, i) => [p.length > 10 ? p : null, i, provinces[i].color]).filter(d => d[0]);
-  g.selectAll("path")
-    .data(bodyData)
-    .enter()
-    .append("path")
-    .attr("d", d => d[0])
-    .attr("fill", d => d[2])
-    .attr("stroke", "none")
-    .attr("id", d => "province" + d[1]);
-  const gapData = gap.map((p, i) => [p.length > 10 ? p : null, i, provinces[i].color]).filter(d => d[0]);
-  g.selectAll(".path")
-    .data(gapData)
-    .enter()
-    .append("path")
-    .attr("d", d => d[0])
-    .attr("fill", "none")
-    .attr("stroke", d => d[2])
-    .attr("id", d => "province-gap" + d[1]);
-
-  const labels = provs.append("g").attr("id", "provinceLabels");
-  labels.style("display", `${labelsOn ? "block" : "none"}`);
-  const labelData = provinces.filter(p => p.i && !p.removed && p.pole);
-  labels
-    .selectAll(".path")
-    .data(labelData)
-    .enter()
-    .append("text")
-    .attr("x", d => d.pole[0])
-    .attr("y", d => d.pole[1])
-    .attr("id", d => "provinceLabel" + d.i)
-    .text(d => d.name);
-
-  TIME && console.timeEnd("drawProvinces");
-}
-
-function getProvincesVertices() {
-  const cells = pack.cells,
-    vertices = pack.vertices,
-    provinces = pack.provinces,
-    n = cells.i.length;
-  const used = new Uint8Array(cells.i.length);
-  const vArray = new Array(provinces.length); // store vertices array
-  const body = new Array(provinces.length).fill(""); // store path around each province
-  const gap = new Array(provinces.length).fill(""); // store path along water for each province to fill the gaps
-
-  for (const i of cells.i) {
-    if (!cells.province[i] || used[i]) continue;
-    const p = cells.province[i];
-    const onborder = cells.c[i].some(n => cells.province[n] !== p);
-    if (!onborder) continue;
-
-    const borderWith = cells.c[i].map(c => cells.province[c]).find(n => n !== p);
-    const vertex = cells.v[i].find(v => vertices.c[v].some(i => cells.province[i] === borderWith));
-    const chain = connectVertices(vertex, p, borderWith);
-    if (chain.length < 3) continue;
-    const points = chain.map(v => vertices.p[v[0]]);
-    if (!vArray[p]) vArray[p] = [];
-    vArray[p].push(points);
-    body[p] += "M" + points.join("L");
-    gap[p] +=
-      "M" +
-      vertices.p[chain[0][0]] +
-      chain.reduce(
-        (r, v, i, d) =>
-          !i ? r : !v[2] ? r + "L" + vertices.p[v[0]] : d[i + 1] && !d[i + 1][2] ? r + "M" + vertices.p[v[0]] : r,
-        ""
-      );
-  }
-
-  // find province visual center
-  vArray.forEach((ar, i) => {
-    const sorted = ar.sort((a, b) => b.length - a.length); // sort by points number
-    provinces[i].pole = polylabel(sorted, 1.0); // pole of inaccessibility
+  const bodyPaths = new Array(provinces.length - 1);
+  const isolines = getIsolines(pack, cellId => cells.province[cellId], {fill: true, waterGap: true});
+  Object.entries(isolines).forEach(([index, {fill, waterGap}]) => {
+    const color = provinces[index].color;
+    bodyPaths.push(getGappedFillPaths("province", fill, waterGap, color, index));
   });
 
-  return {body, gap};
+  const labels = provinces
+    .filter(p => p.i && !p.removed)
+    .map(p => {
+      const [x, y] = p.pole || cells.p[p.center];
+      return /* html */ `<text x="${x}" y="${y}" id="provinceLabel${p.i}">${p.name}</text>`;
+    });
 
-  // connect vertices to chain
-  function connectVertices(start, t, province) {
-    const chain = []; // vertices chain to form a path
-    let land = vertices.c[start].some(c => cells.h[c] >= 20 && cells.province[c] !== t);
-    function check(i) {
-      province = cells.province[i];
-      land = cells.h[i] >= 20;
-    }
+  byId("provs").innerHTML = /* html */ `
+    <g id='provincesBody'>${bodyPaths.join("")}</g>
+    <g id='provinceLabels'>${labels.join("")}</g>
+  `;
+  byId("provinceLabels").style.display = byId("provs").dataset.labels === "1" ? "block" : "none";
 
-    for (let i = 0, current = start; i === 0 || (current !== start && i < 20000); i++) {
-      const prev = chain[chain.length - 1] ? chain[chain.length - 1][0] : -1; // previous vertex in chain
-      chain.push([current, province, land]); // add current vertex to sequence
-      const c = vertices.c[current]; // cells adjacent to vertex
-      c.filter(c => cells.province[c] === t).forEach(c => (used[c] = 1));
-      const c0 = c[0] >= n || cells.province[c[0]] !== t;
-      const c1 = c[1] >= n || cells.province[c[1]] !== t;
-      const c2 = c[2] >= n || cells.province[c[2]] !== t;
-      const v = vertices.v[current]; // neighboring vertices
-      if (v[0] !== prev && c0 !== c1) {
-        current = v[0];
-        check(c0 ? c[0] : c[1]);
-      } else if (v[1] !== prev && c1 !== c2) {
-        current = v[1];
-        check(c1 ? c[1] : c[2]);
-      } else if (v[2] !== prev && c0 !== c2) {
-        current = v[2];
-        check(c2 ? c[2] : c[0]);
-      }
-      if (current === chain[chain.length - 1][0]) {
-        ERROR && console.error("Next vertex is not found");
-        break;
-      }
-    }
-    chain.push([start, province, land]); // add starting vertex to sequence to close the path
-    return chain;
-  }
+  TIME && console.timeEnd("drawProvinces");
 }
 
 function toggleGrid(event) {
@@ -1403,13 +618,9 @@ function toggleGrid(event) {
     turnButtonOn("toggleGrid");
     drawGrid();
     calculateFriendlyGridSize();
-
     if (event && isCtrlClick(event)) editStyle("gridOverlay");
   } else {
-    if (event && isCtrlClick(event)) {
-      editStyle("gridOverlay");
-      return;
-    }
+    if (event && isCtrlClick(event)) return editStyle("gridOverlay");
     turnButtonOff("toggleGrid");
     gridOverlay.selectAll("*").remove();
   }
@@ -1450,24 +661,22 @@ function toggleCoordinates(event) {
     drawCoordinates();
     if (event && isCtrlClick(event)) editStyle("coordinates");
   } else {
-    if (event && isCtrlClick(event)) {
-      editStyle("coordinates");
-      return;
-    }
+    if (event && isCtrlClick(event)) return editStyle("coordinates");
     turnButtonOff("toggleCoordinates");
     coordinates.selectAll("*").remove();
   }
 }
 
 function drawCoordinates() {
-  if (!layerIsOn("toggleCoordinates")) return;
   coordinates.selectAll("*").remove(); // remove every time
+
   const steps = [0.5, 1, 2, 5, 10, 15, 30]; // possible steps
   const goal = mapCoordinates.lonT / scale / 10;
   const step = steps.reduce((p, c) => (Math.abs(c - goal) < Math.abs(p - goal) ? c : p));
 
   const desired = +coordinates.attr("data-size"); // desired label size
   coordinates.attr("font-size", Math.max(rn(desired / scale ** 0.8, 2), 0.1)); // actual label size
+
   const graticule = d3
     .geoGraticule()
     .extent([
@@ -1481,58 +690,50 @@ function drawCoordinates() {
   const grid = coordinates.append("g").attr("id", "coordinateGrid");
   const labels = coordinates.append("g").attr("id", "coordinateLabels");
 
-  const p = getViewPoint(scale + desired + 2, scale + desired / 2); // on border point on viexBox
+  const point = new DOMPoint(scale + desired + 2, scale + desired / 2);
+  const p = point.matrixTransform(byId("viewbox").getScreenCTM().inverse());
+
   const data = graticule.lines().map(d => {
-    const lat = d.coordinates[0][1] === d.coordinates[1][1]; // check if line is latitude or longitude
-    const c = d.coordinates[0],
-      pos = projection(c); // map coordinates
-    const [x, y] = lat ? [rn(p.x, 2), rn(pos[1], 2)] : [rn(pos[0], 2), rn(p.y, 2)]; // labels position
-    const v = lat ? c[1] : c[0]; // label
-    const text = !v
-      ? v
-      : Number.isInteger(v)
-      ? lat
-        ? c[1] < 0
-          ? -c[1] + "°S"
-          : c[1] + "°N"
-        : c[0] < 0
-        ? -c[0] + "°W"
-        : c[0] + "°E"
-      : "";
-    return {lat, x, y, text};
+    const isLatitude = d.coordinates[0][1] === d.coordinates[1][1];
+    const coordinate = d.coordinates[0];
+    const position = projection(coordinate); // map coordinates
+    const [x, y] = isLatitude ? [rn(p.x, 2), rn(position[1], 2)] : [rn(position[0], 2), rn(p.y, 2)]; // labels position
+    const value = isLatitude ? coordinate[1] : coordinate[0]; // label
+
+    let text = "";
+    if (!value) {
+      text = value;
+    } else if (Number.isInteger(value)) {
+      if (isLatitude) {
+        text = coordinate[1] < 0 ? -coordinate[1] + "°S" : coordinate[1] + "°N";
+      } else {
+        text = coordinate[0] < 0 ? -coordinate[0] + "°W" : coordinate[0] + "°E";
+      }
+    }
+
+    return {x, y, text};
   });
 
-  const d = round(d3.geoPath(projection)(graticule()));
-  grid.append("path").attr("d", d).attr("vector-effect", "non-scaling-stroke");
+  const path = round(d3.geoPath(projection)(graticule()));
+  grid.append("path").attr("d", path).attr("vector-effect", "non-scaling-stroke");
   labels
     .selectAll("text")
     .data(data)
     .enter()
     .append("text")
+    .attr("text-rendering", "optimizeSpeed")
     .attr("x", d => d.x)
     .attr("y", d => d.y)
     .text(d => d.text);
 }
 
-// conver svg point into viewBox point
-function getViewPoint(x, y) {
-  const view = document.getElementById("viewbox");
-  const svg = document.getElementById("map");
-  const pt = svg.createSVGPoint();
-  (pt.x = x), (pt.y = y);
-  return pt.matrixTransform(view.getScreenCTM().inverse());
-}
-
 function toggleCompass(event) {
   if (!layerIsOn("toggleCompass")) {
     turnButtonOn("toggleCompass");
     $("#compass").fadeIn();
     if (event && isCtrlClick(event)) editStyle("compass");
   } else {
-    if (event && isCtrlClick(event)) {
-      editStyle("compass");
-      return;
-    }
+    if (event && isCtrlClick(event)) return editStyle("compass");
     $("#compass").fadeOut();
     turnButtonOff("toggleCompass");
   }
@@ -1541,14 +742,11 @@ function toggleCompass(event) {
 function toggleRelief(event) {
   if (!layerIsOn("toggleRelief")) {
     turnButtonOn("toggleRelief");
-    if (!terrain.selectAll("*").size()) ReliefIcons();
+    if (!terrain.selectAll("*").size()) drawReliefIcons();
     $("#terrain").fadeIn();
     if (event && isCtrlClick(event)) editStyle("terrain");
   } else {
-    if (event && isCtrlClick(event)) {
-      editStyle("terrain");
-      return;
-    }
+    if (event && isCtrlClick(event)) return editStyle("terrain");
     $("#terrain").fadeOut();
     turnButtonOff("toggleRelief");
   }
@@ -1597,9 +795,6 @@ function drawRivers() {
   TIME && console.time("drawRivers");
   rivers.selectAll("*").remove();
 
-  const {addMeandering, getRiverPath} = Rivers;
-  lineGen.curve(d3.curveCatmullRom.alpha(0.1));
-
   const riverPaths = pack.rivers.map(({cells, points, i, widthFactor, sourceWidth}) => {
     if (!cells || cells.length < 2) return;
 
@@ -1610,8 +805,8 @@ function drawRivers() {
       points = undefined;
     }
 
-    const meanderedPoints = addMeandering(cells, points);
-    const path = getRiverPath(meanderedPoints, widthFactor, sourceWidth);
+    const meanderedPoints = Rivers.addMeandering(cells, points);
+    const path = Rivers.getRiverPath(meanderedPoints, widthFactor, sourceWidth);
     return `<path id="river${i}" d="${path}"/>`;
   });
   rivers.html(riverPaths.join(""));
@@ -1636,7 +831,8 @@ function drawRoutes() {
   const routePaths = {};
 
   for (const route of pack.routes) {
-    const {i, group} = route;
+    const {i, group, points} = route;
+    if (!points || points.length < 2) continue;
     if (!routePaths[group]) routePaths[group] = [];
     routePaths[group].push(`<path id="route${i}" d="${Routes.getPath(route)}"/>`);
   }
@@ -1649,17 +845,14 @@ function drawRoutes() {
   TIME && console.timeEnd("drawRoutes");
 }
 
-function toggleMilitary() {
+function toggleMilitary(event) {
   if (!layerIsOn("toggleMilitary")) {
     turnButtonOn("toggleMilitary");
-    $("#armies").fadeIn();
+    drawMilitary();
     if (event && isCtrlClick(event)) editStyle("armies");
   } else {
-    if (event && isCtrlClick(event)) {
-      editStyle("armies");
-      return;
-    }
-    $("#armies").fadeOut();
+    if (event && isCtrlClick(event)) return editStyle("armies");
+    armies.selectAll("g").remove();
     turnButtonOff("toggleMilitary");
   }
 }
@@ -1676,71 +869,35 @@ function toggleMarkers(event) {
   }
 }
 
-function drawMarkers() {
-  const rescale = +markers.attr("rescale");
-  const pinned = +markers.attr("pinned");
-
-  const markersData = pinned ? pack.markers.filter(({pinned}) => pinned) : pack.markers;
-  const html = markersData.map(marker => drawMarker(marker, rescale));
-  markers.html(html.join(""));
-}
-
-const getPin = (shape = "bubble", fill = "#fff", stroke = "#000") => {
-  if (shape === "bubble")
-    return `<path d="M6,19 l9,10 L24,19" fill="${stroke}" stroke="none" /><circle cx="15" cy="15" r="10" fill="${fill}" stroke="${stroke}"/>`;
-  if (shape === "pin")
-    return `<path d="m 15,3 c -5.5,0 -9.7,4.09 -9.7,9.3 0,6.8 9.7,17 9.7,17 0,0 9.7,-10.2 9.7,-17 C 24.7,7.09 20.5,3 15,3 Z" fill="${fill}" stroke="${stroke}"/>`;
-  if (shape === "square")
-    return `<path d="m 20,25 -5,4 -5,-4 z" fill="${stroke}"/><path d="M 5,5 H 25 V 25 H 5 Z" fill="${fill}" stroke="${stroke}"/>`;
-  if (shape === "squarish")
-    return `<path d="m 5,5 h 20 v 20 h -6 l -4,4 -4,-4 H 5 Z" fill="${fill}" stroke="${stroke}" />`;
-  if (shape === "diamond") return `<path d="M 2,15 15,1 28,15 15,29 Z" fill="${fill}" stroke="${stroke}" />`;
-  if (shape === "hex") return `<path d="M 15,29 4.61,21 V 9 L 15,3 25.4,9 v 12 z" fill="${fill}" stroke="${stroke}" />`;
-  if (shape === "hexy") return `<path d="M 15,29 6,21 5,8 15,4 25,8 24,21 Z" fill="${fill}" stroke="${stroke}" />`;
-  if (shape === "shieldy")
-    return `<path d="M 15,29 6,21 5,7 c 0,0 5,-3 10,-3 5,0 10,3 10,3 l -1,14 z" fill="${fill}" stroke="${stroke}" />`;
-  if (shape === "shield")
-    return `<path d="M 4.6,5.2 H 25 v 6.7 A 20.3,20.4 0 0 1 15,29 20.3,20.4 0 0 1 4.6,11.9 Z" fill="${fill}" stroke="${stroke}" />`;
-  if (shape === "pentagon") return `<path d="M 4,16 9,4 h 12 l 5,12 -11,13 z" fill="${fill}" stroke="${stroke}" />`;
-  if (shape === "heptagon")
-    return `<path d="M 15,29 6,22 4,12 10,4 h 10 l 6,8 -2,10 z" fill="${fill}" stroke="${stroke}" />`;
-  if (shape === "circle") return `<circle cx="15" cy="15" r="11" fill="${fill}" stroke="${stroke}" />`;
-  if (shape === "no") return "";
-};
-
-function drawMarker(marker, rescale = 1) {
-  const {i, icon, x, y, dx = 50, dy = 50, px = 12, size = 30, pin, fill, stroke} = marker;
-  const id = `marker${i}`;
-  const zoomSize = rescale ? Math.max(rn(size / 5 + 24 / scale, 2), 1) : size;
-  const viewX = rn(x - zoomSize / 2, 1);
-  const viewY = rn(y - zoomSize, 1);
-  const pinHTML = getPin(pin, fill, stroke);
-
-  return `<svg id="${id}" viewbox="0 0 30 30" width="${zoomSize}" height="${zoomSize}" x="${viewX}" y="${viewY}"><g>${pinHTML}</g><text x="${dx}%" y="${dy}%" font-size="${px}px" >${icon}</text></svg>`;
-}
-
 function toggleLabels(event) {
   if (!layerIsOn("toggleLabels")) {
     turnButtonOn("toggleLabels");
-    labels.style("display", null);
-    invokeActiveZooming();
+    $("#labels").fadeIn();
+    // don't redraw labels as they are not stored in data yet
+    if (labels.selectAll("text").size() === 0) drawLabels();
     if (event && isCtrlClick(event)) editStyle("labels");
   } else {
     if (event && isCtrlClick(event)) return editStyle("labels");
     turnButtonOff("toggleLabels");
-    labels.style("display", "none");
+    $("#labels").fadeOut();
   }
 }
 
-function toggleIcons(event) {
-  if (!layerIsOn("toggleIcons")) {
-    turnButtonOn("toggleIcons");
-    $("#icons").fadeIn();
+function drawLabels() {
+  drawStateLabels();
+  drawBurgLabels();
+  invokeActiveZooming();
+}
+
+function toggleBurgIcons(event) {
+  if (!layerIsOn("toggleBurgIcons")) {
+    turnButtonOn("toggleBurgIcons");
+    drawBurgIcons();
     if (event && isCtrlClick(event)) editStyle("burgIcons");
   } else {
     if (event && isCtrlClick(event)) return editStyle("burgIcons");
-    turnButtonOff("toggleIcons");
-    $("#icons").fadeOut();
+    turnButtonOff("toggleBurgIcons");
+    icons.selectAll("circle, use").remove();
   }
 }
 
@@ -1770,124 +927,38 @@ function toggleScaleBar(event) {
   }
 }
 
-function drawScaleBar(scaleBar, scaleLevel) {
-  if (!scaleBar.size() || scaleBar.style("display") === "none") return;
-
-  const unit = distanceUnitInput.value;
-  const size = +scaleBar.attr("data-bar-size");
-
-  const length = (function () {
-    const init = 100;
-    let val = (init * size * distanceScale) / scaleLevel; // bar length in distance unit
-    if (val > 900) val = rn(val, -3); // round to 1000
-    else if (val > 90) val = rn(val, -2); // round to 100
-    else if (val > 9) val = rn(val, -1); // round to 10
-    else val = rn(val); // round to 1
-    const length = (val * scaleLevel) / distanceScale; // actual length in pixels on this scale
-    return length;
-  })();
-
-  scaleBar.select("#scaleBarContent").remove(); // redraw content every time
-  const content = scaleBar.append("g").attr("id", "scaleBarContent");
-
-  const lines = content.append("g");
-  lines
-    .append("line")
-    .attr("x1", 0.5)
-    .attr("y1", 0)
-    .attr("x2", length + size - 0.5)
-    .attr("y2", 0)
-    .attr("stroke-width", size)
-    .attr("stroke", "white");
-  lines
-    .append("line")
-    .attr("x1", 0)
-    .attr("y1", size)
-    .attr("x2", length + size)
-    .attr("y2", size)
-    .attr("stroke-width", size)
-    .attr("stroke", "#3d3d3d");
-  lines
-    .append("line")
-    .attr("x1", 0)
-    .attr("y1", 0)
-    .attr("x2", length + size)
-    .attr("y2", 0)
-    .attr("stroke-width", rn(size * 3, 2))
-    .attr("stroke-dasharray", size + " " + rn(length / 5 - size, 2))
-    .attr("stroke", "#3d3d3d");
-
-  const texts = content.append("g").attr("text-anchor", "middle").attr("font-family", "var(--serif)");
-  texts
-    .selectAll("text")
-    .data(d3.range(0, 6))
-    .enter()
-    .append("text")
-    .attr("x", d => rn((d * length) / 5, 2))
-    .attr("y", 0)
-    .attr("dy", "-.6em")
-    .text(d => rn((((d * length) / 5) * distanceScale) / scaleLevel) + (d < 5 ? "" : " " + unit));
-
-  const label = scaleBar.attr("data-label");
-  if (label) {
-    texts
-      .append("text")
-      .attr("x", (length + 1) / 2)
-      .attr("dy", ".6em")
-      .attr("dominant-baseline", "text-before-edge")
-      .text(label);
-  }
-
-  const scaleBarBack = scaleBar.select("#scaleBarBack");
-  if (scaleBarBack.size()) {
-    const bbox = content.node().getBBox();
-    const paddingTop = +scaleBarBack.attr("data-top") || 0;
-    const paddingLeft = +scaleBarBack.attr("data-left") || 0;
-    const paddingRight = +scaleBarBack.attr("data-right") || 0;
-    const paddingBottom = +scaleBarBack.attr("data-bottom") || 0;
-
-    scaleBar
-      .select("#scaleBarBack")
-      .attr("x", -paddingLeft)
-      .attr("y", -paddingTop)
-      .attr("width", bbox.width + paddingRight)
-      .attr("height", bbox.height + paddingBottom);
-  }
-}
-
-// fit ScaleBar to screen size
-function fitScaleBar(scaleBar, fullWidth, fullHeight) {
-  if (!scaleBar.select("rect").size() || scaleBar.style("display") === "none") return;
-
-  const posX = +scaleBar.attr("data-x") || 99;
-  const posY = +scaleBar.attr("data-y") || 99;
-  const bbox = scaleBar.select("rect").node().getBBox();
-
-  const x = rn((fullWidth * posX) / 100 - bbox.width + 10);
-  const y = rn((fullHeight * posY) / 100 - bbox.height + 20);
-  scaleBar.attr("transform", `translate(${x},${y})`);
-}
-
 function toggleZones(event) {
   if (!layerIsOn("toggleZones")) {
     turnButtonOn("toggleZones");
-    $("#zones").fadeIn();
+    drawZones();
     if (event && isCtrlClick(event)) editStyle("zones");
   } else {
-    if (event && isCtrlClick(event)) {
-      editStyle("zones");
-      return;
-    }
+    if (event && isCtrlClick(event)) return editStyle("zones");
     turnButtonOff("toggleZones");
-    $("#zones").fadeOut();
+    zones.selectAll("*").remove();
   }
 }
 
+function drawZones() {
+  const filterBy = byId("zonesFilterType").value;
+  const isFiltered = filterBy && filterBy !== "all";
+  const visibleZones = pack.zones.filter(
+    ({hidden, cells, type}) => !hidden && cells.length && (!isFiltered || type === filterBy)
+  );
+  zones.html(visibleZones.map(drawZone).join(""));
+}
+
+function drawZone({i, cells, type, color}) {
+  const path = getVertexPath(cells);
+  return `<path id="zone${i}" data-id="${i}" data-type="${type}" d="${path}" fill="${color}" />`;
+}
+
 function toggleEmblems(event) {
   if (!layerIsOn("toggleEmblems")) {
     turnButtonOn("toggleEmblems");
     if (!emblems.selectAll("use").size()) drawEmblems();
     $("#emblems").fadeIn();
+    invokeActiveZooming();
     if (event && isCtrlClick(event)) editStyle("emblems");
   } else {
     if (event && isCtrlClick(event)) return editStyle("emblems");
@@ -1896,117 +967,6 @@ function toggleEmblems(event) {
   }
 }
 
-function drawEmblems() {
-  TIME && console.time("drawEmblems");
-  const {states, provinces, burgs} = pack;
-
-  const validStates = states.filter(s => s.i && !s.removed && s.coa && s.coa.size !== 0);
-  const validProvinces = provinces.filter(p => p.i && !p.removed && p.coa && p.coa.size !== 0);
-  const validBurgs = burgs.filter(b => b.i && !b.removed && b.coa && b.coa.size !== 0);
-
-  const getStateEmblemsSize = () => {
-    const startSize = minmax((graphHeight + graphWidth) / 40, 10, 100);
-    const statesMod = 1 + validStates.length / 100 - (15 - validStates.length) / 200; // states number modifier
-    const sizeMod = +document.getElementById("emblemsStateSizeInput").value || 1;
-    return rn((startSize / statesMod) * sizeMod); // target size ~50px on 1536x754 map with 15 states
-  };
-
-  const getProvinceEmblemsSize = () => {
-    const startSize = minmax((graphHeight + graphWidth) / 100, 5, 70);
-    const provincesMod = 1 + validProvinces.length / 1000 - (115 - validProvinces.length) / 1000; // states number modifier
-    const sizeMod = +document.getElementById("emblemsProvinceSizeInput").value || 1;
-    return rn((startSize / provincesMod) * sizeMod); // target size ~20px on 1536x754 map with 115 provinces
-  };
-
-  const getBurgEmblemSize = () => {
-    const startSize = minmax((graphHeight + graphWidth) / 185, 2, 50);
-    const burgsMod = 1 + validBurgs.length / 1000 - (450 - validBurgs.length) / 1000; // states number modifier
-    const sizeMod = +document.getElementById("emblemsBurgSizeInput").value || 1;
-    return rn((startSize / burgsMod) * sizeMod); // target size ~8.5px on 1536x754 map with 450 burgs
-  };
-
-  const sizeBurgs = getBurgEmblemSize();
-  const burgCOAs = validBurgs.map(burg => {
-    const {x, y} = burg;
-    const size = burg.coa.size || 1;
-    const shift = (sizeBurgs * size) / 2;
-    return {type: "burg", i: burg.i, x: burg.coa.x || x, y: burg.coa.y || y, size, shift};
-  });
-
-  const sizeProvinces = getProvinceEmblemsSize();
-  const provinceCOAs = validProvinces.map(province => {
-    if (!province.pole) getProvincesVertices();
-    const [x, y] = province.pole || pack.cells.p[province.center];
-    const size = province.coa.size || 1;
-    const shift = (sizeProvinces * size) / 2;
-    return {type: "province", i: province.i, x: province.coa.x || x, y: province.coa.y || y, size, shift};
-  });
-
-  const sizeStates = getStateEmblemsSize();
-  const stateCOAs = validStates.map(state => {
-    const [x, y] = state.pole || pack.cells.p[state.center];
-    const size = state.coa.size || 1;
-    const shift = (sizeStates * size) / 2;
-    return {type: "state", i: state.i, x: state.coa.x || x, y: state.coa.y || y, size, shift};
-  });
-
-  const nodes = burgCOAs.concat(provinceCOAs).concat(stateCOAs);
-  const simulation = d3
-    .forceSimulation(nodes)
-    .alphaMin(0.6)
-    .alphaDecay(0.2)
-    .velocityDecay(0.6)
-    .force(
-      "collision",
-      d3.forceCollide().radius(d => d.shift)
-    )
-    .stop();
-
-  d3.timeout(function () {
-    const n = Math.ceil(Math.log(simulation.alphaMin()) / Math.log(1 - simulation.alphaDecay()));
-    for (let i = 0; i < n; ++i) {
-      simulation.tick();
-    }
-
-    const burgNodes = nodes.filter(node => node.type === "burg");
-    const burgString = burgNodes
-      .map(
-        d =>
-          `<use data-i="${d.i}" x="${rn(d.x - d.shift)}" y="${rn(d.y - d.shift)}" width="${d.size}em" height="${
-            d.size
-          }em"/>`
-      )
-      .join("");
-    emblems.select("#burgEmblems").attr("font-size", sizeBurgs).html(burgString);
-
-    const provinceNodes = nodes.filter(node => node.type === "province");
-    const provinceString = provinceNodes
-      .map(
-        d =>
-          `<use data-i="${d.i}" x="${rn(d.x - d.shift)}" y="${rn(d.y - d.shift)}" width="${d.size}em" height="${
-            d.size
-          }em"/>`
-      )
-      .join("");
-    emblems.select("#provinceEmblems").attr("font-size", sizeProvinces).html(provinceString);
-
-    const stateNodes = nodes.filter(node => node.type === "state");
-    const stateString = stateNodes
-      .map(
-        d =>
-          `<use data-i="${d.i}" x="${rn(d.x - d.shift)}" y="${rn(d.y - d.shift)}" width="${d.size}em" height="${
-            d.size
-          }em"/>`
-      )
-      .join("");
-    emblems.select("#stateEmblems").attr("font-size", sizeStates).html(stateString);
-
-    invokeActiveZooming();
-  });
-
-  TIME && console.timeEnd("drawEmblems");
-}
-
 function toggleVignette(event) {
   if (!layerIsOn("toggleVignette")) {
     turnButtonOn("toggleVignette");
@@ -2019,18 +979,25 @@ function toggleVignette(event) {
   }
 }
 
+function getGappedFillPaths(elementName, fill, waterGap, color, index) {
+  let html = "";
+  if (fill) html += /* html */ `<path d="${fill}" fill="${color}" id="${elementName}${index}" />`;
+  if (waterGap)
+    html += /* html */ `<path d="${waterGap}" fill="none" stroke="${color}" stroke-width="3" id="${elementName}-gap${index}" />`;
+  return html;
+}
+
 function layerIsOn(el) {
-  const buttonoff = document.getElementById(el).classList.contains("buttonoff");
-  return !buttonoff;
+  return byId(el).classList.contains("buttonoff") ? false : true;
 }
 
 function turnButtonOff(el) {
-  document.getElementById(el).classList.add("buttonoff");
+  byId(el).classList.add("buttonoff");
   getCurrentPreset();
 }
 
 function turnButtonOn(el) {
-  document.getElementById(el).classList.remove("buttonoff");
+  byId(el).classList.remove("buttonoff");
   getCurrentPreset();
 }
 
@@ -2061,14 +1028,14 @@ function getLayer(id) {
   if (id === "toggleProvinces") return $("#provs");
   if (id === "toggleBorders") return $("#borders");
   if (id === "toggleRoutes") return $("#routes");
-  if (id === "toggleTemp") return $("#temperature");
-  if (id === "togglePrec") return $("#prec");
+  if (id === "toggleTemperature") return $("#temperature");
+  if (id === "togglePrecipitation") return $("#prec");
   if (id === "togglePopulation") return $("#population");
   if (id === "toggleIce") return $("#ice");
   if (id === "toggleTexture") return $("#texture");
   if (id === "toggleEmblems") return $("#emblems");
   if (id === "toggleLabels") return $("#labels");
-  if (id === "toggleIcons") return $("#icons");
+  if (id === "toggleBurgIcons") return $("#icons");
   if (id === "toggleMarkers") return $("#markers");
   if (id === "toggleRulers") return $("#ruler");
 }
diff --git a/modules/ui/markers-editor.js b/modules/ui/markers-editor.js
index 26f035fa..9f56db9a 100644
--- a/modules/ui/markers-editor.js
+++ b/modules/ui/markers-editor.js
@@ -8,25 +8,24 @@ function editMarker(markerI) {
 
   elSelected = d3.select(element).raise().call(d3.drag().on("start", dragMarker)).classed("draggable", true);
 
-  if (document.getElementById("notesEditor").offsetParent) editNotes(element.id, element.id);
+  if (byId("notesEditor").offsetParent) editNotes(element.id, element.id);
 
   // dom elements
-  const markerType = document.getElementById("markerType");
-  const markerIcon = document.getElementById("markerIcon");
-  const markerIconSelect = document.getElementById("markerIconSelect");
-  const markerIconSize = document.getElementById("markerIconSize");
-  const markerIconShiftX = document.getElementById("markerIconShiftX");
-  const markerIconShiftY = document.getElementById("markerIconShiftY");
-  const markerSize = document.getElementById("markerSize");
-  const markerPin = document.getElementById("markerPin");
-  const markerFill = document.getElementById("markerFill");
-  const markerStroke = document.getElementById("markerStroke");
+  const markerType = byId("markerType");
+  const markerIconSelect = byId("markerIconSelect");
+  const markerIconSize = byId("markerIconSize");
+  const markerIconShiftX = byId("markerIconShiftX");
+  const markerIconShiftY = byId("markerIconShiftY");
+  const markerSize = byId("markerSize");
+  const markerPin = byId("markerPin");
+  const markerFill = byId("markerFill");
+  const markerStroke = byId("markerStroke");
 
-  const markerNotes = document.getElementById("markerNotes");
-  const markerLock = document.getElementById("markerLock");
-  const addMarker = document.getElementById("addMarker");
-  const markerAdd = document.getElementById("markerAdd");
-  const markerRemove = document.getElementById("markerRemove");
+  const markerNotes = byId("markerNotes");
+  const markerLock = byId("markerLock");
+  const addMarker = byId("addMarker");
+  const markerAdd = byId("markerAdd");
+  const markerRemove = byId("markerRemove");
 
   updateInputs();
 
@@ -39,8 +38,7 @@ function editMarker(markerI) {
 
   const listeners = [
     listen(markerType, "change", changeMarkerType),
-    listen(markerIcon, "input", changeMarkerIcon),
-    listen(markerIconSelect, "click", selectMarkerIcon),
+    listen(markerIconSelect, "click", changeMarkerIcon),
     listen(markerIconSize, "input", changeIconSize),
     listen(markerIconShiftX, "input", changeIconShiftX),
     listen(markerIconShiftY, "input", changeIconShiftY),
@@ -61,7 +59,7 @@ function editMarker(markerI) {
       return [element, marker];
     }
 
-    const element = document.getElementById(`marker${markerI}`);
+    const element = byId(`marker${markerI}`);
     const marker = pack.markers.find(({i}) => i === markerI);
     return [element, marker];
   }
@@ -97,19 +95,20 @@ function editMarker(markerI) {
   }
 
   function updateInputs() {
-    const {icon, type = "", size = 30, dx = 50, dy = 50, px = 12, stroke = "#000000", fill = "#ffffff", pin = "bubble", lock} = marker;
+    byId("markerIcon").innerHTML = marker.icon.startsWith("http") || marker.icon.startsWith("data:image")
+      ? `<img src="${marker.icon}" style="width: 1em; height: 1em;">`
+      : marker.icon;
 
-    markerType.value = type;
-    markerIcon.value = icon;
-    markerIconSize.value = px;
-    markerIconShiftX.value = dx;
-    markerIconShiftY.value = dy;
-    markerSize.value = size;
-    markerPin.value = pin;
-    markerFill.value = fill;
-    markerStroke.value = stroke;
+    markerType.value = marker.type || "";
+    markerIconSize.value = marker.px || 12;
+    markerIconShiftX.value = marker.dx || 50;
+    markerIconShiftY.value = marker.dy || 50;
+    markerSize.value = marker.size || 30;
+    markerPin.value = marker.pin || "bubble";
+    markerFill.value = marker.fill || "#ffffff";
+    markerStroke.value = marker.stroke || "#000000";
 
-    markerLock.className = lock ? "icon-lock" : "icon-lock-open";
+    markerLock.className = marker.lock ? "icon-lock" : "icon-lock-open";
   }
 
   function changeMarkerType() {
@@ -117,18 +116,12 @@ function editMarker(markerI) {
   }
 
   function changeMarkerIcon() {
-    const icon = this.value;
-    getSameTypeMarkers().forEach(marker => {
-      marker.icon = icon;
-      redrawIcon(marker);
-    });
-  }
+    selectIcon(marker.icon, value => {
+      const isExternal = value.startsWith("http") || value.startsWith("data:image");
+      byId("markerIcon").innerHTML = isExternal ? `<img src="${value}" style="width: 1em; height: 1em;">` : value;
 
-  function selectMarkerIcon() {
-    selectIcon(marker.icon, icon => {
-      markerIcon.value = icon;
       getSameTypeMarkers().forEach(marker => {
-        marker.icon = icon;
+        marker.icon = value;
         redrawIcon(marker);
       });
     });
@@ -165,7 +158,7 @@ function editMarker(markerI) {
     getSameTypeMarkers().forEach(marker => {
       marker.size = size;
       const {i, x, y, hidden} = marker;
-      const el = !hidden && document.getElementById(`marker${i}`);
+      const el = !hidden && byId(`marker${i}`);
       if (!el) return;
 
       const zoomedSize = rescale ? Math.max(rn(size / 5 + 24 / scale, 2), 1) : size;
@@ -201,12 +194,23 @@ function editMarker(markerI) {
   }
 
   function redrawIcon({i, hidden, icon, dx = 50, dy = 50, px = 12}) {
-    const iconElement = !hidden && document.querySelector(`#marker${i} > text`);
-    if (iconElement) {
-      iconElement.innerHTML = icon;
-      iconElement.setAttribute("x", dx + "%");
-      iconElement.setAttribute("y", dy + "%");
-      iconElement.setAttribute("font-size", px + "px");
+    const isExternal = icon.startsWith("http") || icon.startsWith("data:image");
+
+    const iconText = !hidden && document.querySelector(`#marker${i} > text`);
+    if (iconText) {
+      iconText.innerHTML = isExternal ? "" : icon;
+      iconText.setAttribute("x", dx + "%");
+      iconText.setAttribute("y", dy + "%");
+      iconText.setAttribute("font-size", px + "px");
+    }
+
+    const iconImage = !hidden && document.querySelector(`#marker${i} > image`);
+    if (iconImage) {
+      iconImage.setAttribute("x", dx / 2 + "%");
+      iconImage.setAttribute("y", dy / 2 + "%");
+      iconImage.setAttribute("width", px + "px");
+      iconImage.setAttribute("height", px + "px");
+      iconImage.setAttribute("href", isExternal ? icon : "");
     }
   }
 
@@ -241,10 +245,10 @@ function editMarker(markerI) {
   }
 
   function deleteMarker() {
-    Markers.deleteMarker(marker.i)
+    Markers.deleteMarker(marker.i);
     element.remove();
     $("#markerEditor").dialog("close");
-    if (document.getElementById("markersOverviewRefresh").offsetParent) markersOverviewRefresh.click();
+    if (byId("markersOverviewRefresh").offsetParent) markersOverviewRefresh.click();
   }
 
   function closeMarkerEditor() {
diff --git a/modules/ui/markers-overview.js b/modules/ui/markers-overview.js
index af0cc11f..02999eb0 100644
--- a/modules/ui/markers-overview.js
+++ b/modules/ui/markers-overview.js
@@ -69,18 +69,24 @@ function overviewMarkers() {
   function addLines() {
     const lines = pack.markers
       .map(({i, type, icon, pinned, lock}) => {
-        return `<div class="states" data-i=${i} data-type="${type}">
-        <div data-tip="Marker icon and type" style="width:12em">${icon} ${type}</div>
-        <span style="padding-right:.1em" data-tip="Edit marker" class="icon-pencil"></span>
-        <span style="padding-right:.1em" data-tip="Focus on marker position" class="icon-dot-circled pointer"></span>
-        <span style="padding-right:.1em" data-tip="Pin marker (display only pinned markers)" class="icon-pin ${
-          pinned ? "" : "inactive"
-        }" pointer"></span>
-        <span style="padding-right:.1em" class="locks pointer ${
-          lock ? "icon-lock" : "icon-lock-open inactive"
-        }" onmouseover="showElementLockTip(event)"></span>
-        <span data-tip="Remove marker" class="icon-trash-empty"></span>
-      </div>`;
+        return /* html */ `
+          <div class="states" data-i=${i} data-type="${type}">
+            ${
+              icon.startsWith("http") || icon.startsWith("data:image")
+                ? `<img src="${icon}" data-tip="Marker icon" style="width:1.2em; height:1.2em; vertical-align: middle;">`
+                : `<span data-tip="Marker icon" style="width:1.2em">${icon}</span>`
+            }
+            <div data-tip="Marker type" style="width:10em">${type}</div>
+            <span style="padding-right:.1em" data-tip="Edit marker" class="icon-pencil"></span>
+            <span style="padding-right:.1em" data-tip="Focus on marker position" class="icon-dot-circled pointer"></span>
+            <span style="padding-right:.1em" data-tip="Pin marker (display only pinned markers)" class="icon-pin ${
+              pinned ? "" : "inactive"
+            }" pointer"></span>
+            <span style="padding-right:.1em" class="locks pointer ${
+              lock ? "icon-lock" : "icon-lock-open inactive"
+            }" onmouseover="showElementLockTip(event)"></span>
+            <span data-tip="Remove marker" class="icon-trash-empty"></span>
+          </div>`;
       })
       .join("");
 
@@ -208,15 +214,15 @@ function overviewMarkers() {
 
     const body = pack.markers.map(marker => {
       const {i, type, icon, x, y} = marker;
-      const id = `marker${i}`;
-      const note = notes.find(note => note.id === id);
+
+      const note = notes.find(note => note.id === "marker" + i);
       const name = note ? quote(note.name) : "Unknown";
       const legend = note ? quote(note.legend) : "";
 
       const lat = getLatitude(y, 2);
       const lon = getLongitude(x, 2);
 
-      return [id, type, icon, name, legend, x, y, lat, lon].join(",");
+      return [i, type, icon, name, legend, x, y, lat, lon].join(",");
     });
 
     const data = headers + body.join("\n");
diff --git a/modules/ui/measurers.js b/modules/ui/measurers.js
index 1f51cd7d..fbd90603 100644
--- a/modules/ui/measurers.js
+++ b/modules/ui/measurers.js
@@ -530,3 +530,32 @@ class Planimeter extends Measurer {
     this.el.select("text").attr("x", c[0]).attr("y", c[1]).text(area);
   }
 }
+
+function createDefaultRuler() {
+  TIME && console.time("createDefaultRuler");
+  const {features, vertices} = pack;
+
+  const areas = features.map(f => (f.land ? f.area || 0 : -Infinity));
+  const largestLand = areas.indexOf(Math.max(...areas));
+  const featureVertices = features[largestLand].vertices;
+
+  const MIN_X = 100;
+  const MAX_X = graphWidth - 100;
+  const MIN_Y = 100;
+  const MAX_Y = graphHeight - 100;
+
+  let leftmostVertex = [graphWidth - MIN_X, graphHeight / 2];
+  let rightmostVertex = [MIN_X, graphHeight / 2];
+
+  for (const vertex of featureVertices) {
+    const [x, y] = vertices.p[vertex];
+    if (y < MIN_Y || y > MAX_Y) continue;
+    if (x < leftmostVertex[0] && x >= MIN_X) leftmostVertex = [x, y];
+    if (x > rightmostVertex[0] && x <= MAX_X) rightmostVertex = [x, y];
+  }
+
+  rulers = new Rulers();
+  rulers.create(Ruler, [leftmostVertex, rightmostVertex]);
+
+  TIME && console.timeEnd("createDefaultRuler");
+}
diff --git a/modules/ui/military-overview.js b/modules/ui/military-overview.js
index 2382cb27..1a916f7a 100644
--- a/modules/ui/military-overview.js
+++ b/modules/ui/military-overview.js
@@ -284,7 +284,14 @@ function overviewMilitary() {
       if (el.tagName !== "BUTTON") return;
       const type = el.dataset.type;
 
-      if (type === "icon") return selectIcon(el.textContent, v => (el.textContent = v));
+      if (type === "icon") {
+        return selectIcon(el.textContent, function (value) {
+          el.innerHTML = value.startsWith("http") || value.startsWith("data:image")
+            ? `<img src="${value}" style="width:1.2em;height:1.2em;pointer-events:none;">`
+            : value;
+        });
+      }
+
       if (type === "biomes") {
         const {i, name, color} = biomesData;
         const biomesArray = Array(i.length).fill(null);
@@ -329,9 +336,15 @@ function overviewMilitary() {
           ${getLimitText(unit[attr])}
         </button>`;
 
-      row.innerHTML = /* html */ `<td><button data-type="icon" data-tip="Click to select unit icon">${
-        icon || " "
-      }</button></td>
+      row.innerHTML = /* html */ `<td>
+          <button data-type="icon" data-tip="Click to select unit icon">
+            ${
+              icon.startsWith("http") || icon.startsWith("data:image")
+                ? `<img src="${icon}" style="width:1.2em;height:1.2em;pointer-events:none;">`
+                : icon || ""
+            }
+          </button>
+        </td>
         <td><input data-tip="Type unit name. If name is changed for existing unit, old unit will be replaced" value="${name}" /></td>
         <td>${getLimitButton("biomes")}</td>
         <td>${getLimitButton("states")}</td>
@@ -424,7 +437,11 @@ function overviewMilitary() {
         const [icon, name, biomes, states, cultures, religions, rural, urban, crew, power, type, separate] =
           elements.map(el => {
             const {type, value} = el.dataset || {};
-            if (type === "icon") return el.textContent || "⠀";
+            if (type === "icon") {
+              const value = el.innerHTML.trim();
+              const isImage = value.startsWith("<img");
+              return isImage ? value.match(/src="([^"]*)"/)[1] : value || "⠀";
+            }
             if (type) return value ? value.split(",").map(v => parseInt(v)) : null;
             if (el.type === "number") return +el.value || 0;
             if (el.type === "checkbox") return +el.checked || 0;
diff --git a/modules/ui/namesbase-editor.js b/modules/ui/namesbase-editor.js
index edf472eb..ae3fc730 100644
--- a/modules/ui/namesbase-editor.js
+++ b/modules/ui/namesbase-editor.js
@@ -41,7 +41,7 @@ function editNamesbase() {
 
   $("#namesbaseEditor").dialog({
     title: "Namesbase Editor",
-    width: "auto",
+    width: "60vw",
     position: {my: "center", at: "center", of: "svg"}
   });
 
@@ -66,7 +66,7 @@ function editNamesbase() {
   function updateExamples() {
     const base = +document.getElementById("namesbaseSelect").value;
     let examples = "";
-    for (let i = 0; i < 10; i++) {
+    for (let i = 0; i < 7; i++) {
       const example = Names.getBase(base);
       if (example === undefined) {
         examples = "Cannot generate examples. Please verify the data";
@@ -250,7 +250,7 @@ function editNamesbase() {
       const [rawName, min, max, d, m, rawNames] = base.split("|");
       const name = rawName.replace(unsafe, "");
       const names = rawNames.replace(unsafe, "");
-      nameBases.push({name, min, max, d, m, b: names});
+      nameBases.push({name, min: +min, max: +max, d, m: +m, b: names});
     });
 
     createBasesList();
diff --git a/modules/ui/notes-editor.js b/modules/ui/notes-editor.js
index becf4fa0..10f87e16 100644
--- a/modules/ui/notes-editor.js
+++ b/modules/ui/notes-editor.js
@@ -40,8 +40,8 @@ function editNotes(id, name) {
 
   $("#notesEditor").dialog({
     title: "Notes Editor",
-    width: window.innerWidth * 0.8,
-    height: window.innerHeight * 0.75,
+    width: svgWidth * 0.8,
+    height: svgHeight * 0.75,
     position: {my: "center", at: "center", of: "svg"},
     close: removeEditor
   });
@@ -55,6 +55,7 @@ function editNotes(id, name) {
   byId("notesLegend").addEventListener("blur", updateLegend);
   byId("notesPin").addEventListener("click", toggleNotesPin);
   byId("notesFocus").addEventListener("click", validateHighlightElement);
+  byId("notesGenerateWithAi").addEventListener("click", openAiGenerator);
   byId("notesDownload").addEventListener("click", downloadLegends);
   byId("notesUpload").addEventListener("click", () => legendsToLoad.click());
   byId("legendsToLoad").addEventListener("change", function () {
@@ -143,6 +144,25 @@ function editNotes(id, name) {
     });
   }
 
+  function openAiGenerator() {
+    const note = notes.find(note => note.id === notesSelect.value);
+
+    let prompt = `Respond with description. Use simple dry language. Invent facts, names and details. Split to paragraphs and format to HTML. Remove h tags, remove markdown.`;
+    if (note?.name) prompt += ` Name: ${note.name}.`;
+    if (note?.legend) prompt += ` Data: ${note.legend}`;
+
+    const onApply = result => {
+      notesLegend.innerHTML = result;
+      if (note) {
+        note.legend = result;
+        updateNotesBox(note);
+        if (window.tinymce) tinymce.activeEditor.setContent(note.legend);
+      }
+    };
+
+    generateWithAi(prompt, onApply);
+  }
+
   function downloadLegends() {
     const notesData = JSON.stringify(notes);
     const name = getFileName("Notes") + ".txt";
diff --git a/modules/ui/options.js b/modules/ui/options.js
index a35c5815..537a6a4e 100644
--- a/modules/ui/options.js
+++ b/modules/ui/options.js
@@ -66,12 +66,18 @@ document
       .querySelectorAll(".tabcontent")
       .forEach(e => (e.style.display = "none"));
 
-    if (id === "layersTab") layersContent.style.display = "block";
-    else if (id === "styleTab") styleContent.style.display = "block";
-    else if (id === "optionsTab") optionsContent.style.display = "block";
-    else if (id === "toolsTab")
+    if (id === "layersTab") {
+      layersContent.style.display = "block";
+    } else if (id === "styleTab") {
+      styleContent.style.display = "block";
+      selectStyleElement();
+    } else if (id === "optionsTab") {
+      optionsContent.style.display = "block";
+    } else if (id === "toolsTab") {
       customization === 1 ? (customizationMenu.style.display = "block") : (toolsContent.style.display = "block");
-    else if (id === "aboutTab") aboutContent.style.display = "block";
+    } else if (id === "aboutTab") {
+      aboutContent.style.display = "block";
+    }
   });
 
 // show popup with a list of Patreon supportes (updated manually)
@@ -125,9 +131,9 @@ optionsContent.addEventListener("input", event => {
   if (id === "mapWidthInput" || id === "mapHeightInput") mapSizeInputChange();
   else if (id === "pointsInput") changeCellsDensity(+value);
   else if (id === "culturesSet") changeCultureSet();
-  else if (id === "regionsInput" || id === "regionsOutput") changeStatesNumber(value);
+  else if (id === "statesNumber") changeStatesNumber(value);
   else if (id === "emblemShape") changeEmblemShape(value);
-  else if (id === "tooltipSizeInput" || id === "tooltipSizeOutput") changeTooltipSize(value);
+  else if (id === "tooltipSize") changeTooltipSize(value);
   else if (id === "themeHueInput") changeThemeHue(value);
   else if (id === "themeColorInput") changeDialogsTheme(themeColorInput.value, transparencyInput.value);
   else if (id === "transparencyInput") changeDialogsTheme(themeColorInput.value, value);
@@ -137,11 +143,12 @@ optionsContent.addEventListener("change", event => {
   const {id, value} = event.target;
   if (id === "zoomExtentMin" || id === "zoomExtentMax") changeZoomExtent(value);
   else if (id === "optionsSeed") generateMapWithSeed("seed change");
-  else if (id === "uiSizeInput" || id === "uiSizeOutput") changeUiSize(value);
+  else if (id === "uiSize") changeUiSize(+value);
   else if (id === "shapeRendering") setRendering(value);
   else if (id === "yearInput") changeYear();
   else if (id === "eraInput") changeEra();
   else if (id === "stateLabelsModeInput") options.stateLabelsMode = value;
+  else if (id === "azgaarAssistant") toggleAssistant();
 });
 
 optionsContent.addEventListener("click", event => {
@@ -203,16 +210,16 @@ function fitMapToScreen() {
   svgHeight = Math.min(+mapHeightInput.value, window.innerHeight);
   svg.attr("width", svgWidth).attr("height", svgHeight);
 
-  const zoomExtent = [
-    [0, 0],
-    [graphWidth, graphHeight]
-  ];
-
   const zoomMin = rn(Math.max(svgWidth / graphWidth, svgHeight / graphHeight), 3);
   zoomExtentMin.value = zoomMin;
   const zoomMax = +zoomExtentMax.value;
 
-  zoom.translateExtent(zoomExtent).scaleExtent([zoomMin, zoomMax]).scaleTo(svg, zoomMin);
+  zoom
+    .translateExtent([
+      [0, 0],
+      [graphWidth, graphHeight]
+    ])
+    .scaleExtent([zoomMin, zoomMax]);
 
   fitScaleBar(scaleBar, svgWidth, svgHeight);
   if (window.fitLegendBox) fitLegendBox();
@@ -244,8 +251,7 @@ const voiceInterval = setInterval(function () {
     select.options.add(new Option(voice.name, i, false));
   });
   if (stored("speakerVoice")) select.value = stored("speakerVoice");
-  // se voice to store
-  else select.value = voices.findIndex(voice => voice.lang === "en-US"); // or to first found English-US
+  else select.value = voices.findIndex(voice => voice.lang === "en-US");
 }, 1000);
 
 function testSpeaker() {
@@ -326,16 +332,12 @@ const cellsDensityMap = {
 
 function changeCellsDensity(value) {
   pointsInput.value = value;
-  const cells = cellsDensityMap[value] || 1000;
+  const cells = cellsDensityMap[value] || pointsInput.dataset.cells;
   pointsInput.dataset.cells = cells;
-  pointsOutputFormatted.value = getCellsDensityValue(cells);
+  pointsOutputFormatted.value = cells / 1000 + "K";
   pointsOutputFormatted.style.color = getCellsDensityColor(cells);
 }
 
-function getCellsDensityValue(cells) {
-  return cells / 1000 + "K";
-}
-
 function getCellsDensityColor(cells) {
   return cells > 50000 ? "#b12117" : cells !== 10000 ? "#dfdf12" : "#053305";
 }
@@ -389,18 +391,18 @@ function changeEmblemShape(emblemShape) {
 }
 
 function changeStatesNumber(value) {
-  regionsOutput.style.color = +value ? null : "#b12117";
+  byId("statesNumber").style.color = +value ? null : "#b12117";
   burgLabels.select("#capitals").attr("data-size", Math.max(rn(6 - value / 20), 3));
   labels.select("#countries").attr("data-size", Math.max(rn(18 - value / 6), 4));
 }
 
 function changeUiSize(value) {
-  if (isNaN(+value) || +value < 0.5) return;
+  if (isNaN(value) || value < 0.5) return;
 
   const max = getUImaxSize();
-  if (+value > max) value = max;
+  if (value > max) value = max;
 
-  uiSizeInput.value = uiSizeOutput.value = value;
+  uiSize.value = value;
   document.getElementsByTagName("body")[0].style.fontSize = rn(value * 10, 2) + "px";
   byId("options").style.width = value * 300 + "px";
 }
@@ -427,7 +429,7 @@ function changeThemeHue(hue) {
 
 // change color and transparency for modal windows
 function changeDialogsTheme(themeColor, transparency) {
-  transparencyInput.value = transparencyOutput.value = transparency;
+  transparencyInput.value = transparency;
   const alpha = (100 - +transparency) / 100;
   const alphaReduced = Math.min(alpha + 0.3, 1);
 
@@ -441,6 +443,7 @@ function changeDialogsTheme(themeColor, transparency) {
   };
 
   const theme = [
+    {name: "--bg-opacity", value: alpha},
     {name: "--bg-main", h, s, l, alpha},
     {name: "--bg-lighter", h, s, l: l + 0.02, alpha},
     {name: "--bg-light", h, s: s - 0.02, l: l + 0.06, alpha},
@@ -453,8 +456,9 @@ function changeDialogsTheme(themeColor, transparency) {
   ];
 
   const sx = document.documentElement.style;
-  theme.forEach(({name, h, s, l, alpha}) => {
-    sx.setProperty(name, getRGBA(h, s, l, alpha));
+  theme.forEach(({name, value, h, s, l, alpha}) => {
+    if (value !== undefined) sx.setProperty(name, value);
+    else sx.setProperty(name, getRGBA(h, s, l, alpha));
   });
 }
 
@@ -489,11 +493,11 @@ function resetLanguage() {
   if (!languageSelect.value) return;
 
   languageSelect.value = "en";
-  languageSelect.dispatchEvent(new Event("change"));
+  languageSelect.handleChange(new Event("change"));
 
   // do once again to actually reset the language
   languageSelect.value = "en";
-  languageSelect.dispatchEvent(new Event("change"));
+  languageSelect.handleChange(new Event("change"));
 }
 
 function changeZoomExtent(value) {
@@ -533,7 +537,6 @@ function applyStoredOptions() {
 
   for (let i = 0; i < localStorage.length; i++) {
     const key = localStorage.key(i);
-
     if (key === "speakerVoice") continue;
 
     const input = byId(key + "Input") || byId(key);
@@ -551,17 +554,17 @@ function applyStoredOptions() {
     if (key.slice(0, 5) === "style") applyOption(stylePreset, key, key.slice(5));
   }
 
-  if (stored("winds")) options.winds = localStorage.getItem("winds").split(",").map(Number);
-  if (stored("temperatureEquator")) options.temperatureEquator = +localStorage.getItem("temperatureEquator");
-  if (stored("temperatureNorthPole")) options.temperatureNorthPole = +localStorage.getItem("temperatureNorthPole");
-  if (stored("temperatureSouthPole")) options.temperatureSouthPole = +localStorage.getItem("temperatureSouthPole");
+  if (stored("winds")) options.winds = stored("winds").split(",").map(Number);
+  if (stored("temperatureEquator")) options.temperatureEquator = +stored("temperatureEquator");
+  if (stored("temperatureNorthPole")) options.temperatureNorthPole = +stored("temperatureNorthPole");
+  if (stored("temperatureSouthPole")) options.temperatureSouthPole = +stored("temperatureSouthPole");
   if (stored("military")) options.military = JSON.parse(stored("military"));
 
   if (stored("tooltipSize")) changeTooltipSize(stored("tooltipSize"));
   if (stored("regions")) changeStatesNumber(stored("regions"));
 
-  uiSizeInput.max = uiSizeOutput.max = getUImaxSize();
-  if (stored("uiSize")) changeUiSize(stored("uiSize"));
+  uiSize.max = uiSize.max = getUImaxSize();
+  if (stored("uiSize")) changeUiSize(+stored("uiSize"));
   else changeUiSize(minmax(rn(mapWidthInput.value / 1280, 1), 1, 2.5));
 
   // search params overwrite stored and default options
@@ -586,15 +589,15 @@ function randomizeOptions() {
   // 'Options' settings
   if (randomize || !locked("points")) changeCellsDensity(4); // reset to default, no need to randomize
   if (randomize || !locked("template")) randomizeHeightmapTemplate();
-  if (randomize || !locked("regions")) regionsInput.value = regionsOutput.value = gauss(18, 5, 2, 30);
-  if (randomize || !locked("provinces")) provincesInput.value = provincesOutput.value = gauss(20, 10, 20, 100);
+  if (randomize || !locked("statesNumber")) statesNumber.value = gauss(18, 5, 2, 30);
+  if (randomize || !locked("provincesRatio")) provincesRatio.value = gauss(20, 10, 20, 100);
   if (randomize || !locked("manors")) {
     manorsInput.value = 1000;
     manorsOutput.value = "auto";
   }
-  if (randomize || !locked("religions")) religionsInput.value = religionsOutput.value = gauss(6, 3, 2, 10);
-  if (randomize || !locked("power")) powerInput.value = powerOutput.value = gauss(4, 2, 0, 10, 2);
-  if (randomize || !locked("neutral")) neutralInput.value = neutralOutput.value = rn(1 + Math.random(), 1);
+  if (randomize || !locked("religionsNumber")) religionsNumber.value = gauss(6, 3, 2, 10);
+  if (randomize || !locked("sizeVariety")) sizeVariety.value = gauss(4, 2, 0, 10, 1);
+  if (randomize || !locked("growthRate")) growthRate.value = rn(1 + Math.random(), 1);
   if (randomize || !locked("cultures")) culturesInput.value = culturesOutput.value = gauss(12, 3, 5, 30);
   if (randomize || !locked("culturesSet")) randomizeCultureSet();
 
@@ -606,8 +609,7 @@ function randomizeOptions() {
 
   // 'Units Editor' settings
   const US = navigator.language === "en-US";
-  if (randomize || !locked("distanceScale"))
-    distanceScale = distanceScaleOutput.value = distanceScaleInput.value = gauss(3, 1, 1, 5);
+  if (randomize || !locked("distanceScale")) distanceScale = distanceScaleInput.value = gauss(3, 1, 1, 5);
   if (!stored("distanceUnit")) distanceUnitInput.value = US ? "mi" : "km";
   if (!stored("heightUnit")) heightUnit.value = US ? "ft" : "m";
   if (!stored("temperatureScale")) temperatureScale.value = US ? "°F" : "°C";
@@ -699,12 +701,6 @@ async function openTemplateSelectionDialog() {
   HeightmapSelectionDialog.open();
 }
 
-// remove all saved data from LocalStorage and reload the page
-function restoreDefaultOptions() {
-  localStorage.clear();
-  location.reload();
-}
-
 // Sticked menu Options listeners
 byId("sticked").addEventListener("click", function (event) {
   const id = event.target.id;
@@ -778,7 +774,7 @@ function showExportPane() {
 }
 
 async function exportToJson(type) {
-  const {exportToJson} = await import("../dynamic/export-json.js?v=1.97.08");
+  const {exportToJson} = await import("../dynamic/export-json.js?v=1.100.00");
   exportToJson(type);
 }
 
diff --git a/modules/ui/provinces-editor.js b/modules/ui/provinces-editor.js
index 8ef848e6..69707b95 100644
--- a/modules/ui/provinces-editor.js
+++ b/modules/ui/provinces-editor.js
@@ -8,7 +8,7 @@ function editProvinces() {
   if (layerIsOn("toggleCultures")) toggleCultures();
 
   provs.selectAll("text").call(d3.drag().on("drag", dragLabel)).classed("draggable", true);
-  const body = document.getElementById("provincesBodySection");
+  const body = byId("provincesBodySection");
   refreshProvincesEditor();
 
   if (modules.editProvinces) return;
@@ -23,22 +23,22 @@ function editProvinces() {
   });
 
   // add listeners
-  document.getElementById("provincesEditorRefresh").addEventListener("click", refreshProvincesEditor);
-  document.getElementById("provincesEditStyle").addEventListener("click", () => editStyle("provs"));
-  document.getElementById("provincesFilterState").addEventListener("change", provincesEditorAddLines);
-  document.getElementById("provincesPercentage").addEventListener("click", togglePercentageMode);
-  document.getElementById("provincesChart").addEventListener("click", showChart);
-  document.getElementById("provincesToggleLabels").addEventListener("click", toggleLabels);
-  document.getElementById("provincesExport").addEventListener("click", downloadProvincesData);
-  document.getElementById("provincesRemoveAll").addEventListener("click", removeAllProvinces);
-  document.getElementById("provincesManually").addEventListener("click", enterProvincesManualAssignent);
-  document.getElementById("provincesManuallyApply").addEventListener("click", applyProvincesManualAssignent);
-  document.getElementById("provincesManuallyCancel").addEventListener("click", () => exitProvincesManualAssignment());
-  document.getElementById("provincesRelease").addEventListener("click", triggerProvincesRelease);
-  document.getElementById("provincesAdd").addEventListener("click", enterAddProvinceMode);
-  document.getElementById("provincesRecolor").addEventListener("click", recolorProvinces);
+  byId("provincesEditorRefresh").on("click", refreshProvincesEditor);
+  byId("provincesEditStyle").on("click", () => editStyle("provs"));
+  byId("provincesFilterState").on("change", provincesEditorAddLines);
+  byId("provincesPercentage").on("click", togglePercentageMode);
+  byId("provincesChart").on("click", showChart);
+  byId("provincesToggleLabels").on("click", toggleLabels);
+  byId("provincesExport").on("click", downloadProvincesData);
+  byId("provincesRemoveAll").on("click", removeAllProvinces);
+  byId("provincesManually").on("click", enterProvincesManualAssignent);
+  byId("provincesManuallyApply").on("click", applyProvincesManualAssignent);
+  byId("provincesManuallyCancel").on("click", () => exitProvincesManualAssignment());
+  byId("provincesRelease").on("click", triggerProvincesRelease);
+  byId("provincesAdd").on("click", enterAddProvinceMode);
+  byId("provincesRecolor").on("click", recolorProvinces);
 
-  body.addEventListener("click", function (ev) {
+  body.on("click", function (ev) {
     if (customization) return;
     const el = ev.target,
       cl = el.classList,
@@ -58,7 +58,7 @@ function editProvinces() {
     else if (cl.contains("icon-lock") || cl.contains("icon-lock-open")) updateLockStatus(p, cl);
   });
 
-  body.addEventListener("change", function (ev) {
+  body.on("change", function (ev) {
     const el = ev.target,
       cl = el.classList,
       line = el.parentNode,
@@ -100,7 +100,7 @@ function editProvinces() {
   }
 
   function updateFilter() {
-    const stateFilter = document.getElementById("provincesFilterState");
+    const stateFilter = byId("provincesFilterState");
     const selectedState = stateFilter.value || 1;
     stateFilter.options.length = 0; // remove all options
     stateFilter.options.add(new Option(`all`, -1, false, selectedState == -1));
@@ -111,7 +111,7 @@ function editProvinces() {
   // add line for each province
   function provincesEditorAddLines() {
     const unit = " " + getAreaUnit();
-    const selectedState = +document.getElementById("provincesFilterState").value;
+    const selectedState = +byId("provincesFilterState").value;
     let filtered = pack.provinces.filter(p => p.i && !p.removed); // all valid burgs
     if (selectedState != -1) filtered = filtered.filter(p => p.state === selectedState); // filtered by state
     body.innerHTML = "";
@@ -194,9 +194,9 @@ function editProvinces() {
     byId("provincesFooterPopulation").dataset.population = totalPopulation;
 
     body.querySelectorAll("div.states").forEach(el => {
-      el.addEventListener("click", selectProvinceOnLineClick);
-      el.addEventListener("mouseenter", ev => provinceHighlightOn(ev));
-      el.addEventListener("mouseleave", ev => provinceHighlightOff(ev));
+      el.on("click", selectProvinceOnLineClick);
+      el.on("mouseenter", ev => provinceHighlightOn(ev));
+      el.on("mouseleave", ev => provinceHighlightOff(ev));
     });
 
     if (body.dataset.type === "percentage") {
@@ -306,7 +306,7 @@ function editProvinces() {
     const {cell: center, culture} = burgs[burgId];
     const color = getRandomColor();
     const coa = province.coa;
-    const coaEl = document.getElementById("provinceCOA" + provinceId);
+    const coaEl = byId("provinceCOA" + provinceId);
     if (coaEl) coaEl.id = "stateCOA" + newStateId;
     emblems.select(`#provinceEmblems > use[data-i='${provinceId}']`).remove();
 
@@ -367,10 +367,7 @@ function editProvinces() {
   function updateStatesPostRelease(oldStates, newStates) {
     const allStates = unique([...oldStates, ...newStates]);
 
-    layerIsOn("toggleProvinces") && toggleProvinces();
-    layerIsOn("toggleStates") ? drawStates() : toggleStates();
-    layerIsOn("toggleBorders") ? drawBorders() : toggleBorders();
-
+    BurgsAndStates.getPoles();
     BurgsAndStates.collectStatistics();
     BurgsAndStates.defineStateForms(newStates);
     drawStateLabels(allStates);
@@ -382,6 +379,10 @@ function editProvinces() {
       COArenderer.add("state", stateId, coa, ...pole);
     });
 
+    layerIsOn("toggleProvinces") && toggleProvinces();
+    layerIsOn("toggleStates") ? drawStates() : toggleStates();
+    layerIsOn("toggleBorders") ? drawBorders() : toggleBorders();
+
     unfog();
     closeDialogs();
     editStates();
@@ -454,6 +455,7 @@ function editProvinces() {
         p.burgs.forEach(b => (pack.burgs[b].population = population));
       }
 
+      if (layerIsOn("togglePopulation")) drawPopulation();
       refreshProvincesEditor();
     }
   }
@@ -482,7 +484,7 @@ function editProvinces() {
           unfog("focusProvince" + p);
 
           const coaId = "provinceCOA" + p;
-          if (document.getElementById(coaId)) document.getElementById(coaId).remove();
+          if (byId(coaId)) byId(coaId).remove();
           emblems.select(`#provinceEmblems > use[data-i='${p}']`).remove();
 
           pack.provinces[p] = {i: p, removed: true};
@@ -490,8 +492,7 @@ function editProvinces() {
           const g = provs.select("#provincesBody");
           g.select("#province" + p).remove();
           g.select("#province-gap" + p).remove();
-          if (!layerIsOn("toggleBorders")) toggleBorders();
-          else drawBorders();
+          if (layerIsOn("toggleBorders")) drawBorders();
           refreshProvincesEditor();
           $(this).dialog("close");
         },
@@ -504,13 +505,13 @@ function editProvinces() {
 
   function editProvinceName(province) {
     const p = pack.provinces[province];
-    document.getElementById("provinceNameEditor").dataset.province = province;
-    document.getElementById("provinceNameEditorShort").value = p.name;
+    byId("provinceNameEditor").dataset.province = province;
+    byId("provinceNameEditorShort").value = p.name;
     applyOption(provinceNameEditorSelectForm, p.formName);
-    document.getElementById("provinceNameEditorFull").value = p.fullName;
+    byId("provinceNameEditorFull").value = p.fullName;
 
     const cultureId = pack.cells.culture[p.center];
-    document.getElementById("provinceCultureDisplay").innerText = pack.cultures[cultureId].name;
+    byId("provinceCultureDisplay").innerText = pack.cultures[cultureId].name;
 
     $("#provinceNameEditor").dialog({
       resizable: false,
@@ -531,22 +532,22 @@ function editProvinces() {
     modules.editProvinceName = true;
 
     // add listeners
-    document.getElementById("provinceNameEditorShortCulture").addEventListener("click", regenerateShortNameCulture);
-    document.getElementById("provinceNameEditorShortRandom").addEventListener("click", regenerateShortNameRandom);
-    document.getElementById("provinceNameEditorAddForm").addEventListener("click", addCustomForm);
-    document.getElementById("provinceNameEditorFullRegenerate").addEventListener("click", regenerateFullName);
+    byId("provinceNameEditorShortCulture").on("click", regenerateShortNameCulture);
+    byId("provinceNameEditorShortRandom").on("click", regenerateShortNameRandom);
+    byId("provinceNameEditorAddForm").on("click", addCustomForm);
+    byId("provinceNameEditorFullRegenerate").on("click", regenerateFullName);
 
     function regenerateShortNameCulture() {
       const province = +provinceNameEditor.dataset.province;
       const culture = pack.cells.culture[pack.provinces[province].center];
       const name = Names.getState(Names.getCultureShort(culture), culture);
-      document.getElementById("provinceNameEditorShort").value = name;
+      byId("provinceNameEditorShort").value = name;
     }
 
     function regenerateShortNameRandom() {
       const base = rand(nameBases.length - 1);
       const name = Names.getState(Names.getBase(base), undefined, base);
-      document.getElementById("provinceNameEditorShort").value = name;
+      byId("provinceNameEditorShort").value = name;
     }
 
     function addCustomForm() {
@@ -558,9 +559,9 @@ function editProvinces() {
     }
 
     function regenerateFullName() {
-      const short = document.getElementById("provinceNameEditorShort").value;
-      const form = document.getElementById("provinceNameEditorSelectForm").value;
-      document.getElementById("provinceNameEditorFull").value = getFullName();
+      const short = byId("provinceNameEditorShort").value;
+      const form = byId("provinceNameEditorSelectForm").value;
+      byId("provinceNameEditorFull").value = getFullName();
 
       function getFullName() {
         if (!form) return short;
@@ -570,9 +571,9 @@ function editProvinces() {
     }
 
     function applyNameChange(p) {
-      p.name = document.getElementById("provinceNameEditorShort").value;
-      p.formName = document.getElementById("provinceNameEditorSelectForm").value;
-      p.fullName = document.getElementById("provinceNameEditorFull").value;
+      p.name = byId("provinceNameEditorShort").value;
+      p.formName = byId("provinceNameEditorSelectForm").value;
+      p.fullName = byId("provinceNameEditorFull").value;
       provs.select("#provinceLabel" + p.i).text(p.name);
       refreshProvincesEditor();
     }
@@ -628,8 +629,8 @@ function editProvinces() {
       .parentId(d => d.state)(data)
       .sum(d => d.area);
 
-    const width = 300 + 300 * uiSizeOutput.value,
-      height = 90 + 90 * uiSizeOutput.value;
+    const width = 300 + 300 * uiSize.value,
+      height = 90 + 90 * uiSize.value;
     const margin = {top: 10, right: 10, bottom: 0, left: 10};
     const w = width - margin.left - margin.right;
     const h = height - margin.top - margin.bottom;
@@ -651,7 +652,7 @@ function editProvinces() {
       .attr("height", height)
       .attr("font-size", "10px");
     const graph = svg.append("g").attr("transform", `translate(10, 0)`);
-    document.getElementById("provincesTreeType").addEventListener("change", updateChart);
+    byId("provincesTreeType").on("change", updateChart);
 
     treeLayout(root);
 
@@ -688,7 +689,7 @@ function editProvinces() {
 
     function hideInfo(ev) {
       provinceHighlightOff(ev);
-      if (!document.getElementById("provinceInfo")) return;
+      if (!byId("provinceInfo")) return;
       provinceInfo.innerHTML = "&#8205;";
       d3.select(ev.target).select("rect").classed("selected", 0);
     }
@@ -705,6 +706,7 @@ function editProvinces() {
 
     node
       .append("text")
+      .attr("text-rendering", "optimizeSpeed")
       .attr("dx", ".2em")
       .attr("dy", "1em")
       .attr("x", d => d.x0)
@@ -816,7 +818,7 @@ function editProvinces() {
     stateBorders.select("path").attr("stroke", "#000").attr("stroke-width", 1.2);
 
     customization = 11;
-    provs.select("g#provincesBody").append("g").attr("id", "temp");
+    provs.select("g#provincesBody").append("g").attr("id", "temp").attr("stroke-width", 0.3);
     provs
       .select("g#provincesBody")
       .append("g")
@@ -826,7 +828,7 @@ function editProvinces() {
       .attr("stroke-width", 1);
 
     document.querySelectorAll("#provincesBottom > *").forEach(el => (el.style.display = "none"));
-    document.getElementById("provincesManuallyButtons").style.display = "inline-block";
+    byId("provincesManuallyButtons").style.display = "inline-block";
 
     provincesEditor.querySelectorAll(".hide").forEach(el => el.classList.add("hidden"));
     provincesHeader.querySelector("div[data-sortby='state']").style.left = "7.7em";
@@ -879,7 +881,7 @@ function editProvinces() {
   }
 
   function dragBrush() {
-    const r = +provincesManuallyBrush.value;
+    const r = +provincesBrush.value;
 
     d3.event.on("drag", () => {
       if (!d3.event.dx && !d3.event.dy) return;
@@ -937,7 +939,7 @@ function editProvinces() {
   function moveBrush() {
     showMainTip();
     const point = d3.mouse(this);
-    const radius = +provincesManuallyBrush.value;
+    const radius = +provincesBrush.value;
     moveCircle(point[0], point[1], radius);
   }
 
@@ -950,10 +952,10 @@ function editProvinces() {
         pack.cells.province[i] = +this.dataset.province;
       });
 
-    if (!layerIsOn("toggleBorders")) toggleBorders();
-    else drawBorders();
-    if (!layerIsOn("toggleProvinces")) toggleProvinces();
-    else drawProvinces();
+    Provinces.getPoles();
+    if (layerIsOn("toggleBorders")) drawBorders();
+    if (layerIsOn("toggleProvinces")) drawProvinces();
+
     exitProvincesManualAssignment();
     refreshProvincesEditor();
   }
@@ -970,7 +972,7 @@ function editProvinces() {
     debug.selectAll("path.selected").remove();
 
     document.querySelectorAll("#provincesBottom > *").forEach(el => (el.style.display = "inline-block"));
-    document.getElementById("provincesManuallyButtons").style.display = "none";
+    byId("provincesManuallyButtons").style.display = "none";
 
     provincesEditor.querySelectorAll(".hide:not(.show)").forEach(el => el.classList.remove("hidden"));
     provincesHeader.querySelector("div[data-sortby='state']").style.left = "22em";
@@ -1044,12 +1046,11 @@ function editProvinces() {
       cells.province[c] = province;
     });
 
-    if (!layerIsOn("toggleBorders")) toggleBorders();
-    else drawBorders();
-    if (!layerIsOn("toggleProvinces")) toggleProvinces();
-    else drawProvinces();
+    if (layerIsOn("toggleBorders")) drawBorders();
+    if (layerIsOn("toggleProvinces")) drawProvinces();
+
     collectStatistics();
-    document.getElementById("provincesFilterState").value = state;
+    byId("provincesFilterState").value = state;
     provincesEditorAddLines();
   }
 
@@ -1062,7 +1063,7 @@ function editProvinces() {
   }
 
   function recolorProvinces() {
-    const state = +document.getElementById("provincesFilterState").value;
+    const state = +byId("provincesFilterState").value;
 
     pack.provinces.forEach(p => {
       if (!p || p.removed) return;
@@ -1120,8 +1121,7 @@ function editProvinces() {
           pack.states.forEach(s => (s.provinces = []));
 
           unfog();
-          if (!layerIsOn("toggleBorders")) toggleBorders();
-          else drawBorders();
+          if (layerIsOn("toggleBorders")) drawBorders();
           provs.select("#provincesBody").remove();
           turnButtonOff("toggleProvinces");
 
diff --git a/modules/ui/regiment-editor.js b/modules/ui/regiment-editor.js
index 5c38a07a..d3144f49 100644
--- a/modules/ui/regiment-editor.js
+++ b/modules/ui/regiment-editor.js
@@ -24,18 +24,17 @@ function editRegiment(selector) {
   modules.editRegiment = true;
 
   // add listeners
-  document.getElementById("regimentNameRestore").addEventListener("click", restoreName);
-  document.getElementById("regimentType").addEventListener("click", changeType);
-  document.getElementById("regimentName").addEventListener("change", changeName);
-  document.getElementById("regimentEmblem").addEventListener("input", changeEmblem);
-  document.getElementById("regimentEmblemSelect").addEventListener("click", selectEmblem);
-  document.getElementById("regimentAttack").addEventListener("click", toggleAttack);
-  document.getElementById("regimentRegenerateLegend").addEventListener("click", regenerateLegend);
-  document.getElementById("regimentLegend").addEventListener("click", editLegend);
-  document.getElementById("regimentSplit").addEventListener("click", splitRegiment);
-  document.getElementById("regimentAdd").addEventListener("click", toggleAdd);
-  document.getElementById("regimentAttach").addEventListener("click", toggleAttach);
-  document.getElementById("regimentRemove").addEventListener("click", removeRegiment);
+  byId("regimentNameRestore").addEventListener("click", restoreName);
+  byId("regimentType").addEventListener("click", changeType);
+  byId("regimentName").addEventListener("change", changeName);
+  byId("regimentEmblemChange").addEventListener("click", changeEmblem);
+  byId("regimentAttack").addEventListener("click", toggleAttack);
+  byId("regimentRegenerateLegend").addEventListener("click", regenerateLegend);
+  byId("regimentLegend").addEventListener("click", editLegend);
+  byId("regimentSplit").addEventListener("click", splitRegiment);
+  byId("regimentAdd").addEventListener("click", toggleAdd);
+  byId("regimentAttach").addEventListener("click", toggleAttach);
+  byId("regimentRemove").addEventListener("click", removeRegiment);
 
   // get regiment data element
   function getRegiment() {
@@ -43,11 +42,13 @@ function editRegiment(selector) {
   }
 
   function updateRegimentData(regiment) {
-    document.getElementById("regimentType").className = regiment.n ? "icon-anchor" : "icon-users";
-    document.getElementById("regimentName").value = regiment.name;
-    document.getElementById("regimentEmblem").value = regiment.icon;
-    const composition = document.getElementById("regimentComposition");
+    byId("regimentType").className = regiment.n ? "icon-anchor" : "icon-users";
+    byId("regimentName").value = regiment.name;
+    byId("regimentEmblem").innerHTML = regiment.icon.startsWith("http") || regiment.icon.startsWith("data:image")
+      ? `<img src="${regiment.icon}" style="width: 1em; height: 1em;">`
+      : regiment.icon;
 
+    const composition = byId("regimentComposition");
     composition.innerHTML = options.military
       .map(u => {
         return `<div data-tip="${capitalize(u.name)} number. Input to change">
@@ -126,12 +127,13 @@ function editRegiment(selector) {
   function changeType() {
     const reg = getRegiment();
     reg.n = +!reg.n;
-    document.getElementById("regimentType").className = reg.n ? "icon-anchor" : "icon-users";
+    byId("regimentType").className = reg.n ? "icon-anchor" : "icon-users";
 
     const size = +armies.attr("box-size");
     const baseRect = elSelected.querySelectorAll("rect")[0];
     const iconRect = elSelected.querySelectorAll("rect")[1];
     const icon = elSelected.querySelector(".regimentIcon");
+    const image = elSelected.querySelector(".regimentIcon");
     const x = reg.n ? reg.x - size * 2 : reg.x - size * 3;
     baseRect.setAttribute("x", x);
     baseRect.setAttribute("width", reg.n ? size * 4 : size * 6);
@@ -148,19 +150,19 @@ function editRegiment(selector) {
     const reg = getRegiment(),
       regs = pack.states[elSelected.dataset.state].military;
     const name = Military.getName(reg, regs);
-    elSelected.dataset.name = reg.name = document.getElementById("regimentName").value = name;
-  }
-
-  function selectEmblem() {
-    selectIcon(regimentEmblem.value, v => {
-      regimentEmblem.value = v;
-      changeEmblem();
-    });
+    elSelected.dataset.name = reg.name = byId("regimentName").value = name;
   }
 
   function changeEmblem() {
-    const emblem = document.getElementById("regimentEmblem").value;
-    getRegiment().icon = elSelected.querySelector(".regimentIcon").innerHTML = emblem;
+    const regiment = getRegiment();
+
+    selectIcon(regiment.icon, value => {
+      regiment.icon = value;
+      const isExternal = value.startsWith("http") || value.startsWith("data:image");
+      byId("regimentEmblem").innerHTML = isExternal ? `<img src="${value}" style="width: 1em; height: 1em;">` : value;
+      elSelected.querySelector(".regimentIcon").innerHTML = isExternal ? "" : value;
+      elSelected.querySelector(".regimentImage").setAttribute("href", isExternal ? value : "");
+    });
   }
 
   function changeUnit() {
@@ -218,14 +220,14 @@ function editRegiment(selector) {
     newReg.name = Military.getName(newReg, military);
     military.push(newReg);
     Military.generateNote(newReg, pack.states[state]); // add legend
-    Military.drawRegiment(newReg, state); // draw new reg below
+    drawRegiment(newReg, state); // draw new reg below
 
     if (regimentsOverviewRefresh.offsetParent) regimentsOverviewRefresh.click();
   }
 
   function toggleAdd() {
-    document.getElementById("regimentAdd").classList.toggle("pressed");
-    if (document.getElementById("regimentAdd").classList.contains("pressed")) {
+    byId("regimentAdd").classList.toggle("pressed");
+    if (byId("regimentAdd").classList.contains("pressed")) {
       viewbox.style("cursor", "crosshair").on("click", addRegimentOnClick);
       tip("Click on map to create new regiment or fleet", true);
     } else {
@@ -246,14 +248,14 @@ function editRegiment(selector) {
     reg.name = Military.getName(reg, military);
     military.push(reg);
     Military.generateNote(reg, pack.states[state]); // add legend
-    Military.drawRegiment(reg, state);
+    drawRegiment(reg, state);
     if (regimentsOverviewRefresh.offsetParent) regimentsOverviewRefresh.click();
     toggleAdd();
   }
 
   function toggleAttack() {
-    document.getElementById("regimentAttack").classList.toggle("pressed");
-    if (document.getElementById("regimentAttack").classList.contains("pressed")) {
+    byId("regimentAttack").classList.toggle("pressed");
+    if (byId("regimentAttack").classList.contains("pressed")) {
       viewbox.style("cursor", "crosshair").on("click", attackRegimentOnClick);
       tip("Click on another regiment to initiate battle", true);
       armies.selectAll(":scope > g").classed("draggable", false);
@@ -296,7 +298,7 @@ function editRegiment(selector) {
     (defender.px = defender.x), (defender.py = defender.y);
 
     // move attacker to defender
-    Military.moveRegiment(attacker, defender.x, defender.y - 8);
+    moveRegiment(attacker, defender.x, defender.y - 8);
 
     // draw battle icon
     const attack = d3
@@ -307,6 +309,7 @@ function editRegiment(selector) {
       .on("end", () => new Battle(attacker, defender));
     svg
       .append("text")
+      .attr("text-rendering", "optimizeSpeed")
       .attr("x", window.innerWidth / 2)
       .attr("y", window.innerHeight / 2)
       .text("⚔️")
@@ -324,8 +327,8 @@ function editRegiment(selector) {
   }
 
   function toggleAttach() {
-    document.getElementById("regimentAttach").classList.toggle("pressed");
-    if (document.getElementById("regimentAttach").classList.contains("pressed")) {
+    byId("regimentAttach").classList.toggle("pressed");
+    if (byId("regimentAttach").classList.contains("pressed")) {
       viewbox.style("cursor", "crosshair").on("click", attachRegimentOnClick);
       tip("Click on another regiment to unite both regiments. The current regiment will be removed", true);
       armies.selectAll(":scope > g").classed("draggable", false);
@@ -427,6 +430,7 @@ function editRegiment(selector) {
     const text = this.querySelector("text");
     const iconRect = this.querySelectorAll("rect")[1];
     const icon = this.querySelector(".regimentIcon");
+    const image = this.querySelector(".regimentImage");
 
     const self = elSelected === this;
     const baseLine = viewbox.select("g#regimentBase > line");
@@ -448,6 +452,8 @@ function editRegiment(selector) {
       iconRect.setAttribute("y", y1);
       icon.setAttribute("x", x1 - size);
       icon.setAttribute("y", y);
+      image.setAttribute("x", x1 - h);
+      image.setAttribute("y", y1);
       if (self) {
         baseLine.attr("x2", x).attr("y2", y);
         rotationControl
@@ -479,9 +485,9 @@ function editRegiment(selector) {
     viewbox.selectAll("g#regimentBase").remove();
     armies.selectAll(":scope > g").classed("draggable", false);
     armies.selectAll("g>g").call(d3.drag().on("drag", null));
-    document.getElementById("regimentAdd").classList.remove("pressed");
-    document.getElementById("regimentAttack").classList.remove("pressed");
-    document.getElementById("regimentAttach").classList.remove("pressed");
+    byId("regimentAdd").classList.remove("pressed");
+    byId("regimentAttack").classList.remove("pressed");
+    byId("regimentAttach").classList.remove("pressed");
     restoreDefaultEvents();
     elSelected = null;
   }
diff --git a/modules/ui/regiments-overview.js b/modules/ui/regiments-overview.js
index 28f40d18..63f7d1c9 100644
--- a/modules/ui/regiments-overview.js
+++ b/modules/ui/regiments-overview.js
@@ -67,14 +67,24 @@ function overviewRegiments(state) {
           )
           .join(" ");
 
-        lines += /* html */ `<div class="states" data-id="${r.i}" data-s="${s.i}" data-state="${s.name}" data-name="${r.name}" ${sortData} data-total="${r.a}">
+        lines += /* html */ `<div class="states" data-id="${r.i}" data-s="${s.i}" data-state="${s.name}" data-name="${
+          r.name
+        }" ${sortData} data-total="${r.a}">
           <fill-box data-tip="${s.fullName}" fill="${s.color}" disabled></fill-box>
           <input data-tip="${s.fullName}" style="width:6em" value="${s.name}" readonly />
-          <span data-tip="Regiment's emblem" style="width:1em">${r.icon}</span>
+          ${
+            r.icon.startsWith("http") || r.icon.startsWith("data:image")
+              ? `<img src="${r.icon}" data-tip="Regiment's emblem" style="width:1.2em; height:1.2em; vertical-align: middle;">`
+              : `<span data-tip="Regiment's emblem" style="width:1em">${r.icon}</span>`
+          }
           <input data-tip="Regiment's name" style="width:13em" value="${r.name}" readonly />
           ${lineData}
-          <div data-type="total" data-tip="Total military personnel (not considering crew)" style="font-weight: bold">${r.a}</div>
-          <span data-tip="Edit regiment" onclick="editRegiment('#regiment${s.i}-${r.i}')" class="icon-pencil pointer"></span>
+          <div data-type="total" data-tip="Total military personnel (not considering crew)" style="font-weight: bold">${
+            r.a
+          }</div>
+          <span data-tip="Edit regiment" onclick="editRegiment('#regiment${s.i}-${
+          r.i
+        }')" class="icon-pencil pointer"></span>
         </div>`;
 
         regiments.push(r);
@@ -179,7 +189,7 @@ function overviewRegiments(state) {
     reg.name = Military.getName(reg, military);
     military.push(reg);
     Military.generateNote(reg, pack.states[state]); // add legend
-    Military.drawRegiment(reg, state);
+    drawRegiment(reg, state);
     toggleAdd();
   }
 
diff --git a/modules/ui/rivers-creator.js b/modules/ui/rivers-creator.js
index a8600917..a88581a5 100644
--- a/modules/ui/rivers-creator.js
+++ b/modules/ui/rivers-creator.js
@@ -74,13 +74,10 @@ function createRiver() {
 
   function addRiver() {
     const {rivers, cells} = pack;
-    const {addMeandering, getApproximateLength, getWidth, getOffset, getName, getRiverPath, getBasin, getNextId} =
-      Rivers;
-
     const riverCells = createRiver.cells;
     if (riverCells.length < 2) return tip("Add at least 2 cells", false, "error");
 
-    const riverId = getNextId(rivers);
+    const riverId = Rivers.getNextId(rivers);
     const parent = cells.r[last(riverCells)] || riverId;
 
     riverCells.forEach(cell => {
@@ -89,17 +86,24 @@ function createRiver() {
 
     const source = riverCells[0];
     const mouth = parent === riverId ? last(riverCells) : riverCells[riverCells.length - 2];
-    const sourceWidth = 0.05;
+    const sourceWidth = Rivers.getSourceWidth(cells.fl[source]);
     const defaultWidthFactor = rn(1 / (pointsInput.dataset.cells / 10000) ** 0.25, 2);
     const widthFactor = 1.2 * defaultWidthFactor;
 
-    const meanderedPoints = addMeandering(riverCells);
+    const meanderedPoints = Rivers.addMeandering(riverCells);
 
     const discharge = cells.fl[mouth]; // m3 in second
-    const length = getApproximateLength(meanderedPoints);
-    const width = getWidth(getOffset(discharge, meanderedPoints.length, widthFactor, sourceWidth));
-    const name = getName(mouth);
-    const basin = getBasin(parent);
+    const length = Rivers.getApproximateLength(meanderedPoints);
+    const width = Rivers.getWidth(
+      Rivers.getOffset({
+        flux: discharge,
+        pointIndex: meanderedPoints.length,
+        widthFactor,
+        startingWidth: sourceWidth
+      })
+    );
+    const name = Rivers.getName(mouth);
+    const basin = Rivers.getBasin(parent);
 
     rivers.push({
       i: riverId,
@@ -118,13 +122,11 @@ function createRiver() {
     });
     const id = "river" + riverId;
 
-    // render river
-    lineGen.curve(d3.curveCatmullRom.alpha(0.1));
     viewbox
       .select("#rivers")
       .append("path")
       .attr("id", id)
-      .attr("d", getRiverPath(meanderedPoints, widthFactor, sourceWidth));
+      .attr("d", Rivers.getRiverPath(meanderedPoints, widthFactor, sourceWidth));
 
     editRiver(id);
   }
diff --git a/modules/ui/rivers-editor.js b/modules/ui/rivers-editor.js
index 4a061179..a00d488b 100644
--- a/modules/ui/rivers-editor.js
+++ b/modules/ui/rivers-editor.js
@@ -86,10 +86,16 @@ function editRiver(id) {
   }
 
   function updateRiverWidth(river) {
-    const {addMeandering, getWidth, getOffset} = Rivers;
     const {cells, discharge, widthFactor, sourceWidth} = river;
-    const meanderedPoints = addMeandering(cells);
-    river.width = getWidth(getOffset(discharge, meanderedPoints.length, widthFactor, sourceWidth));
+    const meanderedPoints = Rivers.addMeandering(cells);
+    river.width = Rivers.getWidth(
+      Rivers.getOffset({
+        flux: discharge,
+        pointIndex: meanderedPoints.length,
+        widthFactor,
+        startingWidth: sourceWidth
+      })
+    );
 
     const width = `${rn(river.width * distanceScale, 3)} ${distanceUnitInput.value}`;
     byId("riverWidth").value = width;
@@ -158,11 +164,9 @@ function editRiver(id) {
     river.points = debug.selectAll("#controlPoints > *").data();
     river.cells = river.points.map(([x, y]) => findCell(x, y));
 
-    const {widthFactor, sourceWidth} = river;
-    const meanderedPoints = Rivers.addMeandering(river.cells, river.points);
-
     lineGen.curve(d3.curveCatmullRom.alpha(0.1));
-    const path = Rivers.getRiverPath(meanderedPoints, widthFactor, sourceWidth);
+    const meanderedPoints = Rivers.addMeandering(river.cells, river.points);
+    const path = Rivers.getRiverPath(meanderedPoints, river.widthFactor, river.sourceWidth);
     elSelected.attr("d", path);
 
     updateRiverLength(river);
diff --git a/modules/ui/route-group-editor.js b/modules/ui/route-group-editor.js
index 370058c1..8450e299 100644
--- a/modules/ui/route-group-editor.js
+++ b/modules/ui/route-group-editor.js
@@ -18,7 +18,7 @@ function editRouteGroups() {
   // add listeners
   byId("routeGroupsEditorAdd").addEventListener("click", addGroup);
   byId("routeGroupsEditorBody").on("click", ev => {
-    const group = ev.target.parentNode.dataset.id;
+    const group = ev.target.closest(".states")?.dataset.id;
     if (ev.target.classList.contains("editStyle")) editStyle("routes", group);
     else if (ev.target.classList.contains("removeGroup")) removeGroup(group);
   });
@@ -72,12 +72,11 @@ function editRouteGroups() {
     confirmationDialog({
       title: "Remove route group",
       message:
-        "Are you sure you want to remove the entire route group? All routes in this group will be removed. This action can't be reverted.",
+        "Are you sure you want to remove the entire route group? All routes in this group will be removed.<br>This action can't be reverted",
       confirm: "Remove",
       onConfirm: () => {
-        const routes = pack.routes.filter(r => r.group === group);
-        routes.forEach(r => Routes.remove(r));
-        if (DEFAULT_GROUPS.includes(group)) routes.select(`#${group}`).remove();
+        pack.routes.filter(r => r.group === group).forEach(Routes.remove);
+        if (!DEFAULT_GROUPS.includes(group)) routes.select(`#${group}`).remove();
         addLines();
       }
     });
diff --git a/modules/ui/routes-creator.js b/modules/ui/routes-creator.js
index cd9d853f..3e2d6620 100644
--- a/modules/ui/routes-creator.js
+++ b/modules/ui/routes-creator.js
@@ -97,7 +97,7 @@ function createRoute(defaultGroup) {
     const points = createRoute.points;
     if (points.length < 2) return tip("Add at least 2 points", false, "error");
 
-    const routeId = Math.max(...pack.routes.map(route => route.i)) + 1;
+    const routeId = Routes.getNextId();
     const group = byId("routeCreatorGroupSelect").value;
     const feature = pack.cells.f[points[0][2]];
     const route = {points, group, feature, i: routeId};
diff --git a/modules/ui/routes-editor.js b/modules/ui/routes-editor.js
index 3a137623..5556c812 100644
--- a/modules/ui/routes-editor.js
+++ b/modules/ui/routes-editor.js
@@ -174,9 +174,10 @@ function editRoute(id) {
 
   function handleControlPointClick() {
     const controlPoint = d3.select(this);
-
     const point = controlPoint.datum();
     const route = getRoute();
+    if (route.points.length < 3) return; // can't remove or split point if only 2 points in route
+
     const index = route.points.indexOf(point);
 
     const isSplitMode = byId("routeSplit").classList.contains("pressed");
@@ -194,7 +195,7 @@ function editRoute(id) {
 
       // create new route
       const newRoute = {
-        i: Math.max(...pack.routes.map(route => route.i)) + 1,
+        i: Routes.getNextId(),
         group: route.group,
         feature: route.feature,
         name: route.name,
@@ -389,20 +390,13 @@ function editRoute(id) {
   }
 
   function removeRoute() {
-    alertMessage.innerHTML = "Are you sure you want to remove the route";
-    $("#alert").dialog({
-      resizable: false,
-      width: "22em",
+    confirmationDialog({
       title: "Remove route",
-      buttons: {
-        Remove: function () {
-          Routes.remove(getRoute());
-          $(this).dialog("close");
-          $("#routeEditor").dialog("close");
-        },
-        Cancel: function () {
-          $(this).dialog("close");
-        }
+      message: "Are you sure you want to remove the route? <br>This action cannot be reverted",
+      confirm: "Remove",
+      onConfirm: () => {
+        Routes.remove(getRoute());
+        $("#routeEditor").dialog("close");
       }
     });
   }
diff --git a/modules/ui/routes-overview.js b/modules/ui/routes-overview.js
index d9817dc3..cf731068 100644
--- a/modules/ui/routes-overview.js
+++ b/modules/ui/routes-overview.js
@@ -32,6 +32,7 @@ function overviewRoutes() {
     let lines = "";
 
     for (const route of pack.routes) {
+      if (!route.points || route.points.length < 2) continue;
       route.name = route.name || Routes.generateName(route);
       route.length = route.length || Routes.getLength(route.i);
       const length = rn(route.length * distanceScale) + " " + distanceUnitInput.value;
@@ -58,7 +59,7 @@ function overviewRoutes() {
 
     // update footer
     routesFooterNumber.innerHTML = pack.routes.length;
-    const averageLength = rn(d3.mean(pack.routes.map(r => r.length)));
+    const averageLength = rn(d3.mean(pack.routes.map(r => r.length)) || 0);
     routesFooterLength.innerHTML = averageLength * distanceScale + " " + distanceUnitInput.value;
 
     // add listeners
@@ -92,8 +93,8 @@ function overviewRoutes() {
   }
 
   function zoomToRoute() {
-    const r = +this.parentNode.dataset.id;
-    const route = routes.select("#route" + r).node();
+    const routeId = +this.parentNode.dataset.id;
+    const route = routes.select("#route" + routeId).node();
     highlightElement(route, 3);
   }
 
@@ -111,15 +112,16 @@ function overviewRoutes() {
   }
 
   function openRouteEditor() {
-    const id = "route" + this.parentNode.dataset.id;
-    editRoute(id);
+    const routeId = "route" + this.parentNode.dataset.id;
+    editRoute(routeId);
   }
 
   function toggleLockStatus() {
     const routeId = +this.parentNode.dataset.id;
-    const route = pack.routes[routeId];
-    route.lock = !route.lock;
+    const route = pack.routes.find(route => route.i === routeId);
+    if (!route) return;
 
+    route.lock = !route.lock;
     if (this.classList.contains("icon-lock")) {
       this.classList.remove("icon-lock");
       this.classList.add("icon-lock-open");
@@ -144,22 +146,14 @@ function overviewRoutes() {
 
   function triggerRouteRemove() {
     const routeId = +this.parentNode.dataset.id;
-
-    alertMessage.innerHTML = `Are you sure you want to remove the route?`;
-    $("#alert").dialog({
-      resizable: false,
-      width: "22em",
+    confirmationDialog({
       title: "Remove route",
-      buttons: {
-        Remove: function () {
-          const route = pack.routes.find(r => r.i === routeId);
-          Routes.remove(route);
-          routesOverviewAddLines();
-          $(this).dialog("close");
-        },
-        Cancel: function () {
-          $(this).dialog("close");
-        }
+      message: "Are you sure you want to remove the route? <br>This action cannot be reverted",
+      confirm: "Remove",
+      onConfirm: () => {
+        const route = pack.routes.find(r => r.i === routeId);
+        Routes.remove(route);
+        routesOverviewAddLines();
       }
     });
   }
@@ -175,8 +169,8 @@ function overviewRoutes() {
           pack.routes = [];
           routes.selectAll("path").remove();
 
+          routesOverviewAddLines();
           $(this).dialog("close");
-          $("#routesOverview").dialog("close");
         },
         Cancel: function () {
           $(this).dialog("close");
diff --git a/modules/ui/stylePresets.js b/modules/ui/style-presets.js
similarity index 95%
rename from modules/ui/stylePresets.js
rename to modules/ui/style-presets.js
index adbf5c14..01626205 100644
--- a/modules/ui/stylePresets.js
+++ b/modules/ui/style-presets.js
@@ -10,6 +10,7 @@ const systemPresets = [
   "watercolor",
   "clean",
   "atlas",
+  "darkSeas",
   "cyberpunk",
   "night",
   "monochrome"
@@ -63,7 +64,7 @@ async function getStylePreset(desiredPreset) {
 
 async function fetchSystemPreset(preset) {
   try {
-    const res = await fetch(`./styles/${preset}.json?v=${version}`);
+    const res = await fetch(`./styles/${preset}.json?v=${VERSION}`);
     return await res.json();
   } catch (err) {
     throw new Error("Cannot fetch style preset", preset);
@@ -237,6 +238,9 @@ function addStylePreset() {
       ],
       "#ice": ["opacity", "fill", "stroke", "stroke-width", "filter"],
       "#emblems": ["opacity", "stroke-width", "filter"],
+      "#emblems > #stateEmblems": ["data-size"],
+      "#emblems > #provinceEmblems": ["data-size"],
+      "#emblems > #burgEmblems": ["data-size"],
       "#texture": ["opacity", "filter", "mask", "data-x", "data-y", "data-href"],
       "#zones": ["opacity", "stroke", "stroke-width", "stroke-dasharray", "stroke-linecap", "filter", "mask"],
       "#oceanLayers": ["filter", "layers"],
@@ -267,7 +271,15 @@ function addStylePreset() {
         "data-columns"
       ],
       "#legendBox": ["fill", "fill-opacity"],
-      "#burgLabels > #cities": ["opacity", "fill", "text-shadow", "data-size", "font-size", "font-family"],
+      "#burgLabels > #cities": [
+        "opacity",
+        "fill",
+        "text-shadow",
+        "letter-spacing",
+        "data-size",
+        "font-size",
+        "font-family"
+      ],
       "#burgIcons > #cities": [
         "opacity",
         "fill",
@@ -279,7 +291,15 @@ function addStylePreset() {
         "stroke-linecap"
       ],
       "#anchors > #cities": ["opacity", "fill", "size", "stroke", "stroke-width"],
-      "#burgLabels > #towns": ["opacity", "fill", "text-shadow", "data-size", "font-size", "font-family"],
+      "#burgLabels > #towns": [
+        "opacity",
+        "fill",
+        "text-shadow",
+        "letter-spacing",
+        "data-size",
+        "font-size",
+        "font-family"
+      ],
       "#burgIcons > #towns": [
         "opacity",
         "fill",
@@ -297,6 +317,7 @@ function addStylePreset() {
         "stroke",
         "stroke-width",
         "text-shadow",
+        "letter-spacing",
         "data-size",
         "font-size",
         "font-family",
@@ -308,6 +329,7 @@ function addStylePreset() {
         "stroke",
         "stroke-width",
         "text-shadow",
+        "letter-spacing",
         "data-size",
         "font-size",
         "font-family",
diff --git a/modules/ui/style.js b/modules/ui/style.js
index f6e5dd02..d8f16ad7 100644
--- a/modules/ui/style.js
+++ b/modules/ui/style.js
@@ -18,7 +18,7 @@
 }
 
 // store some style inputs as options
-styleElements.addEventListener("change", function (ev) {
+styleElements.on("change", function (ev) {
   if (ev.target.dataset.stored) lock(ev.target.dataset.stored);
 });
 
@@ -70,8 +70,13 @@ function getColorScheme(scheme = "bright") {
   return heightmapColorSchemes[scheme];
 }
 
+function getColor(value, scheme = getColorScheme("bright")) {
+  return scheme(1 - (value < 20 ? value - 5 : value) / 100);
+}
+
 // Toggle style sections on element select
-styleElementSelect.addEventListener("change", selectStyleElement);
+styleElementSelect.on("change", selectStyleElement);
+
 function selectStyleElement() {
   const styleElement = styleElementSelect.value;
   let el = d3.select("#" + styleElement);
@@ -92,7 +97,7 @@ function selectStyleElement() {
   // opacity
   if (!["landmass", "ocean", "regions", "legend"].includes(styleElement)) {
     styleOpacity.style.display = "block";
-    styleOpacityInput.value = styleOpacityOutput.value = el.attr("opacity") || 1;
+    styleOpacityInput.value = el.attr("opacity") || 1;
   }
 
   // filter
@@ -111,32 +116,41 @@ function selectStyleElement() {
   if (
     [
       "armies",
-      "routes",
-      "lakes",
+      "biomes",
       "borders",
-      "cults",
-      "relig",
       "cells",
       "coastline",
-      "prec",
+      "coordinates",
+      "cults",
+      "gridOverlay",
       "ice",
       "icons",
-      "coordinates",
-      "zones",
-      "gridOverlay"
+      "lakes",
+      "prec",
+      "relig",
+      "routes",
+      "zones"
     ].includes(styleElement)
   ) {
     styleStroke.style.display = "block";
     styleStrokeInput.value = styleStrokeOutput.value = el.attr("stroke");
     styleStrokeWidth.style.display = "block";
-    styleStrokeWidthInput.value = styleStrokeWidthOutput.value = el.attr("stroke-width") || "";
+    styleStrokeWidthInput.value = el.attr("stroke-width") || 0;
   }
 
   // stroke dash
   if (
-    ["routes", "borders", "temperature", "legend", "population", "coordinates", "zones", "gridOverlay"].includes(
-      styleElement
-    )
+    [
+      "borders",
+      "cells",
+      "coordinates",
+      "gridOverlay",
+      "legend",
+      "population",
+      "routes",
+      "temperature",
+      "zones"
+    ].includes(styleElement)
   ) {
     styleStrokeDash.style.display = "block";
     styleStrokeDasharrayInput.value = el.attr("stroke-dasharray") || "";
@@ -146,15 +160,17 @@ function selectStyleElement() {
   // clipping
   if (
     [
-      "cells",
-      "gridOverlay",
-      "coordinates",
-      "compass",
-      "terrain",
-      "temperature",
-      "routes",
-      "texture",
       "biomes",
+      "cells",
+      "compass",
+      "coordinates",
+      "gridOverlay",
+      "population",
+      "prec",
+      "routes",
+      "temperature",
+      "terrain",
+      "texture",
       "zones"
     ].includes(styleElement)
   ) {
@@ -176,9 +192,9 @@ function selectStyleElement() {
     styleHeightmapRenderOcean.checked = +el.attr("data-render");
 
     styleHeightmapScheme.value = el.attr("scheme");
-    styleHeightmapTerracingInput.value = styleHeightmapTerracingOutput.value = el.attr("terracing");
-    styleHeightmapSkipInput.value = styleHeightmapSkipOutput.value = el.attr("skip");
-    styleHeightmapSimplificationInput.value = styleHeightmapSimplificationOutput.value = el.attr("relax");
+    styleHeightmapTerracing.value = el.attr("terracing");
+    styleHeightmapSkip.value = el.attr("skip");
+    styleHeightmapSimplification.value = el.attr("relax");
     styleHeightmapCurve.value = el.attr("curve");
   }
 
@@ -201,13 +217,13 @@ function selectStyleElement() {
     const tr = parseTransform(compass.select("use").attr("transform"));
     styleCompassShiftX.value = tr[0];
     styleCompassShiftY.value = tr[1];
-    styleCompassSizeInput.value = styleCompassSizeOutput.value = tr[2];
+    styleCompassSizeInput.value = tr[2];
   }
 
   if (styleElement === "terrain") {
     styleRelief.style.display = "block";
-    styleReliefSizeOutput.innerHTML = styleReliefSizeInput.value = terrain.attr("size");
-    styleReliefDensityOutput.innerHTML = styleReliefDensityInput.value = terrain.attr("density");
+    styleReliefSize.value = terrain.attr("size") || 1;
+    styleReliefDensity.value = terrain.attr("density") || 0.4;
     styleReliefSet.value = terrain.attr("set");
   }
 
@@ -220,30 +236,31 @@ function selectStyleElement() {
       .select("#urban")
       .attr("stroke");
     styleStrokeWidth.style.display = "block";
-    styleStrokeWidthInput.value = styleStrokeWidthOutput.value = el.attr("stroke-width") || "";
+    styleStrokeWidthInput.value = el.attr("stroke-width") || 0;
   }
 
   if (styleElement === "regions") {
     styleStates.style.display = "block";
-    styleStatesBodyOpacity.value = styleStatesBodyOpacityOutput.value = statesBody.attr("opacity") || 1;
+    styleStatesBodyOpacity.value = statesBody.attr("opacity") || 1;
     styleStatesBodyFilter.value = statesBody.attr("filter") || "";
-    styleStatesHaloWidth.value = styleStatesHaloWidthOutput.value = statesHalo.attr("data-width") || 10;
-    styleStatesHaloOpacity.value = styleStatesHaloOpacityOutput.value = statesHalo.attr("opacity") || 1;
-    const blur = parseFloat(statesHalo.attr("filter")?.match(/blur\(([^)]+)\)/)?.[1]) || 0;
-    styleStatesHaloBlur.value = styleStatesHaloBlurOutput.value = blur;
+    styleStatesHaloWidth.value = statesHalo.attr("data-width") || 10;
+    styleStatesHaloOpacity.value = statesHalo.attr("opacity") || 1;
+    styleStatesHaloBlur.value = parseFloat(statesHalo.attr("filter")?.match(/blur\(([^)]+)\)/)?.[1]) || 0;
   }
 
   if (styleElement === "labels") {
     styleFill.style.display = "block";
     styleStroke.style.display = "block";
     styleStrokeWidth.style.display = "block";
+    styleLetterSpacing.style.display = "block";
 
     styleShadow.style.display = "block";
     styleSize.style.display = "block";
     styleVisibility.style.display = "block";
     styleFillInput.value = styleFillOutput.value = el.attr("fill") || "#3e3e4b";
     styleStrokeInput.value = styleStrokeOutput.value = el.attr("stroke") || "#3a3a3a";
-    styleStrokeWidthInput.value = styleStrokeWidthOutput.value = el.attr("stroke-width") || 0;
+    styleStrokeWidthInput.value = el.attr("stroke-width") || 0;
+    styleLetterSpacingInput.value = el.attr("letter-spacing") || 0;
     styleShadowInput.value = el.style("text-shadow") || "white 0 0 4px";
 
     styleFont.style.display = "block";
@@ -258,7 +275,7 @@ function selectStyleElement() {
 
     styleFont.style.display = "block";
     styleSelectFont.value = el.attr("font-family");
-    styleFontSize.value = el.attr("data-size");
+    styleFontSize.value = el.attr("font-size");
   }
 
   if (styleElement == "burgIcons") {
@@ -269,7 +286,7 @@ function selectStyleElement() {
     styleRadius.style.display = "block";
     styleFillInput.value = styleFillOutput.value = el.attr("fill") || "#ffffff";
     styleStrokeInput.value = styleStrokeOutput.value = el.attr("stroke") || "#3e3e4b";
-    styleStrokeWidthInput.value = styleStrokeWidthOutput.value = el.attr("stroke-width") || 0.24;
+    styleStrokeWidthInput.value = el.attr("stroke-width") || 0.24;
     styleStrokeDasharrayInput.value = el.attr("stroke-dasharray") || "";
     styleStrokeLinecapInput.value = el.attr("stroke-linecap") || "inherit";
     styleRadiusInput.value = el.attr("size") || 1;
@@ -282,7 +299,7 @@ function selectStyleElement() {
     styleIconSize.style.display = "block";
     styleFillInput.value = styleFillOutput.value = el.attr("fill") || "#ffffff";
     styleStrokeInput.value = styleStrokeOutput.value = el.attr("stroke") || "#3e3e4b";
-    styleStrokeWidthInput.value = styleStrokeWidthOutput.value = el.attr("stroke-width") || 0.24;
+    styleStrokeWidthInput.value = el.attr("stroke-width") || 0.24;
     styleIconSizeInput.value = el.attr("size") || 2;
   }
 
@@ -292,12 +309,13 @@ function selectStyleElement() {
     styleSize.style.display = "block";
 
     styleLegend.style.display = "block";
-    styleLegendColItemsOutput.value = styleLegendColItems.value = el.attr("data-columns");
-    styleLegendBackOutput.value = styleLegendBack.value = el.select("#legendBox").attr("fill");
-    styleLegendOpacityOutput.value = styleLegendOpacity.value = el.select("#legendBox").attr("fill-opacity");
+    styleLegendColItems.value = el.attr("data-columns");
+    const legendBox = el.select("#legendBox");
+    styleLegendBack.value = styleLegendBackOutput.value = legendBox.size() ? legendBox.attr("fill") : "#ffffff";
+    styleLegendOpacity.value = legendBox.size() ? legendBox.attr("fill-opacity") : 1;
 
     styleStrokeInput.value = styleStrokeOutput.value = el.attr("stroke") || "#111111";
-    styleStrokeWidthInput.value = styleStrokeWidthOutput.value = el.attr("stroke-width") || 0.5;
+    styleStrokeWidthInput.value = el.attr("stroke-width") || 0.5;
 
     styleFont.style.display = "block";
     styleSelectFont.value = el.attr("font-family");
@@ -308,18 +326,17 @@ function selectStyleElement() {
     styleOcean.style.display = "block";
     styleOceanFill.value = styleOceanFillOutput.value = oceanLayers.select("#oceanBase").attr("fill");
     styleOceanPattern.value = byId("oceanicPattern")?.getAttribute("href");
-    styleOceanPatternOpacity.value = styleOceanPatternOpacityOutput.value =
-      byId("oceanicPattern").getAttribute("opacity") || 1;
+    styleOceanPatternOpacity.value = byId("oceanicPattern").getAttribute("opacity") || 1;
     outlineLayers.value = oceanLayers.attr("layers");
   }
 
   if (styleElement === "temperature") {
     styleStrokeWidth.style.display = "block";
     styleTemperature.style.display = "block";
-    styleStrokeWidthInput.value = styleStrokeWidthOutput.value = el.attr("stroke-width") || "";
-    styleTemperatureFillOpacityInput.value = styleTemperatureFillOpacityOutput.value = el.attr("fill-opacity") || 0.1;
+    styleStrokeWidthInput.value = el.attr("stroke-width") || "";
+    styleTemperatureFillOpacityInput.value = el.attr("fill-opacity") || 0.1;
     styleTemperatureFillInput.value = styleTemperatureFillOutput.value = el.attr("fill") || "#000";
-    styleTemperatureFontSizeInput.value = styleTemperatureFontSizeOutput.value = el.attr("font-size") || "8px";
+    styleTemperatureFontSizeInput.value = el.attr("font-size") || "8px";
   }
 
   if (styleElement === "coordinates") {
@@ -329,14 +346,17 @@ function selectStyleElement() {
 
   if (styleElement === "armies") {
     styleArmies.style.display = "block";
-    styleArmiesFillOpacity.value = styleArmiesFillOpacityOutput.value = el.attr("fill-opacity");
-    styleArmiesSize.value = styleArmiesSizeOutput.value = el.attr("box-size");
+    styleArmiesFillOpacity.value = el.attr("fill-opacity");
+    styleArmiesSize.value = el.attr("box-size");
   }
 
   if (styleElement === "emblems") {
     styleEmblems.style.display = "block";
     styleStrokeWidth.style.display = "block";
-    styleStrokeWidthInput.value = styleStrokeWidthOutput.value = el.attr("stroke-width") || 1;
+    styleStrokeWidthInput.value = el.attr("stroke-width") || 1;
+    emblemsStateSizeInput.value = emblems.select("#stateEmblems").attr("data-size") || 1;
+    emblemsProvinceSizeInput.value = emblems.select("#provinceEmblems").attr("data-size") || 1;
+    emblemsBurgSizeInput.value = emblems.select("#burgEmblems").attr("data-size") || 1;
   }
 
   // update group options
@@ -372,11 +392,9 @@ function selectStyleElement() {
 
     const scaleBarBack = el.select("#scaleBarBack");
     if (scaleBarBack.size()) {
-      styleScaleBarBackgroundOpacityInput.value = styleScaleBarBackgroundOpacityOutput.value =
-        scaleBarBack.attr("opacity");
-      styleScaleBarBackgroundFillInput.value = styleScaleBarBackgroundFillOutput.value = scaleBarBack.attr("fill");
-      styleScaleBarBackgroundStrokeInput.value = styleScaleBarBackgroundStrokeOutput.value =
-        scaleBarBack.attr("stroke");
+      styleScaleBarBackgroundOpacity.value = scaleBarBack.attr("opacity");
+      styleScaleBarBackgroundFill.value = styleScaleBarBackgroundFillOutput.value = scaleBarBack.attr("fill");
+      styleScaleBarBackgroundStroke.value = styleScaleBarBackgroundStrokeOutput.value = scaleBarBack.attr("stroke");
       styleScaleBarBackgroundStrokeWidth.value = scaleBarBack.attr("stroke-width");
       styleScaleBarBackgroundFilter.value = scaleBarBack.attr("filter");
       styleScaleBarBackgroundPaddingTop.value = scaleBarBack.attr("data-top");
@@ -398,13 +416,13 @@ function selectStyleElement() {
       styleVignetteHeight.value = digit(maskRect.getAttribute("height"));
       styleVignetteRx.value = digit(maskRect.getAttribute("rx"));
       styleVignetteRy.value = digit(maskRect.getAttribute("ry"));
-      styleVignetteBlur.value = styleVignetteBlurOutput.value = digit(maskRect.getAttribute("filter"));
+      styleVignetteBlur.value = digit(maskRect.getAttribute("filter"));
     }
   }
 }
 
 // Handle style inputs change
-styleGroupSelect.addEventListener("change", selectStyleElement);
+styleGroupSelect.on("change", selectStyleElement);
 
 function getEl() {
   const el = styleElementSelect.value;
@@ -413,44 +431,46 @@ function getEl() {
   else return svg.select("#" + el).select("#" + g);
 }
 
-styleFillInput.addEventListener("input", function () {
+styleFillInput.on("input", function () {
   styleFillOutput.value = this.value;
   getEl().attr("fill", this.value);
 });
 
-styleStrokeInput.addEventListener("input", function () {
+styleStrokeInput.on("input", function () {
   styleStrokeOutput.value = this.value;
   getEl().attr("stroke", this.value);
   if (styleElementSelect.value === "gridOverlay" && layerIsOn("toggleGrid")) drawGrid();
 });
 
-styleStrokeWidthInput.addEventListener("input", function () {
-  styleStrokeWidthOutput.value = this.value;
-  getEl().attr("stroke-width", +this.value);
+styleStrokeWidthInput.on("input", e => {
+  getEl().attr("stroke-width", e.target.value);
   if (styleElementSelect.value === "gridOverlay" && layerIsOn("toggleGrid")) drawGrid();
 });
 
-styleStrokeDasharrayInput.addEventListener("input", function () {
+styleLetterSpacingInput.on("input", e => {
+  getEl().attr("letter-spacing", e.target.value);
+});
+
+styleStrokeDasharrayInput.on("input", function () {
   getEl().attr("stroke-dasharray", this.value);
   if (styleElementSelect.value === "gridOverlay" && layerIsOn("toggleGrid")) drawGrid();
 });
 
-styleStrokeLinecapInput.addEventListener("change", function () {
+styleStrokeLinecapInput.on("change", function () {
   getEl().attr("stroke-linecap", this.value);
   if (styleElementSelect.value === "gridOverlay" && layerIsOn("toggleGrid")) drawGrid();
 });
 
-styleOpacityInput.addEventListener("input", function () {
-  styleOpacityOutput.value = this.value;
-  getEl().attr("opacity", this.value);
+styleOpacityInput.on("input", e => {
+  getEl().attr("opacity", e.target.value);
 });
 
-styleFilterInput.addEventListener("change", function () {
+styleFilterInput.on("change", function () {
   if (styleGroupSelect.value === "ocean") return oceanLayers.attr("filter", this.value);
   getEl().attr("filter", this.value);
 });
 
-styleTextureInput.addEventListener("change", function () {
+styleTextureInput.on("change", function () {
   changeTexture(this.value);
 });
 
@@ -469,7 +489,7 @@ function updateTextureSelectValue(href) {
   }
 }
 
-styleTextureShiftX.addEventListener("input", function () {
+styleTextureShiftX.on("input", function () {
   texture.attr("data-x", this.value);
   texture
     .select("image")
@@ -477,7 +497,7 @@ styleTextureShiftX.addEventListener("input", function () {
     .attr("width", graphWidth - this.valueAsNumber);
 });
 
-styleTextureShiftY.addEventListener("input", function () {
+styleTextureShiftY.on("input", function () {
   texture.attr("data-y", this.value);
   texture
     .select("image")
@@ -485,17 +505,17 @@ styleTextureShiftY.addEventListener("input", function () {
     .attr("height", graphHeight - this.valueAsNumber);
 });
 
-styleClippingInput.addEventListener("change", function () {
+styleClippingInput.on("change", function () {
   getEl().attr("mask", this.value);
 });
 
-styleGridType.addEventListener("change", function () {
+styleGridType.on("change", function () {
   getEl().attr("type", this.value);
   if (layerIsOn("toggleGrid")) drawGrid();
   calculateFriendlyGridSize();
 });
 
-styleGridScale.addEventListener("input", function () {
+styleGridScale.on("input", function () {
   getEl().attr("scale", this.value);
   if (layerIsOn("toggleGrid")) drawGrid();
   calculateFriendlyGridSize();
@@ -507,53 +527,52 @@ function calculateFriendlyGridSize() {
   styleGridSizeFriendly.value = friendly;
 }
 
-styleGridShiftX.addEventListener("input", function () {
+styleGridShiftX.on("input", function () {
   getEl().attr("dx", this.value);
   if (layerIsOn("toggleGrid")) drawGrid();
 });
 
-styleGridShiftY.addEventListener("input", function () {
+styleGridShiftY.on("input", function () {
   getEl().attr("dy", this.value);
   if (layerIsOn("toggleGrid")) drawGrid();
 });
 
-styleRescaleMarkers.addEventListener("change", function () {
+styleRescaleMarkers.on("change", function () {
   markers.attr("rescale", +this.checked);
   invokeActiveZooming();
 });
 
-styleCoastlineAuto.addEventListener("change", function () {
+styleCoastlineAuto.on("change", function () {
   coastline.select("#sea_island").attr("auto-filter", +this.checked);
   styleFilter.style.display = this.checked ? "none" : "block";
   invokeActiveZooming();
 });
 
-styleOceanFill.addEventListener("input", function () {
+styleOceanFill.on("input", function () {
   oceanLayers.select("rect").attr("fill", this.value);
   styleOceanFillOutput.value = this.value;
 });
 
-styleOceanPattern.addEventListener("change", function () {
+styleOceanPattern.on("change", function () {
   byId("oceanicPattern")?.setAttribute("href", this.value);
 });
 
-styleOceanPatternOpacity.addEventListener("input", function () {
-  byId("oceanicPattern").setAttribute("opacity", this.value);
-  styleOceanPatternOpacityOutput.value = this.value;
+styleOceanPatternOpacity.on("input", e => {
+  byId("oceanicPattern").setAttribute("opacity", e.target.value);
 });
 
-outlineLayers.addEventListener("change", function () {
+outlineLayers.on("change", function () {
   oceanLayers.selectAll("path").remove();
   oceanLayers.attr("layers", this.value);
   OceanLayers();
 });
 
-styleHeightmapScheme.addEventListener("change", function () {
+styleHeightmapScheme.on("change", function () {
   getEl().attr("scheme", this.value);
   drawHeightmap();
 });
 
-openCreateHeightmapSchemeButton.addEventListener("click", function () {
+openCreateHeightmapSchemeButton.on("click", function () {
   // start with current scheme
   const scheme = getEl().attr("scheme");
   this.dataset.stops = scheme.startsWith("#")
@@ -672,106 +691,97 @@ openCreateHeightmapSchemeButton.addEventListener("click", function () {
   });
 });
 
-styleHeightmapRenderOcean.addEventListener("change", function () {
-  getEl().attr("data-render", +this.checked);
+styleHeightmapRenderOcean.on("change", e => {
+  const checked = +e.target.checked;
+  getEl().attr("data-render", checked);
   drawHeightmap();
 });
 
-styleHeightmapTerracingInput.addEventListener("input", function () {
-  getEl().attr("terracing", this.value);
+styleHeightmapTerracing.on("input", e => {
+  getEl().attr("terracing", e.target.value);
   drawHeightmap();
 });
 
-styleHeightmapSkipInput.addEventListener("input", function () {
-  getEl().attr("skip", this.value);
+styleHeightmapSkip.on("input", e => {
+  getEl().attr("skip", e.target.value);
   drawHeightmap();
 });
 
-styleHeightmapSimplificationInput.addEventListener("input", function () {
-  getEl().attr("relax", this.value);
+styleHeightmapSimplification.on("input", e => {
+  getEl().attr("relax", e.target.value);
   drawHeightmap();
 });
 
-styleHeightmapCurve.addEventListener("change", function () {
-  getEl().attr("curve", this.value);
+styleHeightmapCurve.on("change", e => {
+  getEl().attr("curve", e.target.value);
   drawHeightmap();
 });
 
-styleReliefSet.addEventListener("change", function () {
-  terrain.attr("set", this.value);
-  ReliefIcons();
+styleReliefSet.on("change", e => {
+  terrain.attr("set", e.target.value);
+  drawReliefIcons();
   if (!layerIsOn("toggleRelief")) toggleRelief();
 });
 
-styleReliefSizeInput.addEventListener("change", function () {
-  terrain.attr("size", this.value);
-  styleReliefSizeOutput.value = this.value;
-  ReliefIcons();
+styleReliefSize.on("change", e => {
+  terrain.attr("size", e.target.value);
+  drawReliefIcons();
   if (!layerIsOn("toggleRelief")) toggleRelief();
 });
 
-styleReliefDensityInput.addEventListener("change", function () {
-  terrain.attr("density", this.value);
-  styleReliefDensityOutput.value = this.value;
-  ReliefIcons();
+styleReliefDensity.on("change", e => {
+  terrain.attr("density", e.target.value);
+  drawReliefIcons();
   if (!layerIsOn("toggleRelief")) toggleRelief();
 });
 
-styleTemperatureFillOpacityInput.addEventListener("input", function () {
-  temperature.attr("fill-opacity", this.value);
-  styleTemperatureFillOpacityOutput.value = this.value;
+styleTemperatureFillOpacityInput.on("input", e => {
+  temperature.attr("fill-opacity", e.target.value);
 });
 
-styleTemperatureFontSizeInput.addEventListener("input", function () {
-  temperature.attr("font-size", this.value + "px");
-  styleTemperatureFontSizeOutput.value = this.value + "px";
+styleTemperatureFontSizeInput.on("input", e => {
+  temperature.attr("font-size", e.target.value + "px");
 });
 
-styleTemperatureFillInput.addEventListener("input", function () {
-  temperature.attr("fill", this.value);
-  styleTemperatureFillOutput.value = this.value;
+styleTemperatureFillInput.on("input", e => {
+  temperature.attr("fill", e.target.value);
+  styleTemperatureFillOutput.value = e.target.value;
 });
 
-stylePopulationRuralStrokeInput.addEventListener("input", function () {
-  population.select("#rural").attr("stroke", this.value);
-  stylePopulationRuralStrokeOutput.value = this.value;
+stylePopulationRuralStrokeInput.on("input", e => {
+  population.select("#rural").attr("stroke", e.target.value);
+  stylePopulationRuralStrokeOutput.value = e.target.value;
 });
 
-stylePopulationUrbanStrokeInput.addEventListener("input", function () {
-  population.select("#urban").attr("stroke", this.value);
-  stylePopulationUrbanStrokeOutput.value = this.value;
+stylePopulationUrbanStrokeInput.on("input", e => {
+  population.select("#urban").attr("stroke", e.target.value);
+  stylePopulationUrbanStrokeOutput.value = e.target.value;
 });
 
-styleCompassSizeInput.addEventListener("input", function () {
-  styleCompassSizeOutput.value = this.value;
-  shiftCompass();
-});
-
-styleCompassShiftX.addEventListener("input", shiftCompass);
-styleCompassShiftY.addEventListener("input", shiftCompass);
+styleCompassSizeInput.on("input", shiftCompass);
+styleCompassShiftX.on("input", shiftCompass);
+styleCompassShiftY.on("input", shiftCompass);
 
 function shiftCompass() {
   const tr = `translate(${styleCompassShiftX.value} ${styleCompassShiftY.value}) scale(${styleCompassSizeInput.value})`;
   compass.select("use").attr("transform", tr);
 }
 
-styleLegendColItems.addEventListener("input", function () {
-  styleLegendColItemsOutput.value = this.value;
-  legend.select("#legendBox").attr("data-columns", this.value);
+styleLegendColItems.on("input", e => {
+  legend.select("#legendBox").attr("data-columns", e.target.value);
   redrawLegend();
 });
 
-styleLegendBack.addEventListener("input", function () {
-  styleLegendBackOutput.value = this.value;
-  legend.select("#legendBox").attr("fill", this.value);
+styleLegendBack.on("input", e => {
+  styleLegendBackOutput.value = e.target.value;
+  legend.select("#legendBox").attr("fill", e.target.value);
 });
 
-styleLegendOpacity.addEventListener("input", function () {
-  styleLegendOpacityOutput.value = this.value;
-  legend.select("#legendBox").attr("fill-opacity", this.value);
+styleLegendOpacity.on("input", e => {
+  legend.select("#legendBox").attr("fill-opacity", e.target.value);
 });
 
-styleSelectFont.addEventListener("change", changeFont);
+styleSelectFont.on("change", changeFont);
 function changeFont() {
   const family = styleSelectFont.value;
   getEl().attr("font-family", family);
@@ -779,11 +789,11 @@ function changeFont() {
   if (styleElementSelect.value === "legend") redrawLegend();
 }
 
-styleShadowInput.addEventListener("input", function () {
+styleShadowInput.on("input", function () {
   getEl().style("text-shadow", this.value);
 });
 
-styleFontAdd.addEventListener("click", function () {
+styleFontAdd.on("click", function () {
   addFontNameInput.value = "";
   addFontURLInput.value = "";
 
@@ -820,22 +830,22 @@ styleFontAdd.addEventListener("click", function () {
   });
 });
 
-addFontMethod.addEventListener("change", function () {
+addFontMethod.on("change", function () {
   addFontURLInput.style.display = this.value === "fontURL" ? "inline" : "none";
 });
 
-styleFontSize.addEventListener("change", function () {
+styleFontSize.on("change", function () {
   changeFontSize(getEl(), +this.value);
 });
 
-styleFontPlus.addEventListener("click", function () {
-  const size = +getEl().attr("data-size") + 1;
-  changeFontSize(getEl(), Math.min(size, 999));
+styleFontPlus.on("click", function () {
+  const current = +styleFontSize.value || 12;
+  changeFontSize(getEl(), Math.min(current + 1, 999));
 });
 
-styleFontMinus.addEventListener("click", function () {
-  const size = +getEl().attr("data-size") - 1;
-  changeFontSize(getEl(), Math.max(size, 1));
+styleFontMinus.on("click", function () {
+  const current = +styleFontSize.value || 12;
+  changeFontSize(getEl(), Math.max(current - 1, 1));
 });
 
 function changeFontSize(el, size) {
@@ -856,16 +866,16 @@ function changeFontSize(el, size) {
   if (styleElementSelect.value === "legend") redrawLegend();
 }
 
-styleRadiusInput.addEventListener("change", function () {
+styleRadiusInput.on("change", function () {
   changeRadius(+this.value);
 });
 
-styleRadiusPlus.addEventListener("click", function () {
+styleRadiusPlus.on("click", function () {
   const size = Math.max(rn(getEl().attr("size") * 1.1, 2), 0.2);
   changeRadius(size);
 });
 
-styleRadiusMinus.addEventListener("click", function () {
+styleRadiusMinus.on("click", function () {
   const size = Math.max(rn(getEl().attr("size") * 0.9, 2), 0.2);
   changeRadius(size);
 });
@@ -887,16 +897,16 @@ function changeRadius(size, group) {
   changeIconSize(size * 2, g); // change also anchor icons
 }
 
-styleIconSizeInput.addEventListener("change", function () {
+styleIconSizeInput.on("change", function () {
   changeIconSize(+this.value);
 });
 
-styleIconSizePlus.addEventListener("click", function () {
+styleIconSizePlus.on("click", function () {
   const size = Math.max(rn(getEl().attr("size") * 1.1, 2), 0.2);
   changeIconSize(size);
 });
 
-styleIconSizeMinus.addEventListener("click", function () {
+styleIconSizeMinus.on("click", function () {
   const size = Math.max(rn(getEl().attr("size") * 0.9, 2), 0.2);
   changeIconSize(size);
 });
@@ -921,49 +931,58 @@ function changeIconSize(size, group) {
   styleIconSizeInput.value = size;
 }
 
-styleStatesBodyOpacity.addEventListener("input", function () {
-  styleStatesBodyOpacityOutput.value = this.value;
-  statesBody.attr("opacity", this.value);
+styleStatesBodyOpacity.on("input", e => {
+  statesBody.attr("opacity", e.target.value);
 });
 
-styleStatesBodyFilter.addEventListener("change", function () {
+styleStatesBodyFilter.on("change", function () {
   statesBody.attr("filter", this.value);
 });
 
-styleStatesHaloWidth.addEventListener("input", function () {
-  styleStatesHaloWidthOutput.value = this.value;
-  statesHalo.attr("data-width", this.value).attr("stroke-width", this.value);
+styleStatesHaloWidth.on("input", e => {
+  const value = e.target.value;
+  statesHalo.attr("data-width", value).attr("stroke-width", value);
 });
 
-styleStatesHaloOpacity.addEventListener("input", function () {
-  styleStatesHaloOpacityOutput.value = this.value;
-  statesHalo.attr("opacity", this.value);
+styleStatesHaloOpacity.on("input", e => {
+  statesHalo.attr("opacity", e.target.value);
 });
 
-styleStatesHaloBlur.addEventListener("input", function () {
-  styleStatesHaloBlurOutput.value = this.value;
-  const blur = +this.value > 0 ? `blur(${this.value}px)` : null;
+styleStatesHaloBlur.on("input", e => {
+  const value = Number(e.target.value);
+  const blur = value > 0 ? `blur(${value}px)` : null;
   statesHalo.attr("filter", blur);
 });
 
-styleArmiesFillOpacity.addEventListener("input", function () {
-  armies.attr("fill-opacity", this.value);
-  styleArmiesFillOpacityOutput.value = this.value;
+styleArmiesFillOpacity.on("input", e => {
+  armies.attr("fill-opacity", e.target.value);
 });
 
-styleArmiesSize.addEventListener("input", function () {
-  armies.attr("box-size", this.value).attr("font-size", this.value * 2);
-  styleArmiesSizeOutput.value = this.value;
+styleArmiesSize.on("input", e => {
+  const value = Number(e.target.value);
+  armies.attr("box-size", value).attr("font-size", value * 2);
+
   armies.selectAll("g").remove(); // clear armies layer
   pack.states.forEach(s => {
     if (!s.i || s.removed || !s.military.length) return;
-    Military.drawRegiments(s.military, s.i);
+    drawRegiments(s.military, s.i);
   });
 });
 
-emblemsStateSizeInput.addEventListener("change", drawEmblems);
-emblemsProvinceSizeInput.addEventListener("change", drawEmblems);
-emblemsBurgSizeInput.addEventListener("change", drawEmblems);
+emblemsStateSizeInput.on("change", e => {
+  emblems.select("#stateEmblems").attr("data-size", e.target.value);
+  drawEmblems();
+});
+
+emblemsProvinceSizeInput.on("change", e => {
+  emblems.select("#provinceEmblems").attr("data-size", e.target.value);
+  drawEmblems();
+});
+
+emblemsBurgSizeInput.on("change", e => {
+  emblems.select("#burgEmblems").attr("data-size", e.target.value);
+  drawEmblems();
+});
 
 // request a URL to image to be used as a texture
 function textureProvideURL() {
@@ -1015,7 +1034,7 @@ Object.keys(vignettePresets).forEach(preset => {
   styleVignettePreset.options.add(new Option(preset, preset, false, false));
 });
 
-styleVignettePreset.addEventListener("change", function () {
+styleVignettePreset.on("change", function () {
   const attributes = JSON.parse(vignettePresets[this.value]);
 
   for (const selector in attributes) {
@@ -1029,7 +1048,7 @@ styleVignettePreset.addEventListener("change", function () {
 
   const vignette = byId("vignette");
   if (vignette) {
-    styleOpacityInput.value = styleOpacityOutput.value = vignette.getAttribute("opacity");
+    styleOpacityInput.value = vignette.getAttribute("opacity");
     styleFillInput.value = styleFillOutput.value = vignette.getAttribute("fill");
     styleFilterInput.value = vignette.getAttribute("filter");
   }
@@ -1043,40 +1062,39 @@ styleVignettePreset.addEventListener("change", function () {
     styleVignetteHeight.value = digit(maskRect.getAttribute("height"));
     styleVignetteRx.value = digit(maskRect.getAttribute("rx"));
     styleVignetteRy.value = digit(maskRect.getAttribute("ry"));
-    styleVignetteBlur.value = styleVignetteBlurOutput.value = digit(maskRect.getAttribute("filter"));
+    styleVignetteBlur.value = digit(maskRect.getAttribute("filter"));
   }
 });
 
-styleVignetteX.addEventListener("input", function () {
-  byId("vignette-rect")?.setAttribute("x", `${this.value}%`);
+styleVignetteX.on("input", e => {
+  byId("vignette-rect")?.setAttribute("x", `${e.target.value}%`);
 });
 
-styleVignetteWidth.addEventListener("input", function () {
-  byId("vignette-rect")?.setAttribute("width", `${this.value}%`);
+styleVignetteWidth.on("input", e => {
+  byId("vignette-rect")?.setAttribute("width", `${e.target.value}%`);
 });
 
-styleVignetteY.addEventListener("input", function () {
-  byId("vignette-rect")?.setAttribute("y", `${this.value}%`);
+styleVignetteY.on("input", e => {
+  byId("vignette-rect")?.setAttribute("y", `${e.target.value}%`);
 });
 
-styleVignetteHeight.addEventListener("input", function () {
-  byId("vignette-rect")?.setAttribute("height", `${this.value}%`);
+styleVignetteHeight.on("input", e => {
+  byId("vignette-rect")?.setAttribute("height", `${e.target.value}%`);
 });
 
-styleVignetteRx.addEventListener("input", function () {
-  byId("vignette-rect")?.setAttribute("rx", `${this.value}%`);
+styleVignetteRx.on("input", e => {
+  byId("vignette-rect")?.setAttribute("rx", `${e.target.value}%`);
 });
 
-styleVignetteRy.addEventListener("input", function () {
-  byId("vignette-rect")?.setAttribute("ry", `${this.value}%`);
+styleVignetteRy.on("input", e => {
+  byId("vignette-rect")?.setAttribute("ry", `${e.target.value}%`);
 });
 
-styleVignetteBlur.addEventListener("input", function () {
-  styleVignetteBlurOutput.value = this.value;
-  byId("vignette-rect")?.setAttribute("filter", `blur(${this.value}px)`);
+styleVignetteBlur.on("input", e => {
+  byId("vignette-rect")?.setAttribute("filter", `blur(${e.target.value}px)`);
 });
 
-styleScaleBar.addEventListener("input", function (event) {
+styleScaleBar.on("input", function (event) {
   const scaleBarBack = scaleBar.select("#scaleBarBack");
   if (!scaleBarBack.size()) return;
 
@@ -1087,9 +1105,9 @@ styleScaleBar.addEventListener("input", function (event) {
   else if (id === "styleScaleBarPositionX") scaleBar.attr("data-x", value);
   else if (id === "styleScaleBarPositionY") scaleBar.attr("data-y", value);
   else if (id === "styleScaleBarLabel") scaleBar.attr("data-label", value);
-  else if (id === "styleScaleBarBackgroundOpacityInput") scaleBarBack.attr("opacity", value);
-  else if (id === "styleScaleBarBackgroundFillInput") scaleBarBack.attr("fill", value);
-  else if (id === "styleScaleBarBackgroundStrokeInput") scaleBarBack.attr("stroke", value);
+  else if (id === "styleScaleBarBackgroundOpacity") scaleBarBack.attr("opacity", value);
+  else if (id === "styleScaleBarBackgroundFill") scaleBarBack.attr("fill", value);
+  else if (id === "styleScaleBarBackgroundStroke") scaleBarBack.attr("stroke", value);
   else if (id === "styleScaleBarBackgroundStrokeWidth") scaleBarBack.attr("stroke-width", value);
   else if (id === "styleScaleBarBackgroundFilter") scaleBarBack.attr("filter", value);
   else if (id === "styleScaleBarBackgroundPaddingTop") scaleBarBack.attr("data-top", value);
@@ -1156,7 +1174,7 @@ function updateElements() {
 }
 
 // GLOBAL FILTERS
-mapFilters.addEventListener("click", applyMapFilter);
+mapFilters.on("click", applyMapFilter);
 function applyMapFilter(event) {
   if (event.target.tagName !== "BUTTON") return;
   const button = event.target;
diff --git a/modules/ui/submap-tool.js b/modules/ui/submap-tool.js
new file mode 100644
index 00000000..1c992b7a
--- /dev/null
+++ b/modules/ui/submap-tool.js
@@ -0,0 +1,97 @@
+"use strict";
+
+function openSubmapTool() {
+  resetInputs();
+
+  $("#submapTool").dialog({
+    title: "Create a submap",
+    resizable: false,
+    width: "32em",
+    position: {my: "center", at: "center", of: "svg"},
+    buttons: {
+      Submap: function () {
+        closeDialogs();
+        generateSubmap();
+      },
+      Cancel: function () {
+        $(this).dialog("close");
+      }
+    }
+  });
+
+  if (modules.openSubmapTool) return;
+  modules.openSubmapTool = true;
+
+  function resetInputs() {
+    updateCellsNumber(byId("pointsInput").value);
+    byId("submapPointsInput").oninput = e => updateCellsNumber(e.target.value);
+
+    function updateCellsNumber(value) {
+      byId("submapPointsInput").value = value;
+      const cells = cellsDensityMap[value];
+      byId("submapPointsInput").dataset.cells = cells;
+      const output = byId("submapPointsFormatted");
+      output.value = cells / 1000 + "K";
+      output.style.color = getCellsDensityColor(cells);
+    }
+  }
+
+  function generateSubmap() {
+    INFO && console.group("generateSubmap");
+
+    const [x0, y0] = [Math.abs(viewX / scale), Math.abs(viewY / scale)]; // top-left corner
+    recalculateMapSize(x0, y0);
+
+    const submapPointsValue = byId("submapPointsInput").value;
+    const globalPointsValue = byId("pointsInput").value;
+    if (submapPointsValue !== globalPointsValue) changeCellsDensity(submapPointsValue);
+
+    const projection = (x, y) => [(x - x0) * scale, (y - y0) * scale];
+    const inverse = (x, y) => [x / scale + x0, y / scale + y0];
+
+    applyGraphSize();
+    fitMapToScreen();
+    resetZoom(0);
+    undraw();
+    Resample.process({projection, inverse, scale});
+
+    if (byId("submapRescaleBurgStyles").checked) rescaleBurgStyles(scale);
+    drawLayers();
+
+    INFO && console.groupEnd("generateSubmap");
+  }
+
+  function recalculateMapSize(x0, y0) {
+    const mapSize = +byId("mapSizeOutput").value;
+    byId("mapSizeOutput").value = byId("mapSizeInput").value = rn(mapSize / scale, 2);
+
+    const latT = mapCoordinates.latT / scale;
+    const latN = getLatitude(y0);
+    const latShift = (90 - latN) / (180 - latT);
+    byId("latitudeOutput").value = byId("latitudeInput").value = rn(latShift * 100, 2);
+
+    const lotT = mapCoordinates.lonT / scale;
+    const lonE = getLongitude(x0 + graphWidth / scale);
+    const lonShift = (180 - lonE) / (360 - lotT);
+    byId("longitudeOutput").value = byId("longitudeInput").value = rn(lonShift * 100, 2);
+
+    distanceScale = distanceScaleInput.value = rn(distanceScale / scale, 2);
+    populationRate = populationRateInput.value = rn(populationRate / scale, 2);
+  }
+
+  function rescaleBurgStyles(scale) {
+    const burgIcons = [...byId("burgIcons").querySelectorAll("g")];
+    for (const group of burgIcons) {
+      const newRadius = rn(minmax(group.getAttribute("size") * scale, 0.2, 10), 2);
+      changeRadius(newRadius, group.id);
+      const strokeWidth = group.attributes["stroke-width"];
+      strokeWidth.value = strokeWidth.value * scale;
+    }
+
+    const burgLabels = [...byId("burgLabels").querySelectorAll("g")];
+    for (const group of burgLabels) {
+      const size = +group.dataset.size;
+      group.dataset.size = Math.max(rn((size + size / scale) / 2, 2), 1) * scale;
+    }
+  }
+}
diff --git a/modules/ui/submap.js b/modules/ui/submap.js
deleted file mode 100644
index 0341f8af..00000000
--- a/modules/ui/submap.js
+++ /dev/null
@@ -1,354 +0,0 @@
-"use strict";
-// UI elements for submap generation
-
-window.UISubmap = (function () {
-  byId("submapPointsInput").addEventListener("input", function () {
-    const output = byId("submapPointsOutputFormatted");
-    const cells = cellsDensityMap[+this.value] || 1000;
-    this.dataset.cells = cells;
-    output.value = getCellsDensityValue(cells);
-    output.style.color = getCellsDensityColor(cells);
-  });
-
-  byId("submapScaleInput").addEventListener("input", function (event) {
-    const exp = Math.pow(1.1, +event.target.value);
-    byId("submapScaleOutput").value = rn(exp, 2);
-  });
-
-  byId("submapAngleInput").addEventListener("input", function (event) {
-    byId("submapAngleOutput").value = event.target.value;
-  });
-
-  const $previewBox = byId("submapPreview");
-  const $scaleInput = byId("submapScaleInput");
-  const $shiftX = byId("submapShiftX");
-  const $shiftY = byId("submapShiftY");
-
-  function openSubmapMenu() {
-    $("#submapOptionsDialog").dialog({
-      title: "Create a submap",
-      resizable: false,
-      position: {my: "center", at: "center", of: "svg"},
-      buttons: {
-        Submap: function () {
-          $(this).dialog("close");
-          generateSubmap();
-        },
-        Cancel: function () {
-          $(this).dialog("close");
-        }
-      }
-    });
-  }
-
-  const getTransformInput = _ => ({
-    angle: (+byId("submapAngleInput").value / 180) * Math.PI,
-    shiftX: +byId("submapShiftX").value,
-    shiftY: +byId("submapShiftY").value,
-    ratio: +byId("submapScaleInput").value,
-    mirrorH: byId("submapMirrorH").checked,
-    mirrorV: byId("submapMirrorV").checked
-  });
-
-  async function openResampleMenu() {
-    resetZoom(0);
-
-    byId("submapAngleInput").value = 0;
-    byId("submapAngleOutput").value = "0";
-    byId("submapScaleOutput").value = 1;
-    byId("submapMirrorH").checked = false;
-    byId("submapMirrorV").checked = false;
-    $scaleInput.value = 0;
-    $shiftX.value = 0;
-    $shiftY.value = 0;
-
-    const w = Math.min(400, window.innerWidth * 0.5);
-    const previewScale = w / graphWidth;
-    const h = graphHeight * previewScale;
-    $previewBox.style.width = w + "px";
-    $previewBox.style.height = h + "px";
-
-    // handle mouse input
-    const dispatchInput = e => e.dispatchEvent(new Event("input", {bubbles: true}));
-
-    // mouse wheel
-    $previewBox.onwheel = e => {
-      $scaleInput.value = $scaleInput.valueAsNumber - Math.sign(e.deltaY);
-      dispatchInput($scaleInput);
-    };
-
-    // mouse drag
-    let mouseIsDown = false,
-      mouseX = 0,
-      mouseY = 0;
-    $previewBox.onmousedown = e => {
-      mouseIsDown = true;
-      mouseX = $shiftX.value - e.clientX / previewScale;
-      mouseY = $shiftY.value - e.clientY / previewScale;
-    };
-    $previewBox.onmouseup = _ => (mouseIsDown = false);
-    $previewBox.onmouseleave = _ => (mouseIsDown = false);
-    $previewBox.onmousemove = e => {
-      if (!mouseIsDown) return;
-      e.preventDefault();
-      $shiftX.value = Math.round(mouseX + e.clientX / previewScale);
-      $shiftY.value = Math.round(mouseY + e.clientY / previewScale);
-      dispatchInput($shiftX);
-      // dispatchInput($shiftY); // not needed X bubbles anyway
-    };
-
-    $("#resampleDialog").dialog({
-      title: "Transform map",
-      resizable: false,
-      position: {my: "center", at: "center", of: "svg"},
-      buttons: {
-        Transform: function () {
-          $(this).dialog("close");
-          resampleCurrentMap();
-        },
-        Cancel: function () {
-          $(this).dialog("close");
-        }
-      }
-    });
-
-    // use double resolution for PNG to get sharper image
-    const $preview = await loadPreview($previewBox, w * 2, h * 2);
-    // could be done with SVG. Faster to load, slower to use.
-    // const $preview = await loadPreviewSVG($previewBox, w, h);
-    $preview.style.position = "absolute";
-    $preview.style.width = w + "px";
-    $preview.style.height = h + "px";
-
-    byId("resampleDialog").oninput = event => {
-      const {angle, shiftX, shiftY, ratio, mirrorH, mirrorV} = getTransformInput();
-      const scale = Math.pow(1.1, ratio);
-      const transformStyle = `
-        translate(${shiftX * previewScale}px, ${shiftY * previewScale}px)
-        scale(${mirrorH ? -scale : scale}, ${mirrorV ? -scale : scale})
-        rotate(${angle}rad)
-      `;
-
-      $preview.style.transform = transformStyle;
-      $preview.style["transform-origin"] = "center";
-      event.stopPropagation();
-    };
-  }
-
-  async function loadPreview($container, w, h) {
-    const url = await getMapURL("png", {
-      globe: false,
-      noWater: true,
-      fullMap: true,
-      noLabels: true,
-      noScaleBar: true,
-      noIce: true
-    });
-
-    const canvas = document.createElement("canvas");
-    const ctx = canvas.getContext("2d");
-    canvas.width = w;
-    canvas.height = h;
-    const img = new Image();
-    img.src = url;
-    img.onload = function () {
-      ctx.drawImage(img, 0, 0, w, h);
-    };
-    $container.textContent = "";
-    $container.appendChild(canvas);
-    return canvas;
-  }
-
-  // currently unused alternative to PNG version
-  async function loadPreviewSVG($container, w, h) {
-    $container.innerHTML = /*html*/ `
-      <svg id="submapPreviewSVG" viewBox="0 0 ${graphWidth} ${graphHeight}">
-        <rect width="100%" height="100%" fill="${byId("styleOceanFill").value}" />
-        <rect fill="url(#oceanic)" width="100%" height="100%" />
-        <use href="#map"></use>
-      </svg>
-    `;
-    return byId("submapPreviewSVG");
-  }
-
-  // Resample the whole map to different cell resolution or shape
-  const resampleCurrentMap = debounce(function () {
-    WARN && console.warn("Resampling current map");
-    const cellNumId = +byId("submapPointsInput").value;
-    if (!cellsDensityMap[cellNumId]) return console.error("Unknown cell number!");
-
-    const {angle, shiftX, shiftY, ratio, mirrorH, mirrorV} = getTransformInput();
-
-    const [cx, cy] = [graphWidth / 2, graphHeight / 2];
-    const rot = alfa => (x, y) =>
-      [
-        (x - cx) * Math.cos(alfa) - (y - cy) * Math.sin(alfa) + cx,
-        (y - cy) * Math.cos(alfa) + (x - cx) * Math.sin(alfa) + cy
-      ];
-    const shift = (dx, dy) => (x, y) => [x + dx, y + dy];
-    const scale = r => (x, y) => [(x - cx) * r + cx, (y - cy) * r + cy];
-    const flipH = (x, y) => [-x + 2 * cx, y];
-    const flipV = (x, y) => [x, -y + 2 * cy];
-    const app = (f, g) => (x, y) => f(...g(x, y));
-    const id = (x, y) => [x, y];
-
-    let projection = id;
-    let inverse = id;
-
-    if (angle) [projection, inverse] = [rot(angle), rot(-angle)];
-    if (ratio)
-      [projection, inverse] = [
-        app(scale(Math.pow(1.1, ratio)), projection),
-        app(inverse, scale(Math.pow(1.1, -ratio)))
-      ];
-    if (mirrorH) [projection, inverse] = [app(flipH, projection), app(inverse, flipH)];
-    if (mirrorV) [projection, inverse] = [app(flipV, projection), app(inverse, flipV)];
-    if (shiftX || shiftY) {
-      projection = app(shift(shiftX, shiftY), projection);
-      inverse = app(inverse, shift(-shiftX, -shiftY));
-    }
-
-    changeCellsDensity(cellNumId);
-    startResample({
-      lockMarkers: false,
-      lockBurgs: false,
-      depressRivers: false,
-      addLakesInDepressions: false,
-      promoteTowns: false,
-      smoothHeightMap: false,
-      rescaleStyles: false,
-      scale: 1,
-      projection,
-      inverse
-    });
-  }, 1000);
-
-  // Create submap from the current map. Submap limits defined by the current window size (canvas viewport)
-  const generateSubmap = debounce(function () {
-    WARN && console.warn("Resampling current map");
-    closeDialogs("#worldConfigurator, #options3d");
-    const checked = id => Boolean(byId(id).checked);
-
-    // Create projection func from current zoom extents
-    const [[x0, y0], [x1, y1]] = getViewBoxExtent();
-    const origScale = scale;
-
-    const options = {
-      lockMarkers: checked("submapLockMarkers"),
-      lockBurgs: checked("submapLockBurgs"),
-
-      depressRivers: checked("submapDepressRivers"),
-      addLakesInDepressions: checked("submapAddLakeInDepression"),
-      promoteTowns: checked("submapPromoteTowns"),
-      rescaleStyles: checked("submapRescaleStyles"),
-      smoothHeightMap: scale > 2,
-      inverse: (x, y) => [x / origScale + x0, y / origScale + y0],
-      projection: (x, y) => [(x - x0) * origScale, (y - y0) * origScale],
-      scale: origScale
-    };
-
-    // converting map position on the planet
-    const mapSizeOutput = byId("mapSizeOutput");
-    const latitudeOutput = byId("latitudeOutput");
-    const latN = 90 - ((180 - (mapSizeInput.value / 100) * 180) * latitudeOutput.value) / 100;
-    const newLatN = latN - ((y0 / graphHeight) * mapSizeOutput.value * 180) / 100;
-    mapSizeOutput.value /= scale;
-    latitudeOutput.value = ((90 - newLatN) / (180 - (mapSizeOutput.value / 100) * 180)) * 100;
-    byId("mapSizeInput").value = mapSizeOutput.value;
-    byId("latitudeInput").value = latitudeOutput.value;
-
-    // fix scale
-    distanceScale =
-      distanceScaleInput.value =
-      distanceScaleOutput.value =
-        rn((distanceScale = distanceScaleOutput.value / scale), 2);
-
-    populationRateInput.value = populationRateOutput.value = rn(
-      (populationRate = populationRateOutput.value / scale),
-      2
-    );
-
-    customization = 0;
-    startResample(options);
-  }, 1000);
-
-  async function startResample(options) {
-    // Do model changes with Submap.resample then do view changes if needed
-    resetZoom(0);
-    let oldstate = {
-      grid: deepCopy(grid),
-      pack: deepCopy(pack),
-      notes: deepCopy(notes),
-      seed,
-      graphWidth,
-      graphHeight
-    };
-    undraw();
-    try {
-      const oldScale = scale;
-      await Submap.resample(oldstate, options);
-      if (options.promoteTowns) {
-        const groupName = "largetowns";
-        moveAllBurgsToGroup("towns", groupName);
-        changeRadius(rn(oldScale * 0.8, 2), groupName);
-        changeFontSize(svg.select(`#labels #${groupName}`), rn(oldScale * 2, 2));
-        invokeActiveZooming();
-      }
-      if (options.rescaleStyles) changeStyles(oldScale);
-    } catch (error) {
-      showSubmapErrorHandler(error);
-    }
-
-    oldstate = null; // destroy old state to free memory
-
-    restoreLayers();
-    if (ThreeD.options.isOn) ThreeD.redraw();
-    if ($("#worldConfigurator").is(":visible")) editWorld();
-  }
-
-  function changeStyles(scale) {
-    // resize burgIcons
-    const burgIcons = [...byId("burgIcons").querySelectorAll("g")];
-    for (const bi of burgIcons) {
-      const newRadius = rn(minmax(bi.getAttribute("size") * scale, 0.2, 10), 2);
-      changeRadius(newRadius, bi.id);
-      const swAttr = bi.attributes["stroke-width"];
-      swAttr.value = +swAttr.value * scale;
-    }
-
-    // burglabels
-    const burgLabels = [...byId("burgLabels").querySelectorAll("g")];
-    for (const bl of burgLabels) {
-      const size = +bl.dataset["size"];
-      bl.dataset["size"] = Math.max(rn((size + size / scale) / 2, 2), 1) * scale;
-    }
-
-    // emblems
-    const emblemMod = minmax((scale - 1) * 0.3 + 1, 0.5, 5);
-    emblemsStateSizeInput.value = minmax(+emblemsStateSizeInput.value * emblemMod, 0.5, 5);
-    emblemsProvinceSizeInput.value = minmax(+emblemsProvinceSizeInput.value * emblemMod, 0.5, 5);
-    emblemsBurgSizeInput.value = minmax(+emblemsBurgSizeInput.value * emblemMod, 0.5, 5);
-    drawEmblems();
-  }
-
-  function showSubmapErrorHandler(error) {
-    ERROR && console.error(error);
-    clearMainTip();
-
-    alertMessage.innerHTML = /* html */ `Map resampling failed: <br />You may retry after clearing stored data or contact us at discord.
-      <p id="errorBox">${parseError(error)}</p>`;
-    $("#alert").dialog({
-      resizable: false,
-      title: "Resampling error",
-      width: "32em",
-      buttons: {
-        Ok: function () {
-          $(this).dialog("close");
-        }
-      },
-      position: {my: "center", at: "center", of: "svg"}
-    });
-  }
-
-  return {openSubmapMenu, openResampleMenu};
-})();
diff --git a/modules/ui/temperature-graph.js b/modules/ui/temperature-graph.js
index c025b700..4d4411f1 100644
--- a/modules/ui/temperature-graph.js
+++ b/modules/ui/temperature-graph.js
@@ -47,11 +47,13 @@ function showBurgTemperatureGraph(id) {
 
   // Standard deviation for average temperature for the year from [0, 1] to [min, max]
   const yearSig = lstOut[0] * 62.9466411977018 + 0.28613807855649165;
+
   // Standard deviation for the difference between the minimum and maximum temperatures for the year
   const yearDelTmpSig =
     lstOut[1] * 13.541688670361175 + 0.1414213562373084 > yearSig
       ? yearSig
       : lstOut[1] * 13.541688670361175 + 0.1414213562373084;
+
   // Expected value for the difference between the minimum and maximum temperatures for the year
   const yearDelTmpMu = lstOut[2] * 15.266666666666667 + 0.6416666666666663;
 
@@ -60,7 +62,7 @@ function showBurgTemperatureGraph(id) {
   const minT = burgTemp - Math.max(yearSig + delT, 15);
   const maxT = burgTemp + (burgTemp - minT);
 
-  const chartWidth = Math.max(window.innerWidth / 2, 580);
+  const chartWidth = Math.max(window.innerWidth / 2, 520);
   const chartHeight = 300;
 
   // drawing starting point from top-left (y = 0) of SVG
@@ -107,9 +109,9 @@ function showBurgTemperatureGraph(id) {
   });
 
   drawGraph();
+
   $("#alert").dialog({
-    title: "Annual temperature in " + b.name,
-    width: "auto",
+    title: "Average temperature in " + b.name,
     position: {my: "center", at: "center", of: "svg"}
   });
 
diff --git a/modules/ui/tools.js b/modules/ui/tools.js
index 65ffb29c..22c1aec8 100644
--- a/modules/ui/tools.js
+++ b/modules/ui/tools.js
@@ -3,7 +3,7 @@
 // module to control the Tools options (click to edit, to re-geenerate, tp add)
 
 toolsContent.addEventListener("click", function (event) {
-  if (customization) return tip("Please exit the customization mode first", false, "warning");
+  if (customization) return tip("Please exit the customization mode first", false, "error");
   if (!["BUTTON", "I"].includes(event.target.tagName)) return;
   const button = event.target.id;
 
@@ -70,14 +70,16 @@ toolsContent.addEventListener("click", function (event) {
   else if (button === "addRoute") createRoute();
   else if (button === "addMarker") toggleAddMarker();
   // click to create a new map buttons
-  else if (button === "openSubmapMenu") UISubmap.openSubmapMenu();
-  else if (button === "openResampleMenu") UISubmap.openResampleMenu();
+  else if (button === "openSubmapTool") openSubmapTool();
+  else if (button === "openTransformTool") openTransformTool();
 });
 
 function processFeatureRegeneration(event, button) {
-  if (button === "regenerateStateLabels") drawStateLabels();
-  else if (button === "regenerateReliefIcons") {
-    ReliefIcons();
+  if (button === "regenerateStateLabels") {
+    $("#labels").fadeIn();
+    drawStateLabels();
+  } else if (button === "regenerateReliefIcons") {
+    drawReliefIcons();
     if (!layerIsOn("toggleRelief")) toggleRelief();
   } else if (button === "regenerateRoutes") {
     regenerateRoutes();
@@ -126,14 +128,14 @@ function regenerateRoutes() {
 
 function regenerateRivers() {
   Rivers.generate();
-  Lakes.defineGroup();
   Rivers.specify();
-  if (!layerIsOn("toggleRivers")) toggleRivers();
-  else drawRivers();
+  Features.specify();
+  if (layerIsOn("toggleRivers")) drawRivers();
 }
 
 function recalculatePopulation() {
   rankCells();
+
   pack.burgs.forEach(b => {
     if (!b.i || b.removed || b.lock) return;
     const i = b.cell;
@@ -143,6 +145,8 @@ function recalculatePopulation() {
     if (b.port) b.population = b.population * 1.3; // increase port population
     b.population = rn(b.population * gauss(2, 3, 0.6, 20, 3), 3);
   });
+
+  layerIsOn("togglePopulation") ? drawPopulation() : togglePopulation();
 }
 
 function regenerateStates() {
@@ -152,12 +156,14 @@ function regenerateStates() {
   pack.states = newStates;
   BurgsAndStates.expandStates();
   BurgsAndStates.normalizeStates();
+  BurgsAndStates.getPoles();
   BurgsAndStates.collectStatistics();
   BurgsAndStates.assignColors();
   BurgsAndStates.generateCampaigns();
   BurgsAndStates.generateDiplomacy();
   BurgsAndStates.defineStateForms();
-  BurgsAndStates.generateProvinces(true);
+  Provinces.generate(true);
+  Provinces.getPoles();
 
   layerIsOn("toggleStates") ? drawStates() : toggleStates();
   layerIsOn("toggleBorders") ? drawBorders() : toggleBorders();
@@ -167,16 +173,16 @@ function regenerateStates() {
   Military.generate();
   if (layerIsOn("toggleEmblems")) drawEmblems();
 
-  if (document.getElementById("burgsOverviewRefresh")?.offsetParent) burgsOverviewRefresh.click();
-  if (document.getElementById("statesEditorRefresh")?.offsetParent) statesEditorRefresh.click();
-  if (document.getElementById("militaryOverviewRefresh")?.offsetParent) militaryOverviewRefresh.click();
+  if (byId("burgsOverviewRefresh")?.offsetParent) burgsOverviewRefresh.click();
+  if (byId("statesEditorRefresh")?.offsetParent) statesEditorRefresh.click();
+  if (byId("militaryOverviewRefresh")?.offsetParent) militaryOverviewRefresh.click();
 }
 
 function recreateStates() {
   const localSeed = generateSeed();
   Math.random = aleaPRNG(localSeed);
 
-  const statesCount = +regionsOutput.value;
+  const statesCount = +byId("statesNumber").value;
   if (!statesCount) {
     tip(`<i>States Number</i> option value is zero. No counties are generated`, false, "error");
     return null;
@@ -198,7 +204,7 @@ function recreateStates() {
   const lockedStatesIds = lockedStates.map(s => s.i);
   const lockedStatesCapitals = lockedStates.map(s => s.capital);
 
-  if (lockedStates.length === validStates.length) {
+  if (validStates.length && lockedStates.length === validStates.length) {
     tip("Unable to regenerate as all states are locked", false, "error");
     return null;
   }
@@ -317,7 +323,7 @@ function recreateStates() {
       : pack.cultures[culture].type === "Nomadic"
       ? "Generic"
       : pack.cultures[culture].type;
-    const expansionism = rn(Math.random() * powerInput.value + 1, 1);
+    const expansionism = rn(Math.random() * byId("sizeVariety").value + 1, 1);
 
     const cultureType = pack.cultures[culture].type;
     const coa = COA.generate(capital.coa, 0.3, null, cultureType);
@@ -332,9 +338,11 @@ function recreateStates() {
 function regenerateProvinces() {
   unfog();
 
-  BurgsAndStates.generateProvinces(true, true);
-  drawBorders();
-  if (layerIsOn("toggleProvinces")) drawProvinces();
+  Provinces.generate(true, true);
+  Provinces.getPoles();
+
+  if (layerIsOn("toggleBorders")) drawBorders();
+  layerIsOn("toggleProvinces") ? drawProvinces() : toggleProvinces();
 
   // remove emblems
   document.querySelectorAll("[id^=provinceCOA]").forEach(el => el.remove());
@@ -437,16 +445,18 @@ function regenerateBurgs() {
 
   BurgsAndStates.specifyBurgs();
   BurgsAndStates.defineBurgFeatures();
-  BurgsAndStates.drawBurgs();
   regenerateRoutes();
 
+  drawBurgIcons();
+  drawBurgLabels();
+
   // remove emblems
   document.querySelectorAll("[id^=burgCOA]").forEach(el => el.remove());
   emblems.selectAll("use").remove();
   if (layerIsOn("toggleEmblems")) drawEmblems();
 
-  if (document.getElementById("burgsOverviewRefresh")?.offsetParent) burgsOverviewRefresh.click();
-  if (document.getElementById("statesEditorRefresh")?.offsetParent) statesEditorRefresh.click();
+  if (byId("burgsOverviewRefresh")?.offsetParent) burgsOverviewRefresh.click();
+  if (byId("statesEditorRefresh")?.offsetParent) statesEditorRefresh.click();
 }
 
 function regenerateEmblems() {
@@ -498,13 +508,13 @@ function regenerateEmblems() {
     province.coa.shield = COA.getShield(culture, province.state);
   });
 
-  if (layerIsOn("toggleEmblems")) drawEmblems(); // redrawEmblems
+  layerIsOn("toggleEmblems") ? drawEmblems() : toggleEmblems();
 }
 
 function regenerateReligions() {
   Religions.generate();
-  if (!layerIsOn("toggleReligions")) toggleReligions();
-  else drawReligions();
+
+  layerIsOn("toggleReligions") ? drawReligions() : toggleReligions();
   refreshAllEditors();
 }
 
@@ -513,15 +523,17 @@ function regenerateCultures() {
   Cultures.expand();
   BurgsAndStates.updateCultures();
   Religions.updateCultures();
-  if (!layerIsOn("toggleCultures")) toggleCultures();
-  else drawCultures();
+
+  layerIsOn("toggleCultures") ? drawCultures() : toggleCultures();
   refreshAllEditors();
 }
 
 function regenerateMilitary() {
   Military.generate();
-  if (!layerIsOn("toggleMilitary")) toggleMilitary();
-  if (document.getElementById("militaryOverviewRefresh").offsetParent) militaryOverviewRefresh.click();
+  if (layerIsOn("toggleMilitary")) drawMilitary();
+  else toggleMilitary();
+
+  if (byId("militaryOverviewRefresh").offsetParent) militaryOverviewRefresh.click();
 }
 
 function regenerateIce() {
@@ -534,7 +546,7 @@ function regenerateMarkers() {
   Markers.regenerate();
   turnButtonOn("toggleMarkers");
   drawMarkers();
-  if (document.getElementById("markersOverviewRefresh").offsetParent) markersOverviewRefresh.click();
+  if (byId("markersOverviewRefresh").offsetParent) markersOverviewRefresh.click();
 }
 
 function regenerateZones(event) {
@@ -545,10 +557,9 @@ function regenerateZones(event) {
   else addNumberOfZones(gauss(1, 0.5, 0.6, 5, 2));
 
   function addNumberOfZones(number) {
-    zones.selectAll("g").remove(); // remove existing zones
-    addZones(number);
-    if (document.getElementById("zonesEditorRefresh").offsetParent) zonesEditorRefresh.click();
-    if (!layerIsOn("toggleZones")) toggleZones();
+    Zones.generate(number);
+    if (byId("zonesEditorRefresh").offsetParent) zonesEditorRefresh.click();
+    if (layerIsOn("toggleZones")) drawZones();
   }
 }
 
@@ -559,7 +570,7 @@ function unpressClickToAddButton() {
 }
 
 function toggleAddLabel() {
-  const pressed = document.getElementById("addLabel").classList.contains("pressed");
+  const pressed = byId("addLabel").classList.contains("pressed");
   if (pressed) {
     unpressClickToAddButton();
     return;
@@ -607,8 +618,10 @@ function addLabelOnClick() {
   group.classed("hidden", false);
   group
     .append("text")
+    .attr("text-rendering", "optimizeSpeed")
     .attr("id", id)
     .append("textPath")
+    .attr("text-rendering", "optimizeSpeed")
     .attr("xlink:href", "#textPath_" + id)
     .attr("startOffset", "50%")
     .attr("font-size", "100%")
@@ -627,22 +640,22 @@ function addLabelOnClick() {
 
 function toggleAddBurg() {
   unpressClickToAddButton();
-  document.getElementById("addBurgTool").classList.add("pressed");
+  byId("addBurgTool").classList.add("pressed");
   overviewBurgs();
-  document.getElementById("addNewBurg").click();
+  byId("addNewBurg").click();
 }
 
 function toggleAddRiver() {
-  const pressed = document.getElementById("addRiver").classList.contains("pressed");
+  const pressed = byId("addRiver").classList.contains("pressed");
   if (pressed) {
     unpressClickToAddButton();
-    document.getElementById("addNewRiver").classList.remove("pressed");
+    byId("addNewRiver").classList.remove("pressed");
     return;
   }
 
   addFeature.querySelectorAll("button.pressed").forEach(b => b.classList.remove("pressed"));
   addRiver.classList.add("pressed");
-  document.getElementById("addNewRiver").classList.add("pressed");
+  byId("addNewRiver").classList.add("pressed");
   closeDialogs(".stable");
   viewbox.style("cursor", "crosshair").on("click", addRiverOnClick);
   tip("Click on map to place new river or extend an existing one. Hold Shift to place multiple rivers", true, "warn");
@@ -657,28 +670,15 @@ function addRiverOnClick() {
   if (cells.h[i] < 20) return tip("Cannot create river in water cell", false, "error");
   if (cells.b[i]) return;
 
-  const {
-    alterHeights,
-    resolveDepressions,
-    addMeandering,
-    getRiverPath,
-    getBasin,
-    getName,
-    getType,
-    getWidth,
-    getOffset,
-    getApproximateLength,
-    getNextId
-  } = Rivers;
   const riverCells = [];
-  let riverId = getNextId(rivers);
+  let riverId = Rivers.getNextId(rivers);
   let parent = riverId;
 
   const initialFlux = grid.cells.prec[cells.g[i]];
   cells.fl[i] = initialFlux;
 
-  const h = alterHeights();
-  resolveDepressions(h);
+  const h = Rivers.alterHeights();
+  Rivers.resolveDepressions(h);
 
   while (i) {
     cells.r[i] = riverId;
@@ -728,7 +728,7 @@ function addRiverOnClick() {
     }
 
     // continue old river
-    document.getElementById("river" + oldRiverId)?.remove();
+    byId("river" + oldRiverId)?.remove();
     riverCells.forEach(i => (cells.r[i] = oldRiverId));
     oldRiverCells.forEach(cell => {
       if (h[cell] > h[min]) {
@@ -752,11 +752,19 @@ function addRiverOnClick() {
   const defaultWidthFactor = rn(1 / (pointsInput.dataset.cells / 10000) ** 0.25, 2);
   const widthFactor =
     river?.widthFactor || (!parent || parent === riverId ? defaultWidthFactor * 1.2 : defaultWidthFactor);
-  const meanderedPoints = addMeandering(riverCells);
+  const sourceWidth = river?.sourceWidth || Rivers.getSourceWidth(cells.fl[source]);
+  const meanderedPoints = Rivers.addMeandering(riverCells);
 
   const discharge = cells.fl[mouth]; // m3 in second
-  const length = getApproximateLength(meanderedPoints);
-  const width = getWidth(getOffset(discharge, meanderedPoints.length, widthFactor));
+  const length = Rivers.getApproximateLength(meanderedPoints);
+  const width = Rivers.getWidth(
+    Rivers.getOffset({
+      flux: discharge,
+      pointIndex: meanderedPoints.length,
+      widthFactor,
+      startingWidth: sourceWidth
+    })
+  );
 
   if (river) {
     river.source = source;
@@ -765,9 +773,9 @@ function addRiverOnClick() {
     river.width = width;
     river.cells = riverCells;
   } else {
-    const basin = getBasin(parent);
-    const name = getName(mouth);
-    const type = getType({i: riverId, length, parent});
+    const basin = Rivers.getBasin(parent);
+    const name = Rivers.getName(mouth);
+    const type = Rivers.getType({i: riverId, length, parent});
 
     rivers.push({
       i: riverId,
@@ -777,7 +785,7 @@ function addRiverOnClick() {
       length,
       width,
       widthFactor,
-      sourceWidth: 0,
+      sourceWidth,
       parent,
       cells: riverCells,
       basin,
@@ -787,8 +795,7 @@ function addRiverOnClick() {
   }
 
   // render river
-  lineGen.curve(d3.curveCatmullRom.alpha(0.1));
-  const path = getRiverPath(meanderedPoints, widthFactor);
+  const path = Rivers.getRiverPath(meanderedPoints, widthFactor, sourceWidth);
   const id = "river" + riverId;
   const riversG = viewbox.select("#rivers");
   riversG.append("path").attr("id", id).attr("d", path);
@@ -796,13 +803,13 @@ function addRiverOnClick() {
   if (d3.event.shiftKey === false) {
     Lakes.cleanupLakeData();
     unpressClickToAddButton();
-    document.getElementById("addNewRiver").classList.remove("pressed");
+    byId("addNewRiver").classList.remove("pressed");
     if (addNewRiver.offsetParent) riversOverviewRefresh.click();
   }
 }
 
 function toggleAddMarker() {
-  const pressed = document.getElementById("addMarker")?.classList.contains("pressed");
+  const pressed = byId("addMarker")?.classList.contains("pressed");
   if (pressed) {
     unpressClickToAddButton();
     return;
@@ -830,7 +837,7 @@ function addMarkerOnClick() {
   const isMarkerSelected = markers.length && elSelected?.node()?.parentElement?.id === "markers";
   const selectedMarker = isMarkerSelected ? markers.find(marker => marker.i === +elSelected.attr("id").slice(6)) : null;
 
-  const selectedType = document.getElementById("addedMarkerType").value;
+  const selectedType = byId("addedMarkerType").value;
   const selectedConfig = Markers.getConfig().find(({type}) => type === selectedType);
 
   const baseMarker = selectedMarker || selectedConfig || {icon: "❓"};
@@ -840,13 +847,13 @@ function addMarkerOnClick() {
     selectedConfig.add("marker" + marker.i, cell);
   }
 
-  const markersElement = document.getElementById("markers");
+  const markersElement = byId("markers");
   const rescale = +markersElement.getAttribute("rescale");
   markersElement.insertAdjacentHTML("beforeend", drawMarker(marker, rescale));
 
   if (d3.event.shiftKey === false) {
-    document.getElementById("markerAdd").classList.remove("pressed");
-    document.getElementById("markersAddFromOverview").classList.remove("pressed");
+    byId("markerAdd").classList.remove("pressed");
+    byId("markersAddFromOverview").classList.remove("pressed");
     unpressClickToAddButton();
   }
 }
@@ -855,33 +862,47 @@ function configMarkersGeneration() {
   drawConfigTable();
 
   function drawConfigTable() {
-    const {markers} = pack;
     const config = Markers.getConfig();
-    const headers = `<thead style='font-weight:bold'><tr>
+
+    const headers = /* html */ `<thead style='font-weight:bold'><tr>
       <td data-tip="Marker type name">Type</td>
       <td data-tip="Marker icon">Icon</td>
       <td data-tip="Marker number multiplier">Multiplier</td>
       <td data-tip="Number of markers of that type on the current map">Number</td>
     </tr></thead>`;
-    const lines = config.map(({type, icon, multiplier}, index) => {
-      const inputId = `markerIconInput${index}`;
-      return `<tr>
-        <td><input value="${type}" /></td>
+
+    const lines = config.map(({type, icon, multiplier}) => {
+      const isExternal = icon.startsWith("http") || icon.startsWith("data:image");
+
+      return /* html */ `<tr>
+        <td><input class="type" value="${type}" /></td>
         <td style="position: relative">
-          <input id="${inputId}" style="width: 5em" value="${icon}" />
-          <i class="icon-edit pointer" style="position: absolute; margin:.4em 0 0 -1.4em; font-size:.85em"></i>
+          <img class="image" src="${isExternal ? icon : ""}" ${
+        isExternal ? "" : "hidden"
+      } style="width:1.2em; height:1.2em; vertical-align: middle;">
+          <span class="emoji" style="font-size:1.2em">${isExternal ? "" : icon}</span>
+          <button class="changeIcon icon-pencil"></button>
         </td>
-        <td><input type="number" min="0" max="100" step="0.1" value="${multiplier}" /></td>
-        <td style="text-align:center">${markers.filter(marker => marker.type === type).length}</td>
+        <td><input class="multiplier" type="number" min="0" max="100" step="0.1" value="${multiplier}" /></td>
+        <td style="text-align:center">${pack.markers.filter(marker => marker.type === type).length}</td>
       </tr>`;
     });
+
     const table = `<table class="table">${headers}<tbody>${lines.join("")}</tbody></table>`;
     alertMessage.innerHTML = table;
 
-    alertMessage.querySelectorAll("i").forEach(selectIconButton => {
+    alertMessage.querySelectorAll("button.changeIcon").forEach(selectIconButton => {
       selectIconButton.addEventListener("click", function () {
-        const input = this.previousElementSibling;
-        selectIcon(input.value, icon => (input.value = icon));
+        const image = this.parentElement.querySelector(".image");
+        const emoji = this.parentElement.querySelector(".emoji");
+        const icon = image.getAttribute("src") || emoji.textContent;
+
+        selectIcon(icon, value => {
+          const isExternal = value.startsWith("http") || value.startsWith("data:image");
+          image.setAttribute("src", isExternal ? value : "");
+          image.hidden = !isExternal;
+          emoji.textContent = isExternal ? "" : value;
+        });
       });
     });
   }
@@ -889,12 +910,14 @@ function configMarkersGeneration() {
   const applyChanges = () => {
     const rows = alertMessage.querySelectorAll("tbody > tr");
     const rowsData = Array.from(rows).map(row => {
-      const inputs = row.querySelectorAll("input");
-      return {
-        type: inputs[0].value,
-        icon: inputs[1].value,
-        multiplier: parseFloat(inputs[2].value)
-      };
+      const type = row.querySelector(".type").value;
+
+      const image = row.querySelector(".image");
+      const emoji = row.querySelector(".emoji");
+      const icon = image.getAttribute("src") || emoji.textContent;
+
+      const multiplier = parseFloat(row.querySelector(".multiplier").value);
+      return {type, icon, multiplier};
     });
 
     const config = Markers.getConfig();
diff --git a/modules/ui/transform-tool.js b/modules/ui/transform-tool.js
new file mode 100644
index 00000000..86d5c504
--- /dev/null
+++ b/modules/ui/transform-tool.js
@@ -0,0 +1,204 @@
+"use strict";
+
+async function openTransformTool() {
+  const width = Math.min(400, window.innerWidth * 0.5);
+  const previewScale = width / graphWidth;
+  const height = graphHeight * previewScale;
+
+  let mouseIsDown = false;
+  let mouseX = 0;
+  let mouseY = 0;
+
+  resetInputs();
+  loadPreview();
+
+  $("#transformTool").dialog({
+    title: "Transform map",
+    resizable: false,
+    position: {my: "center", at: "center", of: "svg"},
+    buttons: {
+      Transform: function () {
+        closeDialogs();
+        transformMap();
+      },
+      Cancel: function () {
+        $(this).dialog("close");
+      }
+    }
+  });
+
+  if (modules.openTransformTool) return;
+  modules.openTransformTool = true;
+
+  // add listeners
+  byId("transformToolBody").on("input", handleInput);
+  byId("transformPreview")
+    .on("mousedown", handleMousedown)
+    .on("mouseup", _ => (mouseIsDown = false))
+    .on("mousemove", handleMousemove)
+    .on("wheel", handleWheel);
+
+  async function loadPreview() {
+    byId("transformPreview").style.width = width + "px";
+    byId("transformPreview").style.height = height + "px";
+
+    const options = {noWater: true, fullMap: true, noLabels: true, noScaleBar: true, noVignette: true, noIce: true};
+    const url = await getMapURL("png", options);
+    const SCALE = 4;
+
+    const img = new Image();
+    img.src = url;
+    img.onload = function () {
+      const $canvas = byId("transformPreviewCanvas");
+      $canvas.style.width = width + "px";
+      $canvas.style.height = height + "px";
+      $canvas.width = width * SCALE;
+      $canvas.height = height * SCALE;
+      $canvas.getContext("2d").drawImage(img, 0, 0, width * SCALE, height * SCALE);
+    };
+  }
+
+  function resetInputs() {
+    byId("transformAngleInput").value = 0;
+    byId("transformAngleOutput").value = "0";
+    byId("transformMirrorH").checked = false;
+    byId("transformMirrorV").checked = false;
+    byId("transformScaleInput").value = 0;
+    byId("transformScaleResult").value = 1;
+    byId("transformShiftX").value = 0;
+    byId("transformShiftY").value = 0;
+    handleInput();
+
+    updateCellsNumber(byId("pointsInput").value);
+    byId("transformPointsInput").oninput = e => updateCellsNumber(e.target.value);
+
+    function updateCellsNumber(value) {
+      byId("transformPointsInput").value = value;
+      const cells = cellsDensityMap[value];
+      byId("transformPointsInput").dataset.cells = cells;
+      const output = byId("transformPointsFormatted");
+      output.value = cells / 1000 + "K";
+      output.style.color = getCellsDensityColor(cells);
+    }
+  }
+
+  function handleInput() {
+    const angle = (+byId("transformAngleInput").value / 180) * Math.PI;
+    const shiftX = +byId("transformShiftX").value;
+    const shiftY = +byId("transformShiftY").value;
+    const mirrorH = byId("transformMirrorH").checked;
+    const mirrorV = byId("transformMirrorV").checked;
+
+    const EXP = 1.0965;
+    const scale = rn(EXP ** +byId("transformScaleInput").value, 2); // [0.1, 10]x
+    byId("transformScaleResult").value = scale;
+
+    byId("transformPreviewCanvas").style.transform = `
+      translate(${shiftX * previewScale}px, ${shiftY * previewScale}px)
+      scale(${mirrorH ? -scale : scale}, ${mirrorV ? -scale : scale})
+      rotate(${angle}rad)
+    `;
+  }
+
+  function handleMousedown(e) {
+    mouseIsDown = true;
+    const shiftX = +byId("transformShiftX").value;
+    const shiftY = +byId("transformShiftY").value;
+    mouseX = shiftX - e.clientX / previewScale;
+    mouseY = shiftY - e.clientY / previewScale;
+  }
+
+  function handleMousemove(e) {
+    if (!mouseIsDown) return;
+    e.preventDefault();
+
+    byId("transformShiftX").value = Math.round(mouseX + e.clientX / previewScale);
+    byId("transformShiftY").value = Math.round(mouseY + e.clientY / previewScale);
+    handleInput();
+  }
+
+  function handleWheel(e) {
+    const $scaleInput = byId("transformScaleInput");
+    $scaleInput.value = $scaleInput.valueAsNumber - Math.sign(e.deltaY);
+    handleInput();
+  }
+
+  function transformMap() {
+    INFO && console.group("transformMap");
+
+    const transformPointsValue = byId("transformPointsInput").value;
+    const globalPointsValue = byId("pointsInput").value;
+    if (transformPointsValue !== globalPointsValue) changeCellsDensity(transformPointsValue);
+
+    const [projection, inverse] = getProjection();
+
+    applyGraphSize();
+    fitMapToScreen();
+    resetZoom(0);
+    undraw();
+    Resample.process({projection, inverse, scale: 1});
+
+    drawLayers();
+
+    INFO && console.groupEnd("transformMap");
+  }
+
+  function getProjection() {
+    const centerX = graphWidth / 2;
+    const centerY = graphHeight / 2;
+    const shiftX = +byId("transformShiftX").value;
+    const shiftY = +byId("transformShiftY").value;
+    const angle = (+byId("transformAngleInput").value / 180) * Math.PI;
+    const cos = Math.cos(angle);
+    const sin = Math.sin(angle);
+    const scale = +byId("transformScaleResult").value;
+    const mirrorH = byId("transformMirrorH").checked;
+    const mirrorV = byId("transformMirrorV").checked;
+
+    function project(x, y) {
+      // center the point
+      x -= centerX;
+      y -= centerY;
+
+      // apply scale
+      if (scale !== 1) {
+        x *= scale;
+        y *= scale;
+      }
+
+      // apply rotation
+      if (angle) [x, y] = [x * cos - y * sin, x * sin + y * cos];
+
+      // apply mirroring
+      if (mirrorH) x = -x;
+      if (mirrorV) y = -y;
+
+      // uncenter the point and apply shift
+      return [x + centerX + shiftX, y + centerY + shiftY];
+    }
+
+    function inverse(x, y) {
+      // undo shift and center the point
+      x -= centerX + shiftX;
+      y -= centerY + shiftY;
+
+      // undo mirroring
+      if (mirrorV) y = -y;
+      if (mirrorH) x = -x;
+
+      // undo rotation
+      if (angle !== 0) [x, y] = [x * cos + y * sin, -x * sin + y * cos];
+
+      // undo scale
+      if (scale !== 1) {
+        x /= scale;
+        y /= scale;
+      }
+
+      // uncenter the point
+      return [x + centerX, y + centerY];
+    }
+
+    return [project, inverse];
+  }
+}
diff --git a/modules/ui/units-editor.js b/modules/ui/units-editor.js
index ff911567..aa63e64a 100644
--- a/modules/ui/units-editor.js
+++ b/modules/ui/units-editor.js
@@ -17,27 +17,22 @@ function editUnits() {
   };
 
   // add listeners
-  byId("distanceUnitInput").addEventListener("change", changeDistanceUnit);
-  byId("distanceScaleOutput").addEventListener("input", changeDistanceScale);
-  byId("distanceScaleInput").addEventListener("change", changeDistanceScale);
-  byId("heightUnit").addEventListener("change", changeHeightUnit);
-  byId("heightExponentInput").addEventListener("input", changeHeightExponent);
-  byId("heightExponentOutput").addEventListener("input", changeHeightExponent);
-  byId("temperatureScale").addEventListener("change", changeTemperatureScale);
+  byId("distanceUnitInput").on("change", changeDistanceUnit);
+  byId("distanceScaleInput").on("change", changeDistanceScale);
+  byId("heightUnit").on("change", changeHeightUnit);
+  byId("heightExponentInput").on("input", changeHeightExponent);
+  byId("temperatureScale").on("change", changeTemperatureScale);
 
-  byId("populationRateOutput").addEventListener("input", changePopulationRate);
-  byId("populationRateInput").addEventListener("change", changePopulationRate);
-  byId("urbanizationOutput").addEventListener("input", changeUrbanizationRate);
-  byId("urbanizationInput").addEventListener("change", changeUrbanizationRate);
-  byId("urbanDensityOutput").addEventListener("input", changeUrbanDensity);
-  byId("urbanDensityInput").addEventListener("change", changeUrbanDensity);
+  byId("populationRateInput").on("change", changePopulationRate);
+  byId("urbanizationInput").on("change", changeUrbanizationRate);
+  byId("urbanDensityInput").on("change", changeUrbanDensity);
 
-  byId("addLinearRuler").addEventListener("click", addRuler);
-  byId("addOpisometer").addEventListener("click", toggleOpisometerMode);
-  byId("addRouteOpisometer").addEventListener("click", toggleRouteOpisometerMode);
-  byId("addPlanimeter").addEventListener("click", togglePlanimeterMode);
-  byId("removeRulers").addEventListener("click", removeAllRulers);
-  byId("unitsRestore").addEventListener("click", restoreDefaultUnits);
+  byId("addLinearRuler").on("click", addRuler);
+  byId("addOpisometer").on("click", toggleOpisometerMode);
+  byId("addRouteOpisometer").on("click", toggleRouteOpisometerMode);
+  byId("addPlanimeter").on("click", togglePlanimeterMode);
+  byId("removeRulers").on("click", removeAllRulers);
+  byId("unitsRestore").on("click", restoreDefaultUnits);
 
   function changeDistanceUnit() {
     if (this.value === "custom_name") {
@@ -71,11 +66,11 @@ function editUnits() {
 
   function changeHeightExponent() {
     calculateTemperatures();
-    if (layerIsOn("toggleTemp")) drawTemp();
+    if (layerIsOn("toggleTemperature")) drawTemperature();
   }
 
   function changeTemperatureScale() {
-    if (layerIsOn("toggleTemp")) drawTemp();
+    if (layerIsOn("toggleTemperature")) drawTemperature();
   }
 
   function changePopulationRate() {
@@ -92,7 +87,6 @@ function editUnits() {
 
   function restoreDefaultUnits() {
     distanceScale = 3;
-    byId("distanceScaleOutput").value = distanceScale;
     byId("distanceScaleInput").value = distanceScale;
     unlock("distanceScale");
 
@@ -110,16 +104,16 @@ function editUnits() {
     calculateFriendlyGridSize();
 
     // height exponent
-    heightExponentInput.value = heightExponentOutput.value = 1.8;
+    heightExponentInput.value = 1.8;
     localStorage.removeItem("heightExponent");
     calculateTemperatures();
 
     renderScaleBar();
 
     // population
-    populationRate = populationRateOutput.value = populationRateInput.value = 1000;
-    urbanization = urbanizationOutput.value = urbanizationInput.value = 1;
-    urbanDensity = urbanDensityOutput.value = urbanDensityInput.value = 10;
+    populationRate = populationRateInput.value = 1000;
+    urbanization = urbanizationInput.value = 1;
+    urbanDensity = urbanDensityInput.value = 10;
     localStorage.removeItem("populationRate");
     localStorage.removeItem("urbanization");
     localStorage.removeItem("urbanDensity");
@@ -127,11 +121,16 @@ function editUnits() {
 
   function addRuler() {
     if (!layerIsOn("toggleRulers")) toggleRulers();
+
+    const width = Math.min(graphWidth, svgWidth);
+    const height = Math.min(graphHeight, svgHeight);
     const pt = byId("map").createSVGPoint();
-    (pt.x = graphWidth / 2), (pt.y = graphHeight / 4);
+    pt.x = width / 2;
+    pt.y = height / 4;
     const p = pt.matrixTransform(viewbox.node().getScreenCTM().inverse());
-    const dx = graphWidth / 4 / scale;
-    const dy = (rulers.data.length * 40) % (graphHeight / 2);
+
+    const dx = width / 4 / scale;
+    const dy = (rulers.data.length * 40) % (height / 2);
     const from = [(p.x - dx) | 0, (p.y + dy) | 0];
     const to = [(p.x + dx) | 0, (p.y + dy) | 0];
     rulers.create(Ruler, [from, to]).draw();
diff --git a/modules/ui/world-configurator.js b/modules/ui/world-configurator.js
index 67569592..0b5abab0 100644
--- a/modules/ui/world-configurator.js
+++ b/modules/ui/world-configurator.js
@@ -15,7 +15,7 @@ function editWorld() {
       pane.insertAdjacentHTML("afterbegin", checkbox);
 
       const button = this.parentElement.querySelector(".ui-dialog-buttonset > button");
-      button.on("mousemove", () => tip("Apply curreny settings to the map"));
+      button.on("mousemove", () => tip("Apply current settings to the map"));
     },
     close: function () {
       $(this).dialog("destroy");
@@ -86,13 +86,13 @@ function editWorld() {
     generatePrecipitation();
     const heights = new Uint8Array(pack.cells.h);
     Rivers.generate();
-    Lakes.defineGroup();
     Rivers.specify();
     pack.cells.h = new Float32Array(heights);
     Biomes.define();
+    Features.specify();
 
-    if (layerIsOn("toggleTemp")) drawTemp();
-    if (layerIsOn("togglePrec")) drawPrec();
+    if (layerIsOn("toggleTemperature")) drawTemperature();
+    if (layerIsOn("togglePrecipitation")) drawPrecipitation();
     if (layerIsOn("toggleBiomes")) drawBiomes();
     if (layerIsOn("toggleCoordinates")) drawCoordinates();
     if (layerIsOn("toggleRivers")) drawRivers();
diff --git a/modules/ui/zones-editor.js b/modules/ui/zones-editor.js
index 0e0bc6b6..85888c4e 100644
--- a/modules/ui/zones-editor.js
+++ b/modules/ui/zones-editor.js
@@ -1,7 +1,7 @@
 "use strict";
 
 function editZones() {
-  closeDialogs();
+  closeDialogs("#zonesEditor, .stable");
   if (!layerIsOn("toggleZones")) toggleZones();
   const body = byId("zonesBodySection");
 
@@ -14,7 +14,6 @@ function editZones() {
   $("#zonesEditor").dialog({
     title: "Zones Editor",
     resizable: false,
-    width: fitContent(),
     close: () => exitZonesManualAssignment("close"),
     position: {my: "right top", at: "right-10 top+10", of: "svg", collision: "fit"}
   });
@@ -31,34 +30,40 @@ function editZones() {
   byId("zonesManuallyCancel").on("click", cancelZonesManualAssignent);
   byId("zonesAdd").on("click", addZonesLayer);
   byId("zonesExport").on("click", downloadZonesData);
-  byId("zonesRemove").on("click", toggleEraseMode);
+  byId("zonesRemove").on("click", e => e.target.classList.toggle("pressed"));
 
   body.on("click", function (ev) {
-    const el = ev.target,
-      cl = el.classList,
-      zone = el.parentNode.dataset.id;
-    if (el.tagName === "FILL-BOX") changeFill(el);
-    else if (cl.contains("culturePopulation")) changePopulation(zone);
-    else if (cl.contains("icon-trash-empty")) zoneRemove(zone);
-    else if (cl.contains("icon-eye")) toggleVisibility(el);
-    else if (cl.contains("icon-pin")) toggleFog(zone, cl);
-    if (customization) selectZone(el);
+    const line = ev.target.closest("div.states");
+    const zone = pack.zones.find(z => z.i === +line.dataset.id);
+    if (!zone) return;
+
+    if (customization) {
+      if (zone.hidden) return;
+      body.querySelector("div.selected").classList.remove("selected");
+      line.classList.add("selected");
+      return;
+    }
+
+    if (ev.target.closest("fill-box")) changeFill(ev.target.closest("fill-box").getAttribute("fill"), zone);
+    else if (ev.target.classList.contains("zonePopulation")) changePopulation(zone);
+    else if (ev.target.classList.contains("zoneRemove")) zoneRemove(zone);
+    else if (ev.target.classList.contains("zoneHide")) toggleVisibility(zone);
+    else if (ev.target.classList.contains("zoneFog")) toggleFog(zone, ev.target.classList);
   });
 
   body.on("input", function (ev) {
-    const el = ev.target;
-    const zone = zones.select("#" + el.parentNode.dataset.id);
+    const line = ev.target.closest("div.states");
+    const zone = pack.zones.find(z => z.i === +line.dataset.id);
+    if (!zone) return;
 
-    if (el.classList.contains("zoneName")) zone.attr("data-description", el.value);
-    else if (el.classList.contains("zoneType")) zone.attr("data-type", el.value);
+    if (ev.target.classList.contains("zoneName")) changeDescription(zone, ev.target.value);
+    else if (ev.target.classList.contains("zoneType")) changeType(zone, ev.target.value);
   });
 
   // update type filter with a list of used types
   function updateFilters() {
-    const zones = Array.from(document.querySelectorAll("#zones > g"));
-    const types = unique(zones.map(zone => zone.dataset.type));
-
     const filterSelect = byId("zonesFilterType");
+    const types = unique(pack.zones.map(zone => zone.type));
     const typeToFilterBy = types.includes(zonesFilterType.value) ? zonesFilterType.value : "all";
 
     filterSelect.innerHTML =
@@ -68,47 +73,42 @@ function editZones() {
 
   // add line for each zone
   function zonesEditorAddLines() {
-    const unit = " " + getAreaUnit();
-
     const typeToFilterBy = byId("zonesFilterType").value;
-    const zones = Array.from(document.querySelectorAll("#zones > g"));
-    const filteredZones = typeToFilterBy === "all" ? zones : zones.filter(zone => zone.dataset.type === typeToFilterBy);
+    const filteredZones =
+      typeToFilterBy === "all" ? pack.zones : pack.zones.filter(zone => zone.type === typeToFilterBy);
 
-    const lines = filteredZones.map(zoneEl => {
-      const c = zoneEl.dataset.cells ? zoneEl.dataset.cells.split(",").map(c => +c) : [];
-      const description = zoneEl.dataset.description;
-      const type = zoneEl.dataset.type;
-      const fill = zoneEl.getAttribute("fill");
-      const area = getArea(d3.sum(c.map(i => pack.cells.area[i])));
-      const rural = d3.sum(c.map(i => pack.cells.pop[i])) * populationRate;
+    const lines = filteredZones.map(({i, name, type, cells, color, hidden}) => {
+      const area = getArea(d3.sum(cells.map(i => pack.cells.area[i])));
+      const rural = d3.sum(cells.map(i => pack.cells.pop[i])) * populationRate;
       const urban =
-        d3.sum(c.map(i => pack.cells.burg[i]).map(b => pack.burgs[b].population)) * populationRate * urbanization;
-      const population = rural + urban;
+        d3.sum(cells.map(i => pack.cells.burg[i]).map(b => pack.burgs[b].population)) * populationRate * urbanization;
+      const population = rn(rural + urban);
       const populationTip = `Total population: ${si(population)}; Rural population: ${si(
         rural
       )}; Urban population: ${si(urban)}. Click to change`;
-      const inactive = zoneEl.style.display === "none";
-      const focused = defs.select("#fog #focus" + zoneEl.id).size();
+      const focused = defs.select("#fog #focusZone" + i).size();
 
-      return `<div class="states" data-id="${zoneEl.id}" data-fill="${fill}" data-description="${description}"
-        data-type="${type}" data-cells=${c.length} data-area=${area} data-population=${population}>
-        <fill-box fill="${fill}"></fill-box>
-        <input data-tip="Zone description. Click and type to change" style="width: 11em" class="zoneName" value="${description}" autocorrect="off" spellcheck="false">
+      return /* html */ `<div class="states" data-id="${i}" data-color="${color}" data-description="${name}"
+        data-type="${type}" data-cells=${cells.length} data-area=${area} data-population=${population} style="${
+        hidden && "opacity: 0.5"
+      }">
+        <fill-box fill="${color}"></fill-box>
+        <input data-tip="Zone description. Click and type to change" style="width: 11em" class="zoneName" value="${name}" autocorrect="off" spellcheck="false">
         <input data-tip="Zone type. Click and type to change" class="zoneType" value="${type}">
         <span data-tip="Cells count" class="icon-check-empty hide"></span>
-        <div data-tip="Cells count" class="stateCells hide">${c.length}</div>
+        <div data-tip="Cells count" class="stateCells hide">${cells.length}</div>
         <span data-tip="Zone area" style="padding-right:4px" class="icon-map-o hide"></span>
-        <div data-tip="Zone area" class="biomeArea hide">${si(area) + unit}</div>
+        <div data-tip="Zone area" class="biomeArea hide">${si(area) + " " + getAreaUnit()}</div>
         <span data-tip="${populationTip}" class="icon-male hide"></span>
-        <div data-tip="${populationTip}" class="culturePopulation hide">${si(population)}</div>
+        <div data-tip="${populationTip}" class="zonePopulation hide pointer">${si(population)}</div>
         <span data-tip="Drag to raise or lower the zone" class="icon-resize-vertical hide"></span>
-        <span data-tip="Toggle zone focus" class="icon-pin ${focused ? "" : " inactive"} hide ${
-        c.length ? "" : " placeholder"
+        <span data-tip="Toggle zone focus" class="zoneFog icon-pin ${focused ? "" : "inactive"} hide ${
+        cells.length ? "" : "placeholder"
       }"></span>
-        <span data-tip="Toggle zone visibility" class="icon-eye ${inactive ? " inactive" : ""} hide ${
-        c.length ? "" : " placeholder"
-      }"></span>
-        <span data-tip="Remove zone" class="icon-trash-empty hide"></span>
+        <span data-tip="Toggle zone visibility" class="zoneHide icon-eye hide ${
+          cells.length ? "" : " placeholder"
+        }"></span>
+        <span data-tip="Remove zone" class="zoneRemove icon-trash-empty hide"></span>
       </div>`;
     });
 
@@ -121,14 +121,13 @@ function editZones() {
       (d3.sum(pack.cells.pop) + d3.sum(pack.burgs.filter(b => !b.removed).map(b => b.population)) * urbanization) *
       populationRate;
     zonesFooterPopulation.dataset.population = totalPop;
-    zonesFooterNumber.innerHTML = /* html */ `${filteredZones.length} of ${zones.length}`;
+    zonesFooterNumber.innerHTML = `${filteredZones.length} of ${pack.zones.length}`;
     zonesFooterCells.innerHTML = pack.cells.i.length;
-    zonesFooterArea.innerHTML = si(totalArea) + unit;
+    zonesFooterArea.innerHTML = si(totalArea) + " " + getAreaUnit();
     zonesFooterPopulation.innerHTML = si(totalPop);
 
-    // add listeners
-    body.querySelectorAll("div.states").forEach(el => el.on("mouseenter", ev => zoneHighlightOn(ev)));
-    body.querySelectorAll("div.states").forEach(el => el.on("mouseleave", ev => zoneHighlightOff(ev)));
+    body.querySelectorAll("div.states").forEach(el => el.on("mouseenter", zoneHighlightOn));
+    body.querySelectorAll("div.states").forEach(el => el.on("mouseleave", zoneHighlightOff));
 
     if (body.dataset.type === "percentage") {
       body.dataset.type = "absolute";
@@ -138,25 +137,17 @@ function editZones() {
   }
 
   function zoneHighlightOn(event) {
-    const zone = event.target.dataset.id;
-    zones.select("#" + zone).style("outline", "1px solid red");
+    const zoneId = event.target.dataset.id;
+    zones.select("#zone" + zoneId).style("outline", "1px solid red");
   }
 
   function zoneHighlightOff(event) {
-    const zone = event.target.dataset.id;
-    zones.select("#" + zone).style("outline", null);
+    const zoneId = event.target.dataset.id;
+    zones.select("#zone" + zoneId).style("outline", null);
   }
 
   function filterZonesByType() {
-    const typeToFilterBy = this.value;
-    const zones = Array.from(document.querySelectorAll("#zones > g"));
-
-    for (const zone of zones) {
-      const type = zone.dataset.type;
-      const visible = typeToFilterBy === "all" || type === typeToFilterBy;
-      zone.style.display = visible ? "block" : "none";
-    }
-
+    drawZones();
     zonesEditorAddLines();
   }
 
@@ -167,23 +158,24 @@ function editZones() {
     axis: "y",
     update: movezone
   });
-  function movezone(ev, ui) {
-    const zone = $("#" + ui.item.attr("data-id"));
-    const prev = $("#" + ui.item.prev().attr("data-id"));
-    if (prev) {
-      zone.insertAfter(prev);
-      return;
-    }
-    const next = $("#" + ui.item.next().attr("data-id"));
-    if (next) zone.insertBefore(next);
+
+  function movezone(_ev, ui) {
+    const zone = pack.zones.find(z => z.i === +ui.item[0].dataset.id);
+    const oldIndex = pack.zones.indexOf(zone);
+    const newIndex = ui.item.index();
+    if (oldIndex === newIndex) return;
+
+    pack.zones.splice(oldIndex, 1);
+    pack.zones.splice(newIndex, 0, zone);
+    drawZones();
   }
 
   function enterZonesManualAssignent() {
     if (!layerIsOn("toggleZones")) toggleZones();
     customization = 10;
+
     document.querySelectorAll("#zonesBottom > *").forEach(el => (el.style.display = "none"));
     byId("zonesManuallyButtons").style.display = "inline-block";
-
     zonesEditor.querySelectorAll(".hide").forEach(el => el.classList.add("hidden"));
     zonesFooter.style.display = "none";
     body.querySelectorAll("div > input, select, svg").forEach(e => (e.style.pointerEvents = "none"));
@@ -197,21 +189,32 @@ function editZones() {
       .on("touchmove mousemove", moveZoneBrush);
 
     body.querySelector("div").classList.add("selected");
-    zones.selectAll("g").each(function () {
-      this.setAttribute("data-init", this.getAttribute("data-cells"));
-    });
-  }
 
-  function selectZone(el) {
-    body.querySelector("div.selected").classList.remove("selected");
-    el.classList.add("selected");
+    // draw zones as individual cells
+    zones.selectAll("*").remove();
+
+    const filterBy = byId("zonesFilterType").value;
+    const isFiltered = filterBy && filterBy !== "all";
+    const visibleZones = pack.zones.filter(zone => !zone.hidden && (!isFiltered || zone.type === filterBy));
+    const data = visibleZones.map(({i, cells, color}) => cells.map(cell => ({cell, zoneId: i, fill: color}))).flat();
+    zones
+      .selectAll("polygon")
+      .data(data, d => `${d.zoneId}-${d.cell}`)
+      .enter()
+      .append("polygon")
+      .attr("points", d => getPackPolygon(d.cell))
+      .attr("fill", d => d.fill)
+      .attr("data-zone", d => d.zoneId)
+      .attr("data-cell", d => d.cell);
   }
 
   function selectZoneOnMapClick() {
-    if (d3.event.target.parentElement.parentElement.id !== "zones") return;
-    const zone = d3.event.target.parentElement.id;
-    const el = body.querySelector("div[data-id='" + zone + "']");
-    selectZone(el);
+    if (d3.event.target.parentElement.id !== "zones") return;
+    const zoneId = d3.event.target.dataset.zone;
+    const el = body.querySelector("div[data-id='" + zoneId + "']");
+
+    body.querySelector("div.selected").classList.remove("selected");
+    el.classList.add("selected");
   }
 
   function dragZoneBrush() {
@@ -219,43 +222,41 @@ function editZones() {
     const eraseMode = byId("zonesRemove").classList.contains("pressed");
     const landOnly = byId("zonesBrushLandOnly").checked;
 
-    const selected = body.querySelector("div.selected");
-    const zone = zones.select("#" + selected.dataset.id);
-    const base = zone.attr("id") + "_"; // id generic part
-
     d3.event.on("drag", () => {
       if (!d3.event.dx && !d3.event.dy) return;
       const [x, y] = d3.mouse(this);
       moveCircle(x, y, radius);
 
-      let selection = radius > 5 ? findAll(x, y, radius) : [findCell(x, y, radius)];
+      let selection = radius > 5 ? findAll(x, y, radius) : [findCell(x, y)];
       if (landOnly) selection = selection.filter(i => pack.cells.h[i] >= 20);
-      if (!selection) return;
+      if (!selection.length) return;
 
-      const dataCells = zone.attr("data-cells");
-      let cells = dataCells ? dataCells.split(",").map(i => +i) : [];
+      const zoneId = +body.querySelector("div.selected")?.dataset.id;
+      const zone = pack.zones.find(z => z.i === zoneId);
+      if (!zone) return;
 
       if (eraseMode) {
-        // remove
-        selection.forEach(i => {
-          const index = cells.indexOf(i);
-          if (index === -1) return;
-          zone.select("polygon#" + base + i).remove();
-          cells.splice(index, 1);
-        });
+        const data = zones
+          .selectAll("polygon")
+          .data()
+          .filter(d => !(d.zoneId === zoneId && selection.includes(d.cell)));
+        zones
+          .selectAll("polygon")
+          .data(data, d => `${d.zoneId}-${d.cell}`)
+          .exit()
+          .remove();
       } else {
-        // add
-        selection.forEach(i => {
-          if (cells.includes(i)) return;
-          cells.push(i);
-          zone
-            .append("polygon")
-            .attr("points", getPackPolygon(i))
-            .attr("id", base + i);
-        });
+        const data = selection.map(cell => ({cell, zoneId, fill: zone.color}));
+        zones
+          .selectAll("polygon")
+          .data(data, d => `${d.zoneId}-${d.cell}`)
+          .enter()
+          .append("polygon")
+          .attr("points", d => getPackPolygon(d.cell))
+          .attr("fill", d => d.fill)
+          .attr("data-zone", d => d.zoneId)
+          .attr("data-cell", d => d.cell);
       }
-
-      zone.attr("data-cells", cells);
     });
   }
 
@@ -263,39 +264,29 @@ function editZones() {
     showMainTip();
     const point = d3.mouse(this);
     const radius = +zonesBrush.value;
-    moveCircle(point[0], point[1], radius);
+    moveCircle(...point, radius);
   }
 
   function applyZonesManualAssignent() {
-    zones.selectAll("g").each(function () {
-      if (this.dataset.cells) return;
-      // all zone cells are removed
-      unfog("focusZone" + this.id);
-      this.style.display = "block";
-    });
+    const data = zones.selectAll("polygon").data();
+    const zoneCells = data.reduce((acc, d) => {
+      if (!acc[d.zoneId]) acc[d.zoneId] = [];
+      acc[d.zoneId].push(d.cell);
+      return acc;
+    }, {});
 
+    const filterBy = byId("zonesFilterType").value;
+    const isFiltered = filterBy && filterBy !== "all";
+    const visibleZones = pack.zones.filter(zone => !zone.hidden && (!isFiltered || zone.type === filterBy));
+    visibleZones.forEach(zone => (zone.cells = zoneCells[zone.i] || []));
+
+    drawZones();
     zonesEditorAddLines();
     exitZonesManualAssignment();
   }
 
-  // restore initial zone cells
   function cancelZonesManualAssignent() {
-    zones.selectAll("g").each(function () {
-      const zone = d3.select(this);
-      const dataCells = zone.attr("data-init");
-      const cells = dataCells ? dataCells.split(",").map(i => +i) : [];
-      zone.attr("data-cells", cells);
-      zone.selectAll("*").remove();
-      const base = zone.attr("id") + "_"; // id generic part
-      zone
-        .selectAll("*")
-        .data(cells)
-        .enter()
-        .append("polygon")
-        .attr("points", d => getPackPolygon(d))
-        .attr("id", d => base + d);
-    });
-
+    drawZones();
     exitZonesManualAssignment();
   }
 
@@ -313,60 +304,49 @@ function editZones() {
 
     restoreDefaultEvents();
     clearMainTip();
-    zones.selectAll("g").each(function () {
-      this.removeAttribute("data-init");
-    });
+
     const selected = body.querySelector("div.selected");
     if (selected) selected.classList.remove("selected");
   }
 
-  function changeFill(el) {
-    const fill = el.getAttribute("fill");
+  function changeFill(fill, zone) {
     const callback = newFill => {
-      el.fill = newFill;
-      byId(el.parentNode.dataset.id).setAttribute("fill", newFill);
+      zone.color = newFill;
+      drawZones();
+      zonesEditorAddLines();
     };
 
     openPicker(fill, callback);
   }
 
-  function toggleVisibility(el) {
-    const zone = zones.select("#" + el.parentNode.dataset.id);
-    const inactive = zone.style("display") === "none";
-    inactive ? zone.style("display", "block") : zone.style("display", "none");
-    el.classList.toggle("inactive");
+  function toggleVisibility(zone) {
+    const isHidden = Boolean(zone.hidden);
+    if (isHidden) delete zone.hidden;
+    else zone.hidden = true;
+
+    drawZones();
+    zonesEditorAddLines();
   }
 
-  function toggleFog(z, cl) {
-    const dataCells = zones.select("#" + z).attr("data-cells");
-    if (!dataCells) return;
-
-    const path =
-        "M" +
-        dataCells
-          .split(",")
-          .map(c => getPackPolygon(+c))
-          .join("M") +
-        "Z",
-      id = "focusZone" + z;
-    cl.contains("inactive") ? fog(id, path) : unfog(id);
+  function toggleFog(zone, cl) {
+    const inactive = cl.contains("inactive");
     cl.toggle("inactive");
+
+    if (inactive) {
+      const path = zones.select("#zone" + zone.i).attr("d");
+      fog("focusZone" + zone.i, path);
+    } else {
+      unfog("focusZone" + zone.i);
+    }
   }
 
   function toggleLegend() {
-    if (legend.selectAll("*").size()) {
-      clearLegend();
-      return;
-    } // hide legend
-    const data = [];
-
-    zones.selectAll("g").each(function () {
-      const id = this.dataset.id;
-      const description = this.dataset.description;
-      const fill = this.getAttribute("fill");
-      data.push([id, fill, description]);
-    });
+    if (legend.selectAll("*").size()) return clearLegend(); // hide legend
 
+    const filterBy = byId("zonesFilterType").value;
+    const isFiltered = filterBy && filterBy !== "all";
+    const visibleZones = pack.zones.filter(zone => !zone.hidden && (!isFiltered || zone.type === filterBy));
+    const data = visibleZones.map(({i, name, color}) => ["zone" + i, color, name]);
     drawLegend("Zones", data);
   }
 
@@ -380,8 +360,7 @@ function editZones() {
       body.querySelectorAll(":scope > div").forEach(function (el) {
         el.querySelector(".stateCells").innerHTML = rn((+el.dataset.cells / totalCells) * 100, 2) + "%";
         el.querySelector(".biomeArea").innerHTML = rn((+el.dataset.area / totalArea) * 100, 2) + "%";
-        el.querySelector(".culturePopulation").innerHTML =
-          rn((+el.dataset.population / totalPopulation) * 100, 2) + "%";
+        el.querySelector(".zonePopulation").innerHTML = rn((+el.dataset.population / totalPopulation) * 100, 2) + "%";
       });
     } else {
       body.dataset.type = "absolute";
@@ -390,28 +369,23 @@ function editZones() {
   }
 
   function addZonesLayer() {
-    const id = getNextId("zone");
-    const description = "Unknown zone";
+    const zoneId = pack.zones.length ? Math.max(...pack.zones.map(z => z.i)) + 1 : 0;
+    const name = "Unknown zone";
     const type = "Unknown";
-    const fill = "url(#hatch" + (id.slice(4) % 42) + ")";
-    zones
-      .append("g")
-      .attr("id", id)
-      .attr("data-description", description)
-      .attr("data-type", type)
-      .attr("data-cells", "")
-      .attr("fill", fill);
+    const color = "url(#hatch" + (zoneId % 42) + ")";
+    pack.zones.push({i: zoneId, name, type, color, cells: []});
 
     zonesEditorAddLines();
+    drawZones();
   }
 
   function downloadZonesData() {
     const unit = areaUnit.value === "square" ? distanceUnitInput.value + "2" : areaUnit.value;
-    let data = "Id,Fill,Description,Type,Cells,Area " + unit + ",Population\n"; // headers
+    let data = "Id,Color,Description,Type,Cells,Area " + unit + ",Population\n"; // headers
 
     body.querySelectorAll(":scope > div").forEach(function (el) {
       data += el.dataset.id + ",";
-      data += el.dataset.fill + ",";
+      data += el.dataset.color + ",";
       data += el.dataset.description + ",";
       data += el.dataset.type + ",";
       data += el.dataset.cells + ",";
@@ -423,27 +397,24 @@ function editZones() {
     downloadFile(data, name);
   }
 
-  function toggleEraseMode() {
-    this.classList.toggle("pressed");
+  function changeDescription(zone, value) {
+    zone.name = value;
+    zones.select("#zone" + zone.i).attr("data-description", value);
+  }
+
+  function changeType(zone, value) {
+    zone.type = value;
+    zones.select("#zone" + zone.i).attr("data-type", value);
   }
 
   function changePopulation(zone) {
-    const dataCells = zones.select("#" + zone).attr("data-cells");
-    const cells = dataCells
-      ? dataCells
-          .split(",")
-          .map(i => +i)
-          .filter(i => pack.cells.h[i] >= 20)
-      : [];
-    if (!cells.length) {
-      tip("Zone does not have any land cells, cannot change population", false, "error");
-      return;
-    }
-    const burgs = pack.burgs.filter(b => !b.removed && cells.includes(b.cell));
+    const landCells = zone.cells.filter(i => pack.cells.h[i] >= 20);
+    if (!landCells.length) return tip("Zone does not have any land cells, cannot change population", false, "error");
 
-    const rural = rn(d3.sum(cells.map(i => pack.cells.pop[i])) * populationRate);
+    const burgs = pack.burgs.filter(b => !b.removed && landCells.includes(b.cell));
+    const rural = rn(d3.sum(landCells.map(i => pack.cells.pop[i])) * populationRate);
     const urban = rn(
-      d3.sum(cells.map(i => pack.cells.burg[i]).map(b => pack.burgs[b].population)) * populationRate * urbanization
+      d3.sum(landCells.map(i => pack.cells.burg[i]).map(b => pack.burgs[b].population)) * populationRate * urbanization
     );
     const total = rural + urban;
     const l = n => Number(n).toLocaleString();
@@ -485,12 +456,12 @@ function editZones() {
     function applyPopulationChange() {
       const ruralChange = ruralPop.value / rural;
       if (isFinite(ruralChange) && ruralChange !== 1) {
-        cells.forEach(i => (pack.cells.pop[i] *= ruralChange));
+        landCells.forEach(i => (pack.cells.pop[i] *= ruralChange));
       }
       if (!isFinite(ruralChange) && +ruralPop.value > 0) {
         const points = ruralPop.value / populationRate;
-        const pop = rn(points / cells.length);
-        cells.forEach(i => (pack.cells.pop[i] = pop));
+        const pop = rn(points / landCells.length);
+        landCells.forEach(i => (pack.cells.pop[i] = pop));
       }
 
       const urbanChange = urbanPop.value / urban;
@@ -503,13 +474,22 @@ function editZones() {
         burgs.forEach(b => (b.population = population));
       }
 
+      if (layerIsOn("togglePopulation")) drawPopulation();
       zonesEditorAddLines();
     }
   }
 
   function zoneRemove(zone) {
-    zones.select("#" + zone).remove();
-    unfog("focusZone" + zone);
-    zonesEditorAddLines();
+    confirmationDialog({
+      title: "Remove zone",
+      message: "Are you sure you want to remove the zone? <br>This action cannot be reverted",
+      confirm: "Remove",
+      onConfirm: () => {
+        pack.zones = pack.zones.filter(z => z.i !== zone.i);
+        zones.select("#zone" + zone.i).remove();
+        unfog("focusZone" + zone.i);
+        zonesEditorAddLines();
+      }
+    });
   }
 }
diff --git a/modules/zones-generator.js b/modules/zones-generator.js
new file mode 100644
index 00000000..641a0784
--- /dev/null
+++ b/modules/zones-generator.js
@@ -0,0 +1,454 @@
+"use strict";
+
+window.Zones = (function () {
+  const config = {
+    invasion: {quantity: 2, generate: addInvasion}, // invasion of enemy lands
+    rebels: {quantity: 1.5, generate: addRebels}, // rebels along a state border
+    proselytism: {quantity: 1.6, generate: addProselytism}, // proselitism of organized religion
+    crusade: {quantity: 1.6, generate: addCrusade}, // crusade on heresy lands
+    disease: {quantity: 1.4, generate: addDisease}, // disease starting in a random city
+    disaster: {quantity: 1, generate: addDisaster}, // disaster starting in a random city
+    eruption: {quantity: 1, generate: addEruption}, // eruption aroung volcano
+    avalanche: {quantity: 0.8, generate: addAvalanche}, // avalanche impacting highland road
+    fault: {quantity: 1, generate: addFault}, // fault line in elevated areas
+    flood: {quantity: 1, generate: addFlood}, // flood on river banks
+    tsunami: {quantity: 1, generate: addTsunami} // tsunami starting near coast
+  };
+
+  const generate = function (globalModifier = 1) {
+    TIME && console.time("generateZones");
+
+    const usedCells = new Uint8Array(pack.cells.i.length);
+    pack.zones = [];
+
+    Object.values(config).forEach(type => {
+      const expectedNumber = type.quantity * globalModifier;
+      let number = gauss(expectedNumber, expectedNumber / 2, 0, 100);
+      while (number--) type.generate(usedCells);
+    });
+
+    TIME && console.timeEnd("generateZones");
+  };
+
+  function addInvasion(usedCells) {
+    const {cells, states} = pack;
+
+    const ongoingConflicts = states
+      .filter(s => s.i && !s.removed && s.campaigns)
+      .map(s => s.campaigns)
+      .flat()
+      .filter(c => !c.end);
+    if (!ongoingConflicts.length) return;
+    const {defender, attacker} = ra(ongoingConflicts);
+
+    const borderCells = cells.i.filter(cellId => {
+      if (usedCells[cellId]) return false;
+      if (cells.state[cellId] !== defender) return false;
+      return cells.c[cellId].some(c => cells.state[c] === attacker);
+    });
+
+    const startCell = ra(borderCells);
+    if (startCell === undefined) return;
+
+    const invasionCells = [];
+    const queue = [startCell];
+    const maxCells = rand(5, 30);
+
+    while (queue.length) {
+      const cellId = P(0.4) ? queue.shift() : queue.pop();
+      invasionCells.push(cellId);
+      if (invasionCells.length >= maxCells) break;
+
+      cells.c[cellId].forEach(neibCellId => {
+        if (usedCells[neibCellId]) return;
+        if (cells.state[neibCellId] !== defender) return;
+        usedCells[neibCellId] = 1;
+        queue.push(neibCellId);
+      });
+    }
+
+    const subtype = rw({
+      Invasion: 5,
+      Occupation: 4,
+      Conquest: 3,
+      Incursion: 2,
+      Intervention: 2,
+      Assault: 1,
+      Foray: 1,
+      Intrusion: 1,
+      Irruption: 1,
+      Offensive: 1,
+      Pillaging: 1,
+      Plunder: 1,
+      Raid: 1,
+      Skirmishes: 1
+    });
+    const name = getAdjective(states[attacker].name) + " " + subtype;
+
+    pack.zones.push({i: pack.zones.length, name, type: "Invasion", cells: invasionCells, color: "url(#hatch1)"});
+  }
+
+  function addRebels(usedCells) {
+    const {cells, states} = pack;
+
+    const state = ra(states.filter(s => s.i && !s.removed && s.neighbors.some(Boolean)));
+    if (!state) return;
+
+    const neibStateId = ra(state.neighbors.filter(n => n && !states[n].removed));
+    if (!neibStateId) return;
+
+    const cellsArray = [];
+    const queue = [];
+    const borderCellId = cells.i.find(
+      i => cells.state[i] === state.i && cells.c[i].some(c => cells.state[c] === neibStateId)
+    );
+    if (borderCellId) queue.push(borderCellId);
+    const maxCells = rand(10, 30);
+
+    while (queue.length) {
+      const cellId = queue.shift();
+      cellsArray.push(cellId);
+      if (cellsArray.length >= maxCells) break;
+
+      cells.c[cellId].forEach(neibCellId => {
+        if (usedCells[neibCellId]) return;
+        if (cells.state[neibCellId] !== state.i) return;
+        usedCells[neibCellId] = 1;
+        if (neibCellId % 4 !== 0 && !cells.c[neibCellId].some(c => cells.state[c] === neibStateId)) return;
+        queue.push(neibCellId);
+      });
+    }
+
+    const rebels = rw({
+      Rebels: 5,
+      Insurrection: 2,
+      Mutineers: 1,
+      Insurgents: 1,
+      Rebellion: 1,
+      Renegades: 1,
+      Revolters: 1,
+      Revolutionaries: 1,
+      Rioters: 1,
+      Separatists: 1,
+      Secessionists: 1,
+      Conspiracy: 1
+    });
+
+    const name = getAdjective(states[neibStateId].name) + " " + rebels;
+    pack.zones.push({i: pack.zones.length, name, type: "Rebels", cells: cellsArray, color: "url(#hatch3)"});
+  }
+
+  function addProselytism(usedCells) {
+    const {cells, religions} = pack;
+
+    const organizedReligions = religions.filter(r => r.i && !r.removed && r.type === "Organized");
+    const religion = ra(organizedReligions);
+    if (!religion) return;
+
+    const targetBorderCells = cells.i.filter(
+      i =>
+        cells.h[i] < 20 &&
+        cells.pop[i] &&
+        cells.religion[i] !== religion.i &&
+        cells.c[i].some(c => cells.religion[c] === religion.i)
+    );
+    const startCell = ra(targetBorderCells);
+    if (!startCell) return;
+
+    const targetReligionId = cells.religion[startCell];
+    const proselytismCells = [];
+    const queue = [startCell];
+    const maxCells = rand(10, 30);
+
+    while (queue.length) {
+      const cellId = queue.shift();
+      proselytismCells.push(cellId);
+      if (proselytismCells.length >= maxCells) break;
+
+      cells.c[cellId].forEach(neibCellId => {
+        if (usedCells[neibCellId]) return;
+        if (cells.religion[neibCellId] !== targetReligionId) return;
+        if (cells.h[neibCellId] < 20 || !cells.pop[i]) return;
+        usedCells[neibCellId] = 1;
+        queue.push(neibCellId);
+      });
+    }
+
+    const name = `${getAdjective(religion.name.split(" ")[0])} Proselytism`;
+    pack.zones.push({i: pack.zones.length, name, type: "Proselytism", cells: proselytismCells, color: "url(#hatch6)"});
+  }
+
+  function addCrusade(usedCells) {
+    const {cells, religions} = pack;
+
+    const heresies = religions.filter(r => !r.removed && r.type === "Heresy");
+    if (!heresies.length) return;
+
+    const heresy = ra(heresies);
+    const crusadeCells = cells.i.filter(i => !usedCells[i] && cells.religion[i] === heresy.i);
+    if (!crusadeCells.length) return;
+    crusadeCells.forEach(i => (usedCells[i] = 1));
+
+    const name = getAdjective(heresy.name.split(" ")[0]) + " Crusade";
+    pack.zones.push({
+      i: pack.zones.length,
+      name,
+      type: "Crusade",
+      cells: Array.from(crusadeCells),
+      color: "url(#hatch6)"
+    });
+  }
+
+  function addDisease(usedCells) {
+    const {cells, burgs} = pack;
+
+    const burg = ra(burgs.filter(b => !usedCells[b.cell] && b.i && !b.removed)); // random burg
+    if (!burg) return;
+
+    const cellsArray = [];
+    const cost = [];
+    const maxCells = rand(20, 40);
+
+    const queue = new FlatQueue();
+    queue.push({e: burg.cell, p: 0}, 0);
+
+    while (queue.length) {
+      const next = queue.pop();
+      if (cells.burg[next.e] || cells.pop[next.e]) cellsArray.push(next.e);
+      usedCells[next.e] = 1;
+
+      cells.c[next.e].forEach(nextCellId => {
+        const c = Routes.getRoute(next.e, nextCellId) ? 5 : 100;
+        const p = next.p + c;
+        if (p > maxCells) return;
+
+        if (!cost[nextCellId] || p < cost[nextCellId]) {
+          cost[nextCellId] = p;
+          queue.push({e: nextCellId, p}, p);
+        }
+      });
+    }
+
+    // prettier-ignore
+    const name = `${(() => {
+      const model = rw({color: 2, animal: 1, adjective: 1});
+      if (model === "color") return ra(["Amber", "Azure", "Black", "Blue", "Brown", "Crimson", "Emerald", "Golden", "Green", "Grey", "Orange", "Pink", "Purple", "Red", "Ruby", "Scarlet", "Silver", "Violet", "White", "Yellow"]);
+      if (model === "animal") return ra(["Ape", "Bear", "Bird", "Boar", "Cat", "Cow", "Deer", "Dog", "Fox", "Goat", "Horse", "Lion", "Pig", "Rat", "Raven", "Sheep", "Spider", "Tiger", "Viper", "Wolf", "Worm", "Wyrm"]);
+      if (model === "adjective") return ra(["Blind", "Bloody", "Brutal", "Burning", "Deadly", "Fatal", "Furious", "Great", "Grim", "Horrible", "Invisible", "Lethal", "Loud", "Mortal", "Savage", "Severe", "Silent", "Unknown", "Venomous", "Vicious"]);
+    })()} ${rw({Fever: 5, Plague: 3, Cough: 3, Flu: 2, Pox: 2, Cholera: 2, Typhoid: 2, Leprosy: 1, Smallpox: 1, Pestilence: 1, Consumption: 1, Malaria: 1, Dropsy: 1})}`;
+
+    pack.zones.push({i: pack.zones.length, name, type: "Disease", cells: cellsArray, color: "url(#hatch12)"});
+  }
+
+  function addDisaster(usedCells) {
+    const {cells, burgs} = pack;
+
+    const burg = ra(burgs.filter(b => !usedCells[b.cell] && b.i && !b.removed));
+    if (!burg) return;
+    usedCells[burg.cell] = 1;
+
+    const cellsArray = [];
+    const cost = [];
+    const maxCells = rand(5, 25);
+
+    const queue = new FlatQueue();
+    queue.push({e: burg.cell, p: 0}, 0);
+
+    while (queue.length) {
+      const next = queue.pop();
+      if (cells.burg[next.e] || cells.pop[next.e]) cellsArray.push(next.e);
+      usedCells[next.e] = 1;
+
+      cells.c[next.e].forEach(function (e) {
+        const c = rand(1, 10);
+        const p = next.p + c;
+        if (p > maxCells) return;
+
+        if (!cost[e] || p < cost[e]) {
+          cost[e] = p;
+          queue.push({e, p}, p);
+        }
+      });
+    }
+
+    const type = rw({
+      Famine: 5,
+      Drought: 3,
+      Earthquake: 3,
+      Dearth: 1,
+      Tornadoes: 1,
+      Wildfires: 1,
+      Storms: 1,
+      Blight: 1
+    });
+    const name = getAdjective(burg.name) + " " + type;
+    pack.zones.push({i: pack.zones.length, name, type: "Disaster", cells: cellsArray, color: "url(#hatch5)"});
+  }
+
+  function addEruption(usedCells) {
+    const {cells, markers} = pack;
+
+    const volcanoe = markers.find(m => m.type === "volcanoes" && !usedCells[m.cell]);
+    if (!volcanoe) return;
+    usedCells[volcanoe.cell] = 1;
+
+    const note = notes.find(n => n.id === "marker" + volcanoe.i);
+    if (note) note.legend = note.legend.replace("Active volcano", "Erupting volcano");
+    const name = note ? note.name.replace(" Volcano", "") + " Eruption" : "Volcano Eruption";
+
+    const cellsArray = [];
+    const queue = [volcanoe.cell];
+    const maxCells = rand(10, 30);
+
+    while (queue.length) {
+      const cellId = P(0.5) ? queue.shift() : queue.pop();
+      cellsArray.push(cellId);
+      if (cellsArray.length >= maxCells) break;
+
+      cells.c[cellId].forEach(neibCellId => {
+        if (usedCells[neibCellId] || cells.h[neibCellId] < 20) return;
+        usedCells[neibCellId] = 1;
+        queue.push(neibCellId);
+      });
+    }
+
+    pack.zones.push({i: pack.zones.length, name, type: "Eruption", cells: cellsArray, color: "url(#hatch7)"});
+  }
+
+  function addAvalanche(usedCells) {
+    const {cells} = pack;
+
+    const routeCells = cells.i.filter(i => !usedCells[i] && Routes.isConnected(i) && cells.h[i] >= 70);
+    if (!routeCells.length) return;
+
+    const startCell = ra(routeCells);
+    usedCells[startCell] = 1;
+
+    const cellsArray = [];
+    const queue = [startCell];
+    const maxCells = rand(3, 15);
+
+    while (queue.length) {
+      const cellId = P(0.3) ? queue.shift() : queue.pop();
+      cellsArray.push(cellId);
+      if (cellsArray.length >= maxCells) break;
+
+      cells.c[cellId].forEach(neibCellId => {
+        if (usedCells[neibCellId] || cells.h[neibCellId] < 65) return;
+        usedCells[neibCellId] = 1;
+        queue.push(neibCellId);
+      });
+    }
+
+    const name = getAdjective(Names.getCultureShort(cells.culture[startCell])) + " Avalanche";
+    pack.zones.push({i: pack.zones.length, name, type: "Avalanche", cells: cellsArray, color: "url(#hatch5)"});
+  }
+
+  function addFault(usedCells) {
+    const cells = pack.cells;
+
+    const elevatedCells = cells.i.filter(i => !usedCells[i] && cells.h[i] > 50 && cells.h[i] < 70);
+    if (!elevatedCells.length) return;
+
+    const startCell = ra(elevatedCells);
+    usedCells[startCell] = 1;
+
+    const cellsArray = [];
+    const queue = [startCell];
+    const maxCells = rand(3, 15);
+
+    while (queue.length) {
+      const cellId = queue.pop();
+      if (cells.h[cellId] >= 20) cellsArray.push(cellId);
+      if (cellsArray.length >= maxCells) break;
+
+      cells.c[cellId].forEach(neibCellId => {
+        if (usedCells[neibCellId] || cells.r[neibCellId]) return;
+        usedCells[neibCellId] = 1;
+        queue.push(neibCellId);
+      });
+    }
+
+    const name = getAdjective(Names.getCultureShort(cells.culture[startCell])) + " Fault";
+    pack.zones.push({i: pack.zones.length, name, type: "Fault", cells: cellsArray, color: "url(#hatch2)"});
+  }
+
+  function addFlood(usedCells) {
+    const cells = pack.cells;
+
+    const fl = cells.fl.filter(Boolean);
+    const meanFlux = d3.mean(fl);
+    const maxFlux = d3.max(fl);
+    const fluxThreshold = (maxFlux - meanFlux) / 2 + meanFlux;
+
+    const bigRiverCells = cells.i.filter(
+      i => !usedCells[i] && cells.h[i] < 50 && cells.r[i] && cells.fl[i] > fluxThreshold && cells.burg[i]
+    );
+    if (!bigRiverCells.length) return;
+
+    const startCell = ra(bigRiverCells);
+    usedCells[startCell] = 1;
+
+    const riverId = cells.r[startCell];
+    const cellsArray = [];
+    const queue = [startCell];
+    const maxCells = rand(5, 30);
+
+    while (queue.length) {
+      const cellId = queue.pop();
+      cellsArray.push(cellId);
+      if (cellsArray.length >= maxCells) break;
+
+      cells.c[cellId].forEach(neibCellId => {
+        if (
+          usedCells[neibCellId] ||
+          cells.h[neibCellId] < 20 ||
+          cells.r[neibCellId] !== riverId ||
+          cells.h[neibCellId] > 50 ||
+          cells.fl[neibCellId] < meanFlux
+        )
+          return;
+        usedCells[neibCellId] = 1;
+        queue.push(neibCellId);
+      });
+    }
+
+    const name = getAdjective(pack.burgs[cells.burg[startCell]].name) + " Flood";
+    pack.zones.push({i: pack.zones.length, name, type: "Flood", cells: cellsArray, color: "url(#hatch13)"});
+  }
+
+  function addTsunami(usedCells) {
+    const {cells, features} = pack;
+
+    const coastalCells = cells.i.filter(
+      i => !usedCells[i] && cells.t[i] === -1 && features[cells.f[i]].type !== "lake"
+    );
+    if (!coastalCells.length) return;
+
+    const startCell = ra(coastalCells);
+    usedCells[startCell] = 1;
+
+    const cellsArray = [];
+    const queue = [startCell];
+    const maxCells = rand(10, 30);
+
+    while (queue.length) {
+      const cellId = queue.shift();
+      if (cells.t[cellId] === 1) cellsArray.push(cellId);
+      if (cellsArray.length >= maxCells) break;
+
+      cells.c[cellId].forEach(neibCellId => {
+        if (usedCells[neibCellId]) return;
+        if (cells.t[neibCellId] > 2) return;
+        if (pack.features[cells.f[neibCellId]].type === "lake") return;
+        usedCells[neibCellId] = 1;
+        queue.push(neibCellId);
+      });
+    }
+
+    const name = getAdjective(Names.getCultureShort(cells.culture[startCell])) + " Tsunami";
+    pack.zones.push({i: pack.zones.length, name, type: "Tsunami", cells: cellsArray, color: "url(#hatch13)"});
+  }
+
+  return {generate};
+})();
diff --git a/run_python_server.sh b/run_python_server.sh
new file mode 100644
index 00000000..7ac82957
--- /dev/null
+++ b/run_python_server.sh
@@ -0,0 +1,13 @@
+#!/usr/bin/env sh
+if command -v python3 >/dev/null 2>&1; then
+	PYTHON=python3
+elif command -v python >/dev/null 2>&1; then
+	PYTHON=python
+else 
+	echo "Neither 'python' nor 'python3' was found. Please install Python 3 package." >&2
+	exit 1
+fi
+
+chromium http://localhost:8000
+
+$PYTHON -m http.server 8000
diff --git a/styles/ancient.json b/styles/ancient.json
index 17d210a5..d57aa524 100644
--- a/styles/ancient.json
+++ b/styles/ancient.json
@@ -258,6 +258,15 @@
     "stroke-width": 0.8,
     "filter": "url(#dropShadow05)"
   },
+  "#emblems > #stateEmblems": {
+    "data-size": 1
+  },
+  "#emblems > #provinceEmblems": {
+    "data-size": 1
+  },
+  "#emblems > #burgEmblems": {
+    "data-size": 1
+  },
   "#texture": {
     "opacity": 0.6,
     "filter": "",
@@ -323,6 +332,7 @@
     "opacity": 1,
     "fill": "#3e3e4b",
     "text-shadow": "white 0px 0px 4px",
+    "letter-spacing": 0,
     "data-size": 12,
     "font-size": 12,
     "font-family": "Great Vibes"
@@ -348,6 +358,7 @@
     "opacity": 1,
     "fill": "#3e3e4b",
     "text-shadow": "white 0px 0px 4px",
+    "letter-spacing": 0,
     "data-size": 5,
     "font-size": 5,
     "font-family": "Great Vibes"
@@ -375,6 +386,7 @@
     "stroke": "#3a3a3a",
     "stroke-width": 0,
     "text-shadow": "white 0px 0px 4px",
+    "letter-spacing": 0,
     "data-size": 22,
     "font-size": 22,
     "font-family": "Great Vibes",
@@ -386,6 +398,7 @@
     "stroke": "#3a3a3a",
     "stroke-width": 0,
     "text-shadow": "white 0px 0px 4px",
+    "letter-spacing": 0,
     "data-size": 18,
     "font-size": 18,
     "font-family": "Times New Roman",
diff --git a/styles/atlas.json b/styles/atlas.json
index d8936b65..ef7d7f8a 100644
--- a/styles/atlas.json
+++ b/styles/atlas.json
@@ -258,6 +258,15 @@
     "stroke-width": 1,
     "filter": null
   },
+  "#emblems > #stateEmblems": {
+    "data-size": 1
+  },
+  "#emblems > #provinceEmblems": {
+    "data-size": 1
+  },
+  "#emblems > #burgEmblems": {
+    "data-size": 1
+  },
   "#texture": {
     "opacity": 0.2,
     "filter": null,
@@ -323,6 +332,7 @@
     "opacity": 1,
     "fill": "#000000",
     "text-shadow": "white 0px 0px 4px",
+    "letter-spacing": 0,
     "data-size": 5,
     "font-size": 5,
     "font-family": "Amarante"
@@ -348,6 +358,7 @@
     "opacity": 1,
     "fill": "#000000",
     "text-shadow": "white 0px 0px 4px",
+    "letter-spacing": 0,
     "data-size": 4,
     "font-size": 4,
     "font-family": "Amarante"
@@ -375,6 +386,7 @@
     "stroke": "#000000",
     "stroke-width": 0,
     "text-shadow": "white 0px 0px 4px",
+    "letter-spacing": 0,
     "data-size": 21,
     "font-size": 21,
     "font-family": "Amarante",
@@ -386,6 +398,7 @@
     "stroke": "#000000",
     "stroke-width": 0,
     "text-shadow": "white 0px 0px 4px",
+    "letter-spacing": 0,
     "data-size": 18,
     "font-size": 18,
     "font-family": "Amarante",
diff --git a/styles/clean.json b/styles/clean.json
index ba6fc3a5..c5aad094 100644
--- a/styles/clean.json
+++ b/styles/clean.json
@@ -260,6 +260,15 @@
     "stroke-width": 1,
     "filter": null
   },
+  "#emblems > #stateEmblems": {
+    "data-size": 1
+  },
+  "#emblems > #provinceEmblems": {
+    "data-size": 1
+  },
+  "#emblems > #burgEmblems": {
+    "data-size": 1
+  },
   "#texture": {
     "opacity": 0.2,
     "filter": null,
@@ -310,22 +319,22 @@
     "mask": "url(#land)"
   },
   "#legend": {
-    "data-size": 12.74,
-    "font-size": 12.74,
+    "data-size": 12,
+    "font-size": 12,
     "font-family": "Arial",
     "stroke": "#909090",
-    "stroke-width": 1.13,
+    "stroke-width": 1,
     "stroke-dasharray": 0,
     "stroke-linecap": "round",
-    "data-x": 98.39,
-    "data-y": 12.67,
-    "data-columns": null
+    "data-x": 99,
+    "data-y": 93,
+    "data-columns": 8
   },
-  "#legendBox": {},
   "#burgLabels > #cities": {
     "opacity": 1,
     "fill": "#414141",
     "text-shadow": "white 0 0 4px",
+    "letter-spacing": 0,
     "data-size": 7,
     "font-size": 7,
     "font-family": "Arial"
@@ -350,6 +359,8 @@
   "#burgLabels > #towns": {
     "opacity": 1,
     "fill": "#414141",
+    "text-shadow": "none",
+    "letter-spacing": 0,
     "data-size": 3,
     "font-size": 3,
     "font-family": "Arial"
@@ -377,6 +388,7 @@
     "stroke": "#303030",
     "stroke-width": 0,
     "text-shadow": "white 0 0 2px",
+    "letter-spacing": 0,
     "data-size": 10,
     "font-size": 10,
     "font-family": "Arial",
@@ -388,6 +400,7 @@
     "stroke": "#3a3a3a",
     "stroke-width": 0,
     "text-shadow": "white 0 0 4px",
+    "letter-spacing": 0,
     "data-size": 18,
     "font-size": 18,
     "font-family": "Arial",
diff --git a/styles/cyberpunk.json b/styles/cyberpunk.json
index 152cd0cd..93f22284 100644
--- a/styles/cyberpunk.json
+++ b/styles/cyberpunk.json
@@ -256,7 +256,16 @@
   "#emblems": {
     "opacity": 0.75,
     "stroke-width": 0.5,
-    "filter": ""
+    "filter": null
+  },
+  "#emblems > #stateEmblems": {
+    "data-size": 1
+  },
+  "#emblems > #provinceEmblems": {
+    "data-size": 1
+  },
+  "#emblems > #burgEmblems": {
+    "data-size": 1
   },
   "#texture": {
     "opacity": 0.2,
@@ -323,6 +332,7 @@
     "opacity": 1,
     "fill": "#ffffff",
     "text-shadow": "white 0px 0px 4px",
+    "letter-spacing": 0,
     "data-size": 8,
     "font-size": 8,
     "font-family": "Orbitron"
@@ -348,6 +358,7 @@
     "opacity": 1,
     "fill": "#ffffff",
     "text-shadow": "white 0px 0px 4px",
+    "letter-spacing": 0,
     "data-size": 3,
     "font-size": 3,
     "font-family": "Orbitron"
@@ -375,6 +386,7 @@
     "stroke": "#000000",
     "stroke-width": 0,
     "text-shadow": "white 0px 0px 4px",
+    "letter-spacing": 0,
     "data-size": 18,
     "font-size": 18,
     "font-family": "Orbitron",
@@ -386,6 +398,7 @@
     "stroke": "#000000",
     "stroke-width": 0,
     "text-shadow": "white 0px 0px 4px",
+    "letter-spacing": 0,
     "data-size": 18,
     "font-size": 18,
     "font-family": "Almendra SC",
diff --git a/styles/darkSeas.json b/styles/darkSeas.json
new file mode 100644
index 00000000..2bc90fa6
--- /dev/null
+++ b/styles/darkSeas.json
@@ -0,0 +1,433 @@
+{
+  "#map": {
+    "background-color": "#000000",
+    "filter": null,
+    "data-filter": null
+  },
+  "#armies": {
+    "font-size": 8,
+    "box-size": 4,
+    "stroke": "#000",
+    "stroke-width": 0.3,
+    "fill-opacity": 1,
+    "filter": null
+  },
+  "#biomes": {
+    "opacity": 1,
+    "filter": null,
+    "mask": "url(#land)"
+  },
+  "#stateBorders": {
+    "opacity": 1,
+    "stroke": "#000000",
+    "stroke-width": 1.25,
+    "stroke-dasharray": 0,
+    "stroke-linecap": "butt",
+    "filter": null
+  },
+  "#provinceBorders": {
+    "opacity": 0.8,
+    "stroke": "#000000",
+    "stroke-width": 0.5,
+    "stroke-dasharray": 0,
+    "stroke-linecap": "round",
+    "filter": "url(#blurFilter)"
+  },
+  "#cells": {
+    "opacity": null,
+    "stroke": "#808080",
+    "stroke-width": 0.1,
+    "filter": null,
+    "mask": null
+  },
+  "#gridOverlay": {
+    "opacity": 1,
+    "scale": 7.99,
+    "dx": -2,
+    "dy": 3,
+    "type": "square",
+    "stroke": "#000000",
+    "stroke-width": 0.05,
+    "stroke-dasharray": null,
+    "stroke-linecap": null,
+    "transform": null,
+    "filter": null,
+    "mask": null
+  },
+  "#coordinates": {
+    "opacity": 1,
+    "data-size": 12,
+    "font-size": 12,
+    "stroke": "#d4d4d4",
+    "stroke-width": 1,
+    "stroke-dasharray": 5,
+    "stroke-linecap": null,
+    "filter": null,
+    "mask": null
+  },
+  "#compass": {
+    "opacity": 0.8,
+    "transform": null,
+    "filter": null,
+    "mask": "url(#water)",
+    "shape-rendering": "optimizespeed"
+  },
+  "#relig": {
+    "opacity": 0.7,
+    "stroke": "#777777",
+    "stroke-width": 0,
+    "filter": null
+  },
+  "#cults": {
+    "opacity": 0.6,
+    "stroke": "#777777",
+    "stroke-width": 0.5,
+    "stroke-dasharray": null,
+    "stroke-linecap": null,
+    "filter": null
+  },
+  "#landmass": {
+    "opacity": 1,
+    "fill": "#eef6fb",
+    "filter": null
+  },
+  "#markers": {
+    "opacity": null,
+    "rescale": 1,
+    "filter": null
+  },
+  "#prec": {
+    "opacity": null,
+    "stroke": "#000000",
+    "stroke-width": 0.1,
+    "fill": "#003dff",
+    "filter": null
+  },
+  "#population": {
+    "opacity": null,
+    "stroke-width": 1.6,
+    "stroke-dasharray": null,
+    "stroke-linecap": "butt",
+    "filter": null
+  },
+  "#rural": {
+    "stroke": "#0000ff"
+  },
+  "#urban": {
+    "stroke": "#ff0000"
+  },
+  "#freshwater": {
+    "opacity": 1,
+    "fill": "#337379",
+    "stroke": "#236369",
+    "stroke-width": 1,
+    "filter": null
+  },
+  "#salt": {
+    "opacity": 1,
+    "fill": "#409b8a",
+    "stroke": "#388985",
+    "stroke-width": 1,
+    "filter": null
+  },
+  "#sinkhole": {
+    "opacity": 1,
+    "fill": "#5bc9fd",
+    "stroke": "#53a3b0",
+    "stroke-width": 1,
+    "filter": null
+  },
+  "#frozen": {
+    "opacity": 0.95,
+    "fill": "#cdd4e7",
+    "stroke": "#cfe0eb",
+    "stroke-width": 0,
+    "filter": null
+  },
+  "#lava": {
+    "opacity": 0.7,
+    "fill": "#90270d",
+    "stroke": "#f93e0c",
+    "stroke-width": 2,
+    "filter": "url(#crumpled)"
+  },
+  "#dry": {
+    "opacity": 1,
+    "fill": "#c9bfa7",
+    "stroke": "#8e816f",
+    "stroke-width": 1,
+    "filter": null
+  },
+  "#sea_island": {
+    "opacity": 1,
+    "stroke": "#028ac9",
+    "stroke-width": 1,
+    "filter": "",
+    "auto-filter": 0
+  },
+  "#lake_island": {
+    "opacity": 1,
+    "stroke": "#7c8eaf",
+    "stroke-width": 0.35,
+    "filter": null
+  },
+  "#rivers": {
+    "opacity": null,
+    "filter": null,
+    "fill": "#00254c"
+  },
+  "#ruler": {
+    "opacity": null,
+    "filter": null
+  },
+  "#roads": {
+    "opacity": 1,
+    "stroke": "#ff6000",
+    "stroke-width": 1.75,
+    "stroke-dasharray": 0,
+    "stroke-linecap": "butt",
+    "filter": null,
+    "mask": null
+  },
+  "#trails": {
+    "opacity": 1,
+    "stroke": "#ff6000",
+    "stroke-width": 1,
+    "stroke-dasharray": 0,
+    "stroke-linecap": "butt",
+    "filter": null,
+    "mask": null
+  },
+  "#searoutes": {
+    "opacity": 1,
+    "stroke": "#00aeff",
+    "stroke-width": 1,
+    "stroke-dasharray": "2 2",
+    "stroke-linecap": "butt",
+    "filter": null,
+    "mask": null
+  },
+  "#statesBody": {
+    "opacity": 0.5,
+    "filter": null
+  },
+  "#statesHalo": {
+    "opacity": 0,
+    "data-width": 0,
+    "stroke-width": 0,
+    "filter": null
+  },
+  "#provs": {
+    "opacity": 1,
+    "fill": "#000000",
+    "font-size": 10,
+    "font-family": "Georgia",
+    "filter": null
+  },
+  "#temperature": {
+    "opacity": null,
+    "font-size": "8px",
+    "fill": "#000000",
+    "fill-opacity": 0.3,
+    "stroke": null,
+    "stroke-width": 1.8,
+    "stroke-dasharray": null,
+    "stroke-linecap": null,
+    "filter": null
+  },
+  "#ice": {
+    "opacity": 0.8,
+    "fill": "#e8f0f6",
+    "stroke": "#e8f0f6",
+    "stroke-width": 1,
+    "filter": "url(#dropShadow05)"
+  },
+  "#emblems": {
+    "opacity": 1,
+    "stroke-width": 1,
+    "filter": null
+  },
+  "#emblems > #stateEmblems": {
+    "data-size": 1
+  },
+  "#emblems > #provinceEmblems": {
+    "data-size": 1
+  },
+  "#emblems > #burgEmblems": {
+    "data-size": 1
+  },
+  "#texture": {
+    "opacity": 0.2,
+    "filter": null,
+    "mask": "url(#land)",
+    "data-x": 0,
+    "data-y": 0,
+    "data-href": "./images/textures/plaster.jpg"
+  },
+  "#zones": {
+    "opacity": 0.6,
+    "stroke": "#333333",
+    "stroke-width": 0,
+    "stroke-dasharray": null,
+    "stroke-linecap": "butt",
+    "filter": null,
+    "mask": null
+  },
+  "#oceanLayers": {
+    "filter": "",
+    "layers": "none"
+  },
+  "#oceanBase": {
+    "fill": "#00254d"
+  },
+  "#oceanicPattern": {
+    "href": "",
+    "opacity": 1
+  },
+  "#terrs #oceanHeights": {
+    "data-render": 0,
+    "opacity": 1,
+    "scheme": "bright",
+    "terracing": 0,
+    "skip": 0,
+    "relax": 1,
+    "curve": "curveBasisClosed",
+    "filter": null,
+    "mask": null
+  },
+  "#terrs #landHeights": {
+    "opacity": 1,
+    "scheme": "natural",
+    "terracing": 5,
+    "skip": 0,
+    "relax": 1,
+    "curve": "curveBasisClosed",
+    "filter": null,
+    "mask": "url(#land)"
+  },
+  "#legend": {
+    "data-size": 13,
+    "font-size": 13,
+    "font-family": "Georgia",
+    "stroke": "#812929",
+    "stroke-width": 2.5,
+    "stroke-dasharray": "0 4 10 4",
+    "stroke-linecap": "round",
+    "data-x": 99,
+    "data-y": 93,
+    "data-columns": 8
+  },
+  "#burgLabels > #cities": {
+    "opacity": 1,
+    "fill": "#000000",
+    "text-shadow": "white 0px 0px 4px",
+    "letter-spacing": 0,
+    "data-size": 7,
+    "font-size": 7,
+    "font-family": "Lugrasimo"
+  },
+  "#burgIcons > #cities": {
+    "opacity": 0.7,
+    "fill": "#000000",
+    "size": 1.75,
+    "stroke": "#000000",
+    "stroke-width": 0,
+    "stroke-dasharray": 0,
+    "stroke-linecap": "butt"
+  },
+  "#anchors > #cities": {
+    "opacity": 1,
+    "fill": "#ffffff",
+    "size": 3.5,
+    "stroke": "#3e3e4b",
+    "stroke-width": 1.2
+  },
+  "#burgLabels > #towns": {
+    "opacity": 1,
+    "fill": "#000000",
+    "text-shadow": "white 0px 0px 4px",
+    "letter-spacing": 0,
+    "data-size": 5,
+    "font-size": 5,
+    "font-family": "Lugrasimo"
+  },
+  "#burgIcons > #towns": {
+    "opacity": 0.7,
+    "fill": "#000000",
+    "size": 1.25,
+    "stroke": "#000000",
+    "stroke-width": 0,
+    "stroke-dasharray": 0,
+    "stroke-linecap": "butt"
+  },
+  "#anchors > #towns": {
+    "opacity": 1,
+    "fill": "#ffffff",
+    "size": 2,
+    "stroke": "#3e3e4b",
+    "stroke-width": 1.2
+  },
+  "#labels > #states": {
+    "opacity": 1,
+    "fill": "#000000",
+    "stroke": "#000000",
+    "stroke-width": 0,
+    "text-shadow": "white 0px 0px 4px",
+    "letter-spacing": 0,
+    "data-size": 21,
+    "font-size": 21,
+    "font-family": "Eagle Lake",
+    "filter": null
+  },
+  "#labels > #addedLabels": {
+    "opacity": 1,
+    "fill": "#000000",
+    "stroke": "#000000",
+    "stroke-width": 0,
+    "text-shadow": "white 0px 0px 4px",
+    "letter-spacing": 0,
+    "data-size": 18,
+    "font-size": 18,
+    "font-family": "Eagle Lake",
+    "filter": null
+  },
+  "#fogging": {
+    "opacity": 0.98,
+    "fill": "#30426f",
+    "filter": null
+  },
+  "#vignette": {
+    "opacity": 0.2,
+    "fill": "#000000",
+    "filter": null
+  },
+  "#vignette-rect": {
+    "x": "0.2%",
+    "y": "0.3%",
+    "width": "99.8%",
+    "height": "99.4%",
+    "rx": "5%",
+    "ry": "5%",
+    "filter": "blur(30px)"
+  },
+  "#scaleBar": {
+    "opacity": 1,
+    "fill": "#f6f6f6",
+    "font-size": 10,
+    "data-bar-size": 2,
+    "data-x": 99,
+    "data-y": 99,
+    "data-label": ""
+  },
+  "#scaleBarBack": {
+    "opacity": 1,
+    "fill": "#00254d",
+    "stroke": "#00151d",
+    "stroke-width": 2,
+    "filter": null,
+    "data-top": 20,
+    "data-right": 15,
+    "data-bottom": 15,
+    "data-left": 10
+  }
+}
diff --git a/styles/default.json b/styles/default.json
index 5cf061ba..23b06487 100644
--- a/styles/default.json
+++ b/styles/default.json
@@ -248,16 +248,25 @@
   },
   "#ice": {
     "opacity": 0.9,
-    "fill": "#e8f0f6",
+    "fill": "#f1f8fe",
     "stroke": "#e8f0f6",
-    "stroke-width": 1,
-    "filter": "url(#dropShadow05)"
+    "stroke-width": 0.5,
+    "filter": "url(#dropShadow01)"
   },
   "#emblems": {
     "opacity": 0.9,
     "stroke-width": 1,
     "filter": null
   },
+  "#emblems > #stateEmblems": {
+    "data-size": 1
+  },
+  "#emblems > #provinceEmblems": {
+    "data-size": 1
+  },
+  "#emblems > #burgEmblems": {
+    "data-size": 1
+  },
   "#texture": {
     "opacity": null,
     "filter": null,
@@ -323,6 +332,7 @@
     "opacity": 1,
     "fill": "#3e3e4b",
     "text-shadow": "white 0px 0px 4px",
+    "letter-spacing": 0,
     "data-size": 7,
     "font-size": 7,
     "font-family": "Almendra SC"
@@ -348,6 +358,7 @@
     "opacity": 1,
     "fill": "#3e3e4b",
     "text-shadow": "white 0px 0px 4px",
+    "letter-spacing": 0,
     "data-size": 4,
     "font-size": 4,
     "font-family": "Almendra SC"
@@ -375,6 +386,7 @@
     "stroke": "#3a3a3a",
     "stroke-width": 0,
     "text-shadow": "white 0px 0px 4px",
+    "letter-spacing": 0,
     "data-size": 22,
     "font-size": 22,
     "font-family": "Almendra SC",
@@ -386,6 +398,7 @@
     "stroke": "#3a3a3a",
     "stroke-width": 0,
     "text-shadow": "white 0px 0px 4px",
+    "letter-spacing": 0,
     "data-size": 18,
     "font-size": 18,
     "font-family": "Almendra SC",
diff --git a/styles/gloom.json b/styles/gloom.json
index 766db87b..19318882 100644
--- a/styles/gloom.json
+++ b/styles/gloom.json
@@ -260,6 +260,15 @@
     "stroke-width": 0.5,
     "filter": null
   },
+  "#emblems > #stateEmblems": {
+    "data-size": 1
+  },
+  "#emblems > #provinceEmblems": {
+    "data-size": 1
+  },
+  "#emblems > #burgEmblems": {
+    "data-size": 1
+  },
   "#texture": {
     "opacity": 0.8,
     "filter": null,
@@ -326,6 +335,7 @@
     "opacity": 1,
     "fill": "#3e3e4b",
     "text-shadow": "white 0 0 2px",
+    "letter-spacing": 0,
     "data-size": 8,
     "font-size": 8,
     "font-family": "Underdog"
@@ -350,6 +360,8 @@
   "#burgLabels > #towns": {
     "opacity": 1,
     "fill": "#3e3e4b",
+    "text-shadow": "none",
+    "letter-spacing": 0,
     "data-size": 4,
     "font-size": 4,
     "font-family": "Underdog"
@@ -377,6 +389,7 @@
     "stroke": "#b5b5b5",
     "stroke-width": 0,
     "text-shadow": "white 0 0 2px",
+    "letter-spacing": 0,
     "data-size": 20,
     "font-size": 20,
     "font-family": "Underdog",
@@ -388,6 +401,7 @@
     "stroke": "#3a3a3a",
     "stroke-width": 0,
     "text-shadow": "white 0 0 4px",
+    "letter-spacing": 0,
     "data-size": 18,
     "font-size": 18,
     "font-family": "Underdog",
diff --git a/styles/light.json b/styles/light.json
index 30748daf..de539872 100644
--- a/styles/light.json
+++ b/styles/light.json
@@ -258,6 +258,15 @@
     "stroke-width": 1,
     "filter": null
   },
+  "#emblems > #stateEmblems": {
+    "data-size": 1
+  },
+  "#emblems > #provinceEmblems": {
+    "data-size": 1
+  },
+  "#emblems > #burgEmblems": {
+    "data-size": 1
+  },
   "#texture": {
     "opacity": 0.4,
     "filter": null,
@@ -323,6 +332,7 @@
     "opacity": 1,
     "fill": "#3a3a3a",
     "text-shadow": "white 0px 0px 4px",
+    "letter-spacing": 0,
     "data-size": 8,
     "font-size": 8,
     "font-family": "IM Fell English"
@@ -348,6 +358,7 @@
     "opacity": 1,
     "fill": "#3e3e4b",
     "text-shadow": "white 0px 0px 4px",
+    "letter-spacing": 0,
     "data-size": 4,
     "font-size": 4,
     "font-family": "IM Fell English"
@@ -375,6 +386,7 @@
     "stroke": "#000000",
     "stroke-width": 0.3,
     "text-shadow": "white 0px 0px 6px",
+    "letter-spacing": 0,
     "data-size": 14,
     "font-size": 14,
     "font-family": "IM Fell English",
@@ -386,6 +398,7 @@
     "stroke": "#701b05",
     "stroke-width": 0.1,
     "text-shadow": "white 0px 0px 4px",
+    "letter-spacing": 0,
     "data-size": 6,
     "font-size": 6,
     "font-family": "IM Fell English",
diff --git a/styles/monochrome.json b/styles/monochrome.json
index 6af0d6a1..1ee17c43 100644
--- a/styles/monochrome.json
+++ b/styles/monochrome.json
@@ -261,6 +261,15 @@
     "stroke-width": 0.5,
     "filter": null
   },
+  "#emblems > #stateEmblems": {
+    "data-size": 1
+  },
+  "#emblems > #provinceEmblems": {
+    "data-size": 1
+  },
+  "#emblems > #burgEmblems": {
+    "data-size": 1
+  },
   "#zones": {
     "opacity": 0.6,
     "stroke": "#333333",
@@ -319,6 +328,7 @@
     "opacity": 1,
     "fill": "#000000",
     "text-shadow": "white 0px 0px 4px",
+    "letter-spacing": 0,
     "data-size": 7,
     "font-size": 7,
     "font-family": "Courier New"
@@ -344,6 +354,7 @@
     "opacity": 1,
     "fill": "#000000",
     "text-shadow": "white 0px 0px 4px",
+    "letter-spacing": 0,
     "data-size": 4,
     "font-size": 4,
     "font-family": "Courier New"
@@ -371,6 +382,7 @@
     "stroke": "#3a3a3a",
     "stroke-width": 0,
     "text-shadow": "white 0px 0px 4px",
+    "letter-spacing": 0,
     "data-size": 18,
     "font-size": 18,
     "font-family": "Courier New",
@@ -381,7 +393,8 @@
     "fill": "#3e3e4b",
     "stroke": "#3a3a3a",
     "stroke-width": 0,
-    "text-shadow": "white 0 0 4px",
+    "text-shadow": "white 0px 0px 4px",
+    "letter-spacing": 0,
     "data-size": 18,
     "font-size": 18,
     "font-family": "Courier New",
diff --git a/styles/night.json b/styles/night.json
index 790cad8d..67a5e799 100644
--- a/styles/night.json
+++ b/styles/night.json
@@ -258,6 +258,15 @@
     "stroke-width": null,
     "filter": null
   },
+  "#emblems > #stateEmblems": {
+    "data-size": 1
+  },
+  "#emblems > #provinceEmblems": {
+    "data-size": 1
+  },
+  "#emblems > #burgEmblems": {
+    "data-size": 1
+  },
   "#texture": {
     "opacity": 0.1,
     "filter": null,
@@ -323,6 +332,7 @@
     "opacity": 1,
     "fill": "#dbdbe1",
     "text-shadow": "black 0px 0px 4px",
+    "letter-spacing": 0,
     "data-size": 8,
     "font-size": 8,
     "font-family": "Courier New"
@@ -348,6 +358,7 @@
     "opacity": 1,
     "fill": "#ffffff",
     "text-shadow": "black 0px 0px 4px",
+    "letter-spacing": 0,
     "data-size": 4.28,
     "font-size": 4.28,
     "font-family": "Courier New"
@@ -375,6 +386,7 @@
     "stroke": "#7a83ae",
     "stroke-width": 0.3,
     "text-shadow": "black 0px 0px 0.1px",
+    "letter-spacing": 0,
     "data-size": 14,
     "font-size": 14,
     "font-family": "Courier New",
@@ -385,7 +397,8 @@
     "fill": "#3e3e4b",
     "stroke": "#3a3a3a",
     "stroke-width": 0,
-    "text-shadow": "white 0px 0px 4px",
+    "text-shadow": "black 0px 0px 4px",
+    "letter-spacing": 0,
     "data-size": 18,
     "font-size": 18,
     "font-family": "Almendra SC",
diff --git a/styles/pale.json b/styles/pale.json
index 3a32ed6d..8e839600 100644
--- a/styles/pale.json
+++ b/styles/pale.json
@@ -258,6 +258,15 @@
     "stroke-width": 1,
     "filter": null
   },
+  "#emblems > #stateEmblems": {
+    "data-size": 1
+  },
+  "#emblems > #provinceEmblems": {
+    "data-size": 1
+  },
+  "#emblems > #burgEmblems": {
+    "data-size": 1
+  },
   "#texture": {
     "opacity": 0.4,
     "filter": null,
@@ -323,6 +332,7 @@
     "opacity": 0.8,
     "fill": "#3a3a3a",
     "text-shadow": "white 0px 0px 4px",
+    "letter-spacing": 0,
     "data-size": 7,
     "font-size": 7,
     "font-family": "Arima Madurai"
@@ -348,6 +358,7 @@
     "opacity": 0.8,
     "fill": "#3e3e4b",
     "text-shadow": "white 0px 0px 4px",
+    "letter-spacing": 0,
     "data-size": 4,
     "font-size": 4,
     "font-family": "Arima Madurai"
@@ -375,6 +386,7 @@
     "stroke": "#000000",
     "stroke-width": 0,
     "text-shadow": "white 0px 0px 6px",
+    "letter-spacing": 0,
     "data-size": 14,
     "font-size": 14,
     "font-family": "Arima Madurai",
@@ -386,6 +398,7 @@
     "stroke": "#701b05",
     "stroke-width": 0.1,
     "text-shadow": "white 0px 0px 4px",
+    "letter-spacing": 0,
     "data-size": 6,
     "font-size": 6,
     "font-family": "Arima Madurai",
diff --git a/styles/watercolor.json b/styles/watercolor.json
index 4386940f..982c1b49 100644
--- a/styles/watercolor.json
+++ b/styles/watercolor.json
@@ -258,6 +258,15 @@
     "stroke-width": 1,
     "filter": null
   },
+  "#emblems > #stateEmblems": {
+    "data-size": 1
+  },
+  "#emblems > #provinceEmblems": {
+    "data-size": 1
+  },
+  "#emblems > #burgEmblems": {
+    "data-size": 1
+  },
   "#texture": {
     "opacity": 0.2,
     "filter": null,
@@ -323,6 +332,7 @@
     "opacity": 1,
     "fill": "#043449",
     "text-shadow": "white 0px 0px 2px",
+    "letter-spacing": 0,
     "data-size": 5,
     "font-size": 5,
     "font-family": "Comfortaa"
@@ -348,6 +358,7 @@
     "opacity": 1,
     "fill": "#3e3e4b",
     "text-shadow": "white 0px 0px 4px",
+    "letter-spacing": 0,
     "data-size": 3,
     "font-size": 3,
     "font-family": "Comfortaa"
@@ -375,6 +386,7 @@
     "stroke": "#000000",
     "stroke-width": 0.15,
     "text-shadow": "black 1px 1px 3px",
+    "letter-spacing": 0,
     "data-size": 18,
     "font-size": 18,
     "font-family": "Gloria Hallelujah",
@@ -386,6 +398,7 @@
     "stroke": "#3a3a3a",
     "stroke-width": 0,
     "text-shadow": "white 0px 0px 4px",
+    "letter-spacing": 0,
     "data-size": 16,
     "font-size": 16,
     "font-family": "Comfortaa",
diff --git a/sw.js b/sw.js
index 0b59c217..bd0382c6 100644
--- a/sw.js
+++ b/sw.js
@@ -1,7 +1,7 @@
 importScripts("https://storage.googleapis.com/workbox-cdn/releases/6.2.0/workbox-sw.js");
 
 const {Route, registerRoute} = workbox.routing;
-const {CacheFirst, NetworkFirst} = workbox.strategies;
+const {CacheFirst, NetworkFirst, StaleWhileRevalidate} = workbox.strategies;
 const {CacheableResponsePlugin} = workbox.cacheableResponse;
 const {ExpirationPlugin} = workbox.expiration;
 
@@ -18,8 +18,11 @@ registerRoute(
 
 registerRoute(
   ({request, url}) =>
-    request.destination === "script" && !url.pathname.endsWith("min.js") && !url.pathname.includes("versioning.js"),
-  new CacheFirst({
+    request.destination === "script" &&
+    !url.pathname.endsWith("min.js") &&
+    !url.pathname.includes("versioning.js") &&
+    !url.pathname.includes("google"),
+  new StaleWhileRevalidate({
     cacheName: "fmg-scripts",
     plugins: [
       new CacheableResponsePlugin({statuses: [0, 200]}),
diff --git a/utils/commonUtils.js b/utils/commonUtils.js
index 910cc95d..2be3e36d 100644
--- a/utils/commonUtils.js
+++ b/utils/commonUtils.js
@@ -3,6 +3,12 @@
 
 // clip polygon by graph bbox
 function clipPoly(points, secure = 0) {
+  if (points.length < 2) return points;
+  if (points.some(point => point === undefined)) {
+    ERROR && console.error("Undefined point in clipPoly", points);
+    return points;
+  }
+
   return polygonclip(points, [0, 0, graphWidth, graphHeight], secure);
 }
 
diff --git a/utils/debugUtils.js b/utils/debugUtils.js
index b48ff0d6..1859f3ae 100644
--- a/utils/debugUtils.js
+++ b/utils/debugUtils.js
@@ -33,7 +33,7 @@ function drawPolygons(data) {
 
 function drawRouteConnections() {
   debug.select("#connections").remove();
-  const routes = debug.append("g").attr("id", "connections").attr("stroke-width", 0.4);
+  const routes = debug.append("g").attr("id", "connections").attr("stroke-width", 0.8);
 
   const points = pack.cells.p;
   const links = pack.cells.routes;
@@ -56,3 +56,17 @@ function drawRouteConnections() {
     }
   }
 }
+
+function drawPoint([x, y], {color = "red", radius = 0.5}) {
+  debug.append("circle").attr("cx", x).attr("cy", y).attr("r", radius).attr("fill", color);
+}
+
+function drawPath(points, {color = "red", width = 0.5}) {
+  const lineGen = d3.line().curve(d3.curveBundle);
+  debug
+    .append("path")
+    .attr("d", round(lineGen(points)))
+    .attr("stroke", color)
+    .attr("stroke-width", width)
+    .attr("fill", "none");
+}
diff --git a/utils/graphUtils.js b/utils/graphUtils.js
index 55b9df31..82577b82 100644
--- a/utils/graphUtils.js
+++ b/utils/graphUtils.js
@@ -241,10 +241,8 @@ void (function addFindAll() {
   };
 
   const tree_filter = function (x, y, radius) {
-    var t = {x, y, x0: this._x0, y0: this._y0, x3: this._x1, y3: this._y1, quads: [], node: this._root};
-    if (t.node) {
-      t.quads.push(new Quad(t.node, t.x0, t.y0, t.x3, t.y3));
-    }
+    const t = {x, y, x0: this._x0, y0: this._y0, x3: this._x1, y3: this._y1, quads: [], node: this._root};
+    if (t.node) t.quads.push(new Quad(t.node, t.x0, t.y0, t.x3, t.y3));
     radiusSearchInit(t, radius);
 
     var i = 0;
diff --git a/utils/languageUtils.js b/utils/languageUtils.js
index 87f5d67d..9caa1b6f 100644
--- a/utils/languageUtils.js
+++ b/utils/languageUtils.js
@@ -135,7 +135,7 @@ const adjectivizationRules = [
   {
     name: "an",
     probability: 0.5,
-    condition: new RegExp("^[a-zA-Z]{0-7}$"),
+    condition: new RegExp("^[a-zA-Z]{0,7}$"),
     action: noun => trimVowels(noun) + "an"
   }
 ];
diff --git a/utils/pathUtils.js b/utils/pathUtils.js
new file mode 100644
index 00000000..deafd678
--- /dev/null
+++ b/utils/pathUtils.js
@@ -0,0 +1,235 @@
+"use strict";
+
+// get continuous paths (isolines) for all cells at once based on getType(cellId) comparison
+function getIsolines(graph, getType, options = {polygons: false, fill: false, halo: false, waterGap: false}) {
+  const {cells, vertices} = graph;
+  const isolines = {};
+
+  const checkedCells = new Uint8Array(cells.i.length);
+  const addToChecked = cellId => (checkedCells[cellId] = 1);
+  const isChecked = cellId => checkedCells[cellId] === 1;
+
+  for (const cellId of cells.i) {
+    if (isChecked(cellId) || !getType(cellId)) continue;
+    addToChecked(cellId);
+
+    const type = getType(cellId);
+    const ofSameType = cellId => getType(cellId) === type;
+    const ofDifferentType = cellId => getType(cellId) !== type;
+
+    const onborderCell = cells.c[cellId].find(ofDifferentType);
+    if (onborderCell === undefined) continue;
+
+    // check if inner lake. Note there is no shoreline for grid features
+    const feature = graph.features[cells.f[onborderCell]];
+    if (feature.type === "lake" && feature.shoreline?.every(ofSameType)) continue;
+
+    const startingVertex = cells.v[cellId].find(v => vertices.c[v].some(ofDifferentType));
+    if (startingVertex === undefined) throw new Error(`Starting vertex for cell ${cellId} is not found`);
+
+    const vertexChain = connectVertices({vertices, startingVertex, ofSameType, addToChecked, closeRing: true});
+    if (vertexChain.length < 3) continue;
+
+    addIsoline(type, vertices, vertexChain);
+  }
+
+  return isolines;
+
+  function addIsoline(type, vertices, vertexChain) {
+    if (!isolines[type]) isolines[type] = {};
+
+    if (options.polygons) {
+      if (!isolines[type].polygons) isolines[type].polygons = [];
+      isolines[type].polygons.push(vertexChain.map(vertexId => vertices.p[vertexId]));
+    }
+
+    if (options.fill) {
+      if (!isolines[type].fill) isolines[type].fill = "";
+      isolines[type].fill += getFillPath(vertices, vertexChain);
+    }
+
+    if (options.waterGap) {
+      if (!isolines[type].waterGap) isolines[type].waterGap = "";
+      const isLandVertex = vertexId => vertices.c[vertexId].every(i => cells.h[i] >= 20);
+      isolines[type].waterGap += getBorderPath(vertices, vertexChain, isLandVertex);
+    }
+
+    if (options.halo) {
+      if (!isolines[type].halo) isolines[type].halo = "";
+      const isBorderVertex = vertexId => vertices.c[vertexId].some(i => cells.b[i]);
+      isolines[type].halo += getBorderPath(vertices, vertexChain, isBorderVertex);
+    }
+  }
+}
+
+function getFillPath(vertices, vertexChain) {
+  const points = vertexChain.map(vertexId => vertices.p[vertexId]);
+  const firstPoint = points.shift();
+  return `M${firstPoint} L${points.join(" ")} Z`;
+}
+
+function getBorderPath(vertices, vertexChain, discontinue) {
+  let discontinued = true;
+  let lastOperation = "";
+  const path = vertexChain.map(vertexId => {
+    if (discontinue(vertexId)) {
+      discontinued = true;
+      return "";
+    }
+
+    const operation = discontinued ? "M" : "L";
+    discontinued = false;
+    lastOperation = operation;
+
+    const command = operation === "L" && operation === lastOperation ? "" : operation;
+    return ` ${command}${vertices.p[vertexId]}`;
+  });
+
+  return path.join("").trim();
+}
+
+// get single path for an non-continuous array of cells
+function getVertexPath(cellsArray) {
+  const {cells, vertices} = pack;
+
+  const cellsObj = Object.fromEntries(cellsArray.map(cellId => [cellId, true]));
+  const ofSameType = cellId => cellsObj[cellId];
+  const ofDifferentType = cellId => !cellsObj[cellId];
+
+  const checkedCells = new Uint8Array(cells.c.length);
+  const addToChecked = cellId => (checkedCells[cellId] = 1);
+  const isChecked = cellId => checkedCells[cellId] === 1;
+
+  let path = "";
+
+  for (const cellId of cellsArray) {
+    if (isChecked(cellId)) continue;
+
+    const onborderCell = cells.c[cellId].find(ofDifferentType);
+    if (onborderCell === undefined) continue;
+
+    const feature = pack.features[cells.f[onborderCell]];
+    if (feature.type === "lake" && feature.shoreline) {
+      if (feature.shoreline.every(ofSameType)) continue; // inner lake
+    }
+
+    const startingVertex = cells.v[cellId].find(v => vertices.c[v].some(ofDifferentType));
+    if (startingVertex === undefined) throw new Error(`Starting vertex for cell ${cellId} is not found`);
+
+    const vertexChain = connectVertices({vertices, startingVertex, ofSameType, addToChecked, closeRing: true});
+    if (vertexChain.length < 3) continue;
+
+    path += getFillPath(vertices, vertexChain);
+  }
+
+  return path;
+}
+
+function getPolesOfInaccessibility(graph, getType) {
+  const isolines = getIsolines(graph, getType, {polygons: true});
+
+  const poles = Object.entries(isolines).map(([id, isoline]) => {
+    const multiPolygon = isoline.polygons.sort((a, b) => b.length - a.length);
+    const [x, y] = polylabel(multiPolygon, 20);
+    return [id, [rn(x), rn(y)]];
+  });
+
+  return Object.fromEntries(poles);
+}
+
+function connectVertices({vertices, startingVertex, ofSameType, addToChecked, closeRing}) {
+  const MAX_ITERATIONS = vertices.c.length;
+  const chain = []; // vertices chain to form a path
+
+  let next = startingVertex;
+  for (let i = 0; i === 0 || next !== startingVertex; i++) {
+    const previous = chain.at(-1);
+    const current = next;
+    chain.push(current);
+
+    const neibCells = vertices.c[current];
+    if (addToChecked) neibCells.filter(ofSameType).forEach(addToChecked);
+
+    const [c1, c2, c3] = neibCells.map(ofSameType);
+    const [v1, v2, v3] = vertices.v[current];
+
+    if (v1 !== previous && c1 !== c2) next = v1;
+    else if (v2 !== previous && c2 !== c3) next = v2;
+    else if (v3 !== previous && c1 !== c3) next = v3;
+
+    if (next >= vertices.c.length) {
+      ERROR && console.error("ConnectVertices: next vertex is out of bounds");
+      break;
+    }
+
+    if (next === current) {
+      ERROR && console.error("ConnectVertices: next vertex is not found");
+      break;
+    }
+
+    if (i === MAX_ITERATIONS) {
+      ERROR && console.error("ConnectVertices: max iterations reached", MAX_ITERATIONS);
+      break;
+    }
+  }
+
+  if (closeRing) chain.push(startingVertex);
+  return chain;
+}
+
+/**
+ * Finds the shortest path between two cells using a cost-based pathfinding algorithm.
+ * @param {number} start - The ID of the starting cell.
+ * @param {(id: number) => boolean} isExit - A function that returns true if the cell is the exit cell.
+ * @param {(current: number, next: number) => number} getCost - A function that returns the path cost from current cell to the next cell. Must return `Infinity` for impassable connections.
+ * @returns {number[] | null} An array of cell IDs of the path from start to exit, or null if no path is found or start and exit are the same.
+ */
+function findPath(start, isExit, getCost) {
+  if (isExit(start)) return null;
+
+  const from = [];
+  const cost = [];
+  const queue = new FlatQueue();
+  queue.push(start, 0);
+
+  while (queue.length) {
+    const currentCost = queue.peekValue();
+    const current = queue.pop();
+
+    for (const next of pack.cells.c[current]) {
+      if (isExit(next)) {
+        from[next] = current;
+        return restorePath(next, start, from);
+      }
+
+      const nextCost = getCost(current, next);
+      if (nextCost === Infinity) continue; // impassable cell
+      const totalCost = currentCost + nextCost;
+
+      if (totalCost >= cost[next]) continue; // has cheaper path
+      from[next] = current;
+      cost[next] = totalCost;
+      queue.push(next, totalCost);
+    }
+  }
+
+  return null;
+}
+
+// supplementary function for findPath
+function restorePath(exit, start, from) {
+  const pathCells = [];
+
+  let current = exit;
+  let prev = exit;
+
+  while (current !== start) {
+    pathCells.push(current);
+    prev = from[current];
+    current = prev;
+  }
+
+  pathCells.push(current);
+
+  return pathCells.reverse();
+}
diff --git a/utils/probabilityUtils.js b/utils/probabilityUtils.js
index b0234251..db74c85f 100644
--- a/utils/probabilityUtils.js
+++ b/utils/probabilityUtils.js
@@ -22,7 +22,14 @@ function each(n) {
   return i => i % n === 0;
 }
 
-// random number (normal or gaussian distribution)
+/* Random Gaussian number generator
+ * @param {number} expected - expected value
+ * @param {number} deviation - standard deviation
+ * @param {number} min - minimum value
+ * @param {number} max - maximum value
+ * @param {number} round - round value to n decimals
+ * @return {number} random number
+ */
 function gauss(expected = 100, deviation = 30, min = 0, max = 300, round = 0) {
   return rn(minmax(d3.randomNormal(expected, deviation)(), min, max), round);
 }
diff --git a/utils/shorthands.js b/utils/shorthands.js
index 043599fc..36e9d09a 100644
--- a/utils/shorthands.js
+++ b/utils/shorthands.js
@@ -2,8 +2,10 @@ const byId = document.getElementById.bind(document);
 
 Node.prototype.on = function (name, fn, options) {
   this.addEventListener(name, fn, options);
+  return this;
 };
 
 Node.prototype.off = function (name, fn) {
   this.removeEventListener(name, fn);
+  return this;
 };
diff --git a/utils/stringUtils.js b/utils/stringUtils.js
index 6325d278..1027ee8f 100644
--- a/utils/stringUtils.js
+++ b/utils/stringUtils.js
@@ -56,3 +56,11 @@ JSON.isValid = str => {
   }
   return true;
 };
+
+JSON.safeParse = str => {
+  try {
+    return JSON.parse(str);
+  } catch (e) {
+    return null;
+  }
+};
diff --git a/versioning.js b/versioning.js
index 099068d9..89c2124b 100644
--- a/versioning.js
+++ b/versioning.js
@@ -1,21 +1,30 @@
 "use strict";
+/**
+ * Version Control Guidelines
+ * --------------------------
+ * We use Semantic Versioning: major.minor.patch. Refer to https://semver.org
+ * Our .map file format is considered the public API.
+ *
+ * Update the version MANUALLY on each merge to main:
+ * 1. MAJOR version: Incompatible changes that break existing maps
+ * 2. MINOR version: Additions or changes that are backward-compatible but may require old .map files to be updated
+ * 3. PATCH version: Backward-compatible bug fixes and small features that do not affect the .map file format
+ *
+ * Example: 1.102.2 -> Major version 1, Minor version 102, Patch version 2
+ */
 
-// version and caching control
-const version = "1.99.01"; // generator version, update each time
+const VERSION = "1.108.13";
+if (parseMapVersion(VERSION) !== VERSION) alert("versioning.js: Invalid format or parsing function");
 
 {
-  document.title += " v" + version;
+  document.title += " v" + VERSION;
   const loadingScreenVersion = document.getElementById("versionText");
-  if (loadingScreenVersion) loadingScreenVersion.innerText = `v${version}`;
+  if (loadingScreenVersion) loadingScreenVersion.innerText = `v${VERSION}`;
 
-  const versionNumber = parseFloat(version);
-  const storedVersion = localStorage.getItem("version") ? parseFloat(localStorage.getItem("version")) : 0;
-
-  const isOutdated = storedVersion !== versionNumber;
-  if (isOutdated) clearCache();
-
-  const showUpdate = storedVersion < versionNumber;
-  if (showUpdate) setTimeout(showUpdateWindow, 6000);
+  const storedVersion = localStorage.getItem("version");
+  if (compareVersions(storedVersion, VERSION, {major: true, minor: true, patch: false}).isOlder) {
+    setTimeout(showUpdateWindow, 6000);
+  }
 
   function showUpdateWindow() {
     const changelog = "https://github.com/Azgaar/Fantasy-Map-Generator/wiki/Changelog";
@@ -23,58 +32,93 @@ const version = "1.99.01"; // generator version, update each time
     const discord = "https://discordapp.com/invite/X7E84HU";
     const patreon = "https://www.patreon.com/azgaar";
 
-    alertMessage.innerHTML = /* html */ `The Fantasy Map Generator is updated up to version <strong>${version}</strong>. This version is compatible with <a href="${changelog}" target="_blank">previous versions</a>, loaded save files will be auto-updated.
-      ${storedVersion ? "<span>Reload the page to fetch fresh code.</span>" : ""}
+    alertMessage.innerHTML = /* html */ `The Fantasy Map Generator is updated up to version <strong>${VERSION}</strong>. This version is compatible with <a href="${changelog}" target="_blank">previous versions</a>, loaded save files will be auto-updated.
+      ${storedVersion ? "<span>Click on OK and then reload the page to fetch fresh code.</span>" : ""}
 
       <ul>
         <strong>Latest changes:</strong>
-        <li>New routes generatation algorithm</li>
+        <li>Ability to set custom image as Marker or Regiment icon</li>
+        <li>Submap and Transform tools rework</li>
+        <li>Azgaar Bot to answer questions and provide help</li>
+        <li>Labels: ability to set letter spacing</li>
+        <li>Zones performance improvement</li>
+        <li>Notes Editor: on-demand AI text generation</li>
+        <li>New style preset: Dark Seas</li>
+        <li>New routes generation algorithm</li>
         <li>Routes overview tool</li>
         <li>Configurable longitude</li>
         <li>Preview villages map</li>
         <li>Ability to render ocean heightmap</li>
-        <li>Scale bar styling features</li>
-        <li>Vignette visual layer and vignette styling options</li>
-        <li>Ability to define custom heightmap color scheme</li>
-        <li>New style preset Night and new heightmap color schemes</li>
-        <li>Random encounter markers (integration with <a href="https://deorum.vercel.app/" target="_blank">Deorum</a>)</li>
-        <li>Auto-load of the last saved map is now optional (see <i>Onload behavior</i> in Options)</li>
-        <li>New label placement algorithm for states</li>
-        <li>North and South Poles temperature can be set independently</li>
-        <li>More than 70 new heraldic charges</li>
-        <li>Multi-color heraldic charges support</li>
       </ul>
 
       <p>Join our <a href="${discord}" target="_blank">Discord server</a> and <a href="${reddit}" target="_blank">Reddit community</a> to ask questions, share maps, discuss the Generator and Worlbuilding, report bugs and propose new features.</p>
       <span><i>Thanks for all supporters on <a href="${patreon}" target="_blank">Patreon</a>!</i></span>`;
 
-    const buttons = {
-      Ok: function () {
-        $(this).dialog("close");
-        if (storedVersion) localStorage.clear();
-        localStorage.setItem("version", version);
-      }
-    };
-
-    if (storedVersion) {
-      buttons.Reload = () => {
-        localStorage.clear();
-        localStorage.setItem("version", version);
-        location.reload();
-      };
-    }
-
     $("#alert").dialog({
       resizable: false,
       title: "Fantasy Map Generator update",
       width: "28em",
       position: {my: "center center-4em", at: "center", of: "svg"},
-      buttons
+      buttons: {
+        "Clear cache": () => cleanupData(),
+        "Don't show again": function () {
+          $(this).dialog("close");
+          localStorage.setItem("version", VERSION);
+        }
+      }
     });
   }
-
-  async function clearCache() {
-    const cacheNames = await caches.keys();
-    Promise.all(cacheNames.map(cacheName => caches.delete(cacheName)));
-  }
+}
+
+async function cleanupData() {
+  await clearCache();
+  localStorage.clear();
+  localStorage.setItem("version", VERSION);
+  localStorage.setItem("disable_click_arrow_tooltip", "true");
+  location.reload();
+}
+
+async function clearCache() {
+  const cacheNames = await caches.keys();
+  return Promise.all(cacheNames.map(cacheName => caches.delete(cacheName)));
+}
+
+function parseMapVersion(version) {
+  let [major, minor, patch] = version.split(".");
+
+  if (patch === undefined) {
+    // e.g. 1.732
+    minor = minor.slice(0, 2);
+    patch = minor.slice(2);
+  }
+
+  // e.g. 0.7b
+  major = parseInt(major) || 0;
+  minor = parseInt(minor) || 0;
+  patch = parseInt(patch) || 0;
+
+  return `${major}.${minor}.${patch}`;
+}
+
+function isValidVersion(versionString) {
+  if (!versionString) return false;
+  const [major, minor, patch] = versionString.split(".");
+  return !isNaN(major) && !isNaN(minor) && !isNaN(patch);
+}
+
+function compareVersions(version1, version2, options = {major: true, minor: true, patch: true}) {
+  if (!isValidVersion(version1) || !isValidVersion(version2)) return {isEqual: false, isNewer: false, isOlder: false};
+
+  let [major1, minor1, patch1] = version1.split(".").map(Number);
+  let [major2, minor2, patch2] = version2.split(".").map(Number);
+
+  if (!options.major) major1 = major2 = 0;
+  if (!options.minor) minor1 = minor2 = 0;
+  if (!options.patch) patch1 = patch2 = 0;
+
+  const isEqual = major1 === major2 && minor1 === minor2 && patch1 === patch2;
+  const isNewer = major1 > major2 || (major1 === major2 && (minor1 > minor2 || (minor1 === minor2 && patch1 > patch2)));
+  const isOlder = major1 < major2 || (major1 === major2 && (minor1 < minor2 || (minor1 === minor2 && patch1 < patch2)));
+
+  return {isEqual, isNewer, isOlder};
 }