v1.2.02

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 {
+#cellInfo {
-	margin: 3px 0px 3px 3px;
+	user-select: text;
-	display: inline-block;
-	vertical-align: top;
-}
-
-#cellInfo>div:nth-child(2) {
-	width: 50%;
 }
 
 #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 {

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">
+        <div data-tip="Canvas size. Can be changed in general options on new map generation">
-          <i>Map size:</i><br>
+          <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">

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;
+    const density = terrain.attr("density") || .4;
-    if (!density) return;
+    const size = 1.6 * (terrain.attr("size") || 1);
-
+    const mod = .2 * size; // size modifier;s
-    const size = 1.6, 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";
+    const set = terrain.attr("set") || "simple";
-    if (styleReliefSet.value === "colored") return "#relief-" + type + "-" + getVariant(type);
+    if (set === "simple") return "#relief-" + getOldIcon(type) + "-1";
-    if (styleReliefSet.value === "gray") return "#relief-" + type + "-" + getVariant(type) + "-bw";
+    if (set === "colored") return "#relief-" + type + "-" + getVariant(type);
+    if (set === "gray") return "#relief-" + type + "-" + getVariant(type) + "-bw";
     return "#relief-" + getOldIcon(type) + "-1"; // simple
   }
 

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`);

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);

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;
 
@@ -523,7 +526,6 @@ function editCultures() {
     });
   }
 
-  // change culture within selection
   function changeCultureForSelection(selection) {
     const temp = cults.select("#temp");
     const selected = body.querySelector("div.selected");

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;

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)

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);
+      viewbox.select("#heights").selectAll("polygon.selectedCell").classed("selectedCell", 0);
-      heights.selectAll("polygon[fill='" + color + "']").classed("selectedCell", 1);
+      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();
     }
   }

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");

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;

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;
+  const svgWidth = Math.min(+mapWidthInput.value, window.innerWidth);
-  svgHeight = +mapHeightInput.value;
+  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);
+  const maxWidth = Math.max(+mapWidthInput.value, graphWidth);
-  zoom.translateExtent([[0, 0], [width, height]]);
+  const maxHeight = Math.max(+mapHeightInput.value, graphHeight);
-  landmass.select("rect").attr("x", 0).attr("y", 0).attr("width", width).attr("height", height);
+  zoom.translateExtent([[0, 0], [maxWidth, maxHeight]]);
-  oceanPattern.select("rect").attr("x", 0).attr("y", 0).attr("width", width).attr("height", height);
+  landmass.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", width).attr("height", height);
+  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;
+  graphWidth = +mapWidthInput.value;
-  svgHeight = graphHeight = +mapHeightInput.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() {

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]);
     }
 

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;

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
@@ -478,3 +480,7 @@ function addMarkerOnClick() {
 
   if (d3.event.shiftKey === false) unpressClickToAddButton();
 }
+
+function viewCellDetails() {
+  $("#cellInfo").dialog({resizable: false, width: "22em", title: "Cell Details"});
+}