From a3fa5443d63d885daa1297bbb297afe2c3055cc3 Mon Sep 17 00:00:00 2001
From: Azgaar <maxganiev@yandex.ru>
Date: Thu, 24 Oct 2019 22:27:41 +0300
Subject: [PATCH] v1.2.02

---
 index.css                      | 24 +++++++------
 index.html                     | 62 +++++++++++++++-------------------
 modules/relief-icons.js        | 16 ++++-----
 modules/save-and-load.js       | 11 ++++--
 modules/ui/3d.js               |  2 +-
 modules/ui/cultures-editor.js  | 12 ++++---
 modules/ui/editors.js          |  2 +-
 modules/ui/general.js          |  2 +-
 modules/ui/heightmap-editor.js | 37 ++++++++++----------
 modules/ui/layers.js           |  9 +++--
 modules/ui/measurers.js        |  2 +-
 modules/ui/options.js          | 31 ++++++++++-------
 modules/ui/provinces-editor.js |  5 +--
 modules/ui/religions-editor.js |  1 +
 modules/ui/style.js            | 22 +++++++-----
 modules/ui/tools.js            | 12 +++++--
 16 files changed, 137 insertions(+), 113 deletions(-)

diff --git a/index.css b/index.css
index 90be984f6..34bc38897 100644
--- a/index.css
+++ b/index.css
@@ -70,10 +70,12 @@ button, select, a {
 
 #biomes {
 	stroke-width: .7;
+	fill-rule: evenodd;
 }
 
 #landmass {
 	mask: url(#land);
+	fill-rule: evenodd;
 }
 
 #lakes, #coastline {
@@ -86,6 +88,11 @@ button, select, a {
 	text-anchor: middle;
 	dominant-baseline: central;
 	text-shadow: 0px 0px 10px white;
+	fill-rule: evenodd;
+}
+
+#oceanLayers {
+	fill-rule: evenodd;
 }
 
 #coastline {
@@ -99,7 +106,7 @@ button, select, a {
 
 #statesBody, #provincesBody {
 	stroke-width: 2;
-
+	fill-rule: evenodd;
 	mask: url(#land);
 }
 
@@ -620,14 +627,8 @@ fieldset {
 	cursor: default;
 }
 
-#cellInfo>div {
-	margin: 3px 0px 3px 3px;
-	display: inline-block;
-	vertical-align: top;
-}
-
-#cellInfo>div:nth-child(2) {
-	width: 50%;
+#cellInfo {
+	user-select: text;
 }
 
 #tooltip {
@@ -1582,7 +1583,7 @@ div.states > div.biomeArea {
 
 #ruler .planimeter {
 	fill: lightblue;
-
+	fill-rule: evenodd;
 	fill-opacity: 0.5;
 	stroke: #737373;
 }
@@ -1831,8 +1832,9 @@ svg.button {
 #alertMessage {
 	-moz-user-select: text;
 	user-select: text;
-	max-height: 75vh;
+	max-height: 70vh;
 	max-width: 75vw;
+	overflow: auto;
 }
 
 #alertMessage ul {
diff --git a/index.html b/index.html
index 37ec6898a..13c01acae 100644
--- a/index.html
+++ b/index.html
@@ -1249,7 +1249,7 @@
                   <td>Style</td>
                   <td>
                     <select id="styleReliefSet">
-                      <option value="simple" selected>Old</option>
+                      <option value="simple" selected>Simple</option>
                       <option value="gray">Gray</option>
                       <option value="colored">Colored</option>
                     </select>
@@ -1520,9 +1520,9 @@
         <p data-tip="Map generation settings. Generate a new map to apply the settings">Map settings (new map to apply):</p>
         <table>
 
-          <tr data-tip="Map height and width in pixels. Please consider reducing map size in case of performance issues">
+          <tr data-tip="Canvas height and width in pixels, please keep at your screen size or less to improve performance">
             <td></td>
-            <td>Map size</td>
+            <td>Canvas size</td>
             <td>
               <span data-tip="Map width in pixels">width</span>
               <input data-tip="Map width in pixels" id="mapWidthInput" class="paired" type="number" min=240 value=960>
@@ -1530,11 +1530,11 @@
               <input data-tip="Map height in pixels" id="mapHeightInput" class="paired" type="number" min=135 value=540>
             </td>
             <td>
-              <i data-tip="Toggle between screen size and initial map size" id="toggleFullscreen" class="icon-resize-full-alt"></i>
+              <i data-tip="Toggle between screen size and initial canvas size" id="toggleFullscreen" class="icon-resize-full-alt"></i>
             </td>
           </tr>
 
-          <tr data-tip="Map seed number. Seed produces the same map only if map size and options are the same">
+          <tr data-tip="Map seed number. Seed produces the same map only if canvas size and options are the same">
             <td>
               <i data-tip="Click to generate a map for this seed" id="optionsSeedGenerate"></i>
             </td>
@@ -1581,7 +1581,7 @@
                 <option value="Volcano">Volcano</option>
                 <option value="High Island">High Island</option>
                 <option value="Low Island">Low Island</option>
-                <option value="Continents">Continents</option>
+                <option value="Continents">Two Continents</option>
                 <option value="Archipelago">Archipelago</option>
                 <option value="Atoll">Atoll</option>
                 <option value="Mediterranean">Mediterranean</option>
@@ -1692,7 +1692,7 @@
             </td>
           </tr>
 
-          <tr data-tip="Define how many organized (!) religions and cults should be generated">
+          <tr 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>
             </td>
@@ -1805,6 +1805,7 @@
         <div>
           <p>Click to overview:</p>
           <button id="overviewBurgsButton" data-tip="Click to open Burgs Overview. Shortcut: Shift + T">Burgs</button>
+          <button id="overviewCellsButton" data-tip="Click to open Cell details view. Shortcut: Shift + E">Cells</button>
           <!-- <button id="overviewLandmassedButton" data-tip="Click to open Landmasses Overview. Shortcut: Shift + L">Landmasses</button> -->
           <!-- <button id="overviewWaterbodiesButton" data-tip="Click to open Waterbodies Overview. Shortcut: Shift + W">Waterbodies</button> -->
           <!-- <button id="overviewRiversButton" data-tip="Click to open Rivers Overview. Shortcut: Shift + V">Rivers</button> -->
@@ -1834,30 +1835,6 @@
           <button id="addRoute" data-tip="Click on map to place a route. Shortcut: Shift + E">Route</button>
           <button id="addMarker" data-tip="Click on map to place a marker. Hold Shift to add multiple. Shortcut: Shift + K">Marker</button>
         </div>
-
-        <p>Cell info: <i data-tip="Click to toggle the section" class="collapsible icon-down-open pointer"></i></p>
-        <div id="cellInfo" style="display: none">
-          <div>
-            Coord: <span id="infoX">0</span>/<span id="infoY">0</span><br>
-            Cell: <span id="infoCell">0</span><br>
-            Area: <span id="infoArea">0</span><br>
-          </div>
-          <div>
-            Type: <span id="infoFeature">n/a</span><br>
-            Precip: <span id="infoPrec">0</span><br>
-            Population: <span id="infoPopulation">0</span>
-          </div>
-          <div>
-            Height: <span id="infoHeight">0</span><br>
-            Temperature: <span id="infoTemp">0</span><br>
-            Biome: <span id="infoBiome">n/a</span><br>
-            State: <span id="infoState">n/a</span><br>
-            Province: <span id="infoProvince">n/a</span><br>
-            Culture: <span id="infoCulture">n/a</span><br>
-            Religion: <span id="infoReligion">n/a</span><br>
-            Burg: <span id="infoBurg">n/a</span>
-          </div>
-        </div>
       </div>
 
       <div id="customizationMenu" class="tabcontent">
@@ -1995,8 +1972,8 @@
             <input id="precOutput" data-stored="prec" type="range" min="0" max="500" value="50">
           </label>
         </div>
-        <div data-tip="Map size. Can be changed in general options">
-          <i>Map size:</i><br>
+        <div data-tip="Canvas size. Can be changed in general options on new map generation">
+          <i>Canvas size:</i><br>
           <span id="mapSize"></span> px = <span id="mapSizeFriendly"></span>
         </div>
         <div>
@@ -2503,7 +2480,7 @@
           <option value="templateVolcano">Volcano</option>
           <option value="templateHighIsland">High Island</option>
           <option value="templateLowIsland">Low Island</option>
-          <option value="templateContinents">Continents</option>
+          <option value="templateContinents">Two Continents</option>
           <option value="templateArchipelago">Archipelago</option>
           <option value="templateAtoll">Atoll</option>
           <option value="templateMediterranean">Mediterranean</option>
@@ -3238,6 +3215,23 @@
       </div>
     </div>
 
+    <div id="cellInfo" style="display: none" class="dialog stable">
+      <p><b>Cell:</b> <span id="infoCell">0</span></p>
+      <p><b>Coord:</b> <span id="infoX">0</span>/<span id="infoY">0</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>Population:</b> <span id="infoPopulation">0</span></p>
+      <p><b>Height:</b> <span id="infoHeight">0</span></p>
+      <p><b>Temperature:</b> <span id="infoTemp">0</span></p>
+      <p><b>Biome:</b> <span id="infoBiome">n/a</span></p>
+      <p><b>State:</b> <span id="infoState">n/a</span></p>
+      <p><b>Province:</b> <span id="infoProvince">n/a</span></p>
+      <p><b>Culture:</b> <span id="infoCulture">n/a</span></p>
+      <p><b>Religion:</b> <span id="infoReligion">n/a</span></p>
+      <p><b>Burg:</b> <span id="infoBurg">n/a</span></p>
+    </div>
+
     <div id="preview3d" class="dialog stable" style="display: none; padding: 0px"></div>
 
     <div id="alert" style="display: none" class="dialog">
