diff --git a/main.js b/main.js
index d4dc39e9..61dc267b 100644
--- a/main.js
+++ b/main.js
@@ -172,29 +172,32 @@ landmass.append("rect").attr("x", 0).attr("y", 0).attr("width", graphWidth).attr
 oceanPattern.append("rect").attr("fill", "url(#oceanic)").attr("x", 0).attr("y", 0).attr("width", graphWidth).attr("height", graphHeight);
 oceanLayers.append("rect").attr("id", "oceanBase").attr("x", 0).attr("y", 0).attr("width", graphWidth).attr("height", graphHeight);
 
-if (!location.hostname) {
-  const wiki = "https://github.com/Azgaar/Fantasy-Map-Generator/wiki/Run-FMG-locally";
-  alertMessage.innerHTML = `Fantasy Map Generator cannot run serverless.
-  Follow the <a href="${wiki}" target="_blank">instructions</a> on how you can easily run a local web-server`;
+document.addEventListener("DOMContentLoaded", () => {
+  if (!location.hostname) {
+    const wiki = "https://github.com/Azgaar/Fantasy-Map-Generator/wiki/Run-FMG-locally";
+    alertMessage.innerHTML = `Fantasy Map Generator cannot run serverless.
+    Follow the <a href="${wiki}" target="_blank">instructions</a> on how you can easily run a local web-server`;
 
-  $("#alert").dialog({
-    resizable: false,
-    title: "Loading error",
-    width: "28em",
-    position: {my: "center center-4em", at: "center", of: "svg"},
-    buttons: {
-      OK: function () {
-        $(this).dialog("close");
+    $("#alert").dialog({
+      resizable: false,
+      title: "Loading error",
+      width: "28em",
+      position: {my: "center center-4em", at: "center", of: "svg"},
+      buttons: {
+        OK: function () {
+          $(this).dialog("close");
+        }
       }
-    }
-  });
+    });
 
-  d3.select("#loading-text").transition().duration(1000).style("opacity", 0);
-  d3.select("#init-rose").transition().duration(4000).style("opacity", 0);
-} else {
-  hideLoading();
-  checkLoadParameters();
-}
+    d3.select("#loading-text").transition().duration(1000).style("opacity", 0);
+    d3.select("#init-rose").transition().duration(4000).style("opacity", 0);
+  } else {
+    hideLoading();
+    checkLoadParameters();
+  }
+  restoreDefaultEvents(); // apply default viewbox events
+});
 
 function hideLoading() {
   d3.select("#loading").transition().duration(4000).style("opacity", 0);
diff --git a/modules/ui/editors.js b/modules/ui/editors.js
index be97102c..e13f8eff 100644
--- a/modules/ui/editors.js
+++ b/modules/ui/editors.js
@@ -2,7 +2,6 @@
 "use strict";
 
 modules.editors = true;
-restoreDefaultEvents(); // apply default viewbox events on load
 
 // restore default viewbox events
 function restoreDefaultEvents() {
@@ -478,14 +477,14 @@ function createPicker() {
     .attr("height", 20)
     .on("mousemove", () => tip("Color value in different color spaces. Edit to change"));
   const html = `
-  <label style="margin-right: 6px">HSL: 
+  <label style="margin-right: 6px">HSL:
     <input type="number" id="pickerHSL_H" data-space="hsl" min=0 max=360 value="231">,
-    <input type="number" id="pickerHSL_S" data-space="hsl" min=0 max=100 value="70">, 
+    <input type="number" id="pickerHSL_S" data-space="hsl" min=0 max=100 value="70">,
     <input type="number" id="pickerHSL_L" data-space="hsl" min=0 max=100 value="70">
   </label>
-  <label style="margin-right: 6px">RGB: 
+  <label style="margin-right: 6px">RGB:
     <input type="number" id="pickerRGB_R" data-space="rgb" min=0 max=255 value="125">,
-    <input type="number" id="pickerRGB_G" data-space="rgb" min=0 max=255 value="142">, 
+    <input type="number" id="pickerRGB_G" data-space="rgb" min=0 max=255 value="142">,
     <input type="number" id="pickerRGB_B" data-space="rgb" min=0 max=255 value="232">
   </label>
   <label>HEX: <input type="text" id="pickerHEX" data-space="hex" style="width:42px" autocorrect="off" spellcheck="false" value="#7d8ee8"></label>`;