Merge remote-tracking branch 'upstream/master'

index.css

@@ -1960,7 +1960,7 @@ input[type="checkbox"] {
 .checkbox + .checkbox-label:before {
   content: "";
   display: inline-block;
-  vertical-align: text-top;
+  vertical-align: middle;
   width: 0.6em;
   height: 0.6em;
   padding: 0.2em;

index.html

@@ -3570,7 +3570,7 @@
     <div id="loadMapData" style="display: none" class="dialog">
       <div>
         <strong>Load map from</strong>
-        <button onclick="mapToLoad.click()" data-tip="Load .map file from local disk">local disk</button>
+        <button onclick="mapToLoad.click()" data-tip="Load .map file from your local disk">machine</button>
         <button onclick="loadURL()" data-tip="Load .map file from URL (server should allow CORS)">URL</button>
         <button onclick="quickLoad()" data-tip="Load map from browser storage (if saved before)">storage</button>
       </div>

main.js

@@ -2,8 +2,7 @@
 // https://github.com/Azgaar/Fantasy-Map-Generator
 
 "use strict";
-// TODO: pump version to 1.7
+const version = "1.7"; // generator version
-const version = "1.662"; // generator version
 document.title += " v" + version;
 
 // Switches to disable/enable logging features
@@ -406,11 +405,14 @@ function showWelcomeMessage() {
   alertMessage.innerHTML = `The Fantasy Map Generator is updated up to version <b>${version}</b>.
     This version is compatible with ${changelog}, loaded <i>.map</i> files will be auto-updated.
     <ul>Main changes:
-      <li>Add custom fonts dialog</li>
+      <li>New marker types</li>
-      <li>Save and load <i>.map</i> files to Dropbox</li>
+      <li>New markers editor</li>
-      <li>Ability to add control points on river edit</li>
+      <li>Markers overview screen</li>
-      <li>New heightmap template: Taklamakan</li>
+      <li>Markers regeneration menu</li>
-      <li>Option to not scale labels on zoom</li>
+      <li>Burg editor update</li>
+      <li>Editable theme color</li>
+      <li>Add font dialog</li>
+      <li>Save to Dropbox</li>
     </ul>
 
     <p>Join our ${discord} and ${reddit} to ask questions, share maps, discuss the Generator and Worlbuilding, report bugs and propose new features.</p>

modules/markers-generator.js

@@ -4,20 +4,47 @@ window.Markers = (function () {
   let config = [];
   let occupied = [];
 
+  function getDefaultConfig() {
+    const culturesSet = document.getElementById("culturesSet").value;
+    const isFantasy = culturesSet.includes("Fantasy");
+
+    return [
+      {type: "volcanoes", icon: "🌋", multiplier: 1, fn: addVolcanoes},
+      {type: "hot-springs", icon: "♨️", multiplier: 1, fn: addHotSprings},
+      {type: "mines", icon: "⛏️", multiplier: 1, fn: addMines},
+      {type: "bridges", icon: "🌉", multiplier: 1, fn: addBridges},
+      {type: "inns", icon: "🍻", multiplier: 1, fn: addInns},
+      {type: "lighthouses", icon: "🚨", multiplier: 1, fn: addLighthouses},
+      {type: "waterfalls", icon: "⟱", multiplier: 1, fn: addWaterfalls},
+      {type: "battlefields", icon: "⚔️", multiplier: 1, fn: addBattlefields},
+      {type: "dungeons", icon: "🗝️", multiplier: 1, fn: addDungeons},
+      {type: "lake-monsters", icon: "🐉", multiplier: 1, fn: addLakeMonsters},
+      {type: "sea-monsters", icon: "🦑", multiplier: 1, fn: addSeaMonsters},
+      {type: "hill-monsters", icon: "👹", multiplier: 1, fn: addHillMonsters},
+      {type: "sacred-mountains", icon: "🗻", multiplier: 1, fn: addSacredMountains},
+      {type: "sacred-forests", icon: "🌳", multiplier: 1, fn: addSacredForests},
+      {type: "sacred-pineries", icon: "🌲", multiplier: 1, fn: addSacredPineries},
+      {type: "sacred-palm-groves", icon: "🌴", multiplier: 1, fn: addSacredPalmGroves},
+      {type: "brigands", icon: "💰", multiplier: 1, fn: addBrigands},
+      {type: "pirates", icon: "🏴‍☠️", multiplier: 1, fn: addPirates},
+      {type: "statues", icon: "🗿", multiplier: 1, fn: addStatues},
+      {type: "ruines", icon: "🏺", multiplier: 1, fn: addRuines},
+      {type: "portals", icon: "🌀", multiplier: +isFantasy, fn: addPortals}
+    ];
+  }
+
+  const getConfig = () => config;
+
+  const setConfig = newConfig => {
+    config = newConfig;
+  };
+
   const generate = function () {
+    setConfig(getDefaultConfig());
     pack.markers = [];
     generateTypes();
   };
 
-  const regenerate = requestedMultiplier => {
-    if (requestedMultiplier === 0) return;
-    if (requestedMultiplier) multiplier = requestedMultiplier;
-    generateTypes();
-  };
-
-  const generateTypes = () => {
-    TIME && console.time("addMarkers");
-
   const regenerate = () => {
     pack.markers = pack.markers.filter(({i, lock}) => {
       if (lock) return true;
@@ -33,7 +60,6 @@ window.Markers = (function () {
   };
 
   function generateTypes() {
->>>>>>> 60057c5... markers - generate from config file
     TIME && console.time("addMarkers");
 
     config.forEach(({type, icon, multiplier, fn}) => {
@@ -45,19 +71,11 @@ window.Markers = (function () {
     TIME && console.timeEnd("addMarkers");
   }
 
-<<<<<<< HEAD
-  const getQuantity = (array, min, each) => {
-    if (!array.length || array.length < min / multiplier) return 0;
-    const requestQty = Math.ceil((array.length / each) * multiplier);
-    return array.length < requestQty ? array.length : requestQty;
-  };
-=======
   function getQuantity(array, min, each, multiplier) {
     if (!array.length || array.length < min / multiplier) return 0;
     const requestQty = Math.ceil((array.length / each) * multiplier);
     return array.length < requestQty ? array.length : requestQty;
   }
->>>>>>> 60057c5... markers - generate from config file
 
   function extractAnyElement(array) {
     const index = Math.floor(Math.random() * array.length);
@@ -501,7 +519,7 @@ window.Markers = (function () {
       const id = addMarker({cell, icon, type, dy: 48});
       const name = `${lake.name} Monster`;
       const length = gauss(10, 5, 5, 100);
-      const legend = `Rumors said a relic monster of ${length} ${heightUnit.value} long inhabits ${lake.name} Lake. Truth or lie, but folks are affraid to fish in the lake`;
+      const legend = `Rumors said a relic monster of ${length} ${heightUnit.value} long inhabits ${lake.name} Lake. Truth or lie, but folks are afraid to fish in the lake`;
       notes.push({id, name, legend});
       quantity--;
     }
@@ -787,17 +805,5 @@ window.Markers = (function () {
     }
   }
 
-<<<<<<< HEAD
+  return {generate, regenerate, getConfig, setConfig};
-  function addMarker({cell, type, icon, dx, dy, px}) {
-    const i = pack.markers.length;
-    const [x, y] = getMarkerCoordinates(cell);
-    const marker = {i, icon, type, x, y};
-    if (dx) marker.dx = dx;
-    if (dy) marker.dy = dy;
-    if (px) marker.px = px;
-    pack.markers.push(marker);
-    return "marker" + i;
-  }
-
-  return {generate, regenerate};
 })();

modules/ui/burg-editor.js

@@ -403,15 +403,9 @@ function editBurg(id) {
     document.getElementById("mfcgLink").setAttribute("href", mfcgURL);
   }
 
-    function openMFCG(seed) {
+  function getBurgSeed(burg) {
-      if (!seed && burg.MFCGlink) {
+    return burg.MFCG || Number(`${seed}${String(burg.i).padStart(4, 0)}`);
-        openURL(burg.MFCGlink);
-        return;
   }
-      const cells = pack.cells;
-      const name = elSelected.text();
-      const size = Math.ceil(2.13*Math.pow(burg.population * populationRate / urbanDensity,0.385));//Math.max(Math.min(rn(burg.population), 100), 6); // to be removed once change on MFDC is done
-      const population = rn(burg.population * populationRate * urbanization);
 
   function getMFCGlink(burg) {
     const {cells} = pack;

modules/ui/layers.js

@@ -1535,7 +1535,10 @@ function toggleMarkers(event) {
 
 function drawMarkers() {
   const rescale = +markers.attr("rescale");
-  const html = pack.markers.map(marker => drawMarker(marker, rescale));
+  const pinned = +markers.attr("pinned");
+
+  const markersData = pinned ? pack.markers.filter(({pinned}) => pinned) : pack.markers;
+  const html = markersData.map(marker => drawMarker(marker, rescale));
   markers.html(html.join(""));
 }
 

modules/ui/markers-overview.js

@@ -38,9 +38,9 @@ function overviewMarkers() {
 
     if (el.classList.contains("icon-pencil")) return openEditor(i);
     if (el.classList.contains("icon-dot-circled")) return focusOnMarker(i);
+    if (el.classList.contains("icon-pin")) return pinMarker(el, i);
     if (el.classList.contains("locks")) return toggleLockStatus(el, i);
     if (el.classList.contains("icon-trash-empty")) return triggerRemove(i);
-    // TODO: hidden attribute
   }
 
   function addLines() {
@@ -50,6 +50,7 @@ function overviewMarkers() {
         <div data-tip="Marker icon and type" style="width:12em">${icon} ${type}</div>
         <span style="padding-right:.1em" data-tip="Edit marker" class="icon-pencil"></span>
         <span style="padding-right:.1em" data-tip="Focus on marker position" class="icon-dot-circled pointer"></span>
+        <span style="padding-right:.1em" data-tip="Pin marker (display only pinned markers)" class="icon-pin inactive pointer"></span>
         <span style="padding-right:.1em" class="locks pointer ${lock ? "icon-lock" : "icon-lock-open inactive"}" onmouseover="showElementLockTip(event)"></span>
         <span data-tip="Remove marker" class="icon-trash-empty"></span>
       </div>`;
@@ -75,6 +76,20 @@ function overviewMarkers() {
     highlightElement(document.getElementById(`marker${i}`), 2);
   }
 
+  function pinMarker(el, i) {
+    const marker = pack.markers.find(marker => marker.i === i);
+    if (marker.pinned) {
+      delete marker.pinned;
+      const anyPinned = pack.markers.some(marker => marker.pinned);
+      if (!anyPinned) markerGroup.removeAttribute("pinned");
+    } else {
+      marker.pinned = true;
+      markerGroup.setAttribute("pinned", 1);
+    }
+    el.classList.toggle("inactive");
+    drawMarkers();
+  }
+
   function toggleLockStatus(el, i) {
     const marker = pack.markers.find(marker => marker.i === i);
     if (marker.lock) {

modules/ui/style.js

@@ -75,7 +75,11 @@ function selectStyleElement() {
   }
 
   // stroke color and width
-  if (["armies", "routes", "lakes", "borders", "cults", "relig", "cells", "coastline", "prec", "ice", "icons", "coordinates", "zones", "gridOverlay"].includes(sel)) {
+  if (
+    ["armies", "routes", "lakes", "borders", "cults", "relig", "cells", "coastline", "prec", "ice", "icons", "coordinates", "zones", "gridOverlay"].includes(
+      sel
+    )
+  ) {
     styleStroke.style.display = "block";
     styleStrokeInput.value = styleStrokeOutput.value = el.attr("stroke");
     styleStrokeWidth.style.display = "block";
@@ -784,12 +788,42 @@ function applyDefaultStyle() {
 
   biomes.attr("opacity", null).attr("filter", null).attr("mask", "url(#land)");
   ice.attr("opacity", 0.9).attr("fill", "#e8f0f6").attr("stroke", "#e8f0f6").attr("stroke-width", 1).attr("filter", "url(#dropShadow05)");
-  stateBorders.attr("opacity", 0.8).attr("stroke", "#56566d").attr("stroke-width", 1).attr("stroke-dasharray", "2").attr("stroke-linecap", "butt").attr("filter", null);
+  stateBorders
-  provinceBorders.attr("opacity", 0.8).attr("stroke", "#56566d").attr("stroke-width", 0.5).attr("stroke-dasharray", "0 2").attr("stroke-linecap", "round").attr("filter", null);
+    .attr("opacity", 0.8)
+    .attr("stroke", "#56566d")
+    .attr("stroke-width", 1)
+    .attr("stroke-dasharray", "2")
+    .attr("stroke-linecap", "butt")
+    .attr("filter", null);
+  provinceBorders
+    .attr("opacity", 0.8)
+    .attr("stroke", "#56566d")
+    .attr("stroke-width", 0.5)
+    .attr("stroke-dasharray", "0 2")
+    .attr("stroke-linecap", "round")
+    .attr("filter", null);
   cells.attr("opacity", null).attr("stroke", "#808080").attr("stroke-width", 0.1).attr("filter", null).attr("mask", null);
 
-  gridOverlay.attr("opacity", 0.8).attr("type", "pointyHex").attr("scale", 1).attr("dx", 0).attr("dy", 0).attr("stroke", "#777777").attr("stroke-width", 0.5).attr("stroke-dasharray", null).attr("filter", null).attr("mask", null);
+  gridOverlay
-  coordinates.attr("opacity", 1).attr("data-size", 12).attr("font-size", 12).attr("stroke", "#d4d4d4").attr("stroke-width", 1).attr("stroke-dasharray", 5).attr("filter", null).attr("mask", null);
+    .attr("opacity", 0.8)
+    .attr("type", "pointyHex")
+    .attr("scale", 1)
+    .attr("dx", 0)
+    .attr("dy", 0)
+    .attr("stroke", "#777777")
+    .attr("stroke-width", 0.5)
+    .attr("stroke-dasharray", null)
+    .attr("filter", null)
+    .attr("mask", null);
+  coordinates
+    .attr("opacity", 1)
+    .attr("data-size", 12)
+    .attr("font-size", 12)
+    .attr("stroke", "#d4d4d4")
+    .attr("stroke-width", 1)
+    .attr("stroke-dasharray", 5)
+    .attr("filter", null)
+    .attr("mask", null);
   compass.attr("opacity", 0.8).attr("transform", null).attr("filter", null).attr("mask", "url(#water)").attr("shape-rendering", "optimizespeed");
   if (!d3.select("#initial").size()) d3.select("#rose").attr("transform", "translate(80 80) scale(.25)");
 
@@ -810,26 +844,68 @@ function applyDefaultStyle() {
   lakes.select("#lava").attr("opacity", 0.7).attr("fill", "#90270d").attr("stroke", "#f93e0c").attr("stroke-width", 2).attr("filter", "url(#crumpled)");
   lakes.select("#dry").attr("opacity", 1).attr("fill", "#c9bfa7").attr("stroke", "#8e816f").attr("stroke-width", 0.7).attr("filter", null);
 
-  coastline.select("#sea_island").attr("opacity", 0.5).attr("stroke", "#1f3846").attr("stroke-width", 0.7).attr("auto-filter", 1).attr("filter", "url(#dropShadow)");
+  coastline
+    .select("#sea_island")
+    .attr("opacity", 0.5)
+    .attr("stroke", "#1f3846")
+    .attr("stroke-width", 0.7)
+    .attr("auto-filter", 1)
+    .attr("filter", "url(#dropShadow)");
   coastline.select("#lake_island").attr("opacity", 1).attr("stroke", "#7c8eaf").attr("stroke-width", 0.35).attr("filter", null);
 
   terrain.attr("opacity", null).attr("set", "simple").attr("size", 1).attr("density", 0.4).attr("filter", null).attr("mask", null);
   rivers.attr("opacity", null).attr("fill", "#5d97bb").attr("filter", null);
   ruler.attr("opacity", null).attr("filter", null);
 
-  roads.attr("opacity", 0.9).attr("stroke", "#d06324").attr("stroke-width", 0.7).attr("stroke-dasharray", "2").attr("stroke-linecap", "butt").attr("filter", null).attr("mask", null);
+  roads
-  trails.attr("opacity", 0.9).attr("stroke", "#d06324").attr("stroke-width", 0.25).attr("stroke-dasharray", ".8 1.6").attr("stroke-linecap", "butt").attr("filter", null).attr("mask", null);
+    .attr("opacity", 0.9)
-  searoutes.attr("opacity", 0.8).attr("stroke", "#ffffff").attr("stroke-width", 0.45).attr("stroke-dasharray", "1 2").attr("stroke-linecap", "round").attr("filter", null).attr("mask", null);
+    .attr("stroke", "#d06324")
+    .attr("stroke-width", 0.7)
+    .attr("stroke-dasharray", "2")
+    .attr("stroke-linecap", "butt")
+    .attr("filter", null)
+    .attr("mask", null);
+  trails
+    .attr("opacity", 0.9)
+    .attr("stroke", "#d06324")
+    .attr("stroke-width", 0.25)
+    .attr("stroke-dasharray", ".8 1.6")
+    .attr("stroke-linecap", "butt")
+    .attr("filter", null)
+    .attr("mask", null);
+  searoutes
+    .attr("opacity", 0.8)
+    .attr("stroke", "#ffffff")
+    .attr("stroke-width", 0.45)
+    .attr("stroke-dasharray", "1 2")
+    .attr("stroke-linecap", "round")
+    .attr("filter", null)
+    .attr("mask", null);
 
   statesBody.attr("opacity", 0.4).attr("filter", null);
   statesHalo.attr("data-width", 10).attr("stroke-width", 10).attr("opacity", 0.4).attr("filter", "blur(5px)");
 
   provs.attr("opacity", 0.7).attr("fill", "#000000").attr("font-family", "Georgia").attr("data-size", 10).attr("font-size", 10).attr("filter", null);
 
-  temperature.attr("opacity", null).attr("fill", "#000000").attr("stroke-width", 1.8).attr("fill-opacity", 0.3).attr("font-size", "8px").attr("stroke-dasharray", null).attr("filter", null).attr("mask", null);
+  temperature
+    .attr("opacity", null)
+    .attr("fill", "#000000")
+    .attr("stroke-width", 1.8)
+    .attr("fill-opacity", 0.3)
+    .attr("font-size", "8px")
+    .attr("stroke-dasharray", null)
+    .attr("filter", null)
+    .attr("mask", null);
   texture.attr("opacity", null).attr("filter", null).attr("mask", "url(#land)");
   texture.select("#textureImage").attr("x", 0).attr("y", 0);
-  zones.attr("opacity", 0.6).attr("stroke", "#333333").attr("stroke-width", 0).attr("stroke-dasharray", null).attr("stroke-linecap", "butt").attr("filter", null).attr("mask", null);
+  zones
+    .attr("opacity", 0.6)
+    .attr("stroke", "#333333")
+    .attr("stroke-width", 0)
+    .attr("stroke-dasharray", null)
+    .attr("stroke-linecap", "butt")
+    .attr("filter", null)
+    .attr("mask", null);
 
   // ocean and svg default style
   svg.attr("background-color", "#000000").attr("data-filter", null).attr("filter", null);
@@ -838,24 +914,95 @@ function applyDefaultStyle() {
   svg.select("#oceanicPattern").attr("href", "./images/pattern1.png").attr("opacity", 0.2);
 
   // heightmap style
-  terrs.attr("opacity", null).attr("filter", null).attr("mask", "url(#land)").attr("stroke", "none").attr("scheme", "bright").attr("terracing", 0).attr("skip", 5).attr("relax", 0).attr("curve", 0);
+  terrs
+    .attr("opacity", null)
+    .attr("filter", null)
+    .attr("mask", "url(#land)")
+    .attr("stroke", "none")
+    .attr("scheme", "bright")
+    .attr("terracing", 0)
+    .attr("skip", 5)
+    .attr("relax", 0)
+    .attr("curve", 0);
 
   // legend
-  legend.attr("font-family", "Almendra SC").attr("font-size", 13).attr("data-size", 13).attr("data-x", 99).attr("data-y", 93).attr("data-columns", 8).attr("stroke-width", 2.5).attr("stroke", "#812929").attr("stroke-dasharray", "0 4 10 4").attr("stroke-linecap", "round");
+  legend
+    .attr("font-family", "Almendra SC")
+    .attr("font-size", 13)
+    .attr("data-size", 13)
+    .attr("data-x", 99)
+    .attr("data-y", 93)
+    .attr("data-columns", 8)
+    .attr("stroke-width", 2.5)
+    .attr("stroke", "#812929")
+    .attr("stroke-dasharray", "0 4 10 4")
+    .attr("stroke-linecap", "round");
   legend.select("#legendBox").attr("fill", "#ffffff").attr("fill-opacity", 0.8);
 
   const citiesSize = Math.max(rn(8 - regionsInput.value / 20), 3);
-  burgLabels.select("#cities").attr("fill", "#3e3e4b").attr("opacity", 1).style("text-shadow", "white 0 0 4px").attr("font-family", "Almendra SC").attr("font-size", citiesSize).attr("data-size", citiesSize);
+  burgLabels
-  burgIcons.select("#cities").attr("opacity", 1).attr("size", 1).attr("stroke-width", 0.24).attr("fill", "#ffffff").attr("stroke", "#3e3e4b").attr("fill-opacity", 0.7).attr("stroke-dasharray", "").attr("stroke-linecap", "butt");
+    .select("#cities")
+    .attr("fill", "#3e3e4b")
+    .attr("opacity", 1)
+    .style("text-shadow", "white 0 0 4px")
+    .attr("font-family", "Almendra SC")
+    .attr("font-size", citiesSize)
+    .attr("data-size", citiesSize);
+  burgIcons
+    .select("#cities")
+    .attr("opacity", 1)
+    .attr("size", 1)
+    .attr("stroke-width", 0.24)
+    .attr("fill", "#ffffff")
+    .attr("stroke", "#3e3e4b")
+    .attr("fill-opacity", 0.7)
+    .attr("stroke-dasharray", "")
+    .attr("stroke-linecap", "butt");
   anchors.select("#cities").attr("opacity", 1).attr("fill", "#ffffff").attr("stroke", "#3e3e4b").attr("stroke-width", 1.2).attr("size", 2);
 
-  burgLabels.select("#towns").attr("fill", "#3e3e4b").attr("opacity", 1).style("text-shadow", "white 0 0 4px").attr("font-family", "Almendra SC").attr("font-size", 3).attr("data-size", 4);
+  burgLabels
-  burgIcons.select("#towns").attr("opacity", 1).attr("size", 0.5).attr("stroke-width", 0.12).attr("fill", "#ffffff").attr("stroke", "#3e3e4b").attr("fill-opacity", 0.7).attr("stroke-dasharray", "").attr("stroke-linecap", "butt");
+    .select("#towns")
+    .attr("fill", "#3e3e4b")
+    .attr("opacity", 1)
+    .style("text-shadow", "white 0 0 4px")
+    .attr("font-family", "Almendra SC")
+    .attr("font-size", 3)
+    .attr("data-size", 4);
+  burgIcons
+    .select("#towns")
+    .attr("opacity", 1)
+    .attr("size", 0.5)
+    .attr("stroke-width", 0.12)
+    .attr("fill", "#ffffff")
+    .attr("stroke", "#3e3e4b")
+    .attr("fill-opacity", 0.7)
+    .attr("stroke-dasharray", "")
+    .attr("stroke-linecap", "butt");
   anchors.select("#towns").attr("opacity", 1).attr("fill", "#ffffff").attr("stroke", "#3e3e4b").attr("stroke-width", 1.2).attr("size", 1);
 
   const stateLabelSize = Math.max(rn(24 - regionsInput.value / 6), 6);
-  labels.select("#states").attr("fill", "#3e3e4b").attr("opacity", 1).attr("stroke", "#3a3a3a").attr("stroke-width", 0).style("text-shadow", "white 0 0 4px").attr("font-family", "Almendra SC").attr("font-size", stateLabelSize).attr("data-size", stateLabelSize).attr("filter", null);
+  labels
-  labels.select("#addedLabels").attr("fill", "#3e3e4b").attr("opacity", 1).attr("stroke", "#3a3a3a").attr("stroke-width", 0).style("text-shadow", "white 0 0 4px").attr("font-family", "Almendra SC").attr("font-size", 18).attr("data-size", 18).attr("filter", null);
+    .select("#states")
+    .attr("fill", "#3e3e4b")
+    .attr("opacity", 1)
+    .attr("stroke", "#3a3a3a")
+    .attr("stroke-width", 0)
+    .style("text-shadow", "white 0 0 4px")
+    .attr("font-family", "Almendra SC")
+    .attr("font-size", stateLabelSize)
+    .attr("data-size", stateLabelSize)
+    .attr("filter", null);
+  labels
+    .select("#addedLabels")
+    .attr("fill", "#3e3e4b")
+    .attr("opacity", 1)
+    .attr("stroke", "#3a3a3a")
+    .attr("stroke-width", 0)
+    .style("text-shadow", "white 0 0 4px")
+    .attr("font-family", "Almendra SC")
+    .attr("font-size", 18)
+    .attr("data-size", 18)
+    .attr("filter", null);
 
   fogging.attr("opacity", 0.98).attr("fill", "#30426f");
   emblems.attr("opacity", 0.9).attr("stroke-width", 1).attr("filter", null);
@@ -887,6 +1034,10 @@ function applyStyle(style) {
 function changeStylePreset(preset) {
   if (customization) return tip("Please exit the customization mode first", false, "error");
 
+  if (sessionStorage.getItem("styleChangeWarningShown")) {
+    changeStyle();
+  } else {
+    sessionStorage.setItem("styleChangeWarningShown", true);
     alertMessage.innerHTML = "Are you sure you want to change the style preset? All unsaved style changes will be lost";
     $("#alert").dialog({
       resizable: false,
@@ -894,6 +1045,18 @@ function changeStylePreset(preset) {
       width: "23em",
       buttons: {
         Change: function () {
+          changeStyle();
+          $(this).dialog("close");
+        },
+        Cancel: function () {
+          stylePreset.value = stylePreset.dataset.old;
+          $(this).dialog("close");
+        }
+      }
+    });
+  }
+
+  function changeStyle() {
     const customPreset = localStorage.getItem(preset);
     if (customPreset) {
       if (JSON.isValid(customPreset)) applyStyle(JSON.parse(customPreset));
@@ -913,14 +1076,7 @@ function changeStylePreset(preset) {
     updateMapFilter();
     localStorage.setItem("presetStyle", preset); // save preset to use it onload
     stylePreset.dataset.old = stylePreset.value; // save current value
-        $(this).dialog("close");
-      },
-      Cancel: function () {
-        stylePreset.value = stylePreset.dataset.old;
-        $(this).dialog("close");
   }
-    }
-  });
 }
 
 function updateElements() {
@@ -1092,6 +1248,11 @@ function addStylePreset() {
     applyOption(stylePreset, preset, styleSaverName.value); // add option
     localStorage.setItem("presetStyle", preset); // mark preset as default
     localStorage.setItem(preset, styleSaverJSON.value); // save preset
+
+    applyStyle(JSON.parse(styleSaverJSON.value));
+    updateMapFilter();
+    invokeActiveZooming();
+
     $("#styleSaver").dialog("close");
     removeStyleButton.style.display = "inline-block";
     tip("Style preset is saved", false, "success", 4000);
@@ -1121,6 +1282,10 @@ function removeStylePreset() {
   localStorage.removeItem(stylePreset.value);
   stylePreset.selectedOptions[0].remove();
   removeStyleButton.style.display = "none";
+
+  applyDefaultStyle();
+  updateMapFilter();
+  invokeActiveZooming();
 }
 
 // GLOBAL FILTERS

modules/ui/tools.js

@@ -420,23 +420,11 @@ function regenerateIce() {
   drawIce();
 }
 
-function regenerateMarkers(event) {
+function regenerateMarkers() {
-  if (isCtrlClick(event)) prompt("Please provide markers number multiplier", {default: 1, step: 0.01, min: 0, max: 100}, v => addNumberOfMarkers(v));
+  Markers.regenerate();
-  else addNumberOfMarkers();
-
-  function addNumberOfMarkers(multiplier) {
-    pack.markers = pack.markers.filter(marker => {
-      if (marker.lock) return true;
-      document.getElementById(`marker${marker.i}`)?.remove();
-      const index = notes.findIndex(note => note.id === marker.id);
-      if (index != -1) notes.splice(index, 1);
-      return false;
-    });
-
-    Markers.regenerate(multiplier);
   turnButtonOn("toggleMarkers");
   drawMarkers();
-  }
+  if (document.getElementById("markersOverviewRefresh").offsetParent) markersOverviewRefresh.click();
 }
 
 function regenerateZones(event) {