diff --git a/modules/ui/burg-editor.js b/modules/ui/burg-editor.js
index d79ed0b2..05a8ee8a 100644
--- a/modules/ui/burg-editor.js
+++ b/modules/ui/burg-editor.js
@@ -1,13 +1,13 @@
-"use strict";
+'use strict';
 function editBurg(id) {
   if (customization) return;
-  closeDialogs(".stable");
-  if (!layerIsOn("toggleIcons")) toggleIcons();
-  if (!layerIsOn("toggleLabels")) toggleLabels();
+  closeDialogs('.stable');
+  if (!layerIsOn('toggleIcons')) toggleIcons();
+  if (!layerIsOn('toggleLabels')) toggleLabels();
 
   const burg = id || d3.event.target.dataset.id;
   elSelected = burgLabels.select("[data-id='" + burg + "']");
-  burgLabels.selectAll("text").call(d3.drag().on("start", dragBurgLabel)).classed("draggable", true);
+  burgLabels.selectAll('text').call(d3.drag().on('start', dragBurgLabel)).classed('draggable', true);
   updateBurgValues();
 
   $("#burgEditor").dialog({
@@ -21,12 +21,12 @@ function editBurg(id) {
   modules.editBurg = true;
 
   // add listeners
-  document.getElementById("burgGroupShow").addEventListener("click", showGroupSection);
-  document.getElementById("burgGroupHide").addEventListener("click", hideGroupSection);
-  document.getElementById("burgSelectGroup").addEventListener("change", changeGroup);
-  document.getElementById("burgInputGroup").addEventListener("change", createNewGroup);
-  document.getElementById("burgAddGroup").addEventListener("click", toggleNewGroupInput);
-  document.getElementById("burgRemoveGroup").addEventListener("click", removeBurgsGroup);
+  document.getElementById('burgGroupShow').addEventListener('click', showGroupSection);
+  document.getElementById('burgGroupHide').addEventListener('click', hideGroupSection);
+  document.getElementById('burgSelectGroup').addEventListener('change', changeGroup);
+  document.getElementById('burgInputGroup').addEventListener('change', createNewGroup);
+  document.getElementById('burgAddGroup').addEventListener('click', toggleNewGroupInput);
+  document.getElementById('burgRemoveGroup').addEventListener('click', removeBurgsGroup);
 
   document.getElementById("burgName").addEventListener("input", changeName);
   document.getElementById("burgNameReRandom").addEventListener("click", generateNameRandom);
@@ -39,11 +39,11 @@ function editBurg(id) {
   document.getElementById("regenerateMFCGBurgSeed").addEventListener("click", randomizeSeed);
   document.getElementById("addCustomMFCGBurgLink").addEventListener("click", addCustomMfcgLink);
 
-  document.getElementById("burgStyleShow").addEventListener("click", showStyleSection);
-  document.getElementById("burgStyleHide").addEventListener("click", hideStyleSection);
-  document.getElementById("burgEditLabelStyle").addEventListener("click", editGroupLabelStyle);
-  document.getElementById("burgEditIconStyle").addEventListener("click", editGroupIconStyle);
-  document.getElementById("burgEditAnchorStyle").addEventListener("click", editGroupAnchorStyle);
+  document.getElementById('burgStyleShow').addEventListener('click', showStyleSection);
+  document.getElementById('burgStyleHide').addEventListener('click', hideStyleSection);
+  document.getElementById('burgEditLabelStyle').addEventListener('click', editGroupLabelStyle);
+  document.getElementById('burgEditIconStyle').addEventListener('click', editGroupIconStyle);
+  document.getElementById('burgEditAnchorStyle').addEventListener('click', editGroupAnchorStyle);
 
   document.getElementById("burgEmblem").addEventListener("click", openEmblemEdit);
   document.getElementById("burgToggleMFCGMap").addEventListener("click", toggleMFCGMap);
@@ -55,12 +55,12 @@ function editBurg(id) {
   document.getElementById("burgTemperatureGraph").addEventListener("click", showTemperatureGraph);
 
   function updateBurgValues() {
-    const id = +elSelected.attr("data-id");
+    const id = +elSelected.attr('data-id');
     const b = pack.burgs[id];
     const province = pack.cells.province[b.cell];
-    const provinceName = province ? pack.provinces[province].fullName + ", " : "";
+    const provinceName = province ? pack.provinces[province].fullName + ', ' : '';
     const stateName = pack.states[b.state].fullName || pack.states[b.state].name;
-    document.getElementById("burgProvinceAndState").innerHTML = provinceName + stateName;
+    document.getElementById('burgProvinceAndState').innerHTML = provinceName + stateName;
 
     document.getElementById("burgName").value = b.name;
     document.getElementById("burgType").value = b.type || "Generic";
@@ -68,15 +68,15 @@ function editBurg(id) {
     document.getElementById("burgEditAnchorStyle").style.display = +b.port ? "inline-block" : "none";
 
     // update list and select culture
-    const cultureSelect = document.getElementById("burgCulture");
+    const cultureSelect = document.getElementById('burgCulture');
     cultureSelect.options.length = 0;
-    const cultures = pack.cultures.filter(c => !c.removed);
-    cultures.forEach(c => cultureSelect.options.add(new Option(c.name, c.i, false, c.i === b.culture)));
+    const cultures = pack.cultures.filter((c) => !c.removed);
+    cultures.forEach((c) => cultureSelect.options.add(new Option(c.name, c.i, false, c.i === b.culture)));
 
     const temperature = grid.cells.temp[pack.cells.g[b.cell]];
-    document.getElementById("burgTemperature").innerHTML = convertTemperature(temperature);
-    document.getElementById("burgTemperatureLikeIn").innerHTML = getTemperatureLikeness(temperature);
-    document.getElementById("burgElevation").innerHTML = getHeight(pack.cells.h[b.cell]);
+    document.getElementById('burgTemperature').innerHTML = convertTemperature(temperature);
+    document.getElementById('burgTemperatureLikeIn').innerHTML = getTemperatureLikeness(temperature);
+    document.getElementById('burgElevation').innerHTML = getHeight(pack.cells.h[b.cell]);
 
     // toggle features
     if (b.capital) document.getElementById("burgCapital").classList.remove("inactive");
@@ -104,7 +104,7 @@ function editBurg(id) {
 
     // select group
     const group = elSelected.node().parentNode.id;
-    const select = document.getElementById("burgSelectGroup");
+    const select = document.getElementById('burgSelectGroup');
     select.options.length = 0; // remove all options
 
     burgLabels.selectAll("g").each(function () {
@@ -167,7 +167,7 @@ function editBurg(id) {
   }
   // in °C, array from -1 °C; source: https://en.wikipedia.org/wiki/List_of_cities_by_average_temperature
   function getTemperatureLikeness(temperature) {
-    if (temperature < -5) return "Yakutsk";
+    if (temperature < -5) return 'Yakutsk';
     const cities = [
       "Snag (Yukon)",
       "Yellowknife (Canada)",
@@ -237,18 +237,18 @@ function editBurg(id) {
   }
 
   function changeGroup() {
-    const id = +elSelected.attr("data-id");
+    const id = +elSelected.attr('data-id');
     moveBurgToGroup(id, this.value);
   }
 
   function toggleNewGroupInput() {
-    if (burgInputGroup.style.display === "none") {
-      burgInputGroup.style.display = "inline-block";
+    if (burgInputGroup.style.display === 'none') {
+      burgInputGroup.style.display = 'inline-block';
       burgInputGroup.focus();
-      burgSelectGroup.style.display = "none";
+      burgSelectGroup.style.display = 'none';
     } else {
-      burgInputGroup.style.display = "none";
-      burgSelectGroup.style.display = "inline-block";
+      burgInputGroup.style.display = 'none';
+      burgSelectGroup.style.display = 'inline-block';
     }
   }
 
@@ -263,16 +263,16 @@ function editBurg(id) {
       .replace(/[^\w\s]/gi, "");
 
     if (document.getElementById(group)) {
-      tip("Element with this id already exists. Please provide a unique name", false, "error");
+      tip('Element with this id already exists. Please provide a unique name', false, 'error');
       return;
     }
 
     if (Number.isFinite(+group.charAt(0))) {
-      tip("Group name should start with a letter", false, "error");
+      tip('Group name should start with a letter', false, 'error');
       return;
     }
 
-    const id = +elSelected.attr("data-id");
+    const id = +elSelected.attr('data-id');
     const oldGroup = elSelected.node().parentNode.id;
 
     const label = document.querySelector("#burgLabels [data-id='" + id + "']");
@@ -289,11 +289,11 @@ function editBurg(id) {
 
     // just rename if only 1 element left
     const count = elSelected.node().parentNode.childElementCount;
-    if (oldGroup !== "cities" && oldGroup !== "towns" && count === 1) {
-      document.getElementById("burgSelectGroup").selectedOptions[0].remove();
-      document.getElementById("burgSelectGroup").options.add(new Option(group, group, false, true));
+    if (oldGroup !== 'cities' && oldGroup !== 'towns' && count === 1) {
+      document.getElementById('burgSelectGroup').selectedOptions[0].remove();
+      document.getElementById('burgSelectGroup').options.add(new Option(group, group, false, true));
       toggleNewGroupInput();
-      document.getElementById("burgInputGroup").value = "";
+      document.getElementById('burgInputGroup').value = '';
       labelG.id = group;
       iconG.id = group;
       if (anchor) anchorG.id = group;
@@ -301,9 +301,9 @@ function editBurg(id) {
     }
 
     // create new groups
-    document.getElementById("burgSelectGroup").options.add(new Option(group, group, false, true));
+    document.getElementById('burgSelectGroup').options.add(new Option(group, group, false, true));
     toggleNewGroupInput();
-    document.getElementById("burgInputGroup").value = "";
+    document.getElementById('burgInputGroup').value = '';
 
     addBurgsGroup(group);
     moveBurgToGroup(id, group);
@@ -311,13 +311,13 @@ function editBurg(id) {
 
   function removeBurgsGroup() {
     const group = elSelected.node().parentNode;
-    const basic = group.id === "cities" || group.id === "towns";
+    const basic = group.id === 'cities' || group.id === 'towns';
 
     const burgsInGroup = [];
     for (let i = 0; i < group.children.length; i++) {
       burgsInGroup.push(+group.children[i].dataset.id);
     }
-    const burgsToRemove = burgsInGroup.filter(b => !(pack.burgs[b].capital || pack.burgs[b].lock));
+    const burgsToRemove = burgsInGroup.filter((b) => !(pack.burgs[b].capital || pack.burgs[b].lock));
     const capital = burgsToRemove.length < burgsInGroup.length;
 
     alertMessage.innerHTML = /* html */ `Are you sure you want to remove ${
@@ -352,7 +352,7 @@ function editBurg(id) {
   }
 
   function changeName() {
-    const id = +elSelected.attr("data-id");
+    const id = +elSelected.attr('data-id');
     pack.burgs[id].name = burgName.value;
     elSelected.text(burgName.value);
   }
@@ -364,17 +364,17 @@ function editBurg(id) {
   }
 
   function changeType() {
-    const id = +elSelected.attr("data-id");
+    const id = +elSelected.attr('data-id');
     pack.burgs[id].type = this.value;
   }
 
   function changeCulture() {
-    const id = +elSelected.attr("data-id");
+    const id = +elSelected.attr('data-id');
     pack.burgs[id].culture = +this.value;
   }
 
   function generateNameCulture() {
-    const id = +elSelected.attr("data-id");
+    const id = +elSelected.attr('data-id');
     const culture = pack.burgs[id].culture;
     burgName.value = Names.getCulture(culture);
     changeName();
@@ -410,7 +410,7 @@ function editBurg(id) {
   }
 
   function updateBurgLockIcon() {
-    const id = +elSelected.attr("data-id");
+    const id = +elSelected.attr('data-id');
     const b = pack.burgs[id];
     if (b.lock) {
       document.getElementById("burgLock").classList.remove("icon-lock-open");
@@ -433,17 +433,17 @@ function editBurg(id) {
 
   function editGroupLabelStyle() {
     const g = elSelected.node().parentNode.id;
-    editStyle("labels", g);
+    editStyle('labels', g);
   }
 
   function editGroupIconStyle() {
     const g = elSelected.node().parentNode.id;
-    editStyle("burgIcons", g);
+    editStyle('burgIcons', g);
   }
 
   function editGroupAnchorStyle() {
     const g = elSelected.node().parentNode.id;
-    editStyle("anchors", g);
+    editStyle('anchors', g);
   }
 
   function updateMFCGFrame(burg) {
@@ -516,16 +516,16 @@ function editBurg(id) {
     const cells = pack.cells;
     const point = d3.mouse(this);
     const cell = findCell(point[0], point[1]);
-    const id = +elSelected.attr("data-id");
+    const id = +elSelected.attr('data-id');
     const burg = pack.burgs[id];
 
     if (cells.h[cell] < 20) {
-      tip("Cannot place burg into the water! Select a land cell", false, "error");
+      tip('Cannot place burg into the water! Select a land cell', false, 'error');
       return;
     }
 
     if (cells.burg[cell] && cells.burg[cell] !== id) {
-      tip("There is already a burg in this cell. Please select a free cell", false, "error");
+      tip('There is already a burg in this cell. Please select a free cell', false, 'error');
       return;
     }
 
@@ -533,7 +533,7 @@ function editBurg(id) {
     const oldState = burg.state;
 
     if (newState !== oldState && burg.capital) {
-      tip("Capital cannot be relocated into another state!", false, "error");
+      tip('Capital cannot be relocated into another state!', false, 'error');
       return;
     }
 
@@ -552,10 +552,10 @@ function editBurg(id) {
       .attr("y", y);
     const anchor = anchors.select("use[data-id='" + id + "']");
     if (anchor.size()) {
-      const size = anchor.attr("width");
+      const size = anchor.attr('width');
       const xa = rn(x - size * 0.47, 2);
       const ya = rn(y - size * 0.47, 2);
-      anchor.attr("transform", null).attr("x", xa).attr("y", ya);
+      anchor.attr('transform', null).attr('x', xa).attr('y', ya);
     }
 
     // change data
@@ -571,7 +571,7 @@ function editBurg(id) {
   }
 
   function editBurgLegend() {
-    const id = elSelected.attr("data-id");
+    const id = elSelected.attr('data-id');
     const name = elSelected.text();
     editNotes("burg" + id, name);
   }
@@ -582,7 +582,7 @@ function editBurg(id) {
   }
 
   function removeSelectedBurg() {
-    const id = +elSelected.attr("data-id");
+    const id = +elSelected.attr('data-id');
     if (pack.burgs[id].capital) {
       alertMessage.innerHTML = /* html */ `You cannot remove the burg as it is a state capital.<br /><br />
         You can change the capital using Burgs Editor (shift + T)`;
@@ -615,8 +615,8 @@ function editBurg(id) {
   }
 
   function closeBurgEditor() {
-    document.getElementById("burgRelocate").classList.remove("pressed");
-    burgLabels.selectAll("text").call(d3.drag().on("drag", null)).classed("draggable", false);
+    document.getElementById('burgRelocate').classList.remove('pressed');
+    burgLabels.selectAll('text').call(d3.drag().on('drag', null)).classed('draggable', false);
     unselect();
   }
 }
diff --git a/modules/ui/burgs-overview.js b/modules/ui/burgs-overview.js
index bf819465..23fcb998 100644
--- a/modules/ui/burgs-overview.js
+++ b/modules/ui/burgs-overview.js
@@ -1,15 +1,15 @@
-"use strict";
+'use strict';
 function overviewBurgs() {
   if (customization) return;
-  closeDialogs("#burgsOverview, .stable");
-  if (!layerIsOn("toggleIcons")) toggleIcons();
-  if (!layerIsOn("toggleLabels")) toggleLabels();
+  closeDialogs('#burgsOverview, .stable');
+  if (!layerIsOn('toggleIcons')) toggleIcons();
+  if (!layerIsOn('toggleLabels')) toggleLabels();
 
-  const body = document.getElementById("burgsBody");
+  const body = document.getElementById('burgsBody');
   updateFilter();
   updateLockAllIcon();
   burgsOverviewAddLines();
-  $("#burgsOverview").dialog();
+  $('#burgsOverview').dialog();
 
   if (modules.overviewBurgs) return;
   modules.overviewBurgs = true;
@@ -44,7 +44,7 @@ function overviewBurgs() {
   }
 
   function updateFilter() {
-    const stateFilter = document.getElementById("burgsFilterState");
+    const stateFilter = document.getElementById('burgsFilterState');
     const selectedState = stateFilter.value || 1;
     stateFilter.options.length = 0; // remove all options
     stateFilter.options.add(new Option(`all`, -1, false, selectedState == -1));
@@ -52,7 +52,7 @@ function overviewBurgs() {
     const statesSorted = pack.states.filter(s => s.i && !s.removed).sort((a, b) => (a.name > b.name ? 1 : -1));
     statesSorted.forEach(s => stateFilter.options.add(new Option(s.name, s.i, false, s.i == selectedState)));
 
-    const cultureFilter = document.getElementById("burgsFilterCulture");
+    const cultureFilter = document.getElementById('burgsFilterCulture');
     const selectedCulture = cultureFilter.value || -1;
     cultureFilter.options.length = 0; // remove all options
     cultureFilter.options.add(new Option(`all`, -1, false, selectedCulture == -1));
@@ -63,11 +63,11 @@ function overviewBurgs() {
 
   // add line for each burg
   function burgsOverviewAddLines() {
-    const selectedState = +document.getElementById("burgsFilterState").value;
-    const selectedCulture = +document.getElementById("burgsFilterCulture").value;
-    let filtered = pack.burgs.filter(b => b.i && !b.removed); // all valid burgs
-    if (selectedState != -1) filtered = filtered.filter(b => b.state === selectedState); // filtered by state
-    if (selectedCulture != -1) filtered = filtered.filter(b => b.culture === selectedCulture); // filtered by culture
+    const selectedState = +document.getElementById('burgsFilterState').value;
+    const selectedCulture = +document.getElementById('burgsFilterCulture').value;
+    let filtered = pack.burgs.filter((b) => b.i && !b.removed); // all valid burgs
+    if (selectedState != -1) filtered = filtered.filter((b) => b.state === selectedState); // filtered by state
+    if (selectedCulture != -1) filtered = filtered.filter((b) => b.culture === selectedCulture); // filtered by culture
 
     body.innerHTML = "";
     let lines = "",
@@ -76,10 +76,10 @@ function overviewBurgs() {
     for (const b of filtered) {
       const population = b.population * populationRate * urbanization;
       totalPopulation += population;
-      const type = b.capital && b.port ? "a-capital-port" : b.capital ? "c-capital" : b.port ? "p-port" : "z-burg";
+      const type = b.capital && b.port ? 'a-capital-port' : b.capital ? 'c-capital' : b.port ? 'p-port' : 'z-burg';
       const state = pack.states[b.state].name;
       const prov = pack.cells.province[b.cell];
-      const province = prov ? pack.provinces[prov].name : "";
+      const province = prov ? pack.provinces[prov].name : '';
       const culture = pack.cultures[b.culture].name;
 
       lines += /* html */ `<div
@@ -113,7 +113,7 @@ function overviewBurgs() {
         <span data-tip="Remove burg" class="icon-trash-empty"></span>
       </div>`;
     }
-    body.insertAdjacentHTML("beforeend", lines);
+    body.insertAdjacentHTML('beforeend', lines);
 
     // update footer
     burgsFooterBurgs.innerHTML = filtered.length;
@@ -142,13 +142,13 @@ function overviewBurgs() {
   }
 
   function burgHighlightOn(event) {
-    if (!layerIsOn("toggleLabels")) toggleLabels();
+    if (!layerIsOn('toggleLabels')) toggleLabels();
     const burg = +event.target.dataset.id;
-    burgLabels.select("[data-id='" + burg + "']").classed("drag", true);
+    burgLabels.select("[data-id='" + burg + "']").classed('drag', true);
   }
 
   function burgHighlightOff() {
-    burgLabels.selectAll("text.drag").classed("drag", false);
+    burgLabels.selectAll('text.drag').classed('drag', false);
   }
 
   function changeBurgName() {
@@ -187,7 +187,7 @@ function overviewBurgs() {
     this.value = si(this.value);
 
     const population = [];
-    body.querySelectorAll(":scope > div").forEach(el => population.push(+getInteger(el.dataset.population)));
+    body.querySelectorAll(':scope > div').forEach((el) => population.push(+getInteger(el.dataset.population)));
     burgsFooterPopulation.innerHTML = si(d3.mean(population));
   }
 
@@ -200,8 +200,8 @@ function overviewBurgs() {
   function togglePortStatus() {
     const burg = +this.parentNode.parentNode.dataset.id;
     togglePort(burg);
-    if (this.classList.contains("inactive")) this.classList.remove("inactive");
-    else this.classList.add("inactive");
+    if (this.classList.contains('inactive')) this.classList.remove('inactive');
+    else this.classList.add('inactive');
   }
 
   function toggleBurgLockStatus() {
@@ -258,9 +258,9 @@ function overviewBurgs() {
   function enterAddBurgMode() {
     if (this.classList.contains("pressed")) return exitAddBurgMode();
     customization = 3;
-    this.classList.add("pressed");
-    tip("Click on the map to create a new burg. Hold Shift to add multiple", true, "warn");
-    viewbox.style("cursor", "crosshair").on("click", addBurgOnClick);
+    this.classList.add('pressed');
+    tip('Click on the map to create a new burg. Hold Shift to add multiple', true, 'warn');
+    viewbox.style('cursor', 'crosshair').on('click', addBurgOnClick);
   }
 
   function addBurgOnClick() {
@@ -281,14 +281,14 @@ function overviewBurgs() {
     customization = 0;
     restoreDefaultEvents();
     clearMainTip();
-    if (addBurgTool.classList.contains("pressed")) addBurgTool.classList.remove("pressed");
-    if (addNewBurg.classList.contains("pressed")) addNewBurg.classList.remove("pressed");
+    if (addBurgTool.classList.contains('pressed')) addBurgTool.classList.remove('pressed');
+    if (addNewBurg.classList.contains('pressed')) addNewBurg.classList.remove('pressed');
   }
 
   function showBurgsChart() {
     // build hierarchy tree
-    const states = pack.states.map(s => {
-      const color = s.color ? s.color : "#ccc";
+    const states = pack.states.map((s) => {
+      const color = s.color ? s.color : '#ccc';
       const name = s.fullName ? s.fullName : s.name;
       return {id: s.i, state: s.i ? 0 : null, color, name};
     });
@@ -353,22 +353,22 @@ function overviewBurgs() {
       .on("click", d => zoomTo(d.data.x, d.data.y, 8, 2000));
 
     function showInfo(ev, d) {
-      d3.select(ev.target).transition().duration(1500).attr("stroke", "#c13119");
+      d3.select(ev.target).transition().duration(1500).attr('stroke', '#c13119');
       const name = d.data.name;
       const parent = d.parent.data.name;
       const population = si(d.value * populationRate * urbanization);
 
       burgsInfo.innerHTML = /* html */ `${name}. ${parent}. Population: ${population}`;
       burgHighlightOn(ev);
-      tip("Click to zoom into view");
+      tip('Click to zoom into view');
     }
 
     function hideInfo(ev) {
       burgHighlightOff(ev);
-      if (!document.getElementById("burgsInfo")) return;
-      burgsInfo.innerHTML = "&#8205;";
-      d3.select(ev.target).transition().attr("stroke", null);
-      tip("");
+      if (!document.getElementById('burgsInfo')) return;
+      burgsInfo.innerHTML = '&#8205;';
+      d3.select(ev.target).transition().attr('stroke', null);
+      tip('');
     }
 
     function updateChart() {
@@ -386,8 +386,8 @@ function overviewBurgs() {
         });
 
       const getParentData = () => {
-        const states = pack.states.map(s => {
-          const color = s.color ? s.color : "#ccc";
+        const states = pack.states.map((s) => {
+          const color = s.color ? s.color : '#ccc';
           const name = s.fullName ? s.fullName : s.name;
           return {id: s.i, parent: s.i ? 0 : null, color, name};
         });
@@ -458,9 +458,9 @@ function overviewBurgs() {
 
     const valid = pack.burgs.filter(b => b.i && !b.removed); // all valid burgs
 
-    valid.forEach(b => {
-      data += b.i + ",";
-      data += b.name + ",";
+    valid.forEach((b) => {
+      data += b.i + ',';
+      data += b.name + ',';
       const province = pack.cells.province[b.cell];
       data += province ? pack.provinces[province].name + "," : ",";
       data += province ? pack.provinces[province].fullName + "," : ",";
@@ -487,7 +487,7 @@ function overviewBurgs() {
       data += "\n";
     });
 
-    const name = getFileName("Burgs") + ".csv";
+    const name = getFileName('Burgs') + '.csv';
     downloadFile(data, name);
   }
 
@@ -567,7 +567,7 @@ function overviewBurgs() {
   }
 
   function removeAllBurgs() {
-    pack.burgs.filter(b => b.i && !(b.capital || b.lock)).forEach(b => removeBurg(b.i));
+    pack.burgs.filter((b) => b.i && !(b.capital || b.lock)).forEach((b) => removeBurg(b.i));
     burgsOverviewAddLines();
   }
 
diff --git a/modules/ui/coastline-editor.js b/modules/ui/coastline-editor.js
index 2f918cd9..c77947d3 100644
--- a/modules/ui/coastline-editor.js
+++ b/modules/ui/coastline-editor.js
@@ -1,8 +1,8 @@
-"use strict";
+'use strict';
 function editCoastline(node = d3.event.target) {
   if (customization) return;
-  closeDialogs(".stable");
-  if (layerIsOn("toggleCells")) toggleCells();
+  closeDialogs('.stable');
+  if (layerIsOn('toggleCells')) toggleCells();
 
   $("#coastlineEditor").dialog({
     title: "Edit Coastline",
@@ -11,26 +11,26 @@ function editCoastline(node = d3.event.target) {
     close: closeCoastlineEditor
   });
 
-  debug.append("g").attr("id", "vertices");
+  debug.append('g').attr('id', 'vertices');
   elSelected = d3.select(node);
   selectCoastlineGroup(node);
   drawCoastlineVertices();
-  viewbox.on("touchmove mousemove", null);
+  viewbox.on('touchmove mousemove', null);
 
   if (modules.editCoastline) return;
   modules.editCoastline = true;
 
   // add listeners
-  document.getElementById("coastlineGroupsShow").addEventListener("click", showGroupSection);
-  document.getElementById("coastlineGroup").addEventListener("change", changeCoastlineGroup);
-  document.getElementById("coastlineGroupAdd").addEventListener("click", toggleNewGroupInput);
-  document.getElementById("coastlineGroupName").addEventListener("change", createNewGroup);
-  document.getElementById("coastlineGroupRemove").addEventListener("click", removeCoastlineGroup);
-  document.getElementById("coastlineGroupsHide").addEventListener("click", hideGroupSection);
-  document.getElementById("coastlineEditStyle").addEventListener("click", editGroupStyle);
+  document.getElementById('coastlineGroupsShow').addEventListener('click', showGroupSection);
+  document.getElementById('coastlineGroup').addEventListener('change', changeCoastlineGroup);
+  document.getElementById('coastlineGroupAdd').addEventListener('click', toggleNewGroupInput);
+  document.getElementById('coastlineGroupName').addEventListener('change', createNewGroup);
+  document.getElementById('coastlineGroupRemove').addEventListener('click', removeCoastlineGroup);
+  document.getElementById('coastlineGroupsHide').addEventListener('click', hideGroupSection);
+  document.getElementById('coastlineEditStyle').addEventListener('click', editGroupStyle);
 
   function drawCoastlineVertices() {
-    const f = +elSelected.attr("data-f"); // feature id
+    const f = +elSelected.attr('data-f'); // feature id
     const v = pack.features[f].vertices; // coastline outer vertices
 
     const l = pack.cells.i.length;
@@ -77,7 +77,7 @@ function editCoastline(node = d3.event.target) {
 
   function redrawCoastline() {
     lineGen.curve(d3.curveBasisClosed);
-    const f = +elSelected.attr("data-f");
+    const f = +elSelected.attr('data-f');
     const vertices = pack.features[f].vertices;
     const points = clipPoly(
       vertices.map(v => pack.vertices.p[v]),
@@ -107,7 +107,7 @@ function editCoastline(node = d3.event.target) {
 
   function selectCoastlineGroup(node) {
     const group = node.parentNode.id;
-    const select = document.getElementById("coastlineGroup");
+    const select = document.getElementById('coastlineGroup');
     select.options.length = 0; // remove all options
 
     coastline.selectAll("g").each(function () {
@@ -120,13 +120,13 @@ function editCoastline(node = d3.event.target) {
   }
 
   function toggleNewGroupInput() {
-    if (coastlineGroupName.style.display === "none") {
-      coastlineGroupName.style.display = "inline-block";
+    if (coastlineGroupName.style.display === 'none') {
+      coastlineGroupName.style.display = 'inline-block';
       coastlineGroupName.focus();
-      coastlineGroup.style.display = "none";
+      coastlineGroup.style.display = 'none';
     } else {
-      coastlineGroupName.style.display = "none";
-      coastlineGroup.style.display = "inline-block";
+      coastlineGroupName.style.display = 'none';
+      coastlineGroup.style.display = 'inline-block';
     }
   }
 
@@ -141,42 +141,42 @@ function editCoastline(node = d3.event.target) {
       .replace(/[^\w\s]/gi, "");
 
     if (document.getElementById(group)) {
-      tip("Element with this id already exists. Please provide a unique name", false, "error");
+      tip('Element with this id already exists. Please provide a unique name', false, 'error');
       return;
     }
 
     if (Number.isFinite(+group.charAt(0))) {
-      tip("Group name should start with a letter", false, "error");
+      tip('Group name should start with a letter', false, 'error');
       return;
     }
 
     // just rename if only 1 element left
     const oldGroup = elSelected.node().parentNode;
-    const basic = ["sea_island", "lake_island"].includes(oldGroup.id);
+    const basic = ['sea_island', 'lake_island'].includes(oldGroup.id);
     if (!basic && oldGroup.childElementCount === 1) {
-      document.getElementById("coastlineGroup").selectedOptions[0].remove();
-      document.getElementById("coastlineGroup").options.add(new Option(group, group, false, true));
+      document.getElementById('coastlineGroup').selectedOptions[0].remove();
+      document.getElementById('coastlineGroup').options.add(new Option(group, group, false, true));
       oldGroup.id = group;
       toggleNewGroupInput();
-      document.getElementById("coastlineGroupName").value = "";
+      document.getElementById('coastlineGroupName').value = '';
       return;
     }
 
     // create a new group
     const newGroup = elSelected.node().parentNode.cloneNode(false);
-    document.getElementById("coastline").appendChild(newGroup);
+    document.getElementById('coastline').appendChild(newGroup);
     newGroup.id = group;
-    document.getElementById("coastlineGroup").options.add(new Option(group, group, false, true));
+    document.getElementById('coastlineGroup').options.add(new Option(group, group, false, true));
     document.getElementById(group).appendChild(elSelected.node());
 
     toggleNewGroupInput();
-    document.getElementById("coastlineGroupName").value = "";
+    document.getElementById('coastlineGroupName').value = '';
   }
 
   function removeCoastlineGroup() {
     const group = elSelected.node().parentNode.id;
-    if (["sea_island", "lake_island"].includes(group)) {
-      tip("This is one of the default groups, it cannot be removed", false, "error");
+    if (['sea_island', 'lake_island'].includes(group)) {
+      tip('This is one of the default groups, it cannot be removed', false, 'error');
       return;
     }
 
@@ -204,15 +204,16 @@ function editCoastline(node = d3.event.target) {
         }
       }
     });
+    confirmationDialog({title: 'Remove coastline group', message, confirm: 'Remove', onConfirm});
   }
 
   function editGroupStyle() {
     const g = elSelected.node().parentNode.id;
-    editStyle("coastline", g);
+    editStyle('coastline', g);
   }
 
   function closeCoastlineEditor() {
-    debug.select("#vertices").remove();
+    debug.select('#vertices').remove();
     unselect();
   }
 }
diff --git a/modules/ui/heightmap-editor.js b/modules/ui/heightmap-editor.js
index 69856bd9..79efa903 100644
--- a/modules/ui/heightmap-editor.js
+++ b/modules/ui/heightmap-editor.js
@@ -3,7 +3,7 @@
 function editHeightmap(options) {
   const {mode, tool} = options || {};
   restartHistory();
-  viewbox.insert("g", "#terrs").attr("id", "heights");
+  viewbox.insert('g', '#terrs').attr('id', 'heights');
 
   if (!mode) showModeDialog();
   else enterHeightmapEditMode(mode);
@@ -87,8 +87,8 @@ function editHeightmap(options) {
     allowErosionBox.style.display = mode === "keep" ? "none" : "inline-block";
 
     // show finalize button
-    if (!sessionStorage.getItem("noExitButtonAnimation")) {
-      sessionStorage.setItem("noExitButtonAnimation", true);
+    if (!sessionStorage.getItem('noExitButtonAnimation')) {
+      sessionStorage.setItem('noExitButtonAnimation', true);
       exitCustomization.style.opacity = 0;
       const width = 12 * uiSizeOutput.value * 11;
       exitCustomization.style.right = (svgWidth - width) / 2 + "px";
@@ -145,7 +145,7 @@ function editHeightmap(options) {
     if (h >= 20) height = Math.pow(h - 18, +heightExponentInput.value);
     else if (h < 20 && h > 0) height = ((h - 20) / h) * 50;
 
-    return rn(height * unitRatio) + " " + unit;
+    return rn(height * unitRatio) + ' ' + unit;
   }
 
   // Exit customization mode
@@ -166,7 +166,7 @@ function editHeightmap(options) {
     customizationMenu.style.display = "none";
     if (byId("options").querySelector(".tab > button.active").id === "toolsTab") toolsContent.style.display = "block";
     layersPreset.disabled = false;
-    exitCustomization.style.display = "none"; // hide finalize button
+    exitCustomization.style.display = 'none'; // hide finalize button
     restoreDefaultEvents();
     clearMainTip();
     closeDialogs();
@@ -176,9 +176,9 @@ function editHeightmap(options) {
     if (byId("canvas3d")) enterStandardView();
 
     const mode = heightmapEditMode.innerHTML;
-    if (mode === "erase") regenerateErasedData();
-    else if (mode === "keep") restoreKeptData();
-    else if (mode === "risk") restoreRiskedData();
+    if (mode === 'erase') regenerateErasedData();
+    else if (mode === 'keep') restoreKeptData();
+    else if (mode === 'risk') restoreRiskedData();
 
     // restore initial layers
     //viewbox.select("#heights").remove();
@@ -196,8 +196,8 @@ function editHeightmap(options) {
   }
 
   function regenerateErasedData() {
-    INFO && console.group("Edit Heightmap");
-    TIME && console.time("regenerateErasedData");
+    INFO && console.group('Edit Heightmap');
+    TIME && console.time('regenerateErasedData');
 
     const erosionAllowed = allowErosion.checked;
     markFeatures();
@@ -247,12 +247,12 @@ function editHeightmap(options) {
     Military.generate();
     Markers.generate();
     addZones();
-    TIME && console.timeEnd("regenerateErasedData");
-    INFO && console.groupEnd("Edit Heightmap");
+    TIME && console.timeEnd('regenerateErasedData');
+    INFO && console.groupEnd('Edit Heightmap');
   }
 
   function restoreKeptData() {
-    viewbox.selectAll("#landmass, #lakes").style("display", null);
+    viewbox.selectAll('#landmass, #lakes').style('display', null);
     for (const i of pack.cells.i) {
       pack.cells.h[i] = grid.cells.h[pack.cells.g[i]];
     }
@@ -318,11 +318,11 @@ function editHeightmap(options) {
     // recalculate zones to grid
     zones.selectAll("g").each(function () {
       const zone = d3.select(this);
-      const dataCells = zone.attr("data-cells");
-      const cells = dataCells ? dataCells.split(",").map(i => +i) : [];
-      const g = cells.map(i => pack.cells.g[i]);
-      zone.attr("data-cells", g);
-      zone.selectAll("*").remove();
+      const dataCells = zone.attr('data-cells');
+      const cells = dataCells ? dataCells.split(',').map((i) => +i) : [];
+      const g = cells.map((i) => pack.cells.g[i]);
+      zone.attr('data-cells', g);
+      zone.selectAll('*').remove();
     });
 
     markFeatures();
@@ -404,7 +404,7 @@ function editHeightmap(options) {
 
     for (const p of pack.provinces) {
       if (!p.i || p.removed) continue;
-      const provCells = pack.cells.i.filter(i => pack.cells.province[i] === p.i);
+      const provCells = pack.cells.i.filter((i) => pack.cells.province[i] === p.i);
       if (!provCells.length) {
         const state = p.state;
         const stateProvs = pack.states[state].provinces;
@@ -438,9 +438,9 @@ function editHeightmap(options) {
     // restore zones from grid
     zones.selectAll("g").each(function () {
       const zone = d3.select(this);
-      const g = zone.attr("data-cells");
-      const gCells = g ? g.split(",").map(i => +i) : [];
-      const cells = pack.cells.i.filter(i => gCells.includes(pack.cells.g[i]));
+      const g = zone.attr('data-cells');
+      const gCells = g ? g.split(',').map((i) => +i) : [];
+      const cells = pack.cells.i.filter((i) => gCells.includes(pack.cells.g[i]));
 
       zone.attr("data-cells", cells);
       zone.selectAll("*").remove();
@@ -454,8 +454,8 @@ function editHeightmap(options) {
         .attr("id", d => base + d);
     });
 
-    TIME && console.timeEnd("restoreRiskedData");
-    INFO && console.groupEnd("Edit Heightmap");
+    TIME && console.timeEnd('restoreRiskedData');
+    INFO && console.groupEnd('Edit Heightmap');
   }
 
   // trigger heightmap redraw and history update if at least 1 cell is changed
@@ -478,7 +478,7 @@ function editHeightmap(options) {
 
   // draw or update heightmap
   function mockHeightmap() {
-    const data = renderOcean.checked ? grid.cells.i : grid.cells.i.filter(i => grid.cells.h[i] >= 20);
+    const data = renderOcean.checked ? grid.cells.i : grid.cells.i.filter((i) => grid.cells.h[i] >= 20);
     const scheme = getColorScheme();
     viewbox
       .select("#heights")
@@ -600,7 +600,7 @@ function editHeightmap(options) {
       if (!pressed) return;
       pressed.classList.remove("pressed");
 
-      viewbox.style("cursor", "default").on(".drag", null);
+      viewbox.style('cursor', 'default').on('.drag', null);
       removeCircle();
       byId("brushesSliders").style.display = "none";
     }
@@ -622,17 +622,17 @@ function editHeightmap(options) {
       const [x, y] = d3.mouse(this);
       const start = findGridCell(x, y, grid);
 
-      d3.event.on("drag", () => {
+      d3.event.on('drag', () => {
         const p = d3.mouse(this);
-        moveCircle(p[0], p[1], r, "#333");
+        moveCircle(p[0], p[1], r, '#333');
         if (~~d3.event.sourceEvent.timeStamp % 5 != 0) return; // slow down the edit
 
         const inRadius = findGridAll(p[0], p[1], r);
-        const selection = changeOnlyLand.checked ? inRadius.filter(i => grid.cells.h[i] >= 20) : inRadius;
+        const selection = changeOnlyLand.checked ? inRadius.filter((i) => grid.cells.h[i] >= 20) : inRadius;
         if (selection && selection.length) changeHeightForSelection(selection, start);
       });
 
-      d3.event.on("end", updateHeightmap);
+      d3.event.on('end', updateHeightmap);
     }
 
     function changeHeightForSelection(s, start) {
@@ -669,9 +669,9 @@ function editHeightmap(options) {
     }
 
     function changeOnlyLandClick(e) {
-      if (heightmapEditMode.innerHTML !== "keep") return;
+      if (heightmapEditMode.innerHTML !== 'keep') return;
       e.preventDefault();
-      tip("You cannot change the coastline in 'Keep' edit mode", false, "error");
+      tip("You cannot change the coastline in 'Keep' edit mode", false, 'error');
     }
 
     function rescale(v) {
@@ -682,7 +682,7 @@ function editHeightmap(options) {
     }
 
     function rescaleWithCondition() {
-      const range = rescaleLower.value + "-" + rescaleHigher.value;
+      const range = rescaleLower.value + '-' + rescaleHigher.value;
       const operator = conditionSign.value;
       const operand = rescaleModifier.valueAsNumber;
       if (Number.isNaN(operand)) return tip("Operand should be a number", false, "error");
@@ -720,7 +720,7 @@ function editHeightmap(options) {
         return tip("Heightmap is already cleared, please do not click twice if not required", false, "error");
 
       grid.cells.h = new Uint8Array(grid.cells.i.length);
-      viewbox.select("#heights").selectAll("*").remove();
+      viewbox.select('#heights').selectAll('*').remove();
       updateHistory();
     }
   }
@@ -757,9 +757,9 @@ function editHeightmap(options) {
         $body.dataset.changed = 1;
         return;
       }
-      if (el.classList.contains("icon-check-empty")) {
-        el.classList.add("icon-check");
-        el.classList.remove("icon-check-empty");
+      if (el.classList.contains('icon-check-empty')) {
+        el.classList.add('icon-check');
+        el.classList.remove('icon-check-empty');
         el.parentElement.style.opacity = 1;
         return;
       }
@@ -923,7 +923,7 @@ function editHeightmap(options) {
     }
 
     function setRange(event) {
-      if (event.target.value !== "interval") return;
+      if (event.target.value !== 'interval') return;
 
       prompt("Set a height interval. Avoid space, use hyphen as a separator", {default: "17-20"}, v => {
         const opt = document.createElement("option");
@@ -1019,10 +1019,10 @@ function editHeightmap(options) {
     function downloadTemplate() {
       const body = byId("templateBody");
       body.dataset.changed = 0;
-      const steps = body.querySelectorAll("#templateBody > div");
+      const steps = body.querySelectorAll('#templateBody > div');
       if (!steps.length) return;
 
-      let data = "";
+      let data = '';
       for (const s of steps) {
         if (s.style.opacity === "0.5") continue;
 
@@ -1034,7 +1034,7 @@ function editHeightmap(options) {
         data += `${type} ${count} ${arg3} ${x} ${y}\r\n`;
       }
 
-      const name = "template_" + Date.now() + ".txt";
+      const name = 'template_' + Date.now() + '.txt';
       downloadFile(data, name);
     }
 
@@ -1055,9 +1055,9 @@ function editHeightmap(options) {
   }
 
   function openImageConverter() {
-    if ($("#imageConverter").is(":visible")) return;
+    if ($('#imageConverter').is(':visible')) return;
     imageToLoad.click();
-    closeDialogs("#imageConverter");
+    closeDialogs('#imageConverter');
 
     $("#imageConverter").dialog({
       title: "Image Converter",
@@ -1069,8 +1069,8 @@ function editHeightmap(options) {
     });
 
     // create canvas for image
-    const canvas = document.createElement("canvas");
-    canvas.id = "canvas";
+    const canvas = document.createElement('canvas');
+    canvas.id = 'canvas';
     canvas.width = graphWidth;
     canvas.height = graphHeight;
     document.body.insertBefore(canvas, optionsContainer);
@@ -1081,7 +1081,7 @@ function editHeightmap(options) {
 
     // remove all heights
     grid.cells.h = new Uint8Array(grid.cells.i.length);
-    viewbox.select("#heights").selectAll("*").remove();
+    viewbox.select('#heights').selectAll('*').remove();
     updateHistory();
 
     if (modules.openImageConverter) return;
@@ -1118,7 +1118,7 @@ function editHeightmap(options) {
     });
 
     function showPalleteHeight() {
-      const height = +this.getAttribute("data-color");
+      const height = +this.getAttribute('data-color');
       colorsSelectValue.innerHTML = height;
       colorsSelectFriendly.innerHTML = getHeight(height);
       const former = imageConverterPalette.querySelector(".hoveredColor");
@@ -1128,7 +1128,7 @@ function editHeightmap(options) {
 
     function loadImage() {
       const file = this.files[0];
-      this.value = ""; // reset input value to get triggered if the file is re-uploaded
+      this.value = ''; // reset input value to get triggered if the file is re-uploaded
       const reader = new FileReader();
 
       const img = new Image();
@@ -1159,11 +1159,11 @@ function editHeightmap(options) {
       const data = q.reduce(sampleCanvas);
       const pallete = q.palette(true);
 
-      viewbox.select("#heights").selectAll("*").remove();
-      d3.select("#imageConverter").selectAll("div.color-div").remove();
-      colorsSelect.style.display = "block";
-      colorsUnassigned.style.display = "block";
-      colorsAssigned.style.display = "none";
+      viewbox.select('#heights').selectAll('*').remove();
+      d3.select('#imageConverter').selectAll('div.color-div').remove();
+      colorsSelect.style.display = 'block';
+      colorsUnassigned.style.display = 'block';
+      colorsAssigned.style.display = 'none';
       sampleCanvas.remove(); // no need to keep
 
       viewbox
@@ -1191,27 +1191,27 @@ function editHeightmap(options) {
     }
 
     function mapClicked() {
-      const fill = this.getAttribute("fill");
+      const fill = this.getAttribute('fill');
       const palleteColor = imageConverter.querySelector(`div[data-color="${fill}"]`);
       palleteColor.click();
     }
 
     function colorClicked() {
-      viewbox.select("#heights").selectAll(".selectedCell").attr("class", null);
-      const unselect = this.classList.contains("selectedColor");
+      viewbox.select('#heights').selectAll('.selectedCell').attr('class', null);
+      const unselect = this.classList.contains('selectedColor');
 
-      const selectedColor = imageConverter.querySelector("div.selectedColor");
-      if (selectedColor) selectedColor.classList.remove("selectedColor");
-      const hoveredColor = imageConverterPalette.querySelector("div.hoveredColor");
-      if (hoveredColor) hoveredColor.classList.remove("hoveredColor");
+      const selectedColor = imageConverter.querySelector('div.selectedColor');
+      if (selectedColor) selectedColor.classList.remove('selectedColor');
+      const hoveredColor = imageConverterPalette.querySelector('div.hoveredColor');
+      if (hoveredColor) hoveredColor.classList.remove('hoveredColor');
       colorsSelectValue.innerHTML = colorsSelectFriendly.innerHTML = 0;
 
       if (unselect) return;
-      this.classList.add("selectedColor");
+      this.classList.add('selectedColor');
 
       if (this.dataset.height) {
         const height = +this.dataset.height;
-        imageConverterPalette.querySelector(`div[data-color="${height}"]`).classList.add("hoveredColor");
+        imageConverterPalette.querySelector(`div[data-color="${height}"]`).classList.add('hoveredColor');
         colorsSelectValue.innerHTML = height;
         colorsSelectFriendly.innerHTML = getHeight(height);
       }
@@ -1229,8 +1229,8 @@ function editHeightmap(options) {
       const rgb = color(1 - (height < 20 ? height - 5 : height) / 100);
       const selectedColor = imageConverter.querySelector("div.selectedColor");
       selectedColor.style.backgroundColor = rgb;
-      selectedColor.setAttribute("data-color", rgb);
-      selectedColor.setAttribute("data-height", height);
+      selectedColor.setAttribute('data-color', rgb);
+      selectedColor.setAttribute('data-height', height);
 
       viewbox
         .select("#heights")
@@ -1283,7 +1283,7 @@ function editHeightmap(options) {
       };
 
       const assinged = []; // store assigned heights
-      unassigned.forEach(el => {
+      unassigned.forEach((el) => {
         const clr = el.dataset.color;
         const height =
           type === "hue" ? getHeightByHue(clr) : type === "lum" ? getHeightByLum(clr) : getHeightByScheme(clr);
@@ -1343,7 +1343,7 @@ function editHeightmap(options) {
           grid.cells.h[i] = height;
         });
 
-      viewbox.select("#heights").selectAll("polygon").remove();
+      viewbox.select('#heights').selectAll('polygon').remove();
       updateHeightmap();
       restoreImageConverterState();
     }
@@ -1365,9 +1365,9 @@ function editHeightmap(options) {
       colorsAssigned.style.display = "none";
       colorsUnassigned.style.display = "none";
       colorsSelectValue.innerHTML = colorsSelectFriendly.innerHTML = 0;
-      viewbox.style("cursor", "default").on(".drag", null);
+      viewbox.style('cursor', 'default').on('.drag', null);
       tip('Heightmap edit mode is active. Click on "Exit Customization" to finalize the heightmap', true);
-      $("#imageConverter").dialog("destroy");
+      $('#imageConverter').dialog('destroy');
       openBrushesPanel();
     }
 
@@ -1404,8 +1404,8 @@ function editHeightmap(options) {
       byId("preview").remove();
       return;
     }
-    const preview = document.createElement("canvas");
-    preview.id = "preview";
+    const preview = document.createElement('canvas');
+    preview.id = 'preview';
     preview.width = grid.cellsX;
     preview.height = grid.cellsY;
     document.body.insertBefore(preview, optionsContainer);
diff --git a/modules/ui/ice-editor.js b/modules/ui/ice-editor.js
index f07cb6f9..81163bca 100644
--- a/modules/ui/ice-editor.js
+++ b/modules/ui/ice-editor.js
@@ -1,15 +1,15 @@
-"use strict";
+'use strict';
 function editIce() {
   if (customization) return;
-  closeDialogs(".stable");
-  if (!layerIsOn("toggleIce")) toggleIce();
+  closeDialogs('.stable');
+  if (!layerIsOn('toggleIce')) toggleIce();
 
   elSelected = d3.select(d3.event.target);
-  const type = elSelected.attr("type") ? "Glacier" : "Iceberg";
-  document.getElementById("iceRandomize").style.display = type === "Glacier" ? "none" : "inline-block";
-  document.getElementById("iceSize").style.display = type === "Glacier" ? "none" : "inline-block";
-  if (type === "Iceberg") document.getElementById("iceSize").value = +elSelected.attr("size");
-  ice.selectAll("*").classed("draggable", true).call(d3.drag().on("drag", dragElement));
+  const type = elSelected.attr('type') ? 'Glacier' : 'Iceberg';
+  document.getElementById('iceRandomize').style.display = type === 'Glacier' ? 'none' : 'inline-block';
+  document.getElementById('iceSize').style.display = type === 'Glacier' ? 'none' : 'inline-block';
+  if (type === 'Iceberg') document.getElementById('iceSize').value = +elSelected.attr('size');
+  ice.selectAll('*').classed('draggable', true).call(d3.drag().on('drag', dragElement));
 
   $("#iceEditor").dialog({
     title: "Edit " + type,
@@ -22,11 +22,11 @@ function editIce() {
   modules.editIce = true;
 
   // add listeners
-  document.getElementById("iceEditStyle").addEventListener("click", () => editStyle("ice"));
-  document.getElementById("iceRandomize").addEventListener("click", randomizeShape);
-  document.getElementById("iceSize").addEventListener("input", changeSize);
-  document.getElementById("iceNew").addEventListener("click", toggleAdd);
-  document.getElementById("iceRemove").addEventListener("click", removeIce);
+  document.getElementById('iceEditStyle').addEventListener('click', () => editStyle('ice'));
+  document.getElementById('iceRandomize').addEventListener('click', randomizeShape);
+  document.getElementById('iceSize').addEventListener('input', changeSize);
+  document.getElementById('iceNew').addEventListener('click', toggleAdd);
+  document.getElementById('iceRemove').addEventListener('click', removeIce);
 
   function randomizeShape() {
     const c = grid.points[+elSelected.attr("cell")];
@@ -49,18 +49,18 @@ function editIce() {
     while (flat.length) pairs.push(flat.splice(0, 2));
     const poly = pairs.map(p => [(p[0] - c[0]) / s, (p[1] - c[1]) / s]);
     const size = +this.value;
-    const points = poly.map(p => [rn(c[0] + p[0] * size, 2), rn(c[1] + p[1] * size, 2)]);
-    elSelected.attr("points", points).attr("size", size);
+    const points = poly.map((p) => [rn(c[0] + p[0] * size, 2), rn(c[1] + p[1] * size, 2)]);
+    elSelected.attr('points', points).attr('size', size);
   }
 
   function toggleAdd() {
-    document.getElementById("iceNew").classList.toggle("pressed");
-    if (document.getElementById("iceNew").classList.contains("pressed")) {
-      viewbox.style("cursor", "crosshair").on("click", addIcebergOnClick);
-      tip("Click on map to create an iceberg. Hold Shift to add multiple", true);
+    document.getElementById('iceNew').classList.toggle('pressed');
+    if (document.getElementById('iceNew').classList.contains('pressed')) {
+      viewbox.style('cursor', 'crosshair').on('click', addIcebergOnClick);
+      tip('Click on map to create an iceberg. Hold Shift to add multiple', true);
     } else {
       clearMainTip();
-      viewbox.on("click", clicked).style("cursor", "default");
+      viewbox.on('click', clicked).style('cursor', 'default');
     }
   }
 
@@ -68,7 +68,7 @@ function editIce() {
     const [x, y] = d3.mouse(this);
     const i = findGridCell(x, y, grid);
     const c = grid.points[i];
-    const s = +document.getElementById("iceSize").value;
+    const s = +document.getElementById('iceSize').value;
 
     const points = getGridPolygon(i).map(p => [(p[0] + (c[0] - p[0]) / s) | 0, (p[1] + (c[1] - p[1]) / s) | 0]);
     const iceberg = ice.append("polygon").attr("points", points).attr("cell", i).attr("size", s);
@@ -108,9 +108,9 @@ function editIce() {
   }
 
   function closeEditor() {
-    ice.selectAll("*").classed("draggable", false).call(d3.drag().on("drag", null));
+    ice.selectAll('*').classed('draggable', false).call(d3.drag().on('drag', null));
     clearMainTip();
-    iceNew.classList.remove("pressed");
+    iceNew.classList.remove('pressed');
     unselect();
   }
 }
diff --git a/modules/ui/labels-editor.js b/modules/ui/labels-editor.js
index 8bd04cdd..e7e2b538 100644
--- a/modules/ui/labels-editor.js
+++ b/modules/ui/labels-editor.js
@@ -1,14 +1,14 @@
-"use strict";
+'use strict';
 function editLabel() {
   if (customization) return;
   closeDialogs();
-  if (!layerIsOn("toggleLabels")) toggleLabels();
+  if (!layerIsOn('toggleLabels')) toggleLabels();
 
   const tspan = d3.event.target;
   const textPath = tspan.parentNode;
   const text = textPath.parentNode;
-  elSelected = d3.select(text).call(d3.drag().on("start", dragLabel)).classed("draggable", true);
-  viewbox.on("touchmove mousemove", showEditorTips);
+  elSelected = d3.select(text).call(d3.drag().on('start', dragLabel)).classed('draggable', true);
+  viewbox.on('touchmove mousemove', showEditorTips);
 
   $("#labelEditor").dialog({
     title: "Edit Label",
@@ -26,28 +26,28 @@ function editLabel() {
   modules.editLabel = true;
 
   // add listeners
-  document.getElementById("labelGroupShow").addEventListener("click", showGroupSection);
-  document.getElementById("labelGroupHide").addEventListener("click", hideGroupSection);
-  document.getElementById("labelGroupSelect").addEventListener("click", changeGroup);
-  document.getElementById("labelGroupInput").addEventListener("change", createNewGroup);
-  document.getElementById("labelGroupNew").addEventListener("click", toggleNewGroupInput);
-  document.getElementById("labelGroupRemove").addEventListener("click", removeLabelsGroup);
+  document.getElementById('labelGroupShow').addEventListener('click', showGroupSection);
+  document.getElementById('labelGroupHide').addEventListener('click', hideGroupSection);
+  document.getElementById('labelGroupSelect').addEventListener('click', changeGroup);
+  document.getElementById('labelGroupInput').addEventListener('change', createNewGroup);
+  document.getElementById('labelGroupNew').addEventListener('click', toggleNewGroupInput);
+  document.getElementById('labelGroupRemove').addEventListener('click', removeLabelsGroup);
 
-  document.getElementById("labelTextShow").addEventListener("click", showTextSection);
-  document.getElementById("labelTextHide").addEventListener("click", hideTextSection);
-  document.getElementById("labelText").addEventListener("input", changeText);
-  document.getElementById("labelTextRandom").addEventListener("click", generateRandomName);
+  document.getElementById('labelTextShow').addEventListener('click', showTextSection);
+  document.getElementById('labelTextHide').addEventListener('click', hideTextSection);
+  document.getElementById('labelText').addEventListener('input', changeText);
+  document.getElementById('labelTextRandom').addEventListener('click', generateRandomName);
 
-  document.getElementById("labelEditStyle").addEventListener("click", editGroupStyle);
+  document.getElementById('labelEditStyle').addEventListener('click', editGroupStyle);
 
-  document.getElementById("labelSizeShow").addEventListener("click", showSizeSection);
-  document.getElementById("labelSizeHide").addEventListener("click", hideSizeSection);
-  document.getElementById("labelStartOffset").addEventListener("input", changeStartOffset);
-  document.getElementById("labelRelativeSize").addEventListener("input", changeRelativeSize);
+  document.getElementById('labelSizeShow').addEventListener('click', showSizeSection);
+  document.getElementById('labelSizeHide').addEventListener('click', hideSizeSection);
+  document.getElementById('labelStartOffset').addEventListener('input', changeStartOffset);
+  document.getElementById('labelRelativeSize').addEventListener('input', changeRelativeSize);
 
-  document.getElementById("labelAlign").addEventListener("click", editLabelAlign);
-  document.getElementById("labelLegend").addEventListener("click", editLabelLegend);
-  document.getElementById("labelRemoveSingle").addEventListener("click", removeLabel);
+  document.getElementById('labelAlign').addEventListener('click', editLabelAlign);
+  document.getElementById('labelLegend').addEventListener('click', editLabelLegend);
+  document.getElementById('labelRemoveSingle').addEventListener('click', removeLabel);
 
   function showEditorTips() {
     showMainTip();
@@ -78,16 +78,16 @@ function editLabel() {
   }
 
   function updateValues(textPath) {
-    document.getElementById("labelText").value = [...textPath.querySelectorAll("tspan")].map(tspan => tspan.textContent).join("|");
-    document.getElementById("labelStartOffset").value = parseFloat(textPath.getAttribute("startOffset"));
-    document.getElementById("labelRelativeSize").value = parseFloat(textPath.getAttribute("font-size"));
+    document.getElementById('labelText').value = [...textPath.querySelectorAll('tspan')].map((tspan) => tspan.textContent).join('|');
+    document.getElementById('labelStartOffset').value = parseFloat(textPath.getAttribute('startOffset'));
+    document.getElementById('labelRelativeSize').value = parseFloat(textPath.getAttribute('font-size'));
   }
 
   function drawControlPointsAndLine() {
-    debug.select("#controlPoints").remove();
-    debug.append("g").attr("id", "controlPoints").attr("transform", elSelected.attr("transform"));
-    const path = document.getElementById("textPath_" + elSelected.attr("id"));
-    debug.select("#controlPoints").append("path").attr("d", path.getAttribute("d")).on("click", addInterimControlPoint);
+    debug.select('#controlPoints').remove();
+    debug.append('g').attr('id', 'controlPoints').attr('transform', elSelected.attr('transform'));
+    const path = document.getElementById('textPath_' + elSelected.attr('id'));
+    debug.select('#controlPoints').append('path').attr('d', path.getAttribute('d')).on('click', addInterimControlPoint);
     const l = path.getTotalLength();
     if (!l) return;
     const increment = l / Math.max(Math.ceil(l / 200), 2);
@@ -109,13 +109,13 @@ function editLabel() {
   }
 
   function dragControlPoint() {
-    this.setAttribute("cx", d3.event.x);
-    this.setAttribute("cy", d3.event.y);
+    this.setAttribute('cx', d3.event.x);
+    this.setAttribute('cy', d3.event.y);
     redrawLabelPath();
   }
 
   function redrawLabelPath() {
-    const path = document.getElementById("textPath_" + elSelected.attr("id"));
+    const path = document.getElementById('textPath_' + elSelected.attr('id'));
     lineGen.curve(d3.curveBundle.beta(1));
     const points = [];
     debug
@@ -125,8 +125,8 @@ function editLabel() {
         points.push([this.getAttribute("cx"), this.getAttribute("cy")]);
       });
     const d = round(lineGen(points));
-    path.setAttribute("d", d);
-    debug.select("#controlPoints > path").attr("d", d);
+    path.setAttribute('d', d);
+    debug.select('#controlPoints > path').attr('d', d);
   }
 
   function clickControlPoint() {
@@ -202,10 +202,10 @@ function editLabel() {
   }
 
   function toggleNewGroupInput() {
-    if (labelGroupInput.style.display === "none") {
-      labelGroupInput.style.display = "inline-block";
+    if (labelGroupInput.style.display === 'none') {
+      labelGroupInput.style.display = 'inline-block';
       labelGroupInput.focus();
-      labelGroupSelect.style.display = "none";
+      labelGroupSelect.style.display = 'none';
     } else {
       labelGroupInput.style.display = "none";
       labelGroupSelect.style.display = "inline-block";
@@ -223,39 +223,39 @@ function editLabel() {
       .replace(/[^\w\s]/gi, "");
 
     if (document.getElementById(group)) {
-      tip("Element with this id already exists. Please provide a unique name", false, "error");
+      tip('Element with this id already exists. Please provide a unique name', false, 'error');
       return;
     }
 
     if (Number.isFinite(+group.charAt(0))) {
-      tip("Group name should start with a letter", false, "error");
+      tip('Group name should start with a letter', false, 'error');
       return;
     }
 
     // just rename if only 1 element left
     const oldGroup = elSelected.node().parentNode;
-    if (oldGroup !== "states" && oldGroup !== "addedLabels" && oldGroup.childElementCount === 1) {
-      document.getElementById("labelGroupSelect").selectedOptions[0].remove();
-      document.getElementById("labelGroupSelect").options.add(new Option(group, group, false, true));
+    if (oldGroup !== 'states' && oldGroup !== 'addedLabels' && oldGroup.childElementCount === 1) {
+      document.getElementById('labelGroupSelect').selectedOptions[0].remove();
+      document.getElementById('labelGroupSelect').options.add(new Option(group, group, false, true));
       oldGroup.id = group;
       toggleNewGroupInput();
-      document.getElementById("labelGroupInput").value = "";
+      document.getElementById('labelGroupInput').value = '';
       return;
     }
 
     const newGroup = elSelected.node().parentNode.cloneNode(false);
-    document.getElementById("labels").appendChild(newGroup);
+    document.getElementById('labels').appendChild(newGroup);
     newGroup.id = group;
-    document.getElementById("labelGroupSelect").options.add(new Option(group, group, false, true));
+    document.getElementById('labelGroupSelect').options.add(new Option(group, group, false, true));
     document.getElementById(group).appendChild(elSelected.node());
 
     toggleNewGroupInput();
-    document.getElementById("labelGroupInput").value = "";
+    document.getElementById('labelGroupInput').value = '';
   }
 
   function removeLabelsGroup() {
     const group = elSelected.node().parentNode.id;
-    const basic = group === "states" || group === "addedLabels";
+    const basic = group === 'states' || group === 'addedLabels';
     const count = elSelected.node().parentNode.childElementCount;
     alertMessage.innerHTML = /* html */ `Are you sure you want to remove ${
       basic ? "all elements in the group" : "the entire label group"
@@ -299,8 +299,13 @@ function editLabel() {
     const input = document.getElementById("labelText").value;
     const el = elSelected.select("textPath").node();
     const example = d3.select(elSelected.node().parentNode).append("text").attr("x", 0).attr("x", 0).attr("font-size", el.getAttribute("font-size")).node();
+  }
+  function changeText() {
+    const input = document.getElementById('labelText').value;
+    const el = elSelected.select('textPath').node();
+    const example = d3.select(elSelected.node().parentNode).append('text').attr('x', 0).attr('x', 0).attr('font-size', el.getAttribute('font-size')).node();
 
-    const lines = input.split("|");
+    const lines = input.split('|');
     const top = (lines.length - 1) / -2; // y offset
     const inner = lines
       .map((l, d) => {
@@ -321,20 +326,20 @@ function editLabel() {
     if (elSelected.attr("id").slice(0, 10) === "stateLabel") {
       const id = +elSelected.attr("id").slice(10);
       const culture = pack.states[id].culture;
-      name = Names.getState(Names.getCulture(culture, 4, 7, ""), culture);
+      name = Names.getState(Names.getCulture(culture, 4, 7, ''), culture);
     } else {
       const box = elSelected.node().getBBox();
       const cell = findCell((box.x + box.width) / 2, (box.y + box.height) / 2);
       const culture = pack.cells.culture[cell];
       name = Names.getCulture(culture);
     }
-    document.getElementById("labelText").value = name;
+    document.getElementById('labelText').value = name;
     changeText();
   }
 
   function editGroupStyle() {
     const g = elSelected.node().parentNode.id;
-    editStyle("labels", g);
+    editStyle('labels', g);
   }
 
   function showSizeSection() {
@@ -348,13 +353,13 @@ function editLabel() {
   }
 
   function changeStartOffset() {
-    elSelected.select("textPath").attr("startOffset", this.value + "%");
-    tip("Label offset: " + this.value + "%");
+    elSelected.select('textPath').attr('startOffset', this.value + '%');
+    tip('Label offset: ' + this.value + '%');
   }
 
   function changeRelativeSize() {
-    elSelected.select("textPath").attr("font-size", this.value + "%");
-    tip("Label relative size: " + this.value + "%");
+    elSelected.select('textPath').attr('font-size', this.value + '%');
+    tip('Label relative size: ' + this.value + '%');
     changeText();
   }
 
@@ -367,7 +372,7 @@ function editLabel() {
   }
 
   function editLabelLegend() {
-    const id = elSelected.attr("id");
+    const id = elSelected.attr('id');
     const name = elSelected.text();
     editNotes(id, name);
   }
@@ -392,7 +397,7 @@ function editLabel() {
   }
 
   function closeLabelEditor() {
-    debug.select("#controlPoints").remove();
+    debug.select('#controlPoints').remove();
     unselect();
   }
 }
diff --git a/modules/ui/lakes-editor.js b/modules/ui/lakes-editor.js
index 7d766672..55b2db0d 100644
--- a/modules/ui/lakes-editor.js
+++ b/modules/ui/lakes-editor.js
@@ -1,8 +1,8 @@
-"use strict";
+'use strict';
 function editLake() {
   if (customization) return;
-  closeDialogs(".stable");
-  if (layerIsOn("toggleCells")) toggleCells();
+  closeDialogs('.stable');
+  if (layerIsOn('toggleCells')) toggleCells();
 
   $("#lakeEditor").dialog({
     title: "Edit Lake",
@@ -12,32 +12,32 @@ function editLake() {
   });
 
   const node = d3.event.target;
-  debug.append("g").attr("id", "vertices");
+  debug.append('g').attr('id', 'vertices');
   elSelected = d3.select(node);
   updateLakeValues();
   selectLakeGroup(node);
   drawLakeVertices();
-  viewbox.on("touchmove mousemove", null);
+  viewbox.on('touchmove mousemove', null);
 
   if (modules.editLake) return;
   modules.editLake = true;
 
   // add listeners
-  document.getElementById("lakeName").addEventListener("input", changeName);
-  document.getElementById("lakeNameCulture").addEventListener("click", generateNameCulture);
-  document.getElementById("lakeNameRandom").addEventListener("click", generateNameRandom);
+  document.getElementById('lakeName').addEventListener('input', changeName);
+  document.getElementById('lakeNameCulture').addEventListener('click', generateNameCulture);
+  document.getElementById('lakeNameRandom').addEventListener('click', generateNameRandom);
 
-  document.getElementById("lakeGroup").addEventListener("change", changeLakeGroup);
-  document.getElementById("lakeGroupAdd").addEventListener("click", toggleNewGroupInput);
-  document.getElementById("lakeGroupName").addEventListener("change", createNewGroup);
-  document.getElementById("lakeGroupRemove").addEventListener("click", removeLakeGroup);
+  document.getElementById('lakeGroup').addEventListener('change', changeLakeGroup);
+  document.getElementById('lakeGroupAdd').addEventListener('click', toggleNewGroupInput);
+  document.getElementById('lakeGroupName').addEventListener('change', createNewGroup);
+  document.getElementById('lakeGroupRemove').addEventListener('click', removeLakeGroup);
 
-  document.getElementById("lakeEditStyle").addEventListener("click", editGroupStyle);
-  document.getElementById("lakeLegend").addEventListener("click", editLakeLegend);
+  document.getElementById('lakeEditStyle').addEventListener('click', editGroupStyle);
+  document.getElementById('lakeLegend').addEventListener('click', editLakeLegend);
 
   function getLake() {
-    const lakeId = +elSelected.attr("data-f");
-    return pack.features.find(feature => feature.i === lakeId);
+    const lakeId = +elSelected.attr('data-f');
+    return pack.features.find((feature) => feature.i === lakeId);
   }
 
   function updateLakeValues() {
@@ -51,21 +51,21 @@ function editLake() {
     document.getElementById("lakeShoreLength").value =
       si(length * distanceScaleInput.value) + " " + distanceUnitInput.value;
 
-    const lakeCells = Array.from(cells.i.filter(i => cells.f[i] === l.i));
-    const heights = lakeCells.map(i => cells.h[i]);
+    const lakeCells = Array.from(cells.i.filter((i) => cells.f[i] === l.i));
+    const heights = lakeCells.map((i) => cells.h[i]);
 
     document.getElementById("lakeElevation").value = getHeight(l.height);
     document.getElementById("lakeAverageDepth").value = getHeight(d3.mean(heights), "abs");
     document.getElementById("lakeMaxDepth").value = getHeight(d3.min(heights), "abs");
 
-    document.getElementById("lakeFlux").value = l.flux;
-    document.getElementById("lakeEvaporation").value = l.evaporation;
+    document.getElementById('lakeFlux').value = l.flux;
+    document.getElementById('lakeEvaporation').value = l.evaporation;
 
-    const inlets = l.inlets && l.inlets.map(inlet => pack.rivers.find(river => river.i === inlet)?.name);
-    const outlet = l.outlet ? pack.rivers.find(river => river.i === l.outlet)?.name : "no";
-    document.getElementById("lakeInlets").value = inlets ? inlets.length : "no";
-    document.getElementById("lakeInlets").title = inlets ? inlets.join(", ") : "";
-    document.getElementById("lakeOutlet").value = outlet;
+    const inlets = l.inlets && l.inlets.map((inlet) => pack.rivers.find((river) => river.i === inlet)?.name);
+    const outlet = l.outlet ? pack.rivers.find((river) => river.i === l.outlet)?.name : 'no';
+    document.getElementById('lakeInlets').value = inlets ? inlets.length : 'no';
+    document.getElementById('lakeInlets').title = inlets ? inlets.join(', ') : '';
+    document.getElementById('lakeOutlet').value = outlet;
   }
 
   function drawLakeVertices() {
@@ -114,7 +114,7 @@ function editLake() {
   function redrawLake() {
     lineGen.curve(d3.curveBasisClosed);
     const feature = getLake();
-    const points = feature.vertices.map(v => pack.vertices.p[v]);
+    const points = feature.vertices.map((v) => pack.vertices.p[v]);
     const d = round(lineGen(points));
     elSelected.attr("d", d);
     defs.select("mask#land > path#land_" + feature.i).attr("d", d); // update land mask
@@ -139,7 +139,7 @@ function editLake() {
 
   function selectLakeGroup(node) {
     const group = node.parentNode.id;
-    const select = document.getElementById("lakeGroup");
+    const select = document.getElementById('lakeGroup');
     select.options.length = 0; // remove all options
 
     lakes.selectAll("g").each(function () {
@@ -153,10 +153,10 @@ function editLake() {
   }
 
   function toggleNewGroupInput() {
-    if (lakeGroupName.style.display === "none") {
-      lakeGroupName.style.display = "inline-block";
+    if (lakeGroupName.style.display === 'none') {
+      lakeGroupName.style.display = 'inline-block';
       lakeGroupName.focus();
-      lakeGroup.style.display = "none";
+      lakeGroup.style.display = 'none';
     } else {
       lakeGroupName.style.display = "none";
       lakeGroup.style.display = "inline-block";
@@ -174,42 +174,42 @@ function editLake() {
       .replace(/[^\w\s]/gi, "");
 
     if (document.getElementById(group)) {
-      tip("Element with this id already exists. Please provide a unique name", false, "error");
+      tip('Element with this id already exists. Please provide a unique name', false, 'error');
       return;
     }
 
     if (Number.isFinite(+group.charAt(0))) {
-      tip("Group name should start with a letter", false, "error");
+      tip('Group name should start with a letter', false, 'error');
       return;
     }
 
     // just rename if only 1 element left
     const oldGroup = elSelected.node().parentNode;
-    const basic = ["freshwater", "salt", "sinkhole", "frozen", "lava", "dry"].includes(oldGroup.id);
+    const basic = ['freshwater', 'salt', 'sinkhole', 'frozen', 'lava', 'dry'].includes(oldGroup.id);
     if (!basic && oldGroup.childElementCount === 1) {
-      document.getElementById("lakeGroup").selectedOptions[0].remove();
-      document.getElementById("lakeGroup").options.add(new Option(group, group, false, true));
+      document.getElementById('lakeGroup').selectedOptions[0].remove();
+      document.getElementById('lakeGroup').options.add(new Option(group, group, false, true));
       oldGroup.id = group;
       toggleNewGroupInput();
-      document.getElementById("lakeGroupName").value = "";
+      document.getElementById('lakeGroupName').value = '';
       return;
     }
 
     // create a new group
     const newGroup = elSelected.node().parentNode.cloneNode(false);
-    document.getElementById("lakes").appendChild(newGroup);
+    document.getElementById('lakes').appendChild(newGroup);
     newGroup.id = group;
-    document.getElementById("lakeGroup").options.add(new Option(group, group, false, true));
+    document.getElementById('lakeGroup').options.add(new Option(group, group, false, true));
     document.getElementById(group).appendChild(elSelected.node());
 
     toggleNewGroupInput();
-    document.getElementById("lakeGroupName").value = "";
+    document.getElementById('lakeGroupName').value = '';
   }
 
   function removeLakeGroup() {
     const group = elSelected.node().parentNode.id;
-    if (["freshwater", "salt", "sinkhole", "frozen", "lava", "dry"].includes(group)) {
-      tip("This is one of the default groups, it cannot be removed", false, "error");
+    if (['freshwater', 'salt', 'sinkhole', 'frozen', 'lava', 'dry'].includes(group)) {
+      tip('This is one of the default groups, it cannot be removed', false, 'error');
       return;
     }
 
@@ -236,20 +236,21 @@ function editLake() {
         }
       }
     });
+    confirmationDialog({title: 'Remove lake group', message, confirm: 'Remove', onConfirm});
   }
 
   function editGroupStyle() {
     const g = elSelected.node().parentNode.id;
-    editStyle("lakes", g);
+    editStyle('lakes', g);
   }
 
   function editLakeLegend() {
-    const id = elSelected.attr("id");
-    editNotes(id, getLake().name + " " + lakeGroup.value + " lake");
+    const id = elSelected.attr('id');
+    editNotes(id, getLake().name + ' ' + lakeGroup.value + ' lake');
   }
 
   function closeLakesEditor() {
-    debug.select("#vertices").remove();
+    debug.select('#vertices').remove();
     unselect();
   }
 }
diff --git a/modules/ui/military-overview.js b/modules/ui/military-overview.js
index 35a23ed4..c0e8eb36 100644
--- a/modules/ui/military-overview.js
+++ b/modules/ui/military-overview.js
@@ -1,14 +1,14 @@
-"use strict";
+'use strict';
 function overviewMilitary() {
   if (customization) return;
-  closeDialogs("#militaryOverview, .stable");
-  if (!layerIsOn("toggleStates")) toggleStates();
-  if (!layerIsOn("toggleBorders")) toggleBorders();
-  if (!layerIsOn("toggleMilitary")) toggleMilitary();
+  closeDialogs('#militaryOverview, .stable');
+  if (!layerIsOn('toggleStates')) toggleStates();
+  if (!layerIsOn('toggleBorders')) toggleBorders();
+  if (!layerIsOn('toggleMilitary')) toggleMilitary();
 
-  const body = document.getElementById("militaryBody");
+  const body = document.getElementById('militaryBody');
   addLines();
-  $("#militaryOverview").dialog();
+  $('#militaryOverview').dialog();
 
   if (modules.overviewMilitary) return;
   modules.overviewMilitary = true;
@@ -22,13 +22,13 @@ function overviewMilitary() {
   });
 
   // add listeners
-  document.getElementById("militaryOverviewRefresh").addEventListener("click", addLines);
-  document.getElementById("militaryPercentage").addEventListener("click", togglePercentageMode);
-  document.getElementById("militaryOptionsButton").addEventListener("click", militaryCustomize);
-  document.getElementById("militaryRegimentsList").addEventListener("click", () => overviewRegiments(-1));
-  document.getElementById("militaryOverviewRecalculate").addEventListener("click", militaryRecalculate);
-  document.getElementById("militaryExport").addEventListener("click", downloadMilitaryData);
-  document.getElementById("militaryWiki").addEventListener("click", () => wiki("Military-Forces"));
+  document.getElementById('militaryOverviewRefresh').addEventListener('click', addLines);
+  document.getElementById('militaryPercentage').addEventListener('click', togglePercentageMode);
+  document.getElementById('militaryOptionsButton').addEventListener('click', militaryCustomize);
+  document.getElementById('militaryRegimentsList').addEventListener('click', () => overviewRegiments(-1));
+  document.getElementById('militaryOverviewRecalculate').addEventListener('click', militaryRecalculate);
+  document.getElementById('militaryExport').addEventListener('click', downloadMilitaryData);
+  document.getElementById('militaryWiki').addEventListener('click', () => wiki('Military-Forces'));
 
   body.addEventListener("change", function (ev) {
     const el = ev.target,
@@ -65,9 +65,9 @@ function overviewMilitary() {
 
   // add line for each state
   function addLines() {
-    body.innerHTML = "";
-    let lines = "";
-    const states = pack.states.filter(s => s.i && !s.removed);
+    body.innerHTML = '';
+    let lines = '';
+    const states = pack.states.filter((s) => s.i && !s.removed);
 
     for (const s of states) {
       const population = rn((s.rural + s.urban * urbanization) * populationRate);
@@ -75,8 +75,8 @@ function overviewMilitary() {
       const total = options.military.reduce((s, u) => s + getForces(u) * u.crew, 0);
       const rate = (total / population) * 100;
 
-      const sortData = options.military.map(u => `data-${u.name}="${getForces(u)}"`).join(" ");
-      const lineData = options.military.map(u => `<div data-type="${u.name}" data-tip="State ${u.name} units number">${getForces(u)}</div>`).join(" ");
+      const sortData = options.military.map((u) => `data-${u.name}="${getForces(u)}"`).join(' ');
+      const lineData = options.military.map((u) => `<div data-type="${u.name}" data-tip="State ${u.name} units number">${getForces(u)}</div>`).join(' ');
 
       lines += /* html */ `<div
         class="states"
@@ -105,12 +105,12 @@ function overviewMilitary() {
         <span data-tip="Show regiments list" class="icon-list-bullet pointer"></span>
       </div>`;
     }
-    body.insertAdjacentHTML("beforeend", lines);
+    body.insertAdjacentHTML('beforeend', lines);
     updateFooter();
 
     // add listeners
-    body.querySelectorAll("div.states").forEach(el => el.addEventListener("mouseenter", ev => stateHighlightOn(ev)));
-    body.querySelectorAll("div.states").forEach(el => el.addEventListener("mouseleave", ev => stateHighlightOff(ev)));
+    body.querySelectorAll('div.states').forEach((el) => el.addEventListener('mouseenter', (ev) => stateHighlightOn(ev)));
+    body.querySelectorAll('div.states').forEach((el) => el.addEventListener('mouseleave', (ev) => stateHighlightOff(ev)));
 
     if (body.dataset.type === "percentage") {
       body.dataset.type = "absolute";
@@ -137,7 +137,7 @@ function overviewMilitary() {
     const total = (line.dataset.total = options.military.reduce((s, u) => s + getForces(u) * u.crew, 0));
     const rate = (line.dataset.rate = (total / population) * 100);
     line.querySelector("div[data-type='total']").innerHTML = si(total);
-    line.querySelector("div[data-type='rate']").innerHTML = rn(rate, 2) + "%";
+    line.querySelector("div[data-type='rate']").innerHTML = rn(rate, 2) + '%';
 
     updateFooter();
   }
@@ -148,8 +148,8 @@ function overviewMilitary() {
     const total = d3.sum(lines.map(el => el.dataset.total));
     militaryFooterForcesTotal.innerHTML = si(total);
     militaryFooterForces.innerHTML = si(total / statesNumber);
-    militaryFooterRate.innerHTML = rn(d3.sum(lines.map(el => el.dataset.rate)) / statesNumber, 2) + "%";
-    militaryFooterAlert.innerHTML = rn(d3.sum(lines.map(el => el.dataset.alert)) / statesNumber, 2);
+    militaryFooterRate.innerHTML = rn(d3.sum(lines.map((el) => el.dataset.rate)) / statesNumber, 2) + '%';
+    militaryFooterAlert.innerHTML = rn(d3.sum(lines.map((el) => el.dataset.alert)) / statesNumber, 2);
   }
 
   function stateHighlightOn(event) {
@@ -207,7 +207,7 @@ function overviewMilitary() {
 
       const total = function (type) {
         if (cache[type]) cache[type];
-        cache[type] = d3.sum(array.map(el => +el.dataset[type]));
+        cache[type] = d3.sum(array.map((el) => +el.dataset[type]));
         return cache[type];
       };
 
@@ -219,7 +219,7 @@ function overviewMilitary() {
         });
       });
     } else {
-      body.dataset.type = "absolute";
+      body.dataset.type = 'absolute';
       addLines();
     }
   }
@@ -388,11 +388,11 @@ function overviewMilitary() {
       const unitLines = Array.from(tableBody.querySelectorAll("tr"));
       const names = unitLines.map(r => r.querySelector("input").value.replace(/[&\/\\#, +()$~%.'":*?<>{}]/g, "_"));
       if (new Set(names).size !== names.length) {
-        tip("All units should have unique names", false, "error");
+        tip('All units should have unique names', false, 'error');
         return;
       }
 
-      $("#militaryOptions").dialog("close");
+      $('#militaryOptions').dialog('close');
       options.military = unitLines.map((r, i) => {
         const elements = Array.from(r.querySelectorAll("input, button, select"));
         const [icon, name, biomes, states, cultures, religions, rural, urban, crew, power, type, separate] = elements.map(el => {
@@ -411,7 +411,7 @@ function overviewMilitary() {
         if (religions) unit.religions = religions;
         return unit;
       });
-      localStorage.setItem("military", JSON.stringify(options.military));
+      localStorage.setItem('military', JSON.stringify(options.military));
       Military.generate();
       updateHeaders();
       addLines();
@@ -450,7 +450,7 @@ function overviewMilitary() {
       data += el.dataset.alert + "\n";
     });
 
-    const name = getFileName("Military") + ".csv";
+    const name = getFileName('Military') + '.csv';
     downloadFile(data, name);
   }
 }
diff --git a/modules/ui/namesbase-editor.js b/modules/ui/namesbase-editor.js
index e2d214ff..38db89f6 100644
--- a/modules/ui/namesbase-editor.js
+++ b/modules/ui/namesbase-editor.js
@@ -1,8 +1,8 @@
-"use strict";
+'use strict';
 function editNamesbase() {
   if (customization) return;
-  closeDialogs("#namesbaseEditor, .stable");
-  $("#namesbaseEditor").dialog();
+  closeDialogs('#namesbaseEditor, .stable');
+  $('#namesbaseEditor').dialog();
 
   if (modules.editNamesbase) return;
   modules.editNamesbase = true;
@@ -58,8 +58,8 @@ function editNamesbase() {
   });
 
   function createBasesList() {
-    const select = document.getElementById("namesbaseSelect");
-    select.innerHTML = "";
+    const select = document.getElementById('namesbaseSelect');
+    select.innerHTML = '';
     nameBases.forEach((b, i) => select.options.add(new Option(b.name, i)));
   }
 
@@ -81,13 +81,13 @@ function editNamesbase() {
     for (let i = 0; i < 10; i++) {
       const example = Names.getBase(base);
       if (example === undefined) {
-        examples = "Cannot generate examples. Please verify the data";
+        examples = 'Cannot generate examples. Please verify the data';
         break;
       }
-      if (i) examples += ", ";
+      if (i) examples += ', ';
       examples += example;
     }
-    document.getElementById("namesbaseExamples").innerHTML = examples;
+    document.getElementById('namesbaseExamples').innerHTML = examples;
   }
 
   function updateNamesData() {
@@ -130,7 +130,7 @@ function editNamesbase() {
   }
 
   function updateBaseDublication() {
-    const base = +document.getElementById("namesbaseSelect").value;
+    const base = +document.getElementById('namesbaseSelect').value;
     nameBases[base].d = this.value;
   }
 
diff --git a/modules/ui/notes-editor.js b/modules/ui/notes-editor.js
index 4362fb25..885439ec 100644
--- a/modules/ui/notes-editor.js
+++ b/modules/ui/notes-editor.js
@@ -21,10 +21,10 @@ function editNotes(id, name) {
   // select an object
   if (notes.length || id) {
     if (!id) id = notes[0].id;
-    let note = notes.find(note => note.id === id);
+    let note = notes.find((note) => note.id === id);
     if (note === undefined) {
       if (!name) name = id;
-      note = {id, name, legend: ""};
+      note = {id, name, legend: ''};
       notes.push(note);
       notesSelect.options.add(new Option(id, id));
     }
diff --git a/modules/ui/options.js b/modules/ui/options.js
index c072d1cb..83ae9d15 100644
--- a/modules/ui/options.js
+++ b/modules/ui/options.js
@@ -1,41 +1,41 @@
 // UI module to control the options (preferences)
-"use strict";
+'use strict';
 
-$("#optionsContainer").draggable({handle: ".drag-trigger", snap: "svg", snapMode: "both"});
-$("#exitCustomization").draggable({handle: "div"});
-$("#mapLayers").disableSelection();
+$('#optionsContainer').draggable({handle: '.drag-trigger', snap: 'svg', snapMode: 'both'});
+$('#exitCustomization').draggable({handle: 'div'});
+$('#mapLayers').disableSelection();
 
 // remove glow if tip is aknowledged
 if (stored("disable_click_arrow_tooltip")) {
   clearMainTip();
-  optionsTrigger.classList.remove("glow");
+  optionsTrigger.classList.remove('glow');
 }
 
 // Show options pane on trigger click
 function showOptions(event) {
   if (!stored("disable_click_arrow_tooltip")) {
     clearMainTip();
-    localStorage.setItem("disable_click_arrow_tooltip", true);
-    optionsTrigger.classList.remove("glow");
+    localStorage.setItem('disable_click_arrow_tooltip', true);
+    optionsTrigger.classList.remove('glow');
   }
 
-  regenerate.style.display = "none";
-  document.getElementById("options").style.display = "block";
-  optionsTrigger.style.display = "none";
+  regenerate.style.display = 'none';
+  document.getElementById('options').style.display = 'block';
+  optionsTrigger.style.display = 'none';
 
   if (event) event.stopPropagation();
 }
 
 // Hide options pane on trigger click
 function hideOptions(event) {
-  document.getElementById("options").style.display = "none";
-  optionsTrigger.style.display = "block";
+  document.getElementById('options').style.display = 'none';
+  optionsTrigger.style.display = 'block';
   if (event) event.stopPropagation();
 }
 
 // To toggle options on hotkey press
 function toggleOptions(event) {
-  if (document.getElementById("options").style.display === "none") showOptions(event);
+  if (document.getElementById('options').style.display === 'none') showOptions(event);
   else hideOptions(event);
 }
 
@@ -158,15 +158,15 @@ optionsContent.addEventListener("click", function (event) {
 
 function mapSizeInputChange() {
   changeMapSize();
-  localStorage.setItem("mapWidth", mapWidthInput.value);
-  localStorage.setItem("mapHeight", mapHeightInput.value);
+  localStorage.setItem('mapWidth', mapWidthInput.value);
+  localStorage.setItem('mapHeight', mapHeightInput.value);
 }
 
 // change svg size on manual size change or window resize, do not change graph size
 function changeMapSize() {
   svgWidth = Math.min(+mapWidthInput.value, window.innerWidth);
   svgHeight = Math.min(+mapHeightInput.value, window.innerHeight);
-  svg.attr("width", svgWidth).attr("height", svgHeight);
+  svg.attr('width', svgWidth).attr('height', svgHeight);
 
   const maxWidth = Math.max(+mapWidthInput.value, graphWidth);
   const maxHeight = Math.max(+mapHeightInput.value, graphHeight);
@@ -207,8 +207,8 @@ function toggleFullscreen() {
   if (mapWidthInput.value != window.innerWidth || mapHeightInput.value != window.innerHeight) {
     mapWidthInput.value = window.innerWidth;
     mapHeightInput.value = window.innerHeight;
-    localStorage.removeItem("mapHeight");
-    localStorage.removeItem("mapWidth");
+    localStorage.removeItem('mapHeight');
+    localStorage.removeItem('mapWidth');
   } else {
     mapWidthInput.value = graphWidth;
     mapHeightInput.value = graphHeight;
@@ -236,7 +236,7 @@ const voiceInterval = setInterval(function () {
   if (voices.length) clearInterval(voiceInterval);
   else return;
 
-  const select = document.getElementById("speakerVoice");
+  const select = document.getElementById('speakerVoice');
   voices.forEach((voice, i) => {
     select.options.add(new Option(voice.name, i, false));
   });
@@ -250,7 +250,7 @@ function testSpeaker() {
   const speaker = new SpeechSynthesisUtterance(text);
   const voices = speechSynthesis.getVoices();
   if (voices.length) {
-    const voiceId = +document.getElementById("speakerVoice").value;
+    const voiceId = +document.getElementById('speakerVoice').value;
     speaker.voice = voices[voiceId];
   }
   speechSynthesis.speak(speaker);
@@ -349,9 +349,9 @@ function changeCultureSet() {
 }
 
 function changeEmblemShape(emblemShape) {
-  const image = document.getElementById("emblemShapeImage");
+  const image = document.getElementById('emblemShapeImage');
   const shapePath = window.COArenderer && COArenderer.shieldPaths[emblemShape];
-  shapePath ? image.setAttribute("d", shapePath) : image.removeAttribute("d");
+  shapePath ? image.setAttribute('d', shapePath) : image.removeAttribute('d');
 
   const specificShape = ["culture", "state", "random"].includes(emblemShape) ? null : emblemShape;
   if (emblemShape === "random")
@@ -364,25 +364,25 @@ function changeEmblemShape(emblemShape) {
     COArenderer.trigger(id, coa);
   };
 
-  pack.states.forEach(state => {
-    if (!state.i || state.removed || !state.coa || state.coa === "custom") return;
+  pack.states.forEach((state) => {
+    if (!state.i || state.removed || !state.coa || state.coa === 'custom') return;
     const newShield = specificShape || COA.getShield(state.culture, null);
     if (newShield === state.coa.shield) return;
     state.coa.shield = newShield;
-    rerenderCOA("stateCOA" + state.i, state.coa);
+    rerenderCOA('stateCOA' + state.i, state.coa);
   });
 
-  pack.provinces.forEach(province => {
-    if (!province.i || province.removed || !province.coa || province.coa === "custom") return;
+  pack.provinces.forEach((province) => {
+    if (!province.i || province.removed || !province.coa || province.coa === 'custom') return;
     const culture = pack.cells.culture[province.center];
     const newShield = specificShape || COA.getShield(culture, province.state);
     if (newShield === province.coa.shield) return;
     province.coa.shield = newShield;
-    rerenderCOA("provinceCOA" + province.i, province.coa);
+    rerenderCOA('provinceCOA' + province.i, province.coa);
   });
 
-  pack.burgs.forEach(burg => {
-    if (!burg.i || burg.removed || !burg.coa || burg.coa === "custom") return;
+  pack.burgs.forEach((burg) => {
+    if (!burg.i || burg.removed || !burg.coa || burg.coa === 'custom') return;
     const newShield = specificShape || COA.getShield(burg.culture, burg.state);
     if (newShield === burg.coa.shield) return;
     burg.coa.shield = newShield;
@@ -521,8 +521,8 @@ function applyStoredOptions() {
 
   // search params overwrite stored and default options
   const params = new URL(window.location.href).searchParams;
-  const width = +params.get("width");
-  const height = +params.get("height");
+  const width = +params.get('width');
+  const height = +params.get('height');
   if (width) mapWidthInput.value = width;
   if (height) mapHeightInput.value = height;
 
@@ -647,7 +647,7 @@ function changeYear() {
 
 function changeEra() {
   if (!eraInput.value) return;
-  lock("era");
+  lock('era');
   options.era = eraInput.value;
 }
 
@@ -810,7 +810,7 @@ function loadURL() {
           return;
         }
         loadMapFromURL(value);
-        $(this).dialog("close");
+        $(this).dialog('close');
       },
       Cancel: function () {
         $(this).dialog("close");
@@ -822,7 +822,7 @@ function loadURL() {
 // load map
 document.getElementById("mapToLoad").addEventListener("change", function () {
   const fileToLoad = this.files[0];
-  this.value = "";
+  this.value = '';
   closeDialogs();
   uploadMap(fileToLoad);
 });
@@ -904,52 +904,52 @@ function updateTilesOptions() {
 }
 
 // View mode
-viewMode.addEventListener("click", changeViewMode);
+viewMode.addEventListener('click', changeViewMode);
 function changeViewMode(event) {
   const button = event.target;
-  if (button.tagName !== "BUTTON") return;
-  const pressed = button.classList.contains("pressed");
+  if (button.tagName !== 'BUTTON') return;
+  const pressed = button.classList.contains('pressed');
   enterStandardView();
 
-  if (!pressed && button.id !== "viewStandard") {
-    viewStandard.classList.remove("pressed");
-    button.classList.add("pressed");
+  if (!pressed && button.id !== 'viewStandard') {
+    viewStandard.classList.remove('pressed');
+    button.classList.add('pressed');
     enter3dView(button.id);
   }
 }
 
 function enterStandardView() {
-  viewMode.querySelectorAll(".pressed").forEach(button => button.classList.remove("pressed"));
-  heightmap3DView.classList.remove("pressed");
-  viewStandard.classList.add("pressed");
+  viewMode.querySelectorAll('.pressed').forEach((button) => button.classList.remove('pressed'));
+  heightmap3DView.classList.remove('pressed');
+  viewStandard.classList.add('pressed');
 
-  if (!document.getElementById("canvas3d")) return;
+  if (!document.getElementById('canvas3d')) return;
   ThreeD.stop();
-  document.getElementById("canvas3d").remove();
-  if (options3dUpdate.offsetParent) $("#options3d").dialog("close");
-  if (preview3d.offsetParent) $("#preview3d").dialog("close");
+  document.getElementById('canvas3d').remove();
+  if (options3dUpdate.offsetParent) $('#options3d').dialog('close');
+  if (preview3d.offsetParent) $('#preview3d').dialog('close');
 }
 
 async function enter3dView(type) {
-  const canvas = document.createElement("canvas");
-  canvas.id = "canvas3d";
+  const canvas = document.createElement('canvas');
+  canvas.id = 'canvas3d';
   canvas.dataset.type = type;
 
-  if (type === "heightmap3DView") {
+  if (type === 'heightmap3DView') {
     canvas.width = parseFloat(preview3d.style.width) || graphWidth / 3;
     canvas.height = canvas.width / (graphWidth / graphHeight);
-    canvas.style.display = "block";
+    canvas.style.display = 'block';
   } else {
     canvas.width = svgWidth;
     canvas.height = svgHeight;
-    canvas.style.position = "absolute";
-    canvas.style.display = "none";
+    canvas.style.position = 'absolute';
+    canvas.style.display = 'none';
   }
 
   const started = await ThreeD.create(canvas, type);
   if (!started) return;
 
-  canvas.style.display = "block";
+  canvas.style.display = 'block';
   canvas.onmouseenter = () => {
     const help =
       "Left mouse to change angle, middle mouse / mousewheel to zoom, right mouse to pan. <b>O</b> to toggle options";
@@ -972,7 +972,7 @@ async function enter3dView(type) {
 }
 
 function resize3d() {
-  const canvas = document.getElementById("canvas3d");
+  const canvas = document.getElementById('canvas3d');
   canvas.width = parseFloat(preview3d.style.width);
   canvas.height = parseFloat(preview3d.style.height) - 2;
   ThreeD.redraw();
@@ -995,9 +995,9 @@ function toggle3dOptions() {
   if (modules.options3d) return;
   modules.options3d = true;
 
-  document.getElementById("options3dUpdate").addEventListener("click", ThreeD.update);
-  document.getElementById("options3dSave").addEventListener("click", ThreeD.saveScreenshot);
-  document.getElementById("options3dOBJSave").addEventListener("click", ThreeD.saveOBJ);
+  document.getElementById('options3dUpdate').addEventListener('click', ThreeD.update);
+  document.getElementById('options3dSave').addEventListener('click', ThreeD.saveScreenshot);
+  document.getElementById('options3dOBJSave').addEventListener('click', ThreeD.saveOBJ);
 
   document.getElementById("options3dScaleRange").addEventListener("input", changeHeightScale);
   document.getElementById("options3dScaleNumber").addEventListener("change", changeHeightScale);
@@ -1030,7 +1030,7 @@ function toggle3dOptions() {
     options3dGlobeRotationRange.value = options3dGlobeRotationNumber.value = ThreeD.options.rotateGlobe;
     options3dMeshLabels3d.value = ThreeD.options.labels3d;
     options3dMeshSkyMode.value = ThreeD.options.extendedWater;
-    options3dColorSection.style.display = ThreeD.options.extendedWater ? "block" : "none";
+    options3dColorSection.style.display = ThreeD.options.extendedWater ? 'block' : 'none';
     options3dMeshSky.value = ThreeD.options.skyColor;
     options3dMeshWater.value = ThreeD.options.waterColor;
     options3dGlobeResolution.value = ThreeD.options.resolution;
@@ -1065,7 +1065,7 @@ function toggle3dOptions() {
 
   function toggleSkyMode() {
     const hide = ThreeD.options.extendedWater;
-    options3dColorSection.style.display = hide ? "none" : "block";
+    options3dColorSection.style.display = hide ? 'none' : 'block';
     ThreeD.toggleSky();
   }
 
diff --git a/modules/ui/provinces-editor.js b/modules/ui/provinces-editor.js
index 3cac626f..d217ad0e 100644
--- a/modules/ui/provinces-editor.js
+++ b/modules/ui/provinces-editor.js
@@ -1,14 +1,14 @@
-"use strict";
+'use strict';
 function editProvinces() {
   if (customization) return;
-  closeDialogs("#provincesEditor, .stable");
-  if (!layerIsOn("toggleProvinces")) toggleProvinces();
-  if (!layerIsOn("toggleBorders")) toggleBorders();
-  if (layerIsOn("toggleStates")) toggleStates();
-  if (layerIsOn("toggleCultures")) toggleCultures();
+  closeDialogs('#provincesEditor, .stable');
+  if (!layerIsOn('toggleProvinces')) toggleProvinces();
+  if (!layerIsOn('toggleBorders')) toggleBorders();
+  if (layerIsOn('toggleStates')) toggleStates();
+  if (layerIsOn('toggleCultures')) toggleCultures();
 
-  provs.selectAll("text").call(d3.drag().on("drag", dragLabel)).classed("draggable", true);
-  const body = document.getElementById("provincesBodySection");
+  provs.selectAll('text').call(d3.drag().on('drag', dragLabel)).classed('draggable', true);
+  const body = document.getElementById('provincesBodySection');
   refreshProvincesEditor();
 
   if (modules.editProvinces) return;
@@ -91,14 +91,14 @@ function editProvinces() {
       provinces[p].burgs.push(cells.burg[i]);
     }
 
-    provinces.forEach(p => {
+    provinces.forEach((p) => {
       if (!p.i || p.removed) return;
       if (!p.burg && p.burgs.length) p.burg = p.burgs[0];
     });
   }
 
   function updateFilter() {
-    const stateFilter = document.getElementById("provincesFilterState");
+    const stateFilter = document.getElementById('provincesFilterState');
     const selectedState = stateFilter.value || 1;
     stateFilter.options.length = 0; // remove all options
     stateFilter.options.add(new Option(`all`, -1, false, selectedState == -1));
@@ -175,10 +175,10 @@ function editProvinces() {
     provincesFooterArea.dataset.area = totalArea;
     provincesFooterPopulation.dataset.population = totalPopulation;
 
-    body.querySelectorAll("div.states").forEach(el => {
-      el.addEventListener("click", selectProvinceOnLineClick);
-      el.addEventListener("mouseenter", ev => provinceHighlightOn(ev));
-      el.addEventListener("mouseleave", ev => provinceHighlightOff(ev));
+    body.querySelectorAll('div.states').forEach((el) => {
+      el.addEventListener('click', selectProvinceOnLineClick);
+      el.addEventListener('mouseenter', (ev) => provinceHighlightOn(ev));
+      el.addEventListener('mouseleave', (ev) => provinceHighlightOff(ev));
     });
 
     if (body.dataset.type === "percentage") {
@@ -186,7 +186,7 @@ function editProvinces() {
       togglePercentageMode();
     }
     applySorting(provincesHeader);
-    $("#provincesEditor").dialog({width: fitContent()});
+    $('#provincesEditor').dialog({width: fitContent()});
   }
 
   function getCapitalOptions(burgs, capital) {
@@ -198,9 +198,9 @@ function editProvinces() {
   function provinceHighlightOn(event) {
     const province = +event.target.dataset.id;
     const el = body.querySelector(`div[data-id='${province}']`);
-    if (el) el.classList.add("active");
+    if (el) el.classList.add('active');
 
-    if (!layerIsOn("toggleProvinces")) return;
+    if (!layerIsOn('toggleProvinces')) return;
     if (customization) return;
     const animate = d3.transition().duration(2000).ease(d3.easeSinIn);
     provs
@@ -214,7 +214,7 @@ function editProvinces() {
   function provinceHighlightOff(event) {
     const province = +event.target.dataset.id;
     const el = body.querySelector(`div[data-id='${province}']`);
-    if (el) el.classList.remove("active");
+    if (el) el.classList.remove('active');
 
     if (!layerIsOn("toggleProvinces")) return;
     provs
@@ -370,7 +370,7 @@ function editProvinces() {
     const rural = rn(p.rural * populationRate);
     const urban = rn(p.urban * populationRate * urbanization);
     const total = rural + urban;
-    const l = n => Number(n).toLocaleString();
+    const l = (n) => Number(n).toLocaleString();
 
     alertMessage.innerHTML = /* html */ ` Rural: <input type="number" min="0" step="1" id="ruralPop" value=${rural} style="width:6em" /> Urban:
       <input type="number" min="0" step="1" id="urbanPop" value=${urban} style="width:6em" ${p.burgs.length ? "" : "disabled"} />
@@ -450,11 +450,11 @@ function editProvinces() {
 
           unfog("focusProvince" + p);
 
-          const coaId = "provinceCOA" + p;
-          if (document.getElementById(coaId)) document.getElementById(coaId).remove();
-          emblems.select(`#provinceEmblems > use[data-i='${p}']`).remove();
+      const coaId = 'provinceCOA' + p;
+      if (document.getElementById(coaId)) document.getElementById(coaId).remove();
+      emblems.select(`#provinceEmblems > use[data-i='${p}']`).remove();
 
-          pack.provinces[p] = {i: p, removed: true};
+      pack.provinces[p] = {i: p, removed: true};
 
           const g = provs.select("#provincesBody");
           g.select("#province" + p).remove();
@@ -497,41 +497,41 @@ function editProvinces() {
     modules.editProvinceName = true;
 
     // add listeners
-    document.getElementById("provinceNameEditorShortCulture").addEventListener("click", regenerateShortNameCuture);
-    document.getElementById("provinceNameEditorShortRandom").addEventListener("click", regenerateShortNameRandom);
-    document.getElementById("provinceNameEditorAddForm").addEventListener("click", addCustomForm);
-    document.getElementById("provinceNameEditorFullRegenerate").addEventListener("click", regenerateFullName);
+    document.getElementById('provinceNameEditorShortCulture').addEventListener('click', regenerateShortNameCuture);
+    document.getElementById('provinceNameEditorShortRandom').addEventListener('click', regenerateShortNameRandom);
+    document.getElementById('provinceNameEditorAddForm').addEventListener('click', addCustomForm);
+    document.getElementById('provinceNameEditorFullRegenerate').addEventListener('click', regenerateFullName);
 
     function regenerateShortNameCuture() {
       const province = +provinceNameEditor.dataset.province;
       const culture = pack.cells.culture[pack.provinces[province].center];
       const name = Names.getState(Names.getCultureShort(culture), culture);
-      document.getElementById("provinceNameEditorShort").value = name;
+      document.getElementById('provinceNameEditorShort').value = name;
     }
 
     function regenerateShortNameRandom() {
       const base = rand(nameBases.length - 1);
       const name = Names.getState(Names.getBase(base), undefined, base);
-      document.getElementById("provinceNameEditorShort").value = name;
+      document.getElementById('provinceNameEditorShort').value = name;
     }
 
     function addCustomForm() {
       const value = provinceNameEditorCustomForm.value;
-      const displayed = provinceNameEditorCustomForm.style.display === "inline-block";
-      provinceNameEditorCustomForm.style.display = displayed ? "none" : "inline-block";
-      provinceNameEditorSelectForm.style.display = displayed ? "inline-block" : "none";
+      const displayed = provinceNameEditorCustomForm.style.display === 'inline-block';
+      provinceNameEditorCustomForm.style.display = displayed ? 'none' : 'inline-block';
+      provinceNameEditorSelectForm.style.display = displayed ? 'inline-block' : 'none';
       if (displayed) applyOption(provinceNameEditorSelectForm, value);
     }
 
     function regenerateFullName() {
-      const short = document.getElementById("provinceNameEditorShort").value;
-      const form = document.getElementById("provinceNameEditorSelectForm").value;
-      document.getElementById("provinceNameEditorFull").value = getFullName();
+      const short = document.getElementById('provinceNameEditorShort').value;
+      const form = document.getElementById('provinceNameEditorSelectForm').value;
+      document.getElementById('provinceNameEditorFull').value = getFullName();
 
       function getFullName() {
         if (!form) return short;
-        if (!short && form) return "The " + form;
-        return short + " " + form;
+        if (!short && form) return 'The ' + form;
+        return short + ' ' + form;
       }
     }
 
@@ -551,8 +551,8 @@ function editProvinces() {
   }
 
   function togglePercentageMode() {
-    if (body.dataset.type === "absolute") {
-      body.dataset.type = "percentage";
+    if (body.dataset.type === 'absolute') {
+      body.dataset.type = 'percentage';
       const totalArea = +provincesFooterArea.dataset.area;
       const totalPopulation = +provincesFooterPopulation.dataset.population;
 
@@ -561,7 +561,7 @@ function editProvinces() {
         el.querySelector(".culturePopulation").innerHTML = rn((+el.dataset.population / totalPopulation) * 100) + "%";
       });
     } else {
-      body.dataset.type = "absolute";
+      body.dataset.type = 'absolute';
       provincesEditorAddLines();
     }
   }
@@ -628,7 +628,7 @@ function editProvinces() {
       .on("mouseleave", d => hideInfo(event, d));
 
     function showInfo(ev, d) {
-      d3.select(ev.target).select("rect").classed("selected", 1);
+      d3.select(ev.target).select('rect').classed('selected', 1);
       const name = d.data.fullName;
       const state = pack.states[d.data.state].fullName;
 
@@ -651,9 +651,9 @@ function editProvinces() {
 
     function hideInfo(ev) {
       provinceHighlightOff(ev);
-      if (!document.getElementById("provinceInfo")) return;
-      provinceInfo.innerHTML = "&#8205;";
-      d3.select(ev.target).select("rect").classed("selected", 0);
+      if (!document.getElementById('provinceInfo')) return;
+      provinceInfo.innerHTML = '&#8205;';
+      d3.select(ev.target).select('rect').classed('selected', 0);
     }
 
     node
@@ -677,7 +677,7 @@ function editProvinces() {
       node.select("text").each(function (d) {
         this.innerHTML = d.data.name;
         let b = this.getBBox();
-        if (b.y + b.height > d.y1 + 1) this.innerHTML = "";
+        if (b.y + b.height > d.y1 + 1) this.innerHTML = '';
 
         for (let i = 0; i < 15 && b.width > 0 && b.x + b.width > d.x1; i++) {
           if (this.innerHTML.length < 3) {
@@ -730,10 +730,10 @@ function editProvinces() {
   }
 
   function toggleLabels() {
-    const hidden = provs.select("#provinceLabels").style("display") === "none";
-    provs.select("#provinceLabels").style("display", `${hidden ? "block" : "none"}`);
-    provs.attr("data-labels", +hidden);
-    provs.selectAll("text").call(d3.drag().on("drag", dragLabel)).classed("draggable", true);
+    const hidden = provs.select('#provinceLabels').style('display') === 'none';
+    provs.select('#provinceLabels').style('display', `${hidden ? 'block' : 'none'}`);
+    provs.attr('data-labels', +hidden);
+    provs.selectAll('text').call(d3.drag().on('drag', dragLabel)).classed('draggable', true);
   }
 
   function triggerProvincesRelease() {
@@ -765,8 +765,8 @@ function editProvinces() {
   }
 
   function enterProvincesManualAssignent() {
-    if (!layerIsOn("toggleProvinces")) toggleProvinces();
-    if (!layerIsOn("toggleBorders")) toggleBorders();
+    if (!layerIsOn('toggleProvinces')) toggleProvinces();
+    if (!layerIsOn('toggleBorders')) toggleBorders();
 
     // make province and state borders more visible
     provinceBorders.select("path").attr("stroke", "#000").attr("stroke-width", 0.5);
@@ -788,15 +788,15 @@ function editProvinces() {
     tip("Click on a province to select, drag the circle to change province", true);
     viewbox.style("cursor", "crosshair").on("click", selectProvinceOnMapClick).call(d3.drag().on("start", dragBrush)).on("touchmove mousemove", moveBrush);
 
-    body.querySelector("div").classList.add("selected");
-    selectProvince(+body.querySelector("div").dataset.id);
+    body.querySelector('div').classList.add('selected');
+    selectProvince(+body.querySelector('div').dataset.id);
   }
 
   function selectProvinceOnLineClick() {
     if (customization !== 11) return;
-    if (this.parentNode.id !== "provincesBodySection") return;
-    body.querySelector("div.selected").classList.remove("selected");
-    this.classList.add("selected");
+    if (this.parentNode.id !== 'provincesBodySection') return;
+    body.querySelector('div.selected').classList.remove('selected');
+    this.classList.add('selected');
     selectProvince(+this.dataset.id);
   }
 
@@ -814,8 +814,8 @@ function editProvinces() {
       return;
     }
 
-    body.querySelector("div.selected").classList.remove("selected");
-    editorLine.classList.add("selected");
+    body.querySelector('div.selected').classList.remove('selected');
+    editorLine.classList.add('selected');
     selectProvince(province);
   }
 
@@ -828,7 +828,7 @@ function editProvinces() {
   function dragBrush() {
     const r = +provincesManuallyBrush.value;
 
-    d3.event.on("drag", () => {
+    d3.event.on('drag', () => {
       if (!d3.event.dx && !d3.event.dy) return;
       const p = d3.mouse(this);
       moveCircle(p[0], p[1], r);
@@ -847,9 +847,9 @@ function editProvinces() {
 
     const provinceNew = +selected.dataset.id;
     const state = pack.provinces[provinceNew].state;
-    const fill = pack.provinces[provinceNew].color || "#ffffff";
+    const fill = pack.provinces[provinceNew].color || '#ffffff';
 
-    selection.forEach(i => {
+    selection.forEach((i) => {
       if (!pack.cells.state[i] || pack.cells.state[i] !== state) return;
       const exists = temp.select("polygon[data-cell='" + i + "']");
       const provinceOld = exists.size() ? +exists.attr("data-province") : pack.cells.province[i];
@@ -864,7 +864,7 @@ function editProvinces() {
       // change of append new element
       if (exists.size()) {
         if (pack.cells.province[i] === provinceNew) exists.remove();
-        else exists.attr("data-province", provinceNew).attr("fill", fill);
+        else exists.attr('data-province', provinceNew).attr('fill', fill);
       } else {
         temp
           .append("polygon")
@@ -903,14 +903,14 @@ function editProvinces() {
 
   function exitProvincesManualAssignment(close) {
     customization = 0;
-    provs.select("#temp").remove();
-    provs.select("#centers").remove();
+    provs.select('#temp').remove();
+    provs.select('#centers').remove();
     removeCircle();
 
     // restore borders style
-    provinceBorders.select("path").attr("stroke", null).attr("stroke-width", null);
-    stateBorders.select("path").attr("stroke", null).attr("stroke-width", null);
-    debug.selectAll("path.selected").remove();
+    provinceBorders.select('path').attr('stroke', null).attr('stroke-width', null);
+    stateBorders.select('path').attr('stroke', null).attr('stroke-width', null);
+    debug.selectAll('path.selected').remove();
 
     document.querySelectorAll("#provincesBottom > *").forEach(el => (el.style.display = "inline-block"));
     document.getElementById("provincesManuallyButtons").style.display = "none";
@@ -923,8 +923,8 @@ function editProvinces() {
 
     restoreDefaultEvents();
     clearMainTip();
-    const selected = body.querySelector("div.selected");
-    if (selected) selected.classList.remove("selected");
+    const selected = body.querySelector('div.selected');
+    if (selected) selected.classList.remove('selected');
   }
 
   function enterAddProvinceMode() {
@@ -969,14 +969,14 @@ function editProvinces() {
     const type = BurgsAndStates.getType(center, parent.port);
     const coa = COA.generate(parent, kinship, P(0.1), type);
     coa.shield = COA.getShield(c, state);
-    COArenderer.add("province", province, coa, point[0], point[1]);
+    COArenderer.add('province', province, coa, point[0], point[1]);
 
     provinces.push({i: province, state, center, burg, name, formName, fullName, color, coa});
 
     cells.province[center] = province;
-    cells.c[center].forEach(c => {
+    cells.c[center].forEach((c) => {
       if (cells.h[c] < 20 || cells.state[c] !== state) return;
-      if (provinces.find(p => !p.removed && p.center === c)) return;
+      if (provinces.find((p) => !p.removed && p.center === c)) return;
       cells.province[c] = province;
     });
 
@@ -985,7 +985,7 @@ function editProvinces() {
     if (!layerIsOn("toggleProvinces")) toggleProvinces();
     else drawProvinces();
     collectStatistics();
-    document.getElementById("provincesFilterState").value = state;
+    document.getElementById('provincesFilterState').value = state;
     provincesEditorAddLines();
   }
 
@@ -998,9 +998,9 @@ function editProvinces() {
   }
 
   function recolorProvinces() {
-    const state = +document.getElementById("provincesFilterState").value;
+    const state = +document.getElementById('provincesFilterState').value;
 
-    pack.provinces.forEach(p => {
+    pack.provinces.forEach((p) => {
       if (!p || p.removed) return;
       if (state !== -1 && p.state !== state) return;
       const stateColor = pack.states[p.state].color;
@@ -1032,7 +1032,7 @@ function editProvinces() {
       data += `${Math.round(provincePack.urban * populationRate * urbanization)}\n`;
     });
 
-    const name = getFileName("Provinces") + ".csv";
+    const name = getFileName('Provinces') + '.csv';
     downloadFile(data, name);
   }
 
@@ -1045,9 +1045,10 @@ function editProvinces() {
         Remove: function () {
           $(this).dialog("close");
 
-          // remove emblems
-          document.querySelectorAll("[id^='provinceCOA']").forEach(el => el.remove());
-          emblems.select("#provinceEmblems").selectAll("*").remove();
+      // remove data
+      pack.provinces = [0];
+      pack.cells.province = new Uint16Array(pack.cells.i.length);
+      pack.states.forEach((s) => (s.provinces = []));
 
           // remove data
           pack.provinces = [0];
@@ -1081,8 +1082,8 @@ function editProvinces() {
   }
 
   function closeProvincesEditor() {
-    provs.selectAll("text").call(d3.drag().on("drag", null)).attr("class", null);
-    if (customization === 11) exitProvincesManualAssignment("close");
+    provs.selectAll('text').call(d3.drag().on('drag', null)).attr('class', null);
+    if (customization === 11) exitProvincesManualAssignment('close');
     if (customization === 12) exitAddProvinceMode();
   }
 }
diff --git a/modules/ui/regiment-editor.js b/modules/ui/regiment-editor.js
index 359cca91..50c40b50 100644
--- a/modules/ui/regiment-editor.js
+++ b/modules/ui/regiment-editor.js
@@ -1,11 +1,11 @@
-"use strict";
+'use strict';
 function editRegiment(selector) {
   if (customization) return;
-  closeDialogs(".stable");
-  if (!layerIsOn("toggleMilitary")) toggleMilitary();
+  closeDialogs('.stable');
+  if (!layerIsOn('toggleMilitary')) toggleMilitary();
 
-  armies.selectAll(":scope > g").classed("draggable", true);
-  armies.selectAll(":scope > g > g").call(d3.drag().on("drag", dragRegiment));
+  armies.selectAll(':scope > g').classed('draggable', true);
+  armies.selectAll(':scope > g > g').call(d3.drag().on('drag', dragRegiment));
   elSelected = selector ? document.querySelector(selector) : d3.event.target.parentElement; // select g element
   if (!pack.states[elSelected.dataset.state]) return;
   if (!regiment()) return;
@@ -23,22 +23,22 @@ function editRegiment(selector) {
   modules.editRegiment = true;
 
   // add listeners
-  document.getElementById("regimentNameRestore").addEventListener("click", restoreName);
-  document.getElementById("regimentType").addEventListener("click", changeType);
-  document.getElementById("regimentName").addEventListener("change", changeName);
-  document.getElementById("regimentEmblem").addEventListener("input", changeEmblem);
-  document.getElementById("regimentEmblemSelect").addEventListener("click", selectEmblem);
-  document.getElementById("regimentAttack").addEventListener("click", toggleAttack);
-  document.getElementById("regimentRegenerateLegend").addEventListener("click", regenerateLegend);
-  document.getElementById("regimentLegend").addEventListener("click", editLegend);
-  document.getElementById("regimentSplit").addEventListener("click", splitRegiment);
-  document.getElementById("regimentAdd").addEventListener("click", toggleAdd);
-  document.getElementById("regimentAttach").addEventListener("click", toggleAttach);
-  document.getElementById("regimentRemove").addEventListener("click", removeRegiment);
+  document.getElementById('regimentNameRestore').addEventListener('click', restoreName);
+  document.getElementById('regimentType').addEventListener('click', changeType);
+  document.getElementById('regimentName').addEventListener('change', changeName);
+  document.getElementById('regimentEmblem').addEventListener('input', changeEmblem);
+  document.getElementById('regimentEmblemSelect').addEventListener('click', selectEmblem);
+  document.getElementById('regimentAttack').addEventListener('click', toggleAttack);
+  document.getElementById('regimentRegenerateLegend').addEventListener('click', regenerateLegend);
+  document.getElementById('regimentLegend').addEventListener('click', editLegend);
+  document.getElementById('regimentSplit').addEventListener('click', splitRegiment);
+  document.getElementById('regimentAdd').addEventListener('click', toggleAdd);
+  document.getElementById('regimentAttach').addEventListener('click', toggleAttach);
+  document.getElementById('regimentRemove').addEventListener('click', removeRegiment);
 
   // get regiment data element
   function regiment() {
-    return pack.states[elSelected.dataset.state].military.find(r => r.i == elSelected.dataset.id);
+    return pack.states[elSelected.dataset.state].military.find((r) => r.i == elSelected.dataset.id);
   }
 
   function updateRegimentData(regiment) {
@@ -56,7 +56,7 @@ function editRegiment(selector) {
       })
       .join("");
 
-    composition.querySelectorAll("input").forEach(el => el.addEventListener("change", changeUnit));
+    composition.querySelectorAll('input').forEach((el) => el.addEventListener('change', changeUnit));
   }
 
   function drawBase() {
@@ -117,7 +117,7 @@ function editRegiment(selector) {
     const reg = regiment(),
       regs = pack.states[elSelected.dataset.state].military;
     const name = Military.getName(reg, regs);
-    elSelected.dataset.name = reg.name = document.getElementById("regimentName").value = name;
+    elSelected.dataset.name = reg.name = document.getElementById('regimentName').value = name;
   }
 
   function selectEmblem() {
@@ -128,8 +128,8 @@ function editRegiment(selector) {
   }
 
   function changeEmblem() {
-    const emblem = document.getElementById("regimentEmblem").value;
-    regiment().icon = elSelected.querySelector(".regimentIcon").innerHTML = emblem;
+    const emblem = document.getElementById('regimentEmblem').value;
+    regiment().icon = elSelected.querySelector('.regimentIcon').innerHTML = emblem;
   }
 
   function changeUnit() {
@@ -137,7 +137,7 @@ function editRegiment(selector) {
     const reg = regiment();
     reg.u[u] = +this.value || 0;
     reg.a = d3.sum(Object.values(reg.u));
-    elSelected.querySelector("text").innerHTML = Military.getTotal(reg);
+    elSelected.querySelector('text').innerHTML = Military.getTotal(reg);
     if (militaryOverviewRefresh.offsetParent) militaryOverviewRefresh.click();
     if (regimentsOverviewRefresh.offsetParent) regimentsOverviewRefresh.click();
   }
@@ -193,13 +193,13 @@ function editRegiment(selector) {
   }
 
   function toggleAdd() {
-    document.getElementById("regimentAdd").classList.toggle("pressed");
-    if (document.getElementById("regimentAdd").classList.contains("pressed")) {
-      viewbox.style("cursor", "crosshair").on("click", addRegimentOnClick);
-      tip("Click on map to create new regiment or fleet", true);
+    document.getElementById('regimentAdd').classList.toggle('pressed');
+    if (document.getElementById('regimentAdd').classList.contains('pressed')) {
+      viewbox.style('cursor', 'crosshair').on('click', addRegimentOnClick);
+      tip('Click on map to create new regiment or fleet', true);
     } else {
       clearMainTip();
-      viewbox.on("click", clicked).style("cursor", "default");
+      viewbox.on('click', clicked).style('cursor', 'default');
     }
   }
 
@@ -222,15 +222,15 @@ function editRegiment(selector) {
   }
 
   function toggleAttack() {
-    document.getElementById("regimentAttack").classList.toggle("pressed");
-    if (document.getElementById("regimentAttack").classList.contains("pressed")) {
-      viewbox.style("cursor", "crosshair").on("click", attackRegimentOnClick);
-      tip("Click on another regiment to initiate battle", true);
-      armies.selectAll(":scope > g").classed("draggable", false);
+    document.getElementById('regimentAttack').classList.toggle('pressed');
+    if (document.getElementById('regimentAttack').classList.contains('pressed')) {
+      viewbox.style('cursor', 'crosshair').on('click', attackRegimentOnClick);
+      tip('Click on another regiment to initiate battle', true);
+      armies.selectAll(':scope > g').classed('draggable', false);
     } else {
       clearMainTip();
-      armies.selectAll(":scope > g").classed("draggable", true);
-      viewbox.on("click", clicked).style("cursor", "default");
+      armies.selectAll(':scope > g').classed('draggable', true);
+      viewbox.on('click', clicked).style('cursor', 'default');
     }
   }
 
@@ -290,19 +290,19 @@ function editRegiment(selector) {
       .remove();
 
     clearMainTip();
-    $("#regimentEditor").dialog("close");
+    $('#regimentEditor').dialog('close');
   }
 
   function toggleAttach() {
-    document.getElementById("regimentAttach").classList.toggle("pressed");
-    if (document.getElementById("regimentAttach").classList.contains("pressed")) {
-      viewbox.style("cursor", "crosshair").on("click", attachRegimentOnClick);
-      tip("Click on another regiment to unite both regiments. The current regiment will be removed", true);
-      armies.selectAll(":scope > g").classed("draggable", false);
+    document.getElementById('regimentAttach').classList.toggle('pressed');
+    if (document.getElementById('regimentAttach').classList.contains('pressed')) {
+      viewbox.style('cursor', 'crosshair').on('click', attachRegimentOnClick);
+      tip('Click on another regiment to unite both regiments. The current regiment will be removed', true);
+      armies.selectAll(':scope > g').classed('draggable', false);
     } else {
       clearMainTip();
-      armies.selectAll(":scope > g").classed("draggable", true);
-      viewbox.on("click", clicked).style("cursor", "default");
+      armies.selectAll(':scope > g').classed('draggable', true);
+      viewbox.on('click', clicked).style('cursor', 'default');
     }
   }
 
@@ -323,19 +323,19 @@ function editRegiment(selector) {
     }
 
     const reg = regiment(); // reg to be attached
-    const sel = pack.states[newState].military.find(r => r.i == regSelected.dataset.id); // reg to attach to
+    const sel = pack.states[newState].military.find((r) => r.i == regSelected.dataset.id); // reg to attach to
 
     for (const unit of options.military) {
       const u = unit.name;
       if (reg.u[u]) sel.u[u] ? (sel.u[u] += reg.u[u]) : (sel.u[u] = reg.u[u]);
     }
     sel.a = d3.sum(Object.values(sel.u)); // reg total
-    regSelected.querySelector("text").innerHTML = Military.getTotal(sel); // update selected reg total text
+    regSelected.querySelector('text').innerHTML = Military.getTotal(sel); // update selected reg total text
 
     // remove attached regiment
     const military = pack.states[oldState].military;
     military.splice(military.indexOf(reg), 1);
-    const index = notes.findIndex(n => n.id === elSelected.id);
+    const index = notes.findIndex((n) => n.id === elSelected.id);
     if (index != -1) notes.splice(index, 1);
     elSelected.remove();
 
@@ -345,7 +345,7 @@ function editRegiment(selector) {
   }
 
   function regenerateLegend() {
-    const index = notes.findIndex(n => n.id === elSelected.id);
+    const index = notes.findIndex((n) => n.id === elSelected.id);
     if (index != -1) notes.splice(index, 1);
 
     const s = pack.states[elSelected.dataset.state];
@@ -369,9 +369,9 @@ function editRegiment(selector) {
           if (regIndex === -1) return;
           military.splice(regIndex, 1);
 
-          const index = notes.findIndex(n => n.id === elSelected.id);
-          if (index != -1) notes.splice(index, 1);
-          elSelected.remove();
+      const index = notes.findIndex((n) => n.id === elSelected.id);
+      if (index != -1) notes.splice(index, 1);
+      elSelected.remove();
 
           if (militaryOverviewRefresh.offsetParent) militaryOverviewRefresh.click();
           if (regimentsOverviewRefresh.offsetParent) regimentsOverviewRefresh.click();
@@ -388,20 +388,20 @@ function editRegiment(selector) {
     d3.select(this).raise();
     d3.select(this.parentNode).raise();
 
-    const reg = pack.states[this.dataset.state].military.find(r => r.i == this.dataset.id);
-    const size = +armies.attr("box-size");
+    const reg = pack.states[this.dataset.state].military.find((r) => r.i == this.dataset.id);
+    const size = +armies.attr('box-size');
     const w = reg.n ? size * 4 : size * 6;
     const h = size * 2;
-    const x1 = x => rn(x - w / 2, 2);
-    const y1 = y => rn(y - size, 2);
+    const x1 = (x) => rn(x - w / 2, 2);
+    const y1 = (y) => rn(y - size, 2);
 
-    const baseRect = this.querySelector("rect");
-    const text = this.querySelector("text");
-    const iconRect = this.querySelectorAll("rect")[1];
-    const icon = this.querySelector(".regimentIcon");
+    const baseRect = this.querySelector('rect');
+    const text = this.querySelector('text');
+    const iconRect = this.querySelectorAll('rect')[1];
+    const icon = this.querySelector('.regimentIcon');
 
     const self = elSelected === this;
-    const baseLine = viewbox.select("g#regimentBase > line");
+    const baseLine = viewbox.select('g#regimentBase > line');
 
     d3.event.on("drag", function () {
       const x = (reg.x = d3.event.x),
@@ -420,7 +420,7 @@ function editRegiment(selector) {
   }
 
   function dragBase() {
-    const baseLine = viewbox.select("g#regimentBase > line");
+    const baseLine = viewbox.select('g#regimentBase > line');
     const reg = regiment();
 
     d3.event.on("drag", function () {
@@ -436,12 +436,12 @@ function editRegiment(selector) {
   }
 
   function closeEditor() {
-    armies.selectAll(":scope > g").classed("draggable", false);
-    armies.selectAll("g>g").call(d3.drag().on("drag", null));
-    viewbox.selectAll("g#regimentBase").remove();
-    document.getElementById("regimentAdd").classList.remove("pressed");
-    document.getElementById("regimentAttack").classList.remove("pressed");
-    document.getElementById("regimentAttach").classList.remove("pressed");
+    armies.selectAll(':scope > g').classed('draggable', false);
+    armies.selectAll('g>g').call(d3.drag().on('drag', null));
+    viewbox.selectAll('g#regimentBase').remove();
+    document.getElementById('regimentAdd').classList.remove('pressed');
+    document.getElementById('regimentAttack').classList.remove('pressed');
+    document.getElementById('regimentAttach').classList.remove('pressed');
     restoreDefaultEvents();
     elSelected = null;
   }
diff --git a/modules/ui/relief-editor.js b/modules/ui/relief-editor.js
index abb800cd..b7c7397e 100644
--- a/modules/ui/relief-editor.js
+++ b/modules/ui/relief-editor.js
@@ -1,10 +1,10 @@
-"use strict";
+'use strict';
 function editReliefIcon() {
   if (customization) return;
-  closeDialogs(".stable");
-  if (!layerIsOn("toggleRelief")) toggleRelief();
+  closeDialogs('.stable');
+  if (!layerIsOn('toggleRelief')) toggleRelief();
 
-  terrain.selectAll("use").call(d3.drag().on("drag", dragReliefIcon)).classed("draggable", true);
+  terrain.selectAll('use').call(d3.drag().on('drag', dragReliefIcon)).classed('draggable', true);
   elSelected = d3.select(d3.event.target);
 
   restoreEditMode();
@@ -23,24 +23,24 @@ function editReliefIcon() {
   modules.editReliefIcon = true;
 
   // add listeners
-  document.getElementById("reliefIndividual").addEventListener("click", enterIndividualMode);
-  document.getElementById("reliefBulkAdd").addEventListener("click", enterBulkAddMode);
-  document.getElementById("reliefBulkRemove").addEventListener("click", enterBulkRemoveMode);
+  document.getElementById('reliefIndividual').addEventListener('click', enterIndividualMode);
+  document.getElementById('reliefBulkAdd').addEventListener('click', enterBulkAddMode);
+  document.getElementById('reliefBulkRemove').addEventListener('click', enterBulkRemoveMode);
 
-  document.getElementById("reliefSize").addEventListener("input", changeIconSize);
-  document.getElementById("reliefSizeNumber").addEventListener("input", changeIconSize);
-  document.getElementById("reliefEditorSet").addEventListener("change", changeIconsSet);
-  reliefIconsDiv.querySelectorAll("svg").forEach(el => el.addEventListener("click", changeIcon));
+  document.getElementById('reliefSize').addEventListener('input', changeIconSize);
+  document.getElementById('reliefSizeNumber').addEventListener('input', changeIconSize);
+  document.getElementById('reliefEditorSet').addEventListener('change', changeIconsSet);
+  reliefIconsDiv.querySelectorAll('svg').forEach((el) => el.addEventListener('click', changeIcon));
 
-  document.getElementById("reliefEditStyle").addEventListener("click", () => editStyle("terrain"));
-  document.getElementById("reliefCopy").addEventListener("click", copyIcon);
-  document.getElementById("reliefMoveFront").addEventListener("click", () => elSelected.raise());
-  document.getElementById("reliefMoveBack").addEventListener("click", () => elSelected.lower());
-  document.getElementById("reliefRemove").addEventListener("click", removeIcon);
+  document.getElementById('reliefEditStyle').addEventListener('click', () => editStyle('terrain'));
+  document.getElementById('reliefCopy').addEventListener('click', copyIcon);
+  document.getElementById('reliefMoveFront').addEventListener('click', () => elSelected.raise());
+  document.getElementById('reliefMoveBack').addEventListener('click', () => elSelected.lower());
+  document.getElementById('reliefRemove').addEventListener('click', removeIcon);
 
   function dragReliefIcon() {
-    const dx = +this.getAttribute("x") - d3.event.x;
-    const dy = +this.getAttribute("y") - d3.event.y;
+    const dx = +this.getAttribute('x') - d3.event.x;
+    const dy = +this.getAttribute('y') - d3.event.y;
 
     d3.event.on("drag", function () {
       const x = d3.event.x,
@@ -68,18 +68,18 @@ function editReliefIcon() {
   }
 
   function updateReliefSizeInput() {
-    const size = +elSelected.attr("width");
+    const size = +elSelected.attr('width');
     reliefSize.value = reliefSizeNumber.value = rn(size);
   }
 
   function enterIndividualMode() {
-    reliefTools.querySelectorAll("button.pressed").forEach(b => b.classList.remove("pressed"));
-    reliefIndividual.classList.add("pressed");
+    reliefTools.querySelectorAll('button.pressed').forEach((b) => b.classList.remove('pressed'));
+    reliefIndividual.classList.add('pressed');
 
-    reliefSizeDiv.style.display = "block";
-    reliefRadiusDiv.style.display = "none";
-    reliefSpacingDiv.style.display = "none";
-    reliefIconsSeletionAny.style.display = "none";
+    reliefSizeDiv.style.display = 'block';
+    reliefRadiusDiv.style.display = 'none';
+    reliefSpacingDiv.style.display = 'none';
+    reliefIconsSeletionAny.style.display = 'none';
 
     removeCircle();
     updateReliefSizeInput();
@@ -88,13 +88,13 @@ function editReliefIcon() {
   }
 
   function enterBulkAddMode() {
-    reliefTools.querySelectorAll("button.pressed").forEach(b => b.classList.remove("pressed"));
-    reliefBulkAdd.classList.add("pressed");
+    reliefTools.querySelectorAll('button.pressed').forEach((b) => b.classList.remove('pressed'));
+    reliefBulkAdd.classList.add('pressed');
 
-    reliefSizeDiv.style.display = "block";
-    reliefRadiusDiv.style.display = "block";
-    reliefSpacingDiv.style.display = "block";
-    reliefIconsSeletionAny.style.display = "none";
+    reliefSizeDiv.style.display = 'block';
+    reliefRadiusDiv.style.display = 'block';
+    reliefSpacingDiv.style.display = 'block';
+    reliefIconsSeletionAny.style.display = 'none';
 
     const pressedType = reliefIconsDiv.querySelector("svg.pressed");
     if (pressedType.id === "reliefIconsSeletionAny") {
@@ -103,8 +103,8 @@ function editReliefIcon() {
       reliefIconsDiv.querySelector("svg").classList.add("pressed");
     }
 
-    viewbox.style("cursor", "crosshair").call(d3.drag().on("start", dragToAdd)).on("touchmove mousemove", moveBrush);
-    tip("Drag to place relief icons within radius", true);
+    viewbox.style('cursor', 'crosshair').call(d3.drag().on('start', dragToAdd)).on('touchmove mousemove', moveBrush);
+    tip('Drag to place relief icons within radius', true);
   }
 
   function moveBrush() {
@@ -172,13 +172,13 @@ function editReliefIcon() {
   }
 
   function enterBulkRemoveMode() {
-    reliefTools.querySelectorAll("button.pressed").forEach(b => b.classList.remove("pressed"));
-    reliefBulkRemove.classList.add("pressed");
+    reliefTools.querySelectorAll('button.pressed').forEach((b) => b.classList.remove('pressed'));
+    reliefBulkRemove.classList.add('pressed');
 
-    reliefSizeDiv.style.display = "none";
-    reliefRadiusDiv.style.display = "block";
-    reliefSpacingDiv.style.display = "none";
-    reliefIconsSeletionAny.style.display = "inline-block";
+    reliefSizeDiv.style.display = 'none';
+    reliefRadiusDiv.style.display = 'block';
+    reliefSpacingDiv.style.display = 'none';
+    reliefIconsSeletionAny.style.display = 'inline-block';
 
     viewbox.style("cursor", "crosshair").call(d3.drag().on("start", dragToRemove)).on("touchmove mousemove", moveBrush);
     tip("Drag to remove relief icons in radius", true);
@@ -201,13 +201,13 @@ function editReliefIcon() {
     d3.event.on("drag", function () {
       const p = d3.mouse(this);
       moveCircle(p[0], p[1], r);
-      tree.findAll(p[0], p[1], r).forEach(f => f[2].remove());
+      tree.findAll(p[0], p[1], r).forEach((f) => f[2].remove());
     });
   }
 
   function changeIconSize() {
     const size = +reliefSizeNumber.value;
-    if (!reliefIndividual.classList.contains("pressed")) return;
+    if (!reliefIndividual.classList.contains('pressed')) return;
 
     const shift = (size - +elSelected.attr("width")) / 2;
     elSelected.attr("width", size).attr("height", size);
@@ -223,14 +223,14 @@ function editReliefIcon() {
   }
 
   function changeIcon() {
-    if (this.classList.contains("pressed")) return;
+    if (this.classList.contains('pressed')) return;
 
     reliefIconsDiv.querySelectorAll("svg.pressed").forEach(b => b.classList.remove("pressed"));
     this.classList.add("pressed");
 
-    if (reliefIndividual.classList.contains("pressed")) {
+    if (reliefIndividual.classList.contains('pressed')) {
       const type = this.dataset.type;
-      elSelected.attr("href", type);
+      elSelected.attr('href', type);
     }
   }
 
@@ -245,8 +245,8 @@ function editReliefIcon() {
       y -= 3;
     }
 
-    copy.setAttribute("x", x);
-    copy.setAttribute("y", y);
+    copy.setAttribute('x', x);
+    copy.setAttribute('y', y);
     parent.insertBefore(copy, null);
   }
 
@@ -280,7 +280,7 @@ function editReliefIcon() {
   }
 
   function closeReliefEditor() {
-    terrain.selectAll("use").call(d3.drag().on("drag", null)).classed("draggable", false);
+    terrain.selectAll('use').call(d3.drag().on('drag', null)).classed('draggable', false);
     removeCircle();
     unselect();
     clearMainTip();
diff --git a/modules/ui/resources-editor.js b/modules/ui/resources-editor.js
index 96cf2285..4c6c6006 100644
--- a/modules/ui/resources-editor.js
+++ b/modules/ui/resources-editor.js
@@ -696,8 +696,7 @@ function editResources() {
 
   function regenerateCurrentResources() {
     const message = 'Are you sure you want to regenerate resources? <br>This action cannot be reverted';
-    const onConfirm = () => regenerateResources();
-    confirmationDialog({title: 'Regenerate resources', message, confirm: 'Regenerate', onConfirm});
+    confirmationDialog({title: 'Regenerate resources', message, confirm: 'Regenerate', onConfirm: regenerateResources});
   }
 
   function resourcesRestoreDefaults() {
diff --git a/modules/ui/rivers-editor.js b/modules/ui/rivers-editor.js
index 7a24cfe5..c94d8492 100644
--- a/modules/ui/rivers-editor.js
+++ b/modules/ui/rivers-editor.js
@@ -1,4 +1,4 @@
-"use strict";
+'use strict';
 function editRiver(id) {
   if (customization) return;
   if (elSelected && id === elSelected.attr("id")) return;
@@ -47,18 +47,18 @@ function editRiver(id) {
   document.getElementById("riverWidthFactor").addEventListener("input", changeWidthFactor);
 
   function getRiver() {
-    const riverId = +elSelected.attr("id").slice(5);
-    const river = pack.rivers.find(r => r.i === riverId);
+    const riverId = +elSelected.attr('id').slice(5);
+    const river = pack.rivers.find((r) => r.i === riverId);
     return river;
   }
 
   function updateRiverData() {
     const r = getRiver();
 
-    document.getElementById("riverName").value = r.name;
-    document.getElementById("riverType").value = r.type;
+    document.getElementById('riverName').value = r.name;
+    document.getElementById('riverType').value = r.type;
 
-    const parentSelect = document.getElementById("riverMainstem");
+    const parentSelect = document.getElementById('riverMainstem');
     parentSelect.options.length = 0;
     const parent = r.parent || r.i;
     const sortedRivers = pack.rivers.slice().sort((a, b) => (a.name > b.name ? 1 : -1));
@@ -66,7 +66,7 @@ function editRiver(id) {
       const opt = new Option(river.name, river.i, false, river.i === parent);
       parentSelect.options.add(opt);
     });
-    document.getElementById("riverBasin").value = pack.rivers.find(river => river.i === r.basin).name;
+    document.getElementById('riverBasin').value = pack.rivers.find((river) => river.i === r.basin).name;
 
     document.getElementById("riverDischarge").value = r.discharge + " m³/s";
     document.getElementById("riverSourceWidth").value = r.sourceWidth;
@@ -208,8 +208,8 @@ function editRiver(id) {
   function changeParent() {
     const r = getRiver();
     r.parent = +this.value;
-    r.basin = pack.rivers.find(river => river.i === r.parent).basin;
-    document.getElementById("riverBasin").value = pack.rivers.find(river => river.i === r.basin).name;
+    r.basin = pack.rivers.find((river) => river.i === r.parent).basin;
+    document.getElementById('riverBasin').value = pack.rivers.find((river) => river.i === r.basin).name;
   }
 
   function changeSourceWidth() {
@@ -232,9 +232,9 @@ function editRiver(id) {
   }
 
   function editRiverLegend() {
-    const id = elSelected.attr("id");
+    const id = elSelected.attr('id');
     const river = getRiver();
-    editNotes(id, river.name + " " + river.type);
+    editNotes(id, river.name + ' ' + river.type);
   }
 
   function removeRiver() {
diff --git a/modules/ui/rivers-overview.js b/modules/ui/rivers-overview.js
index e9045fd5..f5166c9c 100644
--- a/modules/ui/rivers-overview.js
+++ b/modules/ui/rivers-overview.js
@@ -1,12 +1,12 @@
-"use strict";
+'use strict';
 function overviewRivers() {
   if (customization) return;
-  closeDialogs("#riversOverview, .stable");
-  if (!layerIsOn("toggleRivers")) toggleRivers();
+  closeDialogs('#riversOverview, .stable');
+  if (!layerIsOn('toggleRivers')) toggleRivers();
 
-  const body = document.getElementById("riversBody");
+  const body = document.getElementById('riversBody');
   riversOverviewAddLines();
-  $("#riversOverview").dialog();
+  $('#riversOverview').dialog();
 
   if (modules.overviewRivers) return;
   modules.overviewRivers = true;
@@ -28,15 +28,15 @@ function overviewRivers() {
 
   // add line for each river
   function riversOverviewAddLines() {
-    body.innerHTML = "";
-    let lines = "";
+    body.innerHTML = '';
+    let lines = '';
     const unit = distanceUnitInput.value;
 
     for (const r of pack.rivers) {
-      const discharge = r.discharge + " m³/s";
-      const length = rn(r.length * distanceScaleInput.value) + " " + unit;
-      const width = rn(r.width * distanceScaleInput.value, 3) + " " + unit;
-      const basin = pack.rivers.find(river => river.i === r.basin)?.name;
+      const discharge = r.discharge + ' m³/s';
+      const length = rn(r.length * distanceScaleInput.value) + ' ' + unit;
+      const width = rn(r.width * distanceScaleInput.value, 3) + ' ' + unit;
+      const basin = pack.rivers.find((river) => river.i === r.basin)?.name;
 
       lines += /* html */ `<div
         class="states"
@@ -59,7 +59,7 @@ function overviewRivers() {
         <span data-tip="Remove river" class="icon-trash-empty"></span>
       </div>`;
     }
-    body.insertAdjacentHTML("beforeend", lines);
+    body.insertAdjacentHTML('beforeend', lines);
 
     // update footer
     riversFooterNumber.innerHTML = pack.rivers.length;
@@ -71,17 +71,17 @@ function overviewRivers() {
     riversFooterWidth.innerHTML = rn(averageWidth * distanceScaleInput.value, 3) + " " + unit;
 
     // add listeners
-    body.querySelectorAll("div.states").forEach(el => el.addEventListener("mouseenter", ev => riverHighlightOn(ev)));
-    body.querySelectorAll("div.states").forEach(el => el.addEventListener("mouseleave", ev => riverHighlightOff(ev)));
-    body.querySelectorAll("div > span.icon-dot-circled").forEach(el => el.addEventListener("click", zoomToRiver));
-    body.querySelectorAll("div > span.icon-pencil").forEach(el => el.addEventListener("click", openRiverEditor));
-    body.querySelectorAll("div > span.icon-trash-empty").forEach(el => el.addEventListener("click", triggerRiverRemove));
+    body.querySelectorAll('div.states').forEach((el) => el.addEventListener('mouseenter', (ev) => riverHighlightOn(ev)));
+    body.querySelectorAll('div.states').forEach((el) => el.addEventListener('mouseleave', (ev) => riverHighlightOff(ev)));
+    body.querySelectorAll('div > span.icon-dot-circled').forEach((el) => el.addEventListener('click', zoomToRiver));
+    body.querySelectorAll('div > span.icon-pencil').forEach((el) => el.addEventListener('click', openRiverEditor));
+    body.querySelectorAll('div > span.icon-trash-empty').forEach((el) => el.addEventListener('click', triggerRiverRemove));
 
     applySorting(riversHeader);
   }
 
   function riverHighlightOn(event) {
-    if (!layerIsOn("toggleRivers")) toggleRivers();
+    if (!layerIsOn('toggleRivers')) toggleRivers();
     const r = +event.target.dataset.id;
     rivers
       .select("#river" + r)
@@ -104,9 +104,9 @@ function overviewRivers() {
   }
 
   function toggleBasinsHightlight() {
-    if (rivers.attr("data-basin") === "hightlighted") {
-      rivers.selectAll("*").attr("fill", null);
-      rivers.attr("data-basin", null);
+    if (rivers.attr('data-basin') === 'hightlighted') {
+      rivers.selectAll('*').attr('fill', null);
+      rivers.attr('data-basin', null);
     } else {
       rivers.attr("data-basin", "hightlighted");
       const basins = [...new Set(pack.rivers.map(r => r.basin))];
@@ -124,7 +124,7 @@ function overviewRivers() {
   }
 
   function downloadRiversData() {
-    let data = "Id,River,Type,Discharge,Length,Width,Basin\n"; // headers
+    let data = 'Id,River,Type,Discharge,Length,Width,Basin\n'; // headers
 
     body.querySelectorAll(":scope > div").forEach(function (el) {
       const d = el.dataset;
@@ -134,7 +134,7 @@ function overviewRivers() {
       data += [d.id, d.name, d.type, discharge, length, width, d.basin].join(",") + "\n";
     });
 
-    const name = getFileName("Rivers") + ".csv";
+    const name = getFileName('Rivers') + '.csv';
     downloadFile(data, name);
   }
 
diff --git a/modules/ui/routes-editor.js b/modules/ui/routes-editor.js
index 785c22a9..962eab22 100644
--- a/modules/ui/routes-editor.js
+++ b/modules/ui/routes-editor.js
@@ -1,9 +1,9 @@
-"use strict";
+'use strict';
 function editRoute(onClick) {
   if (customization) return;
-  if (!onClick && elSelected && d3.event.target.id === elSelected.attr("id")) return;
-  closeDialogs(".stable");
-  if (!layerIsOn("toggleRoutes")) toggleRoutes();
+  if (!onClick && elSelected && d3.event.target.id === elSelected.attr('id')) return;
+  closeDialogs('.stable');
+  if (!layerIsOn('toggleRoutes')) toggleRoutes();
 
   $("#routeEditor").dialog({
     title: "Edit Route",
@@ -12,32 +12,32 @@ function editRoute(onClick) {
     close: closeRoutesEditor
   });
 
-  debug.append("g").attr("id", "controlPoints");
+  debug.append('g').attr('id', 'controlPoints');
   const node = onClick ? elSelected.node() : d3.event.target;
-  elSelected = d3.select(node).on("click", addInterimControlPoint);
+  elSelected = d3.select(node).on('click', addInterimControlPoint);
   drawControlPoints(node);
   selectRouteGroup(node);
 
-  viewbox.on("touchmove mousemove", showEditorTips);
+  viewbox.on('touchmove mousemove', showEditorTips);
   if (onClick) toggleRouteCreationMode();
 
   if (modules.editRoute) return;
   modules.editRoute = true;
 
   // add listeners
-  document.getElementById("routeGroupsShow").addEventListener("click", showGroupSection);
-  document.getElementById("routeGroup").addEventListener("change", changeRouteGroup);
-  document.getElementById("routeGroupAdd").addEventListener("click", toggleNewGroupInput);
-  document.getElementById("routeGroupName").addEventListener("change", createNewGroup);
-  document.getElementById("routeGroupRemove").addEventListener("click", removeRouteGroup);
-  document.getElementById("routeGroupsHide").addEventListener("click", hideGroupSection);
-  document.getElementById("routeElevationProfile").addEventListener("click", showElevationProfile);
+  document.getElementById('routeGroupsShow').addEventListener('click', showGroupSection);
+  document.getElementById('routeGroup').addEventListener('change', changeRouteGroup);
+  document.getElementById('routeGroupAdd').addEventListener('click', toggleNewGroupInput);
+  document.getElementById('routeGroupName').addEventListener('change', createNewGroup);
+  document.getElementById('routeGroupRemove').addEventListener('click', removeRouteGroup);
+  document.getElementById('routeGroupsHide').addEventListener('click', hideGroupSection);
+  document.getElementById('routeElevationProfile').addEventListener('click', showElevationProfile);
 
-  document.getElementById("routeEditStyle").addEventListener("click", editGroupStyle);
-  document.getElementById("routeSplit").addEventListener("click", toggleRouteSplitMode);
-  document.getElementById("routeLegend").addEventListener("click", editRouteLegend);
-  document.getElementById("routeNew").addEventListener("click", toggleRouteCreationMode);
-  document.getElementById("routeRemove").addEventListener("click", removeRoute);
+  document.getElementById('routeEditStyle').addEventListener('click', editGroupStyle);
+  document.getElementById('routeSplit').addEventListener('click', toggleRouteSplitMode);
+  document.getElementById('routeLegend').addEventListener('click', editRouteLegend);
+  document.getElementById('routeNew').addEventListener('click', toggleRouteCreationMode);
+  document.getElementById('routeRemove').addEventListener('click', removeRoute);
 
   function showEditorTips() {
     showMainTip();
@@ -53,7 +53,7 @@ function editRoute(onClick) {
       const point = node.getPointAtLength(i);
       addControlPoint([point.x, point.y]);
     }
-    routeLength.innerHTML = rn(l * distanceScaleInput.value) + " " + distanceUnitInput.value;
+    routeLength.innerHTML = rn(l * distanceScaleInput.value) + ' ' + distanceUnitInput.value;
   }
 
   function addControlPoint(point, before = null) {
@@ -69,8 +69,8 @@ function editRoute(onClick) {
 
   function addInterimControlPoint() {
     const point = d3.mouse(this);
-    const controls = document.getElementById("controlPoints").querySelectorAll("circle");
-    const points = Array.from(controls).map(circle => [+circle.getAttribute("cx"), +circle.getAttribute("cy")]);
+    const controls = document.getElementById('controlPoints').querySelectorAll('circle');
+    const points = Array.from(controls).map((circle) => [+circle.getAttribute('cx'), +circle.getAttribute('cy')]);
     const index = getSegmentId(points, point, 2);
     addControlPoint(point, ":nth-child(" + (index + 1) + ")");
 
@@ -78,8 +78,8 @@ function editRoute(onClick) {
   }
 
   function dragControlPoint() {
-    this.setAttribute("cx", d3.event.x);
-    this.setAttribute("cy", d3.event.y);
+    this.setAttribute('cx', d3.event.x);
+    this.setAttribute('cy', d3.event.y);
     redrawRoute();
   }
 
@@ -93,9 +93,9 @@ function editRoute(onClick) {
         points.push([this.getAttribute("cx"), this.getAttribute("cy")]);
       });
 
-    elSelected.attr("d", round(lineGen(points)));
+    elSelected.attr('d', round(lineGen(points)));
     const l = elSelected.node().getTotalLength();
-    routeLength.innerHTML = rn(l * distanceScaleInput.value) + " " + distanceUnitInput.value;
+    routeLength.innerHTML = rn(l * distanceScaleInput.value) + ' ' + distanceUnitInput.value;
 
     if (modules.elevation) showEPForRoute(elSelected.node());
   }
@@ -120,7 +120,7 @@ function editRoute(onClick) {
 
   function selectRouteGroup(node) {
     const group = node.parentNode.id;
-    const select = document.getElementById("routeGroup");
+    const select = document.getElementById('routeGroup');
     select.options.length = 0; // remove all options
 
     routes.selectAll("g").each(function () {
@@ -133,10 +133,10 @@ function editRoute(onClick) {
   }
 
   function toggleNewGroupInput() {
-    if (routeGroupName.style.display === "none") {
-      routeGroupName.style.display = "inline-block";
+    if (routeGroupName.style.display === 'none') {
+      routeGroupName.style.display = 'inline-block';
       routeGroupName.focus();
-      routeGroup.style.display = "none";
+      routeGroup.style.display = 'none';
     } else {
       routeGroupName.style.display = "none";
       routeGroup.style.display = "inline-block";
@@ -154,17 +154,17 @@ function editRoute(onClick) {
       .replace(/[^\w\s]/gi, "");
 
     if (document.getElementById(group)) {
-      tip("Element with this id already exists. Please provide a unique name", false, "error");
+      tip('Element with this id already exists. Please provide a unique name', false, 'error');
       return;
     }
 
     if (Number.isFinite(+group.charAt(0))) {
-      tip("Group name should start with a letter", false, "error");
+      tip('Group name should start with a letter', false, 'error');
       return;
     }
     // just rename if only 1 element left
     const oldGroup = elSelected.node().parentNode;
-    const basic = ["roads", "trails", "searoutes"].includes(oldGroup.id);
+    const basic = ['roads', 'trails', 'searoutes'].includes(oldGroup.id);
     if (!basic && oldGroup.childElementCount === 1) {
       document.getElementById("routeGroup").selectedOptions[0].remove();
       document.getElementById("routeGroup").options.add(new Option(group, group, false, true));
@@ -175,18 +175,18 @@ function editRoute(onClick) {
     }
 
     const newGroup = elSelected.node().parentNode.cloneNode(false);
-    document.getElementById("routes").appendChild(newGroup);
+    document.getElementById('routes').appendChild(newGroup);
     newGroup.id = group;
-    document.getElementById("routeGroup").options.add(new Option(group, group, false, true));
+    document.getElementById('routeGroup').options.add(new Option(group, group, false, true));
     document.getElementById(group).appendChild(elSelected.node());
 
     toggleNewGroupInput();
-    document.getElementById("routeGroupName").value = "";
+    document.getElementById('routeGroupName').value = '';
   }
 
   function removeRouteGroup() {
     const group = elSelected.node().parentNode.id;
-    const basic = ["roads", "trails", "searoutes"].includes(group);
+    const basic = ['roads', 'trails', 'searoutes'].includes(group);
     const count = elSelected.node().parentNode.childElementCount;
     alertMessage.innerHTML = /* html */ `Are you sure you want to remove ${
       basic ? "all elements in the group" : "the entire route group"
@@ -216,12 +216,12 @@ function editRoute(onClick) {
 
   function editGroupStyle() {
     const g = elSelected.node().parentNode.id;
-    editStyle("routes", g);
+    editStyle('routes', g);
   }
 
   function toggleRouteSplitMode() {
-    document.getElementById("routeNew").classList.remove("pressed");
-    this.classList.toggle("pressed");
+    document.getElementById('routeNew').classList.remove('pressed');
+    this.classList.toggle('pressed');
   }
 
   function clickControlPoint() {
@@ -252,34 +252,54 @@ function editRoute(onClick) {
         this.remove();
       });
 
-    elSelected.attr("d", round(lineGen(points1)));
-    const id = getNextId("route");
-    group.append("path").attr("id", id).attr("d", lineGen(points2));
-    debug.select("#controlPoints").selectAll("circle").remove();
+  function splitRoute(clicked) {
+    lineGen.curve(d3.curveCatmullRom.alpha(0.1));
+    const group = d3.select(elSelected.node().parentNode);
+    routeSplit.classList.remove('pressed');
+
+    const points1 = [],
+      points2 = [];
+    let points = points1;
+    debug
+      .select('#controlPoints')
+      .selectAll('circle')
+      .each(function () {
+        points.push([this.getAttribute('cx'), this.getAttribute('cy')]);
+        if (this === clicked) {
+          points = points2;
+          points.push([this.getAttribute('cx'), this.getAttribute('cy')]);
+        }
+        this.remove();
+      });
+
+    elSelected.attr('d', round(lineGen(points1)));
+    const id = getNextId('route');
+    group.append('path').attr('id', id).attr('d', lineGen(points2));
+    debug.select('#controlPoints').selectAll('circle').remove();
     drawControlPoints(elSelected.node());
   }
 
   function toggleRouteCreationMode() {
-    document.getElementById("routeSplit").classList.remove("pressed");
-    document.getElementById("routeNew").classList.toggle("pressed");
-    if (document.getElementById("routeNew").classList.contains("pressed")) {
-      tip("Click on map to add control points", true);
-      viewbox.on("click", addPointOnClick).style("cursor", "crosshair");
-      elSelected.on("click", null);
+    document.getElementById('routeSplit').classList.remove('pressed');
+    document.getElementById('routeNew').classList.toggle('pressed');
+    if (document.getElementById('routeNew').classList.contains('pressed')) {
+      tip('Click on map to add control points', true);
+      viewbox.on('click', addPointOnClick).style('cursor', 'crosshair');
+      elSelected.on('click', null);
     } else {
       clearMainTip();
-      viewbox.on("click", clicked).style("cursor", "default");
-      elSelected.on("click", addInterimControlPoint).attr("data-new", null);
+      viewbox.on('click', clicked).style('cursor', 'default');
+      elSelected.on('click', addInterimControlPoint).attr('data-new', null);
     }
   }
 
   function addPointOnClick() {
     // create new route
-    if (!elSelected.attr("data-new")) {
-      debug.select("#controlPoints").selectAll("circle").remove();
+    if (!elSelected.attr('data-new')) {
+      debug.select('#controlPoints').selectAll('circle').remove();
       const parent = elSelected.node().parentNode;
-      const id = getNextId("route");
-      elSelected = d3.select(parent).append("path").attr("id", id).attr("data-new", 1);
+      const id = getNextId('route');
+      elSelected = d3.select(parent).append('path').attr('id', id).attr('data-new', 1);
     }
 
     addControlPoint(d3.mouse(this));
@@ -287,7 +307,7 @@ function editRoute(onClick) {
   }
 
   function editRouteLegend() {
-    const id = elSelected.attr("id");
+    const id = elSelected.attr('id');
     editNotes(id, id);
   }
 
@@ -310,11 +330,11 @@ function editRoute(onClick) {
   }
 
   function closeRoutesEditor() {
-    elSelected.attr("data-new", null).on("click", null);
+    elSelected.attr('data-new', null).on('click', null);
     clearMainTip();
-    routeSplit.classList.remove("pressed");
-    routeNew.classList.remove("pressed");
-    debug.select("#controlPoints").remove();
+    routeSplit.classList.remove('pressed');
+    routeNew.classList.remove('pressed');
+    debug.select('#controlPoints').remove();
     unselect();
   }
 }
diff --git a/modules/ui/style.js b/modules/ui/style.js
index 9e5744d7..11934008 100644
--- a/modules/ui/style.js
+++ b/modules/ui/style.js
@@ -1,5 +1,5 @@
 // UI module to control the style
-"use strict";
+'use strict';
 
 // add available filters to lists
 {
@@ -29,16 +29,16 @@ function editStyle(element, group) {
   if (group) styleGroupSelect.options.add(new Option(group, group, true, true));
   selectStyleElement();
 
-  styleElementSelect.classList.add("glow");
-  if (group) styleGroupSelect.classList.add("glow");
+  styleElementSelect.classList.add('glow');
+  if (group) styleGroupSelect.classList.add('glow');
   setTimeout(() => {
-    styleElementSelect.classList.remove("glow");
-    if (group) styleGroupSelect.classList.remove("glow");
+    styleElementSelect.classList.remove('glow');
+    if (group) styleGroupSelect.classList.remove('glow');
   }, 1500);
 }
 
 // Toggle style sections on element select
-styleElementSelect.addEventListener("change", selectStyleElement);
+styleElementSelect.addEventListener('change', selectStyleElement);
 function selectStyleElement() {
   const sel = styleElementSelect.value;
   let el = d3.select("#" + sel);
@@ -69,9 +69,9 @@ function selectStyleElement() {
   }
 
   // fill
-  if (["rivers", "lakes", "landmass", "prec", "ice", "fogging"].includes(sel)) {
-    styleFill.style.display = "block";
-    styleFillInput.value = styleFillOutput.value = el.attr("fill");
+  if (['rivers', 'lakes', 'landmass', 'prec', 'ice', 'fogging'].includes(sel)) {
+    styleFill.style.display = 'block';
+    styleFillInput.value = styleFillOutput.value = el.attr('fill');
   }
 
   // stroke color and width
@@ -87,16 +87,16 @@ function selectStyleElement() {
   }
 
   // stroke dash
-  if (["routes", "borders", "temperature", "legend", "population", "coordinates", "zones", "gridOverlay"].includes(sel)) {
-    styleStrokeDash.style.display = "block";
-    styleStrokeDasharrayInput.value = el.attr("stroke-dasharray") || "";
-    styleStrokeLinecapInput.value = el.attr("stroke-linecap") || "inherit";
+  if (['routes', 'borders', 'temperature', 'legend', 'population', 'coordinates', 'zones', 'gridOverlay'].includes(sel)) {
+    styleStrokeDash.style.display = 'block';
+    styleStrokeDasharrayInput.value = el.attr('stroke-dasharray') || '';
+    styleStrokeLinecapInput.value = el.attr('stroke-linecap') || 'inherit';
   }
 
   // clipping
-  if (["cells", "gridOverlay", "coordinates", "compass", "terrain", "temperature", "routes", "texture", "biomes", "zones"].includes(sel)) {
-    styleClipping.style.display = "block";
-    styleClippingInput.value = el.attr("mask") || "";
+  if (['cells', 'gridOverlay', 'coordinates', 'compass', 'terrain', 'temperature', 'routes', 'texture', 'biomes', 'zones'].includes(sel)) {
+    styleClipping.style.display = 'block';
+    styleClippingInput.value = el.attr('mask') || '';
   }
 
   // show specific sections
@@ -111,41 +111,41 @@ function selectStyleElement() {
     styleHeightmapCurve.value = terrs.attr("curve");
   }
 
-  if (sel === "markers") {
-    styleMarkers.style.display = "block";
-    styleRescaleMarkers.checked = +markers.attr("rescale");
+  if (sel === 'markers') {
+    styleMarkers.style.display = 'block';
+    styleRescaleMarkers.checked = +markers.attr('rescale');
   }
 
-  if (sel === "gridOverlay") {
-    styleGrid.style.display = "block";
-    styleGridType.value = el.attr("type");
-    styleGridScale.value = el.attr("scale") || 1;
-    styleGridShiftX.value = el.attr("dx") || 0;
-    styleGridShiftY.value = el.attr("dy") || 0;
+  if (sel === 'gridOverlay') {
+    styleGrid.style.display = 'block';
+    styleGridType.value = el.attr('type');
+    styleGridScale.value = el.attr('scale') || 1;
+    styleGridShiftX.value = el.attr('dx') || 0;
+    styleGridShiftY.value = el.attr('dy') || 0;
     calculateFriendlyGridSize();
   }
 
-  if (sel === "compass") {
-    styleCompass.style.display = "block";
-    const tr = parseTransform(compass.select("use").attr("transform"));
+  if (sel === 'compass') {
+    styleCompass.style.display = 'block';
+    const tr = parseTransform(compass.select('use').attr('transform'));
     styleCompassShiftX.value = tr[0];
     styleCompassShiftY.value = tr[1];
     styleCompassSizeInput.value = styleCompassSizeOutput.value = tr[2];
   }
 
-  if (sel === "terrain") {
-    styleRelief.style.display = "block";
-    styleReliefSizeOutput.innerHTML = styleReliefSizeInput.value = terrain.attr("size");
-    styleReliefDensityOutput.innerHTML = styleReliefDensityInput.value = terrain.attr("density");
-    styleReliefSet.value = terrain.attr("set");
+  if (sel === 'terrain') {
+    styleRelief.style.display = 'block';
+    styleReliefSizeOutput.innerHTML = styleReliefSizeInput.value = terrain.attr('size');
+    styleReliefDensityOutput.innerHTML = styleReliefDensityInput.value = terrain.attr('density');
+    styleReliefSet.value = terrain.attr('set');
   }
 
-  if (sel === "population") {
-    stylePopulation.style.display = "block";
-    stylePopulationRuralStrokeInput.value = stylePopulationRuralStrokeOutput.value = population.select("#rural").attr("stroke");
-    stylePopulationUrbanStrokeInput.value = stylePopulationUrbanStrokeOutput.value = population.select("#urban").attr("stroke");
-    styleStrokeWidth.style.display = "block";
-    styleStrokeWidthInput.value = styleStrokeWidthOutput.value = el.attr("stroke-width") || "";
+  if (sel === 'population') {
+    stylePopulation.style.display = 'block';
+    stylePopulationRuralStrokeInput.value = stylePopulationRuralStrokeOutput.value = population.select('#rural').attr('stroke');
+    stylePopulationUrbanStrokeInput.value = stylePopulationUrbanStrokeOutput.value = population.select('#urban').attr('stroke');
+    styleStrokeWidth.style.display = 'block';
+    styleStrokeWidthInput.value = styleStrokeWidthOutput.value = el.attr('stroke-width') || '';
   }
 
   if (sel === "regions") {
@@ -216,10 +216,10 @@ function selectStyleElement() {
     styleStrokeWidth.style.display = "block";
     styleSize.style.display = "block";
 
-    styleLegend.style.display = "block";
-    styleLegendColItemsOutput.value = styleLegendColItems.value = el.attr("data-columns");
-    styleLegendBackOutput.value = styleLegendBack.value = el.select("#legendBox").attr("fill");
-    styleLegendOpacityOutput.value = styleLegendOpacity.value = el.select("#legendBox").attr("fill-opacity");
+    styleLegend.style.display = 'block';
+    styleLegendColItemsOutput.value = styleLegendColItems.value = el.attr('data-columns');
+    styleLegendBackOutput.value = styleLegendBack.value = el.select('#legendBox').attr('fill');
+    styleLegendOpacityOutput.value = styleLegendOpacity.value = el.select('#legendBox').attr('fill-opacity');
 
     styleStrokeInput.value = styleStrokeOutput.value = el.attr("stroke") || "#111111";
     styleStrokeWidthInput.value = styleStrokeWidthOutput.value = el.attr("stroke-width") || 0.5;
@@ -246,21 +246,21 @@ function selectStyleElement() {
     styleTemperatureFontSizeInput.value = styleTemperatureFontSizeOutput.value = el.attr("font-size") || "8px";
   }
 
-  if (sel === "coordinates") {
-    styleSize.style.display = "block";
-    styleFontSize.value = el.attr("data-size");
+  if (sel === 'coordinates') {
+    styleSize.style.display = 'block';
+    styleFontSize.value = el.attr('data-size');
   }
 
-  if (sel === "armies") {
-    styleArmies.style.display = "block";
-    styleArmiesFillOpacity.value = styleArmiesFillOpacityOutput.value = el.attr("fill-opacity");
-    styleArmiesSize.value = styleArmiesSizeOutput.value = el.attr("box-size");
+  if (sel === 'armies') {
+    styleArmies.style.display = 'block';
+    styleArmiesFillOpacity.value = styleArmiesFillOpacityOutput.value = el.attr('fill-opacity');
+    styleArmiesSize.value = styleArmiesSizeOutput.value = el.attr('box-size');
   }
 
-  if (sel === "emblems") {
-    styleEmblems.style.display = "block";
-    styleStrokeWidth.style.display = "block";
-    styleStrokeWidthInput.value = styleStrokeWidthOutput.value = el.attr("stroke-width") || 1;
+  if (sel === 'emblems') {
+    styleEmblems.style.display = 'block';
+    styleStrokeWidth.style.display = 'block';
+    styleStrokeWidthInput.value = styleStrokeWidthOutput.value = el.attr('stroke-width') || 1;
   }
 
   if (sel === 'goods') {
@@ -294,7 +294,7 @@ function selectStyleElement() {
 }
 
 // Handle style inputs change
-styleGroupSelect.addEventListener("change", selectStyleElement);
+styleGroupSelect.addEventListener('change', selectStyleElement);
 
 function getEl() {
   const el = styleElementSelect.value;
@@ -391,13 +391,13 @@ styleGridShiftY.addEventListener("input", function () {
   if (layerIsOn("toggleGrid")) drawGrid();
 });
 
-styleShiftX.addEventListener("input", shiftElement);
-styleShiftY.addEventListener("input", shiftElement);
+styleShiftX.addEventListener('input', shiftElement);
+styleShiftY.addEventListener('input', shiftElement);
 
 function shiftElement() {
   const x = styleShiftX.value || 0;
   const y = styleShiftY.value || 0;
-  getEl().attr("transform", `translate(${x},${y})`);
+  getEl().attr('transform', `translate(${x},${y})`);
 }
 
 styleRescaleMarkers.addEventListener("change", function () {
@@ -459,7 +459,7 @@ styleHeightmapCurve.addEventListener("change", function () {
 styleReliefSet.addEventListener("change", function () {
   terrain.attr("set", this.value);
   ReliefIcons();
-  if (!layerIsOn("toggleRelief")) toggleRelief();
+  if (!layerIsOn('toggleRelief')) toggleRelief();
 });
 
 styleReliefSizeInput.addEventListener("change", function () {
@@ -473,7 +473,7 @@ styleReliefDensityInput.addEventListener("change", function () {
   terrain.attr("density", this.value);
   styleReliefDensityOutput.value = this.value;
   ReliefIcons();
-  if (!layerIsOn("toggleRelief")) toggleRelief();
+  if (!layerIsOn('toggleRelief')) toggleRelief();
 });
 
 styleTemperatureFillOpacityInput.addEventListener("input", function () {
@@ -506,31 +506,31 @@ styleCompassSizeInput.addEventListener("input", function () {
   shiftCompass();
 });
 
-styleCompassShiftX.addEventListener("input", shiftCompass);
-styleCompassShiftY.addEventListener("input", shiftCompass);
+styleCompassShiftX.addEventListener('input', shiftCompass);
+styleCompassShiftY.addEventListener('input', shiftCompass);
 
 function shiftCompass() {
   const tr = `translate(${styleCompassShiftX.value} ${styleCompassShiftY.value}) scale(${styleCompassSizeInput.value})`;
-  compass.select("use").attr("transform", tr);
+  compass.select('use').attr('transform', tr);
 }
 
 styleLegendColItems.addEventListener("input", function () {
   styleLegendColItemsOutput.value = this.value;
-  legend.select("#legendBox").attr("data-columns", this.value);
+  legend.select('#legendBox').attr('data-columns', this.value);
   redrawLegend();
 });
 
 styleLegendBack.addEventListener("input", function () {
   styleLegendBackOutput.value = this.value;
-  legend.select("#legendBox").attr("fill", this.value);
+  legend.select('#legendBox').attr('fill', this.value);
 });
 
 styleLegendOpacity.addEventListener("input", function () {
   styleLegendOpacityOutput.value = this.value;
-  legend.select("#legendBox").attr("fill-opacity", this.value);
+  legend.select('#legendBox').attr('fill-opacity', this.value);
 });
 
-styleSelectFont.addEventListener("change", changeFont);
+styleSelectFont.addEventListener('change', changeFont);
 function changeFont() {
   const family = styleSelectFont.value;
   getEl().attr("font-family", family);
@@ -688,12 +688,12 @@ styleStatesBodyFilter.addEventListener("change", function () {
 
 styleStatesHaloWidth.addEventListener("input", function () {
   styleStatesHaloWidthOutput.value = this.value;
-  statesHalo.attr("data-width", this.value).attr("stroke-width", this.value);
+  statesHalo.attr('data-width', this.value).attr('stroke-width', this.value);
 });
 
 styleStatesHaloOpacity.addEventListener("input", function () {
   styleStatesHaloOpacityOutput.value = this.value;
-  statesHalo.attr("opacity", this.value);
+  statesHalo.attr('opacity', this.value);
 });
 
 styleStatesHaloBlur.addEventListener("input", function () {
@@ -710,8 +710,8 @@ styleArmiesFillOpacity.addEventListener("input", function () {
 styleArmiesSize.addEventListener("input", function () {
   armies.attr("box-size", this.value).attr("font-size", this.value * 2);
   styleArmiesSizeOutput.value = this.value;
-  armies.selectAll("g").remove(); // clear armies layer
-  pack.states.forEach(s => {
+  armies.selectAll('g').remove(); // clear armies layer
+  pack.states.forEach((s) => {
     if (!s.i || s.removed || !s.military.length) return;
     Military.drawRegiments(s.military, s.i);
   });
@@ -748,9 +748,9 @@ function textureProvideURL() {
         opt.text = name.slice(0, 20);
         styleTextureInput.add(opt);
         styleTextureInput.value = textureURL.value;
-        getBase64(textureURL.value, base64 => texture.select("image").attr("xlink:href", base64));
+        getBase64(textureURL.value, (base64) => texture.select('image').attr('xlink:href', base64));
         zoom.scaleBy(svg, 1.00001); // enforce browser re-draw
-        $(this).dialog("close");
+        $(this).dialog('close');
       },
       Cancel: function () {
         $(this).dialog("close");
@@ -760,11 +760,11 @@ function textureProvideURL() {
 }
 
 function fetchTextureURL(url) {
-  INFO && console.log("Provided URL is", url);
+  INFO && console.log('Provided URL is', url);
   const img = new Image();
   img.onload = function () {
-    const canvas = document.getElementById("texturePreview");
-    const ctx = canvas.getContext("2d");
+    const canvas = document.getElementById('texturePreview');
+    const ctx = canvas.getContext('2d');
     ctx.clearRect(0, 0, canvas.width, canvas.height);
     ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
   };
@@ -805,17 +805,17 @@ function updateElements() {
   });
 
   // redraw elements
-  if (layerIsOn("toggleHeight")) drawHeightmap();
-  if (legend.selectAll("*").size() && window.redrawLegend) redrawLegend();
-  oceanLayers.selectAll("path").remove();
+  if (layerIsOn('toggleHeight')) drawHeightmap();
+  if (legend.selectAll('*').size() && window.redrawLegend) redrawLegend();
+  oceanLayers.selectAll('path').remove();
   OceanLayers();
   invokeActiveZooming();
 }
 
 // GLOBAL FILTERS
-mapFilters.addEventListener("click", applyMapFilter);
+mapFilters.addEventListener('click', applyMapFilter);
 function applyMapFilter(event) {
-  if (event.target.tagName !== "BUTTON") return;
+  if (event.target.tagName !== 'BUTTON') return;
   const button = event.target;
   svg.attr("data-filter", null).attr("filter", null);
   if (button.classList.contains("pressed")) return button.classList.remove("pressed");
diff --git a/modules/ui/units-editor.js b/modules/ui/units-editor.js
index 37645978..e7ecb959 100644
--- a/modules/ui/units-editor.js
+++ b/modules/ui/units-editor.js
@@ -1,14 +1,14 @@
-"use strict";
+'use strict';
 function editUnits() {
-  closeDialogs("#unitsEditor, .stable");
-  $("#unitsEditor").dialog();
+  closeDialogs('#unitsEditor, .stable');
+  $('#unitsEditor').dialog();
 
   if (modules.editUnits) return;
   modules.editUnits = true;
 
-  $("#unitsEditor").dialog({
-    title: "Units Editor",
-    position: {my: "right top", at: "right-10 top+10", of: "svg", collision: "fit"}
+  $('#unitsEditor').dialog({
+    title: 'Units Editor',
+    position: {my: 'right top', at: 'right-10 top+10', of: 'svg', collision: 'fit'}
   });
 
   const drawBar = () => drawScaleBar(scale);
@@ -36,12 +36,12 @@ function editUnits() {
   document.getElementById("urbanDensityOutput").addEventListener("input", changeUrbanDensity);
   document.getElementById("urbanDensityInput").addEventListener("change", changeUrbanDensity);
 
-  document.getElementById("addLinearRuler").addEventListener("click", addRuler);
-  document.getElementById("addOpisometer").addEventListener("click", toggleOpisometerMode);
-  document.getElementById("addRouteOpisometer").addEventListener("click", toggleRouteOpisometerMode);
-  document.getElementById("addPlanimeter").addEventListener("click", togglePlanimeterMode);
-  document.getElementById("removeRulers").addEventListener("click", removeAllRulers);
-  document.getElementById("unitsRestore").addEventListener("click", restoreDefaultUnits);
+  document.getElementById('addLinearRuler').addEventListener('click', addRuler);
+  document.getElementById('addOpisometer').addEventListener('click', toggleOpisometerMode);
+  document.getElementById('addRouteOpisometer').addEventListener('click', toggleRouteOpisometerMode);
+  document.getElementById('addPlanimeter').addEventListener('click', togglePlanimeterMode);
+  document.getElementById('removeRulers').addEventListener('click', removeAllRulers);
+  document.getElementById('unitsRestore').addEventListener('click', restoreDefaultUnits);
 
   function changeDistanceUnit() {
     if (this.value === "custom_name") {
@@ -109,21 +109,21 @@ function editUnits() {
     unlock("distanceScale");
 
     // units
-    const US = navigator.language === "en-US";
-    const UK = navigator.language === "en-GB";
-    distanceUnitInput.value = US || UK ? "mi" : "km";
-    heightUnit.value = US || UK ? "ft" : "m";
-    temperatureScale.value = US ? "°F" : "°C";
-    areaUnit.value = "square";
-    localStorage.removeItem("distanceUnit");
-    localStorage.removeItem("heightUnit");
-    localStorage.removeItem("temperatureScale");
-    localStorage.removeItem("areaUnit");
+    const US = navigator.language === 'en-US';
+    const UK = navigator.language === 'en-GB';
+    distanceUnitInput.value = US || UK ? 'mi' : 'km';
+    heightUnit.value = US || UK ? 'ft' : 'm';
+    temperatureScale.value = US ? '°F' : '°C';
+    areaUnit.value = 'square';
+    localStorage.removeItem('distanceUnit');
+    localStorage.removeItem('heightUnit');
+    localStorage.removeItem('temperatureScale');
+    localStorage.removeItem('areaUnit');
     calculateFriendlyGridSize();
 
     // height exponent
     heightExponentInput.value = heightExponentOutput.value = 1.8;
-    localStorage.removeItem("heightExponent");
+    localStorage.removeItem('heightExponent');
     calculateTemperatures();
 
     // scale bar
@@ -163,10 +163,10 @@ function editUnits() {
   }
 
   function toggleOpisometerMode() {
-    if (this.classList.contains("pressed")) {
+    if (this.classList.contains('pressed')) {
       restoreDefaultEvents();
       clearMainTip();
-      this.classList.remove("pressed");
+      this.classList.remove('pressed');
     } else {
       if (!layerIsOn("toggleRulers")) toggleRulers();
       tip("Draw a curve to measure length. Hold Shift to disallow path optimization", true);
@@ -195,10 +195,10 @@ function editUnits() {
   }
 
   function toggleRouteOpisometerMode() {
-    if (this.classList.contains("pressed")) {
+    if (this.classList.contains('pressed')) {
       restoreDefaultEvents();
       clearMainTip();
-      this.classList.remove("pressed");
+      this.classList.remove('pressed');
     } else {
       if (!layerIsOn("toggleRulers")) toggleRulers();
       tip("Draw a curve along routes to measure length. Hold Shift to measure away from roads.", true);
@@ -244,10 +244,10 @@ function editUnits() {
   }
 
   function togglePlanimeterMode() {
-    if (this.classList.contains("pressed")) {
+    if (this.classList.contains('pressed')) {
       restoreDefaultEvents();
       clearMainTip();
-      this.classList.remove("pressed");
+      this.classList.remove('pressed');
     } else {
       if (!layerIsOn("toggleRulers")) toggleRulers();
       tip("Draw a curve to measure its area. Hold Shift to disallow path optimization", true);