diff --git a/modules/relief-icons.js b/modules/relief-icons.js
index 2ad4404fc..bc73a3892 100644
--- a/modules/relief-icons.js
+++ b/modules/relief-icons.js
@@ -4,13 +4,12 @@
     (global.ReliefIcons = factory());
 }(this, (function () {'use strict';
 
-  var ReliefIcons = function ReliefIcons() {
+  const ReliefIcons = function() {
     console.time('drawRelief');
     terrain.selectAll("*").remove();
-    const density = +styleReliefDensityInput.value;
-    if (!density) return;
-
-    const size = 1.6, mod = .2 * size; // size modifier;s
+    const density = terrain.attr("density") || .4;
+    const size = 1.6 * (terrain.attr("size") || 1);
+    const mod = .2 * size; // size modifier;s
     const relief = []; // t: type, c: cell, x: centerX, y: centerY, s: size;
     const cells = pack.cells;
 
@@ -106,9 +105,10 @@
   }
 
   function getIcon(type) {
-    if (styleReliefSet.value === "simple") return "#relief-" + getOldIcon(type) + "-1";
-    if (styleReliefSet.value === "colored") return "#relief-" + type + "-" + getVariant(type);
-    if (styleReliefSet.value === "gray") return "#relief-" + type + "-" + getVariant(type) + "-bw";
+    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/save-and-load.js b/modules/save-and-load.js
index 68b4fc67e..e348ca773 100644
--- a/modules/save-and-load.js
+++ b/modules/save-and-load.js
@@ -74,7 +74,7 @@ async function saveJPEG() {
 }
 
 // parse map svg to object url
-async function getMapURL(type) {
+async function getMapURL(type, subtype) {
   const cloneEl = document.getElementById("map").cloneNode(true); // clone svg
   cloneEl.id = "fantasyMap";
   document.body.appendChild(cloneEl);
@@ -83,6 +83,7 @@ async function getMapURL(type) {
 
   const isFirefox = navigator.userAgent.toLowerCase().indexOf('firefox') > -1;
   if (isFirefox && type === "mesh") clone.select("#oceanPattern").remove();
+  if (subtype === "globe") clone.select("#scaleBar").remove();
   if (type === "mesh") clone.attr("width", graphWidth).attr("height", graphHeight);
   if (type !== "png") clone.select("#viewbox").attr("transform", null); // reset transform to show whole map
   if (type === "svg") removeUnusedElements(clone);
@@ -551,7 +552,7 @@ function uploadMap(file, callback) {
 function parseLoadedData(data) {
   try {
     // exit customization
-    closeDialogs();
+    if (window.closeDialogs) closeDialogs();
     customization = 0;
     if (customizationMenu.offsetParent) styleTab.click();
 
@@ -908,12 +909,18 @@ function parseLoadedData(data) {
 
         // v 1.11 had an issue with fogging being displayed on load
         unfog();
+
+        // v 1.2 added new terrain attributes
+        if (!terrain.attr("set")) terrain.attr("set", "simple");
+        if (!terrain.attr("size")) terrain.attr("size", 1);
+        if (!terrain.attr("density")) terrain.attr("density", .4);
       }
 
     }()
 
     changeMapSize();
     if (window.restoreDefaultEvents) restoreDefaultEvents();
+    focusOn(); // based on searchParams focus on point, cell or burg
     invokeActiveZooming();
 
     console.warn(`TOTAL: ${rn((performance.now()-uploadMap.timeStart)/1000,2)}s`);
diff --git a/modules/ui/3d.js b/modules/ui/3d.js
index 523ee75c0..a35a1bfbb 100644
--- a/modules/ui/3d.js
+++ b/modules/ui/3d.js
@@ -190,7 +190,7 @@ async function startGlobe(canvas) {
 // create globe mesh just from svg
 async function addGlobe3dMesh() {
   threeD.material = new THREE.MeshLambertMaterial();
-  const url = await getMapURL("mesh");
+  const url = await getMapURL("mesh", "globe");
   threeD.material.map = new THREE.TextureLoader().load(url, render);
   threeD.mesh = new THREE.Mesh(new THREE.SphereBufferGeometry(1, 64, 64), threeD.material);
   threeD.scene.add(threeD.mesh);
diff --git a/modules/ui/cultures-editor.js b/modules/ui/cultures-editor.js
index 81f4eeee7..20f1ff69c 100644
--- a/modules/ui/cultures-editor.js
+++ b/modules/ui/cultures-editor.js
@@ -304,6 +304,9 @@ function editCultures() {
     pack.cells.culture.forEach((c, i) => {if(c === culture) pack.cells.culture[i] = 0;});
     pack.cultures[culture].removed = true;
 
+    const origin = pack.cultures[culture].origin;
+    pack.cultures.forEach(c => {if(c.origin === culture) c.origin = origin;});
+
     refreshCulturesEditor();
   }
 
@@ -363,6 +366,7 @@ function editCultures() {
     // build hierarchy tree
     pack.cultures[0].origin = null;
     const cultures = pack.cultures.filter(c => !c.removed);
+    if (cultures.length < 3) {tip("Not enough cultures to show hierarchy", false, "error"); return;}
     const root = d3.stratify().id(d => d.i).parentId(d => d.origin)(cultures);
     const treeWidth = root.leaves().length;
     const treeHeight = root.height;
@@ -452,7 +456,6 @@ function editCultures() {
     }
   }
 
-  // re-calculate cultures
   function recalculateCultures(must) {
     if (!must && !culturesAutoChange.checked) return;
 
@@ -508,7 +511,7 @@ function editCultures() {
     body.querySelector("div.selected").classList.remove("selected");
     body.querySelector("div[data-id='"+culture+"']").classList.add("selected");
   }
-  
+
   function dragCultureBrush() {
     const r = +culturesManuallyBrush.value;
 
@@ -523,7 +526,6 @@ function editCultures() {
     });
   }
 
-  // change culture within selection
   function changeCultureForSelection(selection) {
     const temp = cults.select("#temp");
     const selected = body.querySelector("div.selected");
@@ -564,7 +566,7 @@ function editCultures() {
     }
     exitCulturesManualAssignment();
   }
- 
+
   function exitCulturesManualAssignment(close) {
     customization = 0;
     cults.select("#temp").remove();
@@ -637,7 +639,7 @@ function editCultures() {
     const name = getFileName("Cultures") + ".csv";
     downloadFile(data, name);
   }
-  
+
   function closeCulturesEditor() {
     debug.select("#cultureCenters").remove();
     exitCulturesManualAssignment("close");
diff --git a/modules/ui/editors.js b/modules/ui/editors.js
index 5cf9663e5..b6296ccf3 100644
--- a/modules/ui/editors.js
+++ b/modules/ui/editors.js
@@ -262,7 +262,7 @@ function drawLegend(name, data) {
   fitLegendBox();
 }
 
-// fit Legend box to map size
+// fit Legend box to canvas size
 function fitLegendBox() {
   if (!legend.selectAll("*").size()) return;
   const px = isNaN(+legend.attr("data-x")) ? 99 : legend.attr("data-x") / 100;
diff --git a/modules/ui/general.js b/modules/ui/general.js
index ec9b6f8be..8472be58c 100644
--- a/modules/ui/general.js
+++ b/modules/ui/general.js
@@ -50,7 +50,7 @@ function moved() {
   showNotes(d3.event, i);
   const g = findGridCell(point[0], point[1]); // grid cell id
   if (tooltip.dataset.main) showMainTip(); else showMapTooltip(point, d3.event, i, g);
-  if (toolsContent.style.display === "block" && cellInfo.style.display === "block") updateCellInfo(point, i, g);
+  if (cellInfo.offsetParent) updateCellInfo(point, i, g);
 }
 
 // show note box on hover (if any)
diff --git a/modules/ui/heightmap-editor.js b/modules/ui/heightmap-editor.js
index 5465ab6d5..ff03116a9 100644
--- a/modules/ui/heightmap-editor.js
+++ b/modules/ui/heightmap-editor.js
@@ -2,10 +2,6 @@
 "use strict";
 
 function editHeightmap() {
-  const heights = viewbox.select("#heights").size()
-    ? viewbox.select("#heights")
-    : viewbox.insert("g", "#terrs").attr("id", "heights");
-
   void function selectEditMode() {
     alertMessage.innerHTML = `<p>Heightmap is a core element on which all other data (rivers, burgs, states etc) is based.
     So the best edit approach is to <i>erase</i> the secondary data and let the system automatically regenerate it on edit completion.</p> 
@@ -31,6 +27,7 @@ function editHeightmap() {
 
   let edits = [];
   restartHistory();
+  viewbox.insert("g", "#terrs").attr("id", "heights");
 
   if (modules.editHeightmap) return;
   modules.editHeightmap = true;
@@ -111,7 +108,7 @@ function editHeightmap() {
 
   // Exit customization mode
   function finalizeHeightmap() {
-    if (heights.selectAll("*").size() < 200) {
+    if (viewbox.select("#heights").selectAll("*").size() < 200) {
       tip("Insufficient land area! There should be at least 200 land cells to finalize the heightmap", null, "error");
       return;
     }
@@ -136,7 +133,7 @@ function editHeightmap() {
     else if (mode === "risk") restoreRiskedData();
 
     // restore initial layers
-    heights.selectAll("*").remove();
+    viewbox.select("#heights").remove();
     turnButtonOff("toggleHeight");
     document.getElementById("mapLayers").querySelectorAll("li").forEach(function(e) {
       if (editHeightmap.layers.includes(e.id) && !layerIsOn(e.id)) e.click(); // turn on
@@ -381,7 +378,7 @@ function editHeightmap() {
   function mockHeightmap() {
     const data = renderOcean.checked ? grid.cells.i : grid.cells.i.filter(i => grid.cells.h[i] >= 20);
     const scheme = getColorScheme();
-    heights.selectAll("polygon").data(data).join("polygon").attr("points", d => getGridPolygon(d))
+    viewbox.select("#heights").selectAll("polygon").data(data).join("polygon").attr("points", d => getGridPolygon(d))
       .attr("id", d => "cell"+d).attr("fill", d => getColor(grid.cells.h[d], scheme));
   }
 
@@ -391,9 +388,9 @@ function editHeightmap() {
     const scheme = getColorScheme();
 
     selection.forEach(function(i) {
-      let cell = heights.select("#cell"+i);
+      let cell = viewbox.select("#heights").select("#cell"+i);
       if (!ocean && grid.cells.h[i] < 20) {cell.remove(); return;}
-      if (!cell.size()) cell = heights.append("polygon").attr("points", getGridPolygon(i)).attr("id", "cell"+i);
+      if (!cell.size()) cell = viewbox.select("#heights").append("polygon").attr("points", getGridPolygon(i)).attr("id", "cell"+i);
       cell.attr("fill", getColor(grid.cells.h[i], scheme));
     });
   }
@@ -579,7 +576,7 @@ function editHeightmap() {
       const someHeights = grid.cells.h.some(h => h);
       if (!someHeights) {tip("Heightmap is already cleared, please do not click twice if not required", false, "error"); return;}
       grid.cells.h = new Uint8Array(grid.cells.i.length);
-      heights.selectAll("*").remove();
+      viewbox.select("#heights").selectAll("*").remove();
       updateHistory();
     }
 
@@ -941,7 +938,7 @@ function editHeightmap() {
 
     // remove all heights
     grid.cells.h = new Uint8Array(grid.cells.i.length);
-    heights.selectAll("*").remove();
+    viewbox.select("#heights").selectAll("*").remove();
     updateHistory();
 
     if (modules.openImageConverter) return;
@@ -995,7 +992,7 @@ function editHeightmap() {
       const imageData = ctx.getImageData(0, 0, graphWidth, graphHeight);
       const data = imageData.data;
 
-      heights.selectAll("*").remove();
+      viewbox.select("#heights").selectAll("*").remove();
       d3.select("#imageConverter").selectAll("div.color-div").remove();
       colorsSelect.style.display = "block";
       colorsUnassigned.style.display = "block";
@@ -1011,7 +1008,7 @@ function editHeightmap() {
       const cmap = MMCQ.quantize(gridColors, count);
       const usedColors = new Set();
 
-      heights.selectAll("polygon").data(grid.cells.i).join("polygon")
+      viewbox.select("#heights").selectAll("polygon").data(grid.cells.i).join("polygon")
         .attr("points", d => getGridPolygon(d))
         .attr("id", d => "cell"+d).attr("fill", d => {
           const clr = `rgb(${cmap.nearest(gridColors[d])})`;
@@ -1035,7 +1032,7 @@ function editHeightmap() {
     }
 
     function colorClicked() {
-      heights.selectAll(".selectedCell").attr("class", null);
+      viewbox.select("#heights").selectAll(".selectedCell").attr("class", null);
       const unselect = this.classList.contains("selectedColor");
 
       const selectedColor = imageConverter.querySelector("div.selectedColor");
@@ -1054,8 +1051,8 @@ function editHeightmap() {
       }
 
       const color = this.getAttribute("data-color");
-      heights.selectAll("polygon.selectedCell").classed("selectedCell", 0);
-      heights.selectAll("polygon[fill='" + color + "']").classed("selectedCell", 1);
+      viewbox.select("#heights").selectAll("polygon.selectedCell").classed("selectedCell", 0);
+      viewbox.select("#heights").selectAll("polygon[fill='" + color + "']").classed("selectedCell", 1);
     }
 
     function assignHeight() {
@@ -1066,7 +1063,7 @@ function editHeightmap() {
       selectedColor.setAttribute("data-color", rgb);
       selectedColor.setAttribute("data-height", height);
 
-      heights.selectAll(".selectedCell").each(function() {
+      viewbox.select("#heights").selectAll(".selectedCell").each(function() {
         this.setAttribute("fill", rgb); 
         this.setAttribute("data-height", height);
       });
@@ -1090,7 +1087,7 @@ function editHeightmap() {
         const colorTo = color(1 - (normalized < .2 ? normalized-.05 : normalized));
         const heightTo = normalized * 100;
 
-        heights.selectAll("polygon[fill='" + colorFrom + "']").attr("fill", colorTo).attr("data-height", heightTo);
+        viewbox.select("#heights").selectAll("polygon[fill='" + colorFrom + "']").attr("fill", colorTo).attr("data-height", heightTo);
         el.style.backgroundColor = colorTo;
         el.setAttribute("data-color", colorTo);
         el.setAttribute("data-height", heightTo);
@@ -1127,13 +1124,13 @@ function editHeightmap() {
       viewbox.style("cursor", "default").on(".drag", null);
       tip('Heightmap edit mode is active. Click on "Exit Customization" to finalize the heightmap', true);
 
-      heights.selectAll("polygon").each(function() {
+      viewbox.select("#heights").selectAll("polygon").each(function() {
         const height = +this.getAttribute("data-height") || 0;
         const i = +this.id.slice(4);
         grid.cells.h[i] = height;
       });
 
-      heights.selectAll("polygon").remove();
+      viewbox.select("#heights").selectAll("polygon").remove();
       updateHeightmap();
     }
   }
diff --git a/modules/ui/layers.js b/modules/ui/layers.js
index 05088b07a..0b44f14c5 100644
--- a/modules/ui/layers.js
+++ b/modules/ui/layers.js
@@ -461,7 +461,9 @@ function drawCells() {
 }
 
 function toggleCultures(event) {
-  if (!cults.selectAll("path").size()) {
+  const cultures = pack.cultures.filter(c => c.i && !c.removed);
+  const empty = !cults.selectAll("path").size();
+  if (empty && cultures.length) {
     turnButtonOn("toggleCultures");
     drawCultures();
     if (event && event.ctrlKey) editStyle("cults");
@@ -472,7 +474,7 @@ function toggleCultures(event) {
   }
 }
 
-function drawCultures(event) {
+function drawCultures() {
   console.time("drawCultures");
   
   cults.selectAll("path").remove();
@@ -520,7 +522,8 @@ function drawCultures(event) {
 }
 
 function toggleReligions(event) {
-  if (!relig.selectAll("path").size()) {
+  const religions = pack.religions.filter(r => r.i && !r.removed);
+  if (!relig.selectAll("path").size() && religions.length) {
     turnButtonOn("toggleReligions");
     drawReligions();
     if (event && event.ctrlKey) editStyle("relig");
diff --git a/modules/ui/measurers.js b/modules/ui/measurers.js
index 5953d53ef..95c1ee840 100644
--- a/modules/ui/measurers.js
+++ b/modules/ui/measurers.js
@@ -266,7 +266,7 @@ function drawScaleBar() {
   fitScaleBar();
 }
 
-// fit ScaleBar to map size
+// fit ScaleBar to canvas size
 function fitScaleBar() {
   if (!scaleBar.select("rect").size() || scaleBar.style("display") === "none") return;
   const px = isNaN(+barPosX.value) ? .99 : barPosX.value / 100;
diff --git a/modules/ui/options.js b/modules/ui/options.js
index 2d9408573..3b90ab03d 100644
--- a/modules/ui/options.js
+++ b/modules/ui/options.js
@@ -133,26 +133,33 @@ function mapSizeInputChange() {
 
 // change svg size on manual size change or window resize, do not change graph size
 function changeMapSize() {
-  svgWidth = +mapWidthInput.value;
-  svgHeight = +mapHeightInput.value;
+  const svgWidth = Math.min(+mapWidthInput.value, window.innerWidth);
+  const svgHeight = Math.min(+mapHeightInput.value, window.innerHeight);
   svg.attr("width", svgWidth).attr("height", svgHeight);
-  const width = Math.max(svgWidth, graphWidth);
-  const height = Math.max(svgHeight, graphHeight);
-  zoom.translateExtent([[0, 0], [width, height]]);
-  landmass.select("rect").attr("x", 0).attr("y", 0).attr("width", width).attr("height", height);
-  oceanPattern.select("rect").attr("x", 0).attr("y", 0).attr("width", width).attr("height", height);
-  oceanLayers.select("rect").attr("x", 0).attr("y", 0).attr("width", width).attr("height", height);
+
+  const maxWidth = Math.max(+mapWidthInput.value, graphWidth);
+  const maxHeight = Math.max(+mapHeightInput.value, graphHeight);
+  zoom.translateExtent([[0, 0], [maxWidth, maxHeight]]);
+  landmass.select("rect").attr("x", 0).attr("y", 0).attr("width", maxWidth).attr("height", maxHeight);
+  oceanPattern.select("rect").attr("x", 0).attr("y", 0).attr("width", maxWidth).attr("height", maxHeight);
+  oceanLayers.select("rect").attr("x", 0).attr("y", 0).attr("width", maxWidth).attr("height", maxHeight);
+  defs.select("#mapClip > rect").attr("width", maxWidth).attr("height", maxHeight);
+
   fitScaleBar();
   if (window.fitLegendBox) fitLegendBox();
 }
 
-// just apply map size that was already set, apply graph size!
+// just apply canvas size that was already set
 function applyMapSize() {
-  svgWidth = graphWidth = +mapWidthInput.value;
-  svgHeight = graphHeight = +mapHeightInput.value;
+  graphWidth = +mapWidthInput.value;
+  graphHeight = +mapHeightInput.value;
+  svgWidth = Math.min(graphWidth, window.innerWidth)
+  svgHeight = Math.min(graphHeight, window.innerHeight)
   svg.attr("width", svgWidth).attr("height", svgHeight);
   zoom.translateExtent([[0, 0],[graphWidth, graphHeight]]).scaleExtent([1, 20]).scaleTo(svg, 1);
-  viewbox.attr("transform", null);
+  viewbox.attr("transform", null).attr("clip-path", "url(#mapClip)");
+  defs.append("clipPath").attr("id", "mapClip").append("rect").attr("x", 0).attr("y", 0).attr("width", graphWidth).attr("height", graphHeight);
+  //zoom.translateExtent([[-svgWidth*.2, -graphHeight*.2], [svgWidth*1.2, graphHeight*1.2]]);
 }
 
 function toggleFullscreen() {
diff --git a/modules/ui/provinces-editor.js b/modules/ui/provinces-editor.js
index 5353590db..2d029218a 100644
--- a/modules/ui/provinces-editor.js
+++ b/modules/ui/provinces-editor.js
@@ -57,11 +57,12 @@ function editProvinces() {
   }
 
   function collectStatistics() {
-    const cells = pack.cells, provinces = pack.provinces;
+    const cells = pack.cells, provinces = pack.provinces, burgs = pack.burgs;
     provinces.forEach(p => {
       if (!p.i || p.removed) return;
       p.area = p.rural = p.urban = 0;
       p.burgs = [];
+      if (p.burg && !burgs[p.burg] || burgs[p.burg].removed) p.burg = 0;
     });
 
     for (const i of cells.i) {
@@ -71,7 +72,7 @@ function editProvinces() {
       provinces[p].area += cells.area[i];
       provinces[p].rural += cells.pop[i];
       if (!cells.burg[i]) continue;
-      provinces[p].urban += pack.burgs[cells.burg[i]].population;
+      provinces[p].urban += burgs[cells.burg[i]].population;
       provinces[p].burgs.push(cells.burg[i]);
     }
 
diff --git a/modules/ui/religions-editor.js b/modules/ui/religions-editor.js
index 4add348bb..711849410 100644
--- a/modules/ui/religions-editor.js
+++ b/modules/ui/religions-editor.js
@@ -360,6 +360,7 @@ function editReligions() {
     // build hierarchy tree
     pack.religions[0].origin = null;
     const religions = pack.religions.filter(r => !r.removed);
+    if (religions.length < 3) {tip("Not enough religions to show hierarchy", false, "error"); return;}
     const root = d3.stratify().id(d => d.i).parentId(d => d.origin)(religions);
     const treeWidth = root.leaves().length;
     const treeHeight = root.height;
diff --git a/modules/ui/style.js b/modules/ui/style.js
index 0bad58edd..9d61c64d5 100644
--- a/modules/ui/style.js
+++ b/modules/ui/style.js
@@ -123,8 +123,9 @@ function selectStyleElement() {
 
   if (sel === "terrain") {
     styleRelief.style.display = "block";
-    styleReliefSizeOutput.innerHTML = styleReliefSizeInput.value;
-    styleReliefDensityOutput.innerHTML = styleReliefDensityInput.value;
+    styleReliefSizeOutput.innerHTML = styleReliefSizeInput.value = terrain.attr("size");
+    styleReliefDensityOutput.innerHTML = styleReliefDensityInput.value = terrain.attr("density");
+    styleReliefSet.value = terrain.attr("set");
   }
 
   if (sel === "population") {
@@ -396,13 +397,15 @@ styleHeightmapCurve.addEventListener("change", function() {
 });
 
 styleReliefSet.addEventListener("change", function() {
+  terrain.attr("set", this.value);
   ReliefIcons();
   if (!layerIsOn("toggleRelief")) toggleRelief();
 });
 
-styleReliefSizeInput.addEventListener("input", function() {
+styleReliefSizeInput.addEventListener("change", function() {
   styleReliefSizeOutput.value = this.value;
   const size = +this.value;
+  terrain.attr("size", size);
 
   terrain.selectAll("use").each(function(d) {
     const newSize = this.getAttribute("data-size") * size;
@@ -417,6 +420,7 @@ styleReliefSizeInput.addEventListener("input", function() {
 });
 
 styleReliefDensityInput.addEventListener("input", function() {
+  terrain.attr("density", this.value);
   styleReliefDensityOutput.value = this.value;
   ReliefIcons();
   if (!layerIsOn("toggleRelief")) toggleRelief();
@@ -667,22 +671,22 @@ function applyStyleOnLoad() {
 
 function addDefaulsStyles() {
   if (!localStorage.getItem("styleClean")) {
-    const clean = `{"#map":{"background-color":"#000000","filter":null,"data-filter":null},"#biomes":{"opacity":0.5,"filter":"url(#blur7)","mask":"url(#land)"},"#stateBorders":{"opacity":0.8,"stroke":"#414141","stroke-width":0.7,"stroke-dasharray":0,"stroke-linecap":"butt","filter":""},"#provinceBorders":{"opacity":0.8,"stroke":"#414141","stroke-width":0.45,"stroke-dasharray":1,"stroke-linecap":"butt","filter":null},"#cells":{"opacity":null,"stroke":"#808080","stroke-width":0.09,"filter":null,"mask":"url(#land)"},"#gridOverlay":{"opacity":0.8,"size":10,"type":"pointyHex","stroke":"#808080","stroke-width":0.5,"stroke-dasharray":null,"stroke-linecap":null,"transform":null,"filter":null,"mask":null},"#coordinates":{"opacity":1,"data-size":12,"font-size":12,"stroke":"#414141","stroke-width":0.45,"stroke-dasharray":3,"stroke-linecap":null,"filter":null,"mask":null},"#compass":{"opacity":0.8,"transform":null,"filter":null,"mask":"url(#water)","shape-rendering":"optimizespeed"},"#rose":{"transform":null},"#relig":{"opacity":0.7,"stroke":"#404040","stroke-width":0.7,"filter":null},"#cults":{"opacity":0.6,"stroke":"#777777","stroke-width":0.5,"stroke-dasharray":null,"stroke-linecap":null,"filter":null},"#landmass":{"opacity":1,"fill":"#eeedeb","filter":null},"#markers":{"opacity":null,"rescale":null,"filter":"url(#dropShadow01)"},"#prec":{"opacity":null,"stroke":"#000000","stroke-width":0,"fill":"#0080ff","filter":null},"#population":{"opacity":null,"stroke-width":2.58,"stroke-dasharray":0,"stroke-linecap":"butt","filter":"url(#blur3)"},"#rural":{"stroke":"#ff0000"},"#urban":{"stroke":"#800000"},"#freshwater":{"opacity":0.5,"fill":"#aadaff","stroke":"#5f799d","stroke-width":0,"filter":null},"#salt":{"opacity":0.5,"fill":"#409b8a","stroke":"#388985","stroke-width":0.7,"filter":null},"#sinkhole":{"opacity":1,"fill":"#5bc9fd","stroke":"#53a3b0","stroke-width":0.7,"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)"},"#sea_island":{"opacity":0.6,"stroke":"#595959","stroke-width":0.4,"filter":"","auto-filter":0},"#lake_island":{"opacity":0,"stroke":"#7c8eaf","stroke-width":0,"filter":null},"#terrain":{"opacity":null,"filter":null,"mask":null},"#rivers":{"opacity":null,"filter":null,"fill":"#aadaff"},"#ruler":{"opacity":null,"filter":null},"#roads":{"opacity":0.9,"stroke":"#f6d068","stroke-width":0.7,"stroke-dasharray":0,"stroke-linecap":"inherit","filter":null,"mask":null},"#trails":{"opacity":1,"stroke":"#ffffff","stroke-width":0.25,"stroke-dasharray":"","stroke-linecap":"round","filter":null,"mask":null},"#searoutes":{"opacity":0.8,"stroke":"#4f82c6","stroke-width":0.45,"stroke-dasharray":2,"stroke-linecap":"butt","filter":null,"mask":"url(#water)"},"#regions":{"opacity":0.4,"filter":null},"#statesHalo":{"opacity":0,"data-width":null,"stroke-width":0},"#provs":{"opacity":0.6,"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},"#texture":{"opacity":null,"filter":null,"mask":"url(#land)"},"#textureImage":{},"#zones":{"opacity":0.7,"stroke":"#ff6262","stroke-width":0,"stroke-dasharray":"","stroke-linecap":"butt","filter":null,"mask":null},"#ocean":{"opacity":null},"#oceanLayers":{"filter":"","layers":"none"},"#oceanBase":{"fill":"#aadaff"},"#oceanPattern":{"opacity":null},"#oceanicPattern":{"filter":"url(#emptyImage)"},"#terrs":{"opacity":0.5,"scheme":"bright","terracing":0,"skip":5,"relax":0,"curve":0,"filter":"","mask":"url(#land)"},"#legend":{"data-size":12.74,"font-size":12.74,"data-font":"Arial","font-family":"Arial","stroke":"#909090","stroke-width":1.13,"stroke-dasharray":0,"stroke-linecap":"round","data-x":98.39,"data-y":12.67,"data-columns":null},"#legendBox":{},"#burgLabels > #cities":{"opacity":1,"fill":"#414141","data-size":7,"font-size":7,"data-font":"Arial","font-family":"Arial"},"#burgIcons > #cities":{"opacity":1,"fill":"#ffffff","fill-opacity":0.7,"size":1,"stroke":"#3e3e4b","stroke-width":0.24,"stroke-dasharray":"","stroke-linecap":"butt"},"#anchors > #cities":{"opacity":1,"fill":"#ffffff","size":2,"stroke":"#303030","stroke-width":1.7},"#burgLabels > #towns":{"opacity":1,"fill":"#414141","data-size":3,"font-size":3,"data-font":"Arial","font-family":"Arial"},"#burgIcons > #towns":{"opacity":1,"fill":"#ffffff","fill-opacity":0.7,"size":0.5,"stroke":"#3e3e4b","stroke-width":0.12,"stroke-dasharray":"","stroke-linecap":"butt"},"#anchors > #towns":{"opacity":1,"fill":"#ffffff","size":1,"stroke":"#3e3e4b","stroke-width":1.06},"#labels > #states":{"opacity":1,"fill":"#292929","stroke":"#303030","stroke-width":0,"data-size":10,"font-size":10,"data-font":"Arial","font-family":"Arial","filter":null},"#labels > #addedLabels":{"opacity":1,"fill":"#414141","stroke":"#3a3a3a","stroke-width":0,"data-size":18,"font-size":18,"data-font":"Arial","font-family":"Arial","filter":null},"#fogging-cont":{"opacity":null,"fill":null,"stroke-width":null}}`;
+    const clean = `{"#map":{"background-color":"#000000","filter":null,"data-filter":null},"#biomes":{"opacity":0.5,"filter":"url(#blur7)","mask":"url(#land)"},"#stateBorders":{"opacity":0.8,"stroke":"#414141","stroke-width":0.7,"stroke-dasharray":0,"stroke-linecap":"butt","filter":""},"#provinceBorders":{"opacity":0.8,"stroke":"#414141","stroke-width":0.45,"stroke-dasharray":1,"stroke-linecap":"butt","filter":null},"#cells":{"opacity":null,"stroke":"#808080","stroke-width":0.09,"filter":null,"mask":"url(#land)"},"#gridOverlay":{"opacity":0.8,"size":10,"type":"pointyHex","stroke":"#808080","stroke-width":0.5,"stroke-dasharray":null,"stroke-linecap":null,"transform":null,"filter":null,"mask":null},"#coordinates":{"opacity":1,"data-size":12,"font-size":12,"stroke":"#414141","stroke-width":0.45,"stroke-dasharray":3,"stroke-linecap":null,"filter":null,"mask":null},"#compass":{"opacity":0.8,"transform":null,"filter":null,"mask":"url(#water)","shape-rendering":"optimizespeed"},"#rose":{"transform":null},"#relig":{"opacity":0.7,"stroke":"#404040","stroke-width":0.7,"filter":null},"#cults":{"opacity":0.6,"stroke":"#777777","stroke-width":0.5,"stroke-dasharray":null,"stroke-linecap":null,"filter":null},"#landmass":{"opacity":1,"fill":"#eeedeb","filter":null},"#markers":{"opacity":null,"rescale":null,"filter":"url(#dropShadow01)"},"#prec":{"opacity":null,"stroke":"#000000","stroke-width":0,"fill":"#0080ff","filter":null},"#population":{"opacity":null,"stroke-width":2.58,"stroke-dasharray":0,"stroke-linecap":"butt","filter":"url(#blur3)"},"#rural":{"stroke":"#ff0000"},"#urban":{"stroke":"#800000"},"#freshwater":{"opacity":0.5,"fill":"#aadaff","stroke":"#5f799d","stroke-width":0,"filter":null},"#salt":{"opacity":0.5,"fill":"#409b8a","stroke":"#388985","stroke-width":0.7,"filter":null},"#sinkhole":{"opacity":1,"fill":"#5bc9fd","stroke":"#53a3b0","stroke-width":0.7,"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)"},"#sea_island":{"opacity":0.6,"stroke":"#595959","stroke-width":0.4,"filter":"","auto-filter":0},"#lake_island":{"opacity":0,"stroke":"#7c8eaf","stroke-width":0,"filter":null},"#terrain":{"opacity":null,"set":"simple","size":1,"density":.4,filter":null,"mask":null},"#rivers":{"opacity":null,"filter":null,"fill":"#aadaff"},"#ruler":{"opacity":null,"filter":null},"#roads":{"opacity":0.9,"stroke":"#f6d068","stroke-width":0.7,"stroke-dasharray":0,"stroke-linecap":"inherit","filter":null,"mask":null},"#trails":{"opacity":1,"stroke":"#ffffff","stroke-width":0.25,"stroke-dasharray":"","stroke-linecap":"round","filter":null,"mask":null},"#searoutes":{"opacity":0.8,"stroke":"#4f82c6","stroke-width":0.45,"stroke-dasharray":2,"stroke-linecap":"butt","filter":null,"mask":"url(#water)"},"#regions":{"opacity":0.4,"filter":null},"#statesHalo":{"opacity":0,"data-width":null,"stroke-width":0},"#provs":{"opacity":0.6,"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},"#texture":{"opacity":null,"filter":null,"mask":"url(#land)"},"#textureImage":{},"#zones":{"opacity":0.7,"stroke":"#ff6262","stroke-width":0,"stroke-dasharray":"","stroke-linecap":"butt","filter":null,"mask":null},"#ocean":{"opacity":null},"#oceanLayers":{"filter":"","layers":"none"},"#oceanBase":{"fill":"#aadaff"},"#oceanPattern":{"opacity":null},"#oceanicPattern":{"filter":"url(#emptyImage)"},"#terrs":{"opacity":0.5,"scheme":"bright","terracing":0,"skip":5,"relax":0,"curve":0,"filter":"","mask":"url(#land)"},"#legend":{"data-size":12.74,"font-size":12.74,"data-font":"Arial","font-family":"Arial","stroke":"#909090","stroke-width":1.13,"stroke-dasharray":0,"stroke-linecap":"round","data-x":98.39,"data-y":12.67,"data-columns":null},"#legendBox":{},"#burgLabels > #cities":{"opacity":1,"fill":"#414141","data-size":7,"font-size":7,"data-font":"Arial","font-family":"Arial"},"#burgIcons > #cities":{"opacity":1,"fill":"#ffffff","fill-opacity":0.7,"size":1,"stroke":"#3e3e4b","stroke-width":0.24,"stroke-dasharray":"","stroke-linecap":"butt"},"#anchors > #cities":{"opacity":1,"fill":"#ffffff","size":2,"stroke":"#303030","stroke-width":1.7},"#burgLabels > #towns":{"opacity":1,"fill":"#414141","data-size":3,"font-size":3,"data-font":"Arial","font-family":"Arial"},"#burgIcons > #towns":{"opacity":1,"fill":"#ffffff","fill-opacity":0.7,"size":0.5,"stroke":"#3e3e4b","stroke-width":0.12,"stroke-dasharray":"","stroke-linecap":"butt"},"#anchors > #towns":{"opacity":1,"fill":"#ffffff","size":1,"stroke":"#3e3e4b","stroke-width":1.06},"#labels > #states":{"opacity":1,"fill":"#292929","stroke":"#303030","stroke-width":0,"data-size":10,"font-size":10,"data-font":"Arial","font-family":"Arial","filter":null},"#labels > #addedLabels":{"opacity":1,"fill":"#414141","stroke":"#3a3a3a","stroke-width":0,"data-size":18,"font-size":18,"data-font":"Arial","font-family":"Arial","filter":null},"#fogging-cont":{"opacity":null,"fill":null,"stroke-width":null}}`;
     localStorage.setItem("styleClean", clean);
   }
 
   if (!localStorage.getItem("styleGloom")) {
-    const gloom = `{"#map":{"background-color":"#000000","filter":null,"data-filter":null},"#biomes":{"opacity":null,"filter":"url(#blur5)","mask":"url(#land)"},"#stateBorders":{"opacity":1,"stroke":"#56566d","stroke-width":1,"stroke-dasharray":2,"stroke-linecap":"butt","filter":""},"#provinceBorders":{"opacity":1,"stroke":"#56566d","stroke-width":0.3,"stroke-dasharray":".7 1","stroke-linecap":"butt","filter":null},"#cells":{"opacity":null,"stroke":"#808080","stroke-width":0.1,"filter":null,"mask":null},"#gridOverlay":{"opacity":0.8,"size":10,"type":"pointyHex","stroke":"#808080","stroke-width":0.5,"stroke-dasharray":null,"stroke-linecap":null,"transform":null,"filter":null,"mask":null},"#coordinates":{"opacity":1,"data-size":14,"font-size":14,"stroke":"#4a4a4a","stroke-width":1,"stroke-dasharray":6,"stroke-linecap":null,"filter":"","mask":""},"#compass":{"opacity":0.6,"transform":null,"filter":null,"mask":"url(#water)","shape-rendering":"optimizespeed"},"#rose":{"transform":"translate(100 100) scale(0.3)"},"#relig":{"opacity":0.7,"stroke":"#404040","stroke-width":1,"filter":null},"#cults":{"opacity":0.7,"stroke":"#777777","stroke-width":1.5,"stroke-dasharray":null,"stroke-linecap":null,"filter":null},"#landmass":{"opacity":1,"fill":"#eef6fb","filter":null},"#markers":{"opacity":0.8,"rescale":1,"filter":"url(#dropShadow05)"},"#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":"#0000aa"},"#urban":{"stroke":"#9d0000"},"#freshwater":{"opacity":0.5,"fill":"#a6c1fd","stroke":"#5f799d","stroke-width":0.7,"filter":null},"#salt":{"opacity":0.5,"fill":"#409b8a","stroke":"#388985","stroke-width":0.7,"filter":null},"#sinkhole":{"opacity":1,"fill":"#5bc9fd","stroke":"#53a3b0","stroke-width":0.7,"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)"},"#sea_island":{"opacity":0.6,"stroke":"#1f3846","stroke-width":0.7,"filter":"url(#dropShadow)","auto-filter":1},"#lake_island":{"opacity":1,"stroke":"#7c8eaf","stroke-width":0.35,"filter":null},"#terrain":{"opacity":0.9,"filter":null,"mask":null},"#rivers":{"opacity":null,"filter":"","fill":"#779582"},"#ruler":{"opacity":null,"filter":null},"#roads":{"opacity":1,"stroke":"#8b4418","stroke-width":0.9,"stroke-dasharray":"2 3","stroke-linecap":"round","filter":"","mask":null},"#trails":{"opacity":1,"stroke":"#844017","stroke-width":0.2,"stroke-dasharray":".5 1","stroke-linecap":"round","filter":null,"mask":null},"#searoutes":{"opacity":0.8,"stroke":"#5e1865","stroke-width":0.6,"stroke-dasharray":"1.2 2.4","stroke-linecap":"round","filter":null,"mask":null},"#regions":{"opacity":0.4,"filter":"url(#dropShadow)"},"#statesHalo":{"opacity":1,"data-width":10.2,"stroke-width":10.2},"#provs":{"opacity":0.5,"filter":""},"#temperature":{"opacity":1,"font-size":"11px","fill":"#62001b","fill-opacity":0.3,"stroke":null,"stroke-width":2,"stroke-dasharray":2,"stroke-linecap":null,"filter":null},"#texture":{"opacity":null,"filter":null,"mask":"url(#land)"},"#textureImage":{"x":0,"y":0},"#zones":{"opacity":0.5,"stroke":"#333333","stroke-width":0,"stroke-dasharray":null,"stroke-linecap":"butt","filter":"url(#dropShadow01)","mask":null},"#ocean":{"opacity":1},"#oceanLayers":{"filter":null,"layers":"-6,-4,-2"},"#oceanBase":{"fill":"#4e6964"},"#oceanPattern":{"opacity":null},"#oceanicPattern":{"filter":"url(#pattern3)"},"#terrs":{"opacity":1,"scheme":"bright","terracing":0,"skip":0,"relax":1,"curve":1,"filter":"url(#filter-grayscale)","mask":"url(#land)"},"#legend":{"data-size":13,"font-size":13,"data-font":"Almendra+SC","font-family":"Almendra SC","stroke":"#812929","stroke-width":2.5,"stroke-dasharray":"0 4 10 4","stroke-linecap":"round","data-x":99,"data-y":93,"data-columns":8},"#legendBox":{},"#burgLabels > #cities":{"opacity":1,"fill":"#3e3e4b","data-size":7,"font-size":7,"data-font":"Bitter","font-family":"Bitter"},"#burgIcons > #cities":{"opacity":1,"fill":"#ffffff","fill-opacity":0.7,"size":2,"stroke":"#444444","stroke-width":0.25,"stroke-dasharray":"","stroke-linecap":"butt"},"#anchors > #cities":{"opacity":0.8,"fill":"#ffffff","size":4,"stroke":"#3e3e4b","stroke-width":1},"#burgLabels > #towns":{"opacity":1,"fill":"#3e3e4b","data-size":3,"font-size":3,"data-font":"Bitter","font-family":"Bitter"},"#burgIcons > #towns":{"opacity":0.95,"fill":"#ffffff","fill-opacity":0.7,"size":0.8,"stroke":"#3e3e4b","stroke-width":0.2,"stroke-dasharray":"","stroke-linecap":"butt"},"#anchors > #towns":{"opacity":1,"fill":"#ffffff","size":1.6,"stroke":"#3e3e4b","stroke-width":1.2},"#labels > #states":{"opacity":1,"fill":"#4e4e4e","stroke":"#b5b5b5","stroke-width":0,"data-size":22,"font-size":22,"data-font":"Almendra+SC","font-family":"Almendra SC","filter":""},"#labels > #addedLabels":{"opacity":1,"fill":"#3e3e4b","stroke":"#3a3a3a","stroke-width":0,"data-size":18,"font-size":18,"data-font":"Almendra+SC","font-family":"Almendra SC","filter":null},"#fogging-cont":{"opacity":null,"fill":null,"stroke-width":null}}`;
+    const gloom = `{"#map":{"background-color":"#000000","filter":null,"data-filter":null},"#biomes":{"opacity":null,"filter":"url(#blur5)","mask":"url(#land)"},"#stateBorders":{"opacity":1,"stroke":"#56566d","stroke-width":1,"stroke-dasharray":2,"stroke-linecap":"butt","filter":""},"#provinceBorders":{"opacity":1,"stroke":"#56566d","stroke-width":0.3,"stroke-dasharray":".7 1","stroke-linecap":"butt","filter":null},"#cells":{"opacity":null,"stroke":"#808080","stroke-width":0.1,"filter":null,"mask":null},"#gridOverlay":{"opacity":0.8,"size":10,"type":"pointyHex","stroke":"#808080","stroke-width":0.5,"stroke-dasharray":null,"stroke-linecap":null,"transform":null,"filter":null,"mask":null},"#coordinates":{"opacity":1,"data-size":14,"font-size":14,"stroke":"#4a4a4a","stroke-width":1,"stroke-dasharray":6,"stroke-linecap":null,"filter":"","mask":""},"#compass":{"opacity":0.6,"transform":null,"filter":null,"mask":"url(#water)","shape-rendering":"optimizespeed"},"#rose":{"transform":"translate(100 100) scale(0.3)"},"#relig":{"opacity":0.7,"stroke":"#404040","stroke-width":1,"filter":null},"#cults":{"opacity":0.7,"stroke":"#777777","stroke-width":1.5,"stroke-dasharray":null,"stroke-linecap":null,"filter":null},"#landmass":{"opacity":1,"fill":"#e0e0e0","filter":null},"#markers":{"opacity":0.8,"rescale":1,"filter":"url(#dropShadow05)"},"#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":"#0000aa"},"#urban":{"stroke":"#9d0000"},"#freshwater":{"opacity":0.5,"fill":"#a6c1fd","stroke":"#5f799d","stroke-width":0.7,"filter":null},"#salt":{"opacity":0.5,"fill":"#409b8a","stroke":"#388985","stroke-width":0.7,"filter":null},"#sinkhole":{"opacity":1,"fill":"#5bc9fd","stroke":"#53a3b0","stroke-width":0.7,"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)"},"#sea_island":{"opacity":0.6,"stroke":"#1f3846","stroke-width":0.7,"filter":"url(#dropShadow)","auto-filter":1},"#lake_island":{"opacity":1,"stroke":"#7c8eaf","stroke-width":0.35,"filter":null},"#terrain":{"opacity":0.9,"set":"simple","size":1,"density":.4,filter":null,"mask":null},"#rivers":{"opacity":null,"filter":"","fill":"#779582"},"#ruler":{"opacity":null,"filter":null},"#roads":{"opacity":1,"stroke":"#8b4418","stroke-width":0.9,"stroke-dasharray":"2 3","stroke-linecap":"round","filter":"","mask":null},"#trails":{"opacity":1,"stroke":"#844017","stroke-width":0.2,"stroke-dasharray":".5 1","stroke-linecap":"round","filter":null,"mask":null},"#searoutes":{"opacity":0.8,"stroke":"#5e1865","stroke-width":0.6,"stroke-dasharray":"1.2 2.4","stroke-linecap":"round","filter":null,"mask":null},"#regions":{"opacity":0.4,"filter":"url(#dropShadow)"},"#statesHalo":{"opacity":1,"data-width":10.2,"stroke-width":10.2},"#provs":{"opacity":0.5,"filter":""},"#temperature":{"opacity":1,"font-size":"11px","fill":"#62001b","fill-opacity":0.3,"stroke":null,"stroke-width":2,"stroke-dasharray":2,"stroke-linecap":null,"filter":null},"#texture":{"opacity":null,"filter":null,"mask":"url(#land)"},"#textureImage":{"x":0,"y":0},"#zones":{"opacity":0.5,"stroke":"#333333","stroke-width":0,"stroke-dasharray":null,"stroke-linecap":"butt","filter":"url(#dropShadow01)","mask":null},"#ocean":{"opacity":1},"#oceanLayers":{"filter":null,"layers":"-6,-4,-2"},"#oceanBase":{"fill":"#4e6964"},"#oceanPattern":{"opacity":null},"#oceanicPattern":{"filter":"url(#pattern3)"},"#terrs":{"opacity":1,"scheme":"bright","terracing":0,"skip":0,"relax":1,"curve":1,"filter":"url(#filter-grayscale)","mask":"url(#land)"},"#legend":{"data-size":13,"font-size":13,"data-font":"Almendra+SC","font-family":"Almendra SC","stroke":"#812929","stroke-width":2.5,"stroke-dasharray":"0 4 10 4","stroke-linecap":"round","data-x":99,"data-y":93,"data-columns":8},"#legendBox":{},"#burgLabels > #cities":{"opacity":1,"fill":"#3e3e4b","data-size":7,"font-size":7,"data-font":"Bitter","font-family":"Bitter"},"#burgIcons > #cities":{"opacity":1,"fill":"#ffffff","fill-opacity":0.7,"size":2,"stroke":"#444444","stroke-width":0.25,"stroke-dasharray":"","stroke-linecap":"butt"},"#anchors > #cities":{"opacity":0.8,"fill":"#ffffff","size":4,"stroke":"#3e3e4b","stroke-width":1},"#burgLabels > #towns":{"opacity":1,"fill":"#3e3e4b","data-size":3,"font-size":3,"data-font":"Bitter","font-family":"Bitter"},"#burgIcons > #towns":{"opacity":0.95,"fill":"#ffffff","fill-opacity":0.7,"size":0.8,"stroke":"#3e3e4b","stroke-width":0.2,"stroke-dasharray":"","stroke-linecap":"butt"},"#anchors > #towns":{"opacity":1,"fill":"#ffffff","size":1.6,"stroke":"#3e3e4b","stroke-width":1.2},"#labels > #states":{"opacity":1,"fill":"#4e4e4e","stroke":"#b5b5b5","stroke-width":0,"data-size":22,"font-size":22,"data-font":"Almendra+SC","font-family":"Almendra SC","filter":""},"#labels > #addedLabels":{"opacity":1,"fill":"#3e3e4b","stroke":"#3a3a3a","stroke-width":0,"data-size":18,"font-size":18,"data-font":"Almendra+SC","font-family":"Almendra SC","filter":null},"#fogging-cont":{"opacity":null,"fill":null,"stroke-width":null}}`;
     localStorage.setItem("styleGloom", gloom);
   }
 
   if (!localStorage.getItem("styleAncient")) {
-    const ancient = `{"#map":{"background-color":"#000000","filter":"url(#filter-sepia)","data-filter":"sepia"},"#biomes":{"opacity":null,"filter":null,"mask":null},"#stateBorders":{"opacity":0.8,"stroke":"#56566d","stroke-width":1,"stroke-dasharray":2,"stroke-linecap":"butt","filter":null},"#provinceBorders":{"opacity":0.8,"stroke":"#56566d","stroke-width":0.2,"stroke-dasharray":1,"stroke-linecap":"butt","filter":null},"#cells":{"opacity":null,"stroke":"#808080","stroke-width":0.1,"filter":null,"mask":null},"#gridOverlay":{"opacity":0.8,"size":10,"type":"pointyHex","stroke":"#808080","stroke-width":0.5,"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"},"#rose":{"transform":"translate(80 80) scale(.25)"},"#relig":{"opacity":0.7,"stroke":"#404040","stroke-width":0.7,"filter":null},"#cults":{"opacity":0.6,"stroke":"#777777","stroke-width":0.5,"stroke-dasharray":null,"stroke-linecap":null,"filter":null},"#landmass":{"opacity":1,"fill":"#eee9d7","filter":null},"#markers":{"opacity":null,"rescale":1,"filter":"url(#dropShadow01)"},"#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":0.5,"fill":"#a6c1fd","stroke":"#5f799d","stroke-width":0.7,"filter":null},"#salt":{"opacity":0.5,"fill":"#409b8a","stroke":"#388985","stroke-width":0.7,"filter":null},"#sinkhole":{"opacity":1,"fill":"#5bc9fd","stroke":"#53a3b0","stroke-width":0.7,"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)"},"#sea_island":{"opacity":0.5,"stroke":"#1f3846","stroke-width":0.7,"filter":"url(#dropShadow)","auto-filter":1},"#lake_island":{"opacity":1,"stroke":"#7c8eaf","stroke-width":0.35,"filter":null},"#terrain":{"opacity":null,"filter":null,"mask":null},"#rivers":{"opacity":null,"filter":null,"fill":"#5d97bb"},"#ruler":{"opacity":null,"filter":null},"#roads":{"opacity":0.8,"stroke":"#2e1607","stroke-width":1.23,"stroke-dasharray":3,"stroke-linecap":"inherit","filter":null,"mask":null},"#trails":{"opacity":0.8,"stroke":"#331809","stroke-width":0.5,"stroke-dasharray":"1 2","stroke-linecap":"butt","filter":null,"mask":null},"#searoutes":{"opacity":0.8,"stroke":"#ffffff","stroke-width":0.8,"stroke-dasharray":"1 2","stroke-linecap":"round","filter":null,"mask":null},"#regions":{"opacity":0.4,"filter":""},"#statesHalo":{"opacity":1,"data-width":10,"stroke-width":10},"#provs":{"opacity":0.6,"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},"#texture":{"opacity":null,"filter":null,"mask":"url(#land)"},"#textureImage":{},"#zones":{"opacity":0.6,"stroke":"#333333","stroke-width":0,"stroke-dasharray":null,"stroke-linecap":"butt","filter":null,"mask":null},"#ocean":{"opacity":1},"#oceanLayers":{"filter":"url(#blur5)","layers":"-6,-4,-2"},"#oceanBase":{"fill":"#a7a01f"},"#oceanPattern":{"opacity":null},"#oceanicPattern":{"filter":"url(#pattern1)"},"#terrs":{"opacity":null,"scheme":"light","terracing":0,"skip":0,"relax":0,"curve":0,"filter":null,"mask":"url(#land)"},"#legend":{"data-size":13,"font-size":13,"data-font":"Almendra+SC","font-family":"Almendra SC","stroke":"#812929","stroke-width":2.5,"stroke-dasharray":"0 4 10 4","stroke-linecap":"round","data-x":99,"data-y":93,"data-columns":8},"#legendBox":{},"#burgLabels > #cities":{"opacity":1,"fill":"#3e3e4b","data-size":8,"font-size":8,"data-font":"Almendra+SC","font-family":"Almendra SC"},"#burgIcons > #cities":{"opacity":1,"fill":"#fdfab9","fill-opacity":0.7,"size":1,"stroke":"#54251d","stroke-width":0.3,"stroke-dasharray":".3 .4","stroke-linecap":"butt"},"#anchors > #cities":{"opacity":1,"fill":"#ffffff","size":2,"stroke":"#3e3e4b","stroke-width":1.2},"#burgLabels > #towns":{"opacity":1,"fill":"#3e3e4b","data-size":4,"font-size":4,"data-font":"Almendra+SC","font-family":"Almendra SC"},"#burgIcons > #towns":{"opacity":1,"fill":"#fef4d8","fill-opacity":0.7,"size":0.5,"stroke":"#463124","stroke-width":0.12,"stroke-dasharray":"","stroke-linecap":"butt"},"#anchors > #towns":{"opacity":1,"fill":"#ffffff","size":1,"stroke":"#3e3e4b","stroke-width":1.2},"#labels > #states":{"opacity":1,"fill":"#3e3e4b","stroke":"#3a3a3a","stroke-width":0,"data-size":22,"font-size":22,"data-font":"Almendra+SC","font-family":"Almendra SC","filter":null},"#labels > #addedLabels":{"opacity":1,"fill":"#3e3e4b","stroke":"#3a3a3a","stroke-width":0,"data-size":18,"font-size":18,"data-font":"Almendra+SC","font-family":"Almendra SC","filter":null},"#fogging-cont":{"opacity":null,"fill":null,"stroke-width":null}}`;
+    const ancient = `{"#map":{"background-color":"#000000","filter":"url(#filter-sepia)","data-filter":"sepia"},"#biomes":{"opacity":null,"filter":null,"mask":null},"#stateBorders":{"opacity":0.8,"stroke":"#56566d","stroke-width":1,"stroke-dasharray":2,"stroke-linecap":"butt","filter":null},"#provinceBorders":{"opacity":0.8,"stroke":"#56566d","stroke-width":0.2,"stroke-dasharray":1,"stroke-linecap":"butt","filter":null},"#cells":{"opacity":null,"stroke":"#808080","stroke-width":0.1,"filter":null,"mask":null},"#gridOverlay":{"opacity":0.8,"size":10,"type":"pointyHex","stroke":"#808080","stroke-width":0.5,"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"},"#rose":{"transform":"translate(80 80) scale(.25)"},"#relig":{"opacity":0.7,"stroke":"#404040","stroke-width":0.7,"filter":null},"#cults":{"opacity":0.6,"stroke":"#777777","stroke-width":0.5,"stroke-dasharray":null,"stroke-linecap":null,"filter":null},"#landmass":{"opacity":1,"fill":"#eee9d7","filter":null},"#markers":{"opacity":null,"rescale":1,"filter":"url(#dropShadow01)"},"#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":0.5,"fill":"#a6c1fd","stroke":"#5f799d","stroke-width":0.7,"filter":null},"#salt":{"opacity":0.5,"fill":"#409b8a","stroke":"#388985","stroke-width":0.7,"filter":null},"#sinkhole":{"opacity":1,"fill":"#5bc9fd","stroke":"#53a3b0","stroke-width":0.7,"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)"},"#sea_island":{"opacity":0.5,"stroke":"#1f3846","stroke-width":0.7,"filter":"url(#dropShadow)","auto-filter":1},"#lake_island":{"opacity":1,"stroke":"#7c8eaf","stroke-width":0.35,"filter":null},"#terrain":{"opacity":null,"set":"simple","size":1,"density":.4,filter":null,"mask":null},"#rivers":{"opacity":null,"filter":null,"fill":"#5d97bb"},"#ruler":{"opacity":null,"filter":null},"#roads":{"opacity":0.8,"stroke":"#2e1607","stroke-width":1.23,"stroke-dasharray":3,"stroke-linecap":"inherit","filter":null,"mask":null},"#trails":{"opacity":0.8,"stroke":"#331809","stroke-width":0.5,"stroke-dasharray":"1 2","stroke-linecap":"butt","filter":null,"mask":null},"#searoutes":{"opacity":0.8,"stroke":"#ffffff","stroke-width":0.8,"stroke-dasharray":"1 2","stroke-linecap":"round","filter":null,"mask":null},"#regions":{"opacity":0.4,"filter":""},"#statesHalo":{"opacity":1,"data-width":10,"stroke-width":10},"#provs":{"opacity":0.6,"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},"#texture":{"opacity":null,"filter":null,"mask":"url(#land)"},"#textureImage":{},"#zones":{"opacity":0.6,"stroke":"#333333","stroke-width":0,"stroke-dasharray":null,"stroke-linecap":"butt","filter":null,"mask":null},"#ocean":{"opacity":1},"#oceanLayers":{"filter":"url(#blur5)","layers":"-6,-4,-2"},"#oceanBase":{"fill":"#a7a01f"},"#oceanPattern":{"opacity":null},"#oceanicPattern":{"filter":"url(#pattern1)"},"#terrs":{"opacity":null,"scheme":"light","terracing":0,"skip":0,"relax":0,"curve":0,"filter":null,"mask":"url(#land)"},"#legend":{"data-size":13,"font-size":13,"data-font":"Almendra+SC","font-family":"Almendra SC","stroke":"#812929","stroke-width":2.5,"stroke-dasharray":"0 4 10 4","stroke-linecap":"round","data-x":99,"data-y":93,"data-columns":8},"#legendBox":{},"#burgLabels > #cities":{"opacity":1,"fill":"#3e3e4b","data-size":8,"font-size":8,"data-font":"Almendra+SC","font-family":"Almendra SC"},"#burgIcons > #cities":{"opacity":1,"fill":"#fdfab9","fill-opacity":0.7,"size":1,"stroke":"#54251d","stroke-width":0.3,"stroke-dasharray":".3 .4","stroke-linecap":"butt"},"#anchors > #cities":{"opacity":1,"fill":"#ffffff","size":2,"stroke":"#3e3e4b","stroke-width":1.2},"#burgLabels > #towns":{"opacity":1,"fill":"#3e3e4b","data-size":4,"font-size":4,"data-font":"Almendra+SC","font-family":"Almendra SC"},"#burgIcons > #towns":{"opacity":1,"fill":"#fef4d8","fill-opacity":0.7,"size":0.5,"stroke":"#463124","stroke-width":0.12,"stroke-dasharray":"","stroke-linecap":"butt"},"#anchors > #towns":{"opacity":1,"fill":"#ffffff","size":1,"stroke":"#3e3e4b","stroke-width":1.2},"#labels > #states":{"opacity":1,"fill":"#3e3e4b","stroke":"#3a3a3a","stroke-width":0,"data-size":22,"font-size":22,"data-font":"Almendra+SC","font-family":"Almendra SC","filter":null},"#labels > #addedLabels":{"opacity":1,"fill":"#3e3e4b","stroke":"#3a3a3a","stroke-width":0,"data-size":18,"font-size":18,"data-font":"Almendra+SC","font-family":"Almendra SC","filter":null},"#fogging-cont":{"opacity":null,"fill":null,"stroke-width":null}}`;
     localStorage.setItem("styleAncient", ancient);
   }
 
   if (!localStorage.getItem("styleMonochrome")) {
-    const monochrome = `{"#map":{"background-color":"#000000","filter":"url(#filter-grayscale)","data-filter":"grayscale"},"#biomes":{"opacity":null,"filter":"url(#blur5)","mask":null},"#stateBorders":{"opacity":1,"stroke":"#56566d","stroke-width":1,"stroke-dasharray":2,"stroke-linecap":"butt","filter":null},"#provinceBorders":{"opacity":1,"stroke":"#56566d","stroke-width":0.4,"stroke-dasharray":1,"stroke-linecap":"butt","filter":null},"#cells":{"opacity":null,"stroke":"#808080","stroke-width":0.1,"filter":null,"mask":null},"#gridOverlay":{"opacity":0.8,"size":10,"type":"pointyHex","stroke":"#808080","stroke-width":0.5,"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"},"#rose":{"transform":null},"#relig":{"opacity":0.7,"stroke":"#404040","stroke-width":0.7,"filter":null},"#cults":{"opacity":0.6,"stroke":"#777777","stroke-width":0.5,"stroke-dasharray":null,"stroke-linecap":null,"filter":null},"#landmass":{"opacity":1,"fill":"#000000","filter":null},"#markers":{"opacity":null,"rescale":1,"filter":"url(#dropShadow01)"},"#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":"#000000","stroke":"#515151","stroke-width":0,"filter":null},"#salt":{"opacity":1,"fill":"#000000","stroke":"#484848","stroke-width":0,"filter":null},"#sinkhole":{"opacity":1,"fill":"#000000","stroke":"#5f5f5f","stroke-width":0.5,"filter":null},"#frozen":{"opacity":1,"fill":"#000000","stroke":"#6f6f6f","stroke-width":0,"filter":null},"#lava":{"opacity":1,"fill":"#000000","stroke":"#5d5d5d","stroke-width":0,"filter":""},"#sea_island":{"opacity":1,"stroke":"#1f3846","stroke-width":0,"filter":"","auto-filter":0},"#lake_island":{"opacity":0,"stroke":"#7c8eaf","stroke-width":0,"filter":null},"#terrain":{"opacity":null,"filter":null,"mask":null},"#rivers":{"opacity":0.2,"filter":"url(#blur1)","fill":"#000000"},"#ruler":{"opacity":null,"filter":null},"#roads":{"opacity":0.9,"stroke":"#d06324","stroke-width":0.7,"stroke-dasharray":2,"stroke-linecap":"butt","filter":null,"mask":null},"#trails":{"opacity":0.9,"stroke":"#d06324","stroke-width":0.25,"stroke-dasharray":".8 1.6","stroke-linecap":"butt","filter":null,"mask":null},"#searoutes":{"opacity":0.8,"stroke":"#ffffff","stroke-width":0.45,"stroke-dasharray":"1 2","stroke-linecap":"round","filter":null,"mask":null},"#regions":{"opacity":0.4,"filter":null},"#statesHalo":{"opacity":1,"data-width":10,"stroke-width":10},"#provs":{"opacity":0.6,"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},"#texture":{"opacity":1,"filter":null,"mask":"url(#land)"},"#textureImage":{},"#zones":{"opacity":0.6,"stroke":"#333333","stroke-width":0,"stroke-dasharray":null,"stroke-linecap":"butt","filter":null,"mask":null},"#ocean":{"opacity":0},"#oceanLayers":{"filter":null,"layers":"none"},"#oceanBase":{"fill":"#000000"},"#oceanPattern":{"opacity":null},"#oceanicPattern":{"filter":"url(#emptyImage)"},"#terrs":{"opacity":1,"scheme":"monochrome","terracing":0,"skip":5,"relax":0,"curve":0,"filter":"url(#blur3)","mask":"url(#land)"},"#legend":{"data-size":13,"font-size":13,"data-font":"Almendra+SC","font-family":"Almendra SC","stroke":"#812929","stroke-width":2.5,"stroke-dasharray":"0 4 10 4","stroke-linecap":"round","data-x":99,"data-y":93,"data-columns":8},"#legendBox":{},"#burgLabels > #cities":{"opacity":1,"fill":"#3e3e4b","data-size":7,"font-size":7,"data-font":"Almendra+SC","font-family":"Almendra SC"},"#burgIcons > #cities":{"opacity":1,"fill":"#ffffff","fill-opacity":0.7,"size":1,"stroke":"#3e3e4b","stroke-width":0.24,"stroke-dasharray":"","stroke-linecap":"butt"},"#anchors > #cities":{"opacity":1,"fill":"#ffffff","size":2,"stroke":"#3e3e4b","stroke-width":1.2},"#burgLabels > #towns":{"opacity":1,"fill":"#3e3e4b","data-size":4,"font-size":4,"data-font":"Almendra+SC","font-family":"Almendra SC"},"#burgIcons > #towns":{"opacity":1,"fill":"#ffffff","fill-opacity":0.7,"size":0.5,"stroke":"#3e3e4b","stroke-width":0.12,"stroke-dasharray":"","stroke-linecap":"butt"},"#anchors > #towns":{"opacity":1,"fill":"#ffffff","size":1,"stroke":"#3e3e4b","stroke-width":1.2},"#labels > #states":{"opacity":1,"fill":"#3e3e4b","stroke":"#3a3a3a","stroke-width":0,"data-size":22,"font-size":22,"data-font":"Almendra+SC","font-family":"Almendra SC","filter":null},"#labels > #addedLabels":{"opacity":1,"fill":"#3e3e4b","stroke":"#3a3a3a","stroke-width":0,"data-size":18,"font-size":18,"data-font":"Almendra+SC","font-family":"Almendra SC","filter":null},"#fogging-cont":{"opacity":null,"fill":null,"stroke-width":null}}`;
+    const monochrome = `{"#map":{"background-color":"#000000","filter":"url(#filter-grayscale)","data-filter":"grayscale"},"#biomes":{"opacity":null,"filter":"url(#blur5)","mask":null},"#stateBorders":{"opacity":1,"stroke":"#56566d","stroke-width":1,"stroke-dasharray":2,"stroke-linecap":"butt","filter":null},"#provinceBorders":{"opacity":1,"stroke":"#56566d","stroke-width":0.4,"stroke-dasharray":1,"stroke-linecap":"butt","filter":null},"#cells":{"opacity":null,"stroke":"#808080","stroke-width":0.1,"filter":null,"mask":null},"#gridOverlay":{"opacity":0.8,"size":10,"type":"pointyHex","stroke":"#808080","stroke-width":0.5,"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"},"#rose":{"transform":null},"#relig":{"opacity":0.7,"stroke":"#404040","stroke-width":0.7,"filter":null},"#cults":{"opacity":0.6,"stroke":"#777777","stroke-width":0.5,"stroke-dasharray":null,"stroke-linecap":null,"filter":null},"#landmass":{"opacity":1,"fill":"#000000","filter":null},"#markers":{"opacity":null,"rescale":1,"filter":"url(#dropShadow01)"},"#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":"#000000","stroke":"#515151","stroke-width":0,"filter":null},"#salt":{"opacity":1,"fill":"#000000","stroke":"#484848","stroke-width":0,"filter":null},"#sinkhole":{"opacity":1,"fill":"#000000","stroke":"#5f5f5f","stroke-width":0.5,"filter":null},"#frozen":{"opacity":1,"fill":"#000000","stroke":"#6f6f6f","stroke-width":0,"filter":null},"#lava":{"opacity":1,"fill":"#000000","stroke":"#5d5d5d","stroke-width":0,"filter":""},"#sea_island":{"opacity":1,"stroke":"#1f3846","stroke-width":0,"filter":"","auto-filter":0},"#lake_island":{"opacity":0,"stroke":"#7c8eaf","stroke-width":0,"filter":null},"#terrain":{"opacity":null,"set":"simple","size":1,"density":.4,filter":null,"mask":null},"#rivers":{"opacity":0.2,"filter":"url(#blur1)","fill":"#000000"},"#ruler":{"opacity":null,"filter":null},"#roads":{"opacity":0.9,"stroke":"#d06324","stroke-width":0.7,"stroke-dasharray":2,"stroke-linecap":"butt","filter":null,"mask":null},"#trails":{"opacity":0.9,"stroke":"#d06324","stroke-width":0.25,"stroke-dasharray":".8 1.6","stroke-linecap":"butt","filter":null,"mask":null},"#searoutes":{"opacity":0.8,"stroke":"#ffffff","stroke-width":0.45,"stroke-dasharray":"1 2","stroke-linecap":"round","filter":null,"mask":null},"#regions":{"opacity":0.4,"filter":null},"#statesHalo":{"opacity":1,"data-width":10,"stroke-width":10},"#provs":{"opacity":0.6,"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},"#texture":{"opacity":1,"filter":null,"mask":"url(#land)"},"#textureImage":{},"#zones":{"opacity":0.6,"stroke":"#333333","stroke-width":0,"stroke-dasharray":null,"stroke-linecap":"butt","filter":null,"mask":null},"#ocean":{"opacity":0},"#oceanLayers":{"filter":null,"layers":"none"},"#oceanBase":{"fill":"#000000"},"#oceanPattern":{"opacity":null},"#oceanicPattern":{"filter":"url(#emptyImage)"},"#terrs":{"opacity":1,"scheme":"monochrome","terracing":0,"skip":5,"relax":0,"curve":0,"filter":"url(#blur3)","mask":"url(#land)"},"#legend":{"data-size":13,"font-size":13,"data-font":"Almendra+SC","font-family":"Almendra SC","stroke":"#812929","stroke-width":2.5,"stroke-dasharray":"0 4 10 4","stroke-linecap":"round","data-x":99,"data-y":93,"data-columns":8},"#legendBox":{},"#burgLabels > #cities":{"opacity":1,"fill":"#3e3e4b","data-size":7,"font-size":7,"data-font":"Almendra+SC","font-family":"Almendra SC"},"#burgIcons > #cities":{"opacity":1,"fill":"#ffffff","fill-opacity":0.7,"size":1,"stroke":"#3e3e4b","stroke-width":0.24,"stroke-dasharray":"","stroke-linecap":"butt"},"#anchors > #cities":{"opacity":1,"fill":"#ffffff","size":2,"stroke":"#3e3e4b","stroke-width":1.2},"#burgLabels > #towns":{"opacity":1,"fill":"#3e3e4b","data-size":4,"font-size":4,"data-font":"Almendra+SC","font-family":"Almendra SC"},"#burgIcons > #towns":{"opacity":1,"fill":"#ffffff","fill-opacity":0.7,"size":0.5,"stroke":"#3e3e4b","stroke-width":0.12,"stroke-dasharray":"","stroke-linecap":"butt"},"#anchors > #towns":{"opacity":1,"fill":"#ffffff","size":1,"stroke":"#3e3e4b","stroke-width":1.2},"#labels > #states":{"opacity":1,"fill":"#3e3e4b","stroke":"#3a3a3a","stroke-width":0,"data-size":22,"font-size":22,"data-font":"Almendra+SC","font-family":"Almendra SC","filter":null},"#labels > #addedLabels":{"opacity":1,"fill":"#3e3e4b","stroke":"#3a3a3a","stroke-width":0,"data-size":18,"font-size":18,"data-font":"Almendra+SC","font-family":"Almendra SC","filter":null},"#fogging-cont":{"opacity":null,"fill":null,"stroke-width":null}}`;
     localStorage.setItem("styleMonochrome", monochrome);
   }
 }
@@ -718,7 +722,7 @@ function applyDefaultStyle() {
   coastline.select("#sea_island").attr("opacity", .5).attr("stroke", "#1f3846").attr("stroke-width", .7).attr("auto-filter", 1).attr("filter", "url(#dropShadow)");
   coastline.select("#lake_island").attr("opacity", 1).attr("stroke", "#7c8eaf").attr("stroke-width", .35).attr("filter", null);
 
-  terrain.attr("opacity", null).attr("filter", null).attr("mask", null);
+  terrain.attr("opacity", null).attr("set", "simple").attr("size", 1).attr("density", .4).attr("filter", null).attr("mask", null);
   rivers.attr("opacity", null).attr("fill", "#5d97bb").attr("filter", null);
   ruler.attr("opacity", null).attr("filter", null);
 
@@ -883,7 +887,7 @@ function addStylePreset() {
       "#lava":["opacity", "fill", "stroke", "stroke-width", "filter"],
       "#sea_island":["opacity", "stroke", "stroke-width", "filter", "auto-filter"],
       "#lake_island":["opacity", "stroke", "stroke-width", "filter"],
-      "#terrain":["opacity", "filter", "mask"],
+      "#terrain":["opacity", "set", "size", "density", "filter", "mask"],
       "#rivers":["opacity", "filter", "fill"],
       "#ruler":["opacity", "filter"],
       "#roads":["opacity", "stroke", "stroke-width", "stroke-dasharray", "stroke-linecap", "filter", "mask"],
diff --git a/modules/ui/tools.js b/modules/ui/tools.js
index 0766bb00a..22846206c 100644
--- a/modules/ui/tools.js
+++ b/modules/ui/tools.js
@@ -15,10 +15,11 @@ toolsContent.addEventListener("click", function(event) {
   if (button === "editCulturesButton") editCultures(); else
   if (button === "editReligions") editReligions(); else
   if (button === "editNamesBaseButton") editNamesbase(); else
-  if (button === "overviewBurgsButton") editBurgs(); else
   if (button === "editUnitsButton") editUnits(); else
   if (button === "editNotesButton") editNotes(); else
-  if (button === "editZonesButton") editZones();
+  if (button === "editZonesButton") editZones(); else
+  if (button === "overviewBurgsButton") editBurgs(); else
+  if (button === "overviewCellsButton") viewCellDetails();
 
   // Click to Regenerate buttons
   if (event.target.parentNode.id === "regenerateFeature") {
@@ -90,7 +91,8 @@ function regenerateBurgs() {
   rankCells();
   cells.burg = new Uint16Array(cells.i.length);
   const burgs = pack.burgs = [0]; // clear burgs array
-  states.filter(s => s.i).forEach(s => s.capital = 0); // clear capitals
+  states.filter(s => s.i).forEach(s => s.capital = 0); // clear state capitals
+  pack.provinces.filter(p => p.i).forEach(p => p.burg = 0); // clear province capitals
   const burgsTree = d3.quadtree();
 
   const score = new Int16Array(cells.s.map(s => s * Math.random())); // cell score for capitals placement
@@ -477,4 +479,8 @@ function addMarkerOnClick() {
     .attr("data-size", desired).attr("width", size).attr("height", size);
 
   if (d3.event.shiftKey === false) unpressClickToAddButton();
+}
+
+function viewCellDetails() {
+  $("#cellInfo").dialog({resizable: false, width: "22em", title: "Cell Details"});
 }
\ No newline at end of file