diff --git a/modules/ui/style.js b/modules/ui/style.js
index 59e7f272..2a298f27 100644
--- a/modules/ui/style.js
+++ b/modules/ui/style.js
@@ -2,7 +2,7 @@
"use strict";
// store some style inputs as options
-styleElements.addEventListener("change", function(ev) {
+styleElements.addEventListener("change", function (ev) {
if (ev.target.dataset.stored) lock(ev.target.dataset.stored);
});
@@ -26,21 +26,24 @@ function editStyle(element, group) {
styleElementSelect.addEventListener("change", selectStyleElement);
function selectStyleElement() {
const sel = styleElementSelect.value;
- let el = d3.select("#"+sel);
+ let el = d3.select("#" + sel);
- styleElements.querySelectorAll("tbody").forEach(e => e.style.display = "none"); // hide all sections
+ styleElements.querySelectorAll("tbody").forEach(e => (e.style.display = "none")); // hide all sections
const off = sel !== "ocean" && (el.style("display") === "none" || !el.selectAll("*").size()); // check if layer is off
if (off) {
styleIsOff.style.display = "block";
- setTimeout(() => styleIsOff.style.display = "none", 1500);
+ setTimeout(() => (styleIsOff.style.display = "none"), 1500);
}
// active group element
const group = styleGroupSelect.value;
if (["routes", "labels", "coastline", "lakes", "anchors", "burgIcons", "borders"].includes(sel)) {
- el = d3.select("#"+sel).select("g#"+group).size()
- ? d3.select("#"+sel).select("g#"+group)
- : d3.select("#"+sel).select("g");
+ el = d3
+ .select("#" + sel)
+ .select("g#" + group)
+ .size()
+ ? d3.select("#" + sel).select("g#" + group)
+ : d3.select("#" + sel).select("g");
}
if (sel !== "landmass" && sel !== "legend") {
@@ -84,7 +87,7 @@ function selectStyleElement() {
// show specific sections
if (sel === "texture") styleTexture.style.display = "block";
- if (sel === "routes", "labels" || sel == "anchors" || sel == "burgIcons", "coastline", "lakes", "borders") styleGroup.style.display = "block";
+ if ((sel === "routes", "labels" || sel == "anchors" || sel == "burgIcons", "coastline", "lakes", "borders")) styleGroup.style.display = "block";
if (sel === "terrs") {
styleHeightmap.style.display = "block";
@@ -175,7 +178,7 @@ function selectStyleElement() {
styleRadius.style.display = "block";
styleFillInput.value = styleFillOutput.value = el.attr("fill") || "#ffffff";
styleStrokeInput.value = styleStrokeOutput.value = el.attr("stroke") || "#3e3e4b";
- styleStrokeWidthInput.value = styleStrokeWidthOutput.value = el.attr("stroke-width") || .24;
+ styleStrokeWidthInput.value = styleStrokeWidthOutput.value = el.attr("stroke-width") || 0.24;
styleStrokeDasharrayInput.value = el.attr("stroke-dasharray") || "";
styleStrokeLinecapInput.value = el.attr("stroke-linecap") || "inherit";
styleRadiusInput.value = el.attr("size") || 1;
@@ -188,7 +191,7 @@ function selectStyleElement() {
styleIconSize.style.display = "block";
styleFillInput.value = styleFillOutput.value = el.attr("fill") || "#ffffff";
styleStrokeInput.value = styleStrokeOutput.value = el.attr("stroke") || "#3e3e4b";
- styleStrokeWidthInput.value = styleStrokeWidthOutput.value = el.attr("stroke-width") || .24;
+ styleStrokeWidthInput.value = styleStrokeWidthOutput.value = el.attr("stroke-width") || 0.24;
styleIconSizeInput.value = el.attr("size") || 2;
}
@@ -205,7 +208,7 @@ function selectStyleElement() {
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") || .5;
+ styleStrokeWidthInput.value = styleStrokeWidthOutput.value = el.attr("stroke-width") || 0.5;
styleSelectFont.value = fonts.indexOf(el.attr("data-font"));
styleInputFont.style.display = "none";
styleInputFont.value = "";
@@ -224,9 +227,9 @@ function selectStyleElement() {
styleStrokeWidth.style.display = "block";
styleTemperature.style.display = "block";
styleStrokeWidthInput.value = styleStrokeWidthOutput.value = el.attr("stroke-width") || "";
- styleTemperatureFillOpacityInput.value = styleTemperatureFillOpacityOutput.value = el.attr("fill-opacity") || .1;
+ styleTemperatureFillOpacityInput.value = styleTemperatureFillOpacityOutput.value = el.attr("fill-opacity") || 0.1;
styleTemperatureFillInput.value = styleTemperatureFillOutput.value = el.attr("fill") || "#000";
- styleTemperatureFontSizeInput.value = styleTemperatureFontSizeOutput.value = el.attr("font-size") || "8px";;
+ styleTemperatureFontSizeInput.value = styleTemperatureFontSizeOutput.value = el.attr("font-size") || "8px";
}
if (sel === "coordinates") {
@@ -249,11 +252,14 @@ function selectStyleElement() {
// update group options
styleGroupSelect.options.length = 0; // remove all options
if (["routes", "labels", "coastline", "lakes", "anchors", "burgIcons", "borders"].includes(sel)) {
- document.getElementById(sel).querySelectorAll("g").forEach(el => {
- if (el.id === "burgLabels") return;
- const count = el.childElementCount;
- styleGroupSelect.options.add(new Option(`${el.id} (${count})`, el.id, false, false));
- });
+ document
+ .getElementById(sel)
+ .querySelectorAll("g")
+ .forEach(el => {
+ if (el.id === "burgLabels") return;
+ const count = el.childElementCount;
+ styleGroupSelect.options.add(new Option(`${el.id} (${count})`, el.id, false, false));
+ });
styleGroupSelect.value = el.attr("id");
} else {
styleGroupSelect.options.add(new Option(sel, sel, false, true));
@@ -261,85 +267,92 @@ function selectStyleElement() {
if (sel === "coastline" && styleGroupSelect.value === "sea_island") {
styleCoastline.style.display = "block";
- const auto = styleCoastlineAuto.checked = coastline.select("#sea_island").attr("auto-filter");
+ const auto = (styleCoastlineAuto.checked = coastline.select("#sea_island").attr("auto-filter"));
if (auto) styleFilter.style.display = "none";
}
-
}
// Handle style inputs change
styleGroupSelect.addEventListener("change", selectStyleElement);
function getEl() {
- const el = styleElementSelect.value, g = styleGroupSelect.value;
- if (g === el) return svg.select("#"+el); else return svg.select("#"+el).select("#"+g);
+ const el = styleElementSelect.value,
+ g = styleGroupSelect.value;
+ if (g === el) return svg.select("#" + el);
+ else return svg.select("#" + el).select("#" + g);
}
-styleFillInput.addEventListener("input", function() {
+styleFillInput.addEventListener("input", function () {
styleFillOutput.value = this.value;
- getEl().attr('fill', this.value);
+ getEl().attr("fill", this.value);
});
-styleStrokeInput.addEventListener("input", function() {
+styleStrokeInput.addEventListener("input", function () {
styleStrokeOutput.value = this.value;
- getEl().attr('stroke', this.value);
+ getEl().attr("stroke", this.value);
if (styleElementSelect.value === "gridOverlay" && layerIsOn("toggleGrid")) drawGrid();
});
-styleStrokeWidthInput.addEventListener("input", function() {
+styleStrokeWidthInput.addEventListener("input", function () {
styleStrokeWidthOutput.value = this.value;
- getEl().attr('stroke-width', +this.value);
+ getEl().attr("stroke-width", +this.value);
if (styleElementSelect.value === "gridOverlay" && layerIsOn("toggleGrid")) drawGrid();
});
-styleStrokeDasharrayInput.addEventListener("input", function() {
- getEl().attr('stroke-dasharray', this.value);
+styleStrokeDasharrayInput.addEventListener("input", function () {
+ getEl().attr("stroke-dasharray", this.value);
if (styleElementSelect.value === "gridOverlay" && layerIsOn("toggleGrid")) drawGrid();
});
-styleStrokeLinecapInput.addEventListener("change", function() {
- getEl().attr('stroke-linecap', this.value);
+styleStrokeLinecapInput.addEventListener("change", function () {
+ getEl().attr("stroke-linecap", this.value);
if (styleElementSelect.value === "gridOverlay" && layerIsOn("toggleGrid")) drawGrid();
});
-styleOpacityInput.addEventListener("input", function() {
+styleOpacityInput.addEventListener("input", function () {
styleOpacityOutput.value = this.value;
- getEl().attr('opacity', this.value);
+ getEl().attr("opacity", this.value);
});
-styleFilterInput.addEventListener("change", function() {
+styleFilterInput.addEventListener("change", function () {
if (styleGroupSelect.value === "ocean") {
- oceanLayers.attr('filter', this.value);
+ oceanLayers.attr("filter", this.value);
return;
}
- getEl().attr('filter', this.value);
+ getEl().attr("filter", this.value);
});
-styleTextureInput.addEventListener("change", function() {
+styleTextureInput.addEventListener("change", function () {
if (this.value === "none") texture.select("image").attr("xlink:href", "");
if (this.value === "default") texture.select("image").attr("xlink:href", getDefaultTexture());
else getBase64(this.value, base64 => texture.select("image").attr("xlink:href", base64));
});
-styleTextureShiftX.addEventListener("input", function() {
- texture.select("image").attr("x", this.value).attr("width", graphWidth - this.valueAsNumber);
+styleTextureShiftX.addEventListener("input", function () {
+ texture
+ .select("image")
+ .attr("x", this.value)
+ .attr("width", graphWidth - this.valueAsNumber);
});
-styleTextureShiftY.addEventListener("input", function() {
- texture.select("image").attr("y", this.value).attr("height", graphHeight - this.valueAsNumber);
+styleTextureShiftY.addEventListener("input", function () {
+ texture
+ .select("image")
+ .attr("y", this.value)
+ .attr("height", graphHeight - this.valueAsNumber);
});
-styleClippingInput.addEventListener("change", function() {
- getEl().attr('mask', this.value);
+styleClippingInput.addEventListener("change", function () {
+ getEl().attr("mask", this.value);
});
-styleGridType.addEventListener("change", function() {
+styleGridType.addEventListener("change", function () {
getEl().attr("type", this.value);
if (layerIsOn("toggleGrid")) drawGrid();
calculateFriendlyGridSize();
});
-styleGridScale.addEventListener("input", function() {
+styleGridScale.addEventListener("input", function () {
getEl().attr("scale", this.value);
if (layerIsOn("toggleGrid")) drawGrid();
calculateFriendlyGridSize();
@@ -351,12 +364,12 @@ function calculateFriendlyGridSize() {
styleGridSizeFriendly.value = friendly;
}
-styleGridShiftX.addEventListener("input", function() {
+styleGridShiftX.addEventListener("input", function () {
getEl().attr("dx", this.value);
if (layerIsOn("toggleGrid")) drawGrid();
});
-styleGridShiftY.addEventListener("input", function() {
+styleGridShiftY.addEventListener("input", function () {
getEl().attr("dy", this.value);
if (layerIsOn("toggleGrid")) drawGrid();
});
@@ -370,77 +383,77 @@ function shiftElement() {
getEl().attr("transform", `translate(${x},${y})`);
}
-styleRescaleMarkers.addEventListener("change", function() {
+styleRescaleMarkers.addEventListener("change", function () {
markers.attr("rescale", +this.checked);
invokeActiveZooming();
});
-styleCoastlineAuto.addEventListener("change", function() {
+styleCoastlineAuto.addEventListener("change", function () {
coastline.select("#sea_island").attr("auto-filter", +this.checked);
styleFilter.style.display = this.checked ? "none" : "block";
invokeActiveZooming();
});
-styleOceanFill.addEventListener("input", function() {
+styleOceanFill.addEventListener("input", function () {
oceanLayers.select("rect").attr("fill", this.value);
styleOceanFillOutput.value = this.value;
});
-styleOceanPattern.addEventListener("change", function() {
+styleOceanPattern.addEventListener("change", function () {
document.getElementById("oceanicPattern")?.setAttribute("href", this.value);
});
-styleOceanPatternOpacity.addEventListener("input", function() {
+styleOceanPatternOpacity.addEventListener("input", function () {
document.getElementById("oceanPattern").setAttribute("opacity", this.value);
styleOceanPatternOpacityOutput.value = this.value;
});
-outlineLayers.addEventListener("change", function() {
+outlineLayers.addEventListener("change", function () {
oceanLayers.selectAll("path").remove();
oceanLayers.attr("layers", this.value);
OceanLayers();
});
-styleHeightmapScheme.addEventListener("change", function() {
+styleHeightmapScheme.addEventListener("change", function () {
terrs.attr("scheme", this.value);
drawHeightmap();
});
-styleHeightmapTerracing.addEventListener("input", function() {
+styleHeightmapTerracing.addEventListener("input", function () {
styleHeightmapTerracingOutput.value = this.value;
terrs.attr("terracing", this.value);
drawHeightmap();
});
-styleHeightmapSkip.addEventListener("input", function() {
+styleHeightmapSkip.addEventListener("input", function () {
styleHeightmapSkipOutput.value = this.value;
terrs.attr("skip", this.value);
drawHeightmap();
});
-styleHeightmapSimplification.addEventListener("input", function() {
+styleHeightmapSimplification.addEventListener("input", function () {
styleHeightmapSimplificationOutput.value = this.value;
terrs.attr("relax", this.value);
drawHeightmap();
});
-styleHeightmapCurve.addEventListener("change", function() {
+styleHeightmapCurve.addEventListener("change", function () {
terrs.attr("curve", this.value);
drawHeightmap();
});
-styleReliefSet.addEventListener("change", function() {
+styleReliefSet.addEventListener("change", function () {
terrain.attr("set", this.value);
ReliefIcons();
if (!layerIsOn("toggleRelief")) toggleRelief();
});
-styleReliefSizeInput.addEventListener("change", function() {
+styleReliefSizeInput.addEventListener("change", function () {
styleReliefSizeOutput.value = this.value;
const size = +this.value;
terrain.attr("size", size);
- terrain.selectAll("use").each(function(d) {
+ terrain.selectAll("use").each(function (d) {
const newSize = this.getAttribute("data-size") * size;
const shift = (newSize - +this.getAttribute("width")) / 2;
this.setAttribute("width", newSize);
@@ -452,39 +465,39 @@ styleReliefSizeInput.addEventListener("change", function() {
});
});
-styleReliefDensityInput.addEventListener("input", function() {
+styleReliefDensityInput.addEventListener("input", function () {
terrain.attr("density", this.value);
styleReliefDensityOutput.value = this.value;
ReliefIcons();
if (!layerIsOn("toggleRelief")) toggleRelief();
});
-styleTemperatureFillOpacityInput.addEventListener("input", function() {
+styleTemperatureFillOpacityInput.addEventListener("input", function () {
temperature.attr("fill-opacity", this.value);
styleTemperatureFillOpacityOutput.value = this.value;
});
-styleTemperatureFontSizeInput.addEventListener("input", function() {
+styleTemperatureFontSizeInput.addEventListener("input", function () {
temperature.attr("font-size", this.value + "px");
styleTemperatureFontSizeOutput.value = this.value + "px";
});
-styleTemperatureFillInput.addEventListener("input", function() {
+styleTemperatureFillInput.addEventListener("input", function () {
temperature.attr("fill", this.value);
styleTemperatureFillOutput.value = this.value;
});
-stylePopulationRuralStrokeInput.addEventListener("input", function() {
+stylePopulationRuralStrokeInput.addEventListener("input", function () {
population.select("#rural").attr("stroke", this.value);
stylePopulationRuralStrokeOutput.value = this.value;
});
-stylePopulationUrbanStrokeInput.addEventListener("input", function() {
+stylePopulationUrbanStrokeInput.addEventListener("input", function () {
population.select("#urban").attr("stroke", this.value);
stylePopulationUrbanStrokeOutput.value = this.value;
});
-styleCompassSizeInput.addEventListener("input", function() {
+styleCompassSizeInput.addEventListener("input", function () {
styleCompassSizeOutput.value = this.value;
shiftCompass();
});
@@ -497,18 +510,18 @@ function shiftCompass() {
compass.select("use").attr("transform", tr);
}
-styleLegendColItems.addEventListener("input", function() {
+styleLegendColItems.addEventListener("input", function () {
styleLegendColItemsOutput.value = this.value;
legend.select("#legendBox").attr("data-columns", this.value);
redrawLegend();
});
-styleLegendBack.addEventListener("input", function() {
+styleLegendBack.addEventListener("input", function () {
styleLegendBackOutput.value = this.value;
legend.select("#legendBox").attr("fill", this.value);
});
-styleLegendOpacity.addEventListener("input", function() {
+styleLegendOpacity.addEventListener("input", function () {
styleLegendOpacityOutput.value = this.value;
legend.select("#legendBox").attr("fill-opacity", this.value);
});
@@ -516,12 +529,12 @@ styleLegendOpacity.addEventListener("input", function() {
styleSelectFont.addEventListener("change", changeFont);
function changeFont() {
const value = styleSelectFont.value;
- const font = fonts[value].split(':')[0].replace(/\+/g, " ");
+ const font = fonts[value].split(":")[0].replace(/\+/g, " ");
getEl().attr("font-family", font).attr("data-font", fonts[value]);
if (styleElementSelect.value === "legend") redrawLegend();
}
-styleFontAdd.addEventListener("click", function() {
+styleFontAdd.addEventListener("click", function () {
if (styleInputFont.style.display === "none") {
styleInputFont.style.display = "inline-block";
styleInputFont.focus();
@@ -532,29 +545,32 @@ styleFontAdd.addEventListener("click", function() {
}
});
-styleInputFont.addEventListener("change", function() {
- if (!this.value) {tip("Please provide a valid Google font name or link to a @font-face declaration"); return;}
+styleInputFont.addEventListener("change", function () {
+ if (!this.value) {
+ tip("Please provide a valid Google font name or link to a @font-face declaration");
+ return;
+ }
fetchFonts(this.value).then(fetched => {
if (!fetched) return;
styleFontAdd.click();
styleInputFont.value = "";
if (fetched !== 1) return;
- styleSelectFont.value = fonts.length-1;
+ styleSelectFont.value = fonts.length - 1;
changeFont(); // auto-change font if 1 font is fetched
});
});
-styleFontSize.addEventListener("change", function() {
+styleFontSize.addEventListener("change", function () {
changeFontSize(+this.value);
});
-styleFontPlus.addEventListener("click", function() {
+styleFontPlus.addEventListener("click", function () {
const size = Math.max(rn(getEl().attr("data-size") * 1.1, 2), 1);
changeFontSize(size);
});
-styleFontMinus.addEventListener("click", function() {
- const size = Math.max(rn(getEl().attr("data-size") * .9, 2), 1);
+styleFontMinus.addEventListener("click", function () {
+ const size = Math.max(rn(getEl().attr("data-size") * 0.9, 2), 1);
changeFontSize(size);
});
@@ -562,83 +578,90 @@ function changeFontSize(size) {
const legend = styleElementSelect.value === "legend";
const coords = styleElementSelect.value === "coordinates";
- const desSize = legend ? size : coords ? rn(size / scale ** .8, 2) : rn(size + (size / scale));
+ const desSize = legend ? size : coords ? rn(size / scale ** 0.8, 2) : rn(size + size / scale);
getEl().attr("data-size", size).attr("font-size", desSize);
styleFontSize.value = size;
if (legend) redrawLegend();
}
-styleRadiusInput.addEventListener("change", function() {
+styleRadiusInput.addEventListener("change", function () {
changeRadius(+this.value);
});
-styleRadiusPlus.addEventListener("click", function() {
- const size = Math.max(rn(getEl().attr("size") * 1.1, 2), .2);
+styleRadiusPlus.addEventListener("click", function () {
+ const size = Math.max(rn(getEl().attr("size") * 1.1, 2), 0.2);
changeRadius(size);
});
-styleRadiusMinus.addEventListener("click", function() {
- const size = Math.max(rn(getEl().attr("size") * .9, 2), .2);
+styleRadiusMinus.addEventListener("click", function () {
+ const size = Math.max(rn(getEl().attr("size") * 0.9, 2), 0.2);
changeRadius(size);
});
function changeRadius(size, group) {
- const el = group ? burgIcons.select("#"+group) : getEl();
+ const el = group ? burgIcons.select("#" + group) : getEl();
const g = el.attr("id");
- el.attr("size", size)
- el.selectAll("circle").each(function() {this.setAttribute("r", size)});
+ el.attr("size", size);
+ el.selectAll("circle").each(function () {
+ this.setAttribute("r", size);
+ });
styleRadiusInput.value = size;
- burgLabels.select("g#"+g).selectAll("text").each(function() {this.setAttribute("dy", `${size * -1.5}px`)});
+ burgLabels
+ .select("g#" + g)
+ .selectAll("text")
+ .each(function () {
+ this.setAttribute("dy", `${size * -1.5}px`);
+ });
changeIconSize(size * 2, g); // change also anchor icons
}
-styleIconSizeInput.addEventListener("change", function() {
+styleIconSizeInput.addEventListener("change", function () {
changeIconSize(+this.value);
});
-styleIconSizePlus.addEventListener("click", function() {
- const size = Math.max(rn(getEl().attr("size") * 1.1, 2), .2);
+styleIconSizePlus.addEventListener("click", function () {
+ const size = Math.max(rn(getEl().attr("size") * 1.1, 2), 0.2);
changeIconSize(size);
});
-styleIconSizeMinus.addEventListener("click", function() {
- const size = Math.max(rn(getEl().attr("size") * .9, 2), .2);
+styleIconSizeMinus.addEventListener("click", function () {
+ const size = Math.max(rn(getEl().attr("size") * 0.9, 2), 0.2);
changeIconSize(size);
});
function changeIconSize(size, group) {
- const el = group ? anchors.select("#"+group) : getEl();
+ const el = group ? anchors.select("#" + group) : getEl();
const oldSize = +el.attr("size");
const shift = (size - oldSize) / 2;
el.attr("size", size);
- el.selectAll("use").each(function() {
+ el.selectAll("use").each(function () {
const x = +this.getAttribute("x");
const y = +this.getAttribute("y");
this.setAttribute("x", x - shift);
this.setAttribute("y", y - shift);
this.setAttribute("width", size);
this.setAttribute("height", size);
- });;
+ });
styleIconSizeInput.value = size;
}
-styleStatesHaloWidth.addEventListener("input", function() {
+styleStatesHaloWidth.addEventListener("input", function () {
styleStatesHaloWidthOutput.value = this.value;
statesHalo.attr("data-width", this.value).attr("stroke-width", this.value);
});
-styleStatesHaloOpacity.addEventListener("input", function() {
+styleStatesHaloOpacity.addEventListener("input", function () {
styleStatesHaloOpacityOutput.value = this.value;
statesHalo.attr("opacity", this.value);
});
-styleArmiesFillOpacity.addEventListener("input", function() {
+styleArmiesFillOpacity.addEventListener("input", function () {
armies.attr("fill-opacity", this.value);
styleArmiesFillOpacityOutput.value = this.value;
});
-styleArmiesSize.addEventListener("input", function() {
- armies.attr("box-size", this.value).attr("font-size", this.value*2);
+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 => {
@@ -656,11 +679,17 @@ function textureProvideURL() {
alertMessage.innerHTML = `Provide an image URL to be used as a texture:
`;
- $("#alert").dialog({resizable: false, title: "Load custom texture", width: "26em",
+ $("#alert").dialog({
+ resizable: false,
+ title: "Load custom texture",
+ width: "26em",
buttons: {
- Apply: function() {
+ Apply: function () {
const name = textureURL.value.split("/").pop();
- if (!name || name === "") {tip("Please provide a valid URL", false, "error"); return;}
+ if (!name || name === "") {
+ tip("Please provide a valid URL", false, "error");
+ return;
+ }
const opt = document.createElement("option");
opt.value = textureURL.value;
opt.text = name.slice(0, 20);
@@ -670,7 +699,9 @@ function textureProvideURL() {
zoom.scaleBy(svg, 1.00001); // enforce browser re-draw
$(this).dialog("close");
},
- Cancel: function() {$(this).dialog("close");}
+ Cancel: function () {
+ $(this).dialog("close");
+ }
}
});
}
@@ -689,10 +720,10 @@ function fetchTextureURL(url) {
const defaultStyles = {
styleAncient: `{"#map":{"background-color":"#000000","filter":"url(#filter-sepia)","data-filter":"sepia"},"#armies":{"font-size":6,"box-size":3,"stroke":"#000","stroke-width":0.05,"opacity":0.8,"fill-opacity":0.8,"filter":null},"#biomes":{"opacity":null,"filter":null,"mask":null},"#stateBorders":{"opacity":0.8,"stroke":"#56566d","stroke-width":1,"stroke-dasharray":2,"stroke-linecap":"butt","filter":null},"#provinceBorders":{"opacity":0.8,"stroke":"#56566d","stroke-width":0.2,"stroke-dasharray":1,"stroke-linecap":"butt","filter":null},"#cells":{"opacity":null,"stroke":"#808080","stroke-width":0.1,"filter":null,"mask":null},"#gridOverlay":{"opacity":0.8,"scale":1,"dx":0,"dy":"0","type":"pointyHex","stroke":"#808080","stroke-width":0.5,"stroke-dasharray":null,"stroke-linecap":null,"transform":null,"filter":null,"mask":null},"#coordinates":{"opacity":1,"data-size":12,"font-size":12,"stroke":"#d4d4d4","stroke-width":1,"stroke-dasharray":5,"stroke-linecap":null,"filter":null,"mask":null},"#compass":{"opacity":0.8,"transform":null,"filter":null,"mask":"url(#water)","shape-rendering":"optimizespeed"},"#rose":{"transform":"translate(80 80) scale(.25)"},"#relig":{"opacity":0.7,"stroke":"#404040","stroke-width":0.7,"filter":null},"#cults":{"opacity":0.6,"stroke":"#777777","stroke-width":0.5,"stroke-dasharray":null,"stroke-linecap":null,"filter":null},"#landmass":{"opacity":1,"fill":"#eee9d7","filter":null},"#markers":{"opacity":null,"rescale":1,"filter":"url(#dropShadow01)"},"#prec":{"opacity":null,"stroke":"#000000","stroke-width":0.1,"fill":"#003dff","filter":null},"#population":{"opacity":null,"stroke-width":1.6,"stroke-dasharray":null,"stroke-linecap":"butt","filter":null},"#rural":{"stroke":"#0000ff"},"#urban":{"stroke":"#ff0000"},"#freshwater":{"opacity":0.5,"fill":"#a6c1fd","stroke":"#5f799d","stroke-width":0.7,"filter":null},"#salt":{"opacity":0.5,"fill":"#409b8a","stroke":"#388985","stroke-width":0.7,"filter":null},"#sinkhole":{"opacity":1,"fill":"#5bc9fd","stroke":"#53a3b0","stroke-width":0.7,"filter":null},"#frozen":{"opacity":0.95,"fill":"#cdd4e7","stroke":"#cfe0eb","stroke-width":0,"filter":null},"#lava":{"opacity":0.7,"fill":"#90270d","stroke":"#f93e0c","stroke-width":2,"filter":"url(#crumpled)"},"#dry":{"opacity":0.7,"fill":"#c9bfa7","stroke":"#8e816f","stroke-width":0.7,"filter":null},"#sea_island":{"opacity":0.5,"stroke":"#1f3846","stroke-width":0.7,"filter":"url(#dropShadow)","auto-filter":1},"#lake_island":{"opacity":1,"stroke":"#7c8eaf","stroke-width":0.35,"filter":null},"#terrain":{"opacity":null,"set":"simple","size":1,"density":0.4,"filter":null,"mask":null},"#rivers":{"opacity":null,"filter":null,"fill":"#5d97bb"},"#ruler":{"opacity":null,"filter":null},"#roads":{"opacity":0.8,"stroke":"#2e1607","stroke-width":1.23,"stroke-dasharray":3,"stroke-linecap":"inherit","filter":null,"mask":null},"#trails":{"opacity":0.8,"stroke":"#331809","stroke-width":0.5,"stroke-dasharray":"1 2","stroke-linecap":"butt","filter":null,"mask":null},"#searoutes":{"opacity":0.8,"stroke":"#ffffff","stroke-width":0.8,"stroke-dasharray":"1 2","stroke-linecap":"round","filter":null,"mask":null},"#regions":{"opacity":0.4,"filter":""},"#statesHalo":{"opacity":1,"data-width":10,"stroke-width":10},"#provs":{"opacity":0.7,"fill":"#000000","data-size":10,"font-size":10,"font-family":"Georgia","data-font":"Georgia","filter":null},"#temperature":{"opacity":null,"font-size":"8px","fill":"#000000","fill-opacity":0.3,"stroke":null,"stroke-width":1.8,"stroke-dasharray":null,"stroke-linecap":null,"filter":null},"#ice":{"opacity":0.8,"fill":"#e8f0f6","stroke":"#e8f0f6","stroke-width":1,"filter":"url(#outline)"},"#emblems":{"opacity":0.6,"stroke-width":0.8,"filter":"url(#dropShadow05)"},"#texture":{"opacity":null,"filter":null,"mask":"url(#land)"},"#textureImage":{},"#zones":{"opacity":0.6,"stroke":"#333333","stroke-width":0,"stroke-dasharray":null,"stroke-linecap":"butt","filter":null,"mask":null},"#ocean":{"opacity":1},"#oceanLayers":{"filter":"url(#blur5)","layers":"-6,-4,-2"},"#oceanBase":{"fill":"#a7a01f"},"#oceanPattern":{"opacity":0.2},"#oceanicPattern":{"href":"./images/pattern1.png"},"#terrs":{"opacity":null,"scheme":"light","terracing":0,"skip":0,"relax":0,"curve":0,"filter":null,"mask":"url(#land)"},"#legend":{"data-size":13,"font-size":13,"data-font":"Almendra+SC","font-family":"Almendra SC","stroke":"#812929","stroke-width":2.5,"stroke-dasharray":"0 4 10 4","stroke-linecap":"round","data-x":99,"data-y":93,"data-columns":8},"#legendBox":{},"#burgLabels > #cities":{"opacity":1,"fill":"#3e3e4b","data-size":8,"font-size":8,"data-font":"Almendra+SC","font-family":"Almendra SC"},"#burgIcons > #cities":{"opacity":1,"fill":"#fdfab9","fill-opacity":0.7,"size":1,"stroke":"#54251d","stroke-width":0.3,"stroke-dasharray":".3 .4","stroke-linecap":"butt"},"#anchors > #cities":{"opacity":1,"fill":"#ffffff","size":2,"stroke":"#3e3e4b","stroke-width":1.2},"#burgLabels > #towns":{"opacity":1,"fill":"#3e3e4b","data-size":4,"font-size":4,"data-font":"Almendra+SC","font-family":"Almendra SC"},"#burgIcons > #towns":{"opacity":1,"fill":"#fef4d8","fill-opacity":0.7,"size":0.5,"stroke":"#463124","stroke-width":0.12,"stroke-dasharray":"","stroke-linecap":"butt"},"#anchors > #towns":{"opacity":1,"fill":"#ffffff","size":1,"stroke":"#3e3e4b","stroke-width":1.2},"#labels > #states":{"opacity":1,"fill":"#3e3e4b","stroke":"#3a3a3a","stroke-width":0,"data-size":22,"font-size":22,"data-font":"Almendra+SC","font-family":"Almendra SC","filter":null},"#labels > #addedLabels":{"opacity":1,"fill":"#3e3e4b","stroke":"#3a3a3a","stroke-width":0,"data-size":18,"font-size":18,"data-font":"Almendra+SC","font-family":"Almendra SC","filter":null},"#fogging":{"opacity":0.98,"fill":"#30426f","filter":null}}`,
- styleGloom: `{"#map":{"background-color":"#000000","filter":null,"data-filter":null},"#armies":{"font-size":6,"box-size":3,"stroke":"#000","stroke-width":0.3,"opacity":1,"fill-opacity":1,"filter":null},"#biomes":{"opacity":null,"filter":"url(#blur5)","mask":"url(#land)"},"#stateBorders":{"opacity":1,"stroke":"#56566d","stroke-width":1,"stroke-dasharray":2,"stroke-linecap":"butt","filter":""},"#provinceBorders":{"opacity":1,"stroke":"#56566d","stroke-width":0.3,"stroke-dasharray":".7 1","stroke-linecap":"butt","filter":null},"#cells":{"opacity":null,"stroke":"#808080","stroke-width":0.1,"filter":null,"mask":null},"#gridOverlay":{"opacity":0.8,"scale":1,"dx":0,"dy":"0","type":"pointyHex","stroke":"#808080","stroke-width":0.5,"stroke-dasharray":null,"stroke-linecap":null,"transform":null,"filter":null,"mask":null},"#coordinates":{"opacity":1,"data-size":14,"font-size":14,"stroke":"#4a4a4a","stroke-width":1,"stroke-dasharray":6,"stroke-linecap":null,"filter":"","mask":""},"#compass":{"opacity":0.6,"transform":null,"filter":null,"mask":"url(#water)","shape-rendering":"optimizespeed"},"#rose":{"transform":"translate(100 100) scale(0.3)"},"#relig":{"opacity":0.7,"stroke":"#404040","stroke-width":1,"filter":null},"#cults":{"opacity":0.7,"stroke":"#777777","stroke-width":1.5,"stroke-dasharray":null,"stroke-linecap":null,"filter":null},"#landmass":{"opacity":1,"fill":"#e0e0e0","filter":null},"#markers":{"opacity":0.8,"rescale":1,"filter":"url(#dropShadow05)"},"#prec":{"opacity":null,"stroke":"#000000","stroke-width":0.1,"fill":"#003dff","filter":null},"#population":{"opacity":null,"stroke-width":1.6,"stroke-dasharray":null,"stroke-linecap":"butt","filter":null},"#rural":{"stroke":"#0000aa"},"#urban":{"stroke":"#9d0000"},"#freshwater":{"opacity":0.5,"fill":"#a6c1fd","stroke":"#5f799d","stroke-width":0.7,"filter":null},"#salt":{"opacity":0.5,"fill":"#409b8a","stroke":"#388985","stroke-width":0.7,"filter":null},"#sinkhole":{"opacity":1,"fill":"#5bc9fd","stroke":"#53a3b0","stroke-width":0.7,"filter":null},"#frozen":{"opacity":0.95,"fill":"#cdd4e7","stroke":"#cfe0eb","stroke-width":0,"filter":null},"#lava":{"opacity":0.7,"fill":"#90270d","stroke":"#f93e0c","stroke-width":2,"filter":"url(#crumpled)"},"#dry":{"opacity":0.7,"fill":"#c9bfa7","stroke":"#8e816f","stroke-width":0.7,"filter":null},"#sea_island":{"opacity":0.6,"stroke":"#1f3846","stroke-width":0.7,"filter":"url(#dropShadow)","auto-filter":1},"#lake_island":{"opacity":1,"stroke":"#7c8eaf","stroke-width":0.35,"filter":null},"#terrain":{"opacity":0.9,"set":"simple","size":1,"density":0.4,"filter":null,"mask":null},"#rivers":{"opacity":null,"filter":"","fill":"#779582"},"#ruler":{"opacity":null,"filter":null},"#roads":{"opacity":1,"stroke":"#8b4418","stroke-width":0.9,"stroke-dasharray":"2 3","stroke-linecap":"round","filter":"","mask":null},"#trails":{"opacity":1,"stroke":"#844017","stroke-width":0.2,"stroke-dasharray":".5 1","stroke-linecap":"round","filter":null,"mask":null},"#searoutes":{"opacity":0.8,"stroke":"#5e1865","stroke-width":0.6,"stroke-dasharray":"1.2 2.4","stroke-linecap":"round","filter":null,"mask":null},"#regions":{"opacity":0.4,"filter":"url(#dropShadow)"},"#statesHalo":{"opacity":1,"data-width":10.2,"stroke-width":10.2},"#provs":{"opacity":0.7,"fill":"#000000","data-size":10,"font-size":10,"font-family":"Georgia","data-font":"Georgia","filter":null},"#temperature":{"opacity":1,"font-size":"11px","fill":"#62001b","fill-opacity":0.3,"stroke":null,"stroke-width":2,"stroke-dasharray":2,"stroke-linecap":null,"filter":null},"#ice":{"opacity":0.9,"fill":"#e8f0f6","stroke":"#e8f0f6","stroke-width":1,"filter":"url(#dropShadow05)"},"#emblems": {"opacity":0.6,"stroke-width":0.5,"filter":null},"#texture":{"opacity":null,"filter":null,"mask":"url(#land)"},"#textureImage":{"x":0,"y":0},"#zones":{"opacity":0.5,"stroke":"#333333","stroke-width":0,"stroke-dasharray":null,"stroke-linecap":"butt","filter":"url(#dropShadow01)","mask":null},"#ocean":{"opacity":1},"#oceanLayers":{"filter":null,"layers":"-6,-4,-2"},"#oceanBase":{"fill":"#4e6964"},"#oceanPattern":{"opacity":0.2},"#oceanicPattern":{"href":"./images/pattern3.jpg"},"#terrs":{"opacity":1,"scheme":"bright","terracing":0,"skip":0,"relax":1,"curve":1,"filter":"url(#filter-grayscale)","mask":"url(#land)"},"#legend":{"data-size":13,"font-size":13,"data-font":"Almendra+SC","font-family":"Almendra SC","stroke":"#812929","stroke-width":2.5,"stroke-dasharray":"0 4 10 4","stroke-linecap":"round","data-x":99,"data-y":93,"data-columns":8},"#legendBox":{},"#burgLabels > #cities":{"opacity":1,"fill":"#3e3e4b","data-size":7,"font-size":7,"data-font":"Bitter","font-family":"Bitter"},"#burgIcons > #cities":{"opacity":1,"fill":"#ffffff","fill-opacity":0.7,"size":2,"stroke":"#444444","stroke-width":0.25,"stroke-dasharray":"","stroke-linecap":"butt"},"#anchors > #cities":{"opacity":0.8,"fill":"#ffffff","size":4,"stroke":"#3e3e4b","stroke-width":1},"#burgLabels > #towns":{"opacity":1,"fill":"#3e3e4b","data-size":3,"font-size":3,"data-font":"Bitter","font-family":"Bitter"},"#burgIcons > #towns":{"opacity":0.95,"fill":"#ffffff","fill-opacity":0.7,"size":0.8,"stroke":"#3e3e4b","stroke-width":0.2,"stroke-dasharray":"","stroke-linecap":"butt"},"#anchors > #towns":{"opacity":1,"fill":"#ffffff","size":1.6,"stroke":"#3e3e4b","stroke-width":1.2},"#labels > #states":{"opacity":1,"fill":"#4e4e4e","stroke":"#b5b5b5","stroke-width":0,"data-size":22,"font-size":22,"data-font":"Almendra+SC","font-family":"Almendra SC","filter":""},"#labels > #addedLabels":{"opacity":1,"fill":"#3e3e4b","stroke":"#3a3a3a","stroke-width":0,"data-size":18,"font-size":18,"data-font":"Almendra+SC","font-family":"Almendra SC","filter":null},"#fogging":{"opacity":0.98,"fill":"#1b1423","filter":null}}`,
+ styleGloom: `{"#map":{"background-color":"#000000","filter":null,"data-filter":null},"#armies":{"font-size":6,"box-size":3,"stroke":"#000","stroke-width":0.3,"opacity":1,"fill-opacity":1,"filter":null},"#biomes":{"opacity":null,"filter":"url(#blur5)","mask":"url(#land)"},"#stateBorders":{"opacity":1,"stroke":"#56566d","stroke-width":1,"stroke-dasharray":2,"stroke-linecap":"butt","filter":""},"#provinceBorders":{"opacity":1,"stroke":"#56566d","stroke-width":0.3,"stroke-dasharray":".7 1","stroke-linecap":"butt","filter":null},"#cells":{"opacity":null,"stroke":"#808080","stroke-width":0.1,"filter":null,"mask":null},"#gridOverlay":{"opacity":0.8,"scale":1,"dx":0,"dy":"0","type":"pointyHex","stroke":"#808080","stroke-width":0.5,"stroke-dasharray":null,"stroke-linecap":null,"transform":null,"filter":null,"mask":null},"#coordinates":{"opacity":1,"data-size":14,"font-size":14,"stroke":"#4a4a4a","stroke-width":1,"stroke-dasharray":6,"stroke-linecap":null,"filter":"","mask":""},"#compass":{"opacity":0.6,"transform":null,"filter":null,"mask":"url(#water)","shape-rendering":"optimizespeed"},"#rose":{"transform":"translate(100 100) scale(0.3)"},"#relig":{"opacity":0.7,"stroke":"#404040","stroke-width":1,"filter":null},"#cults":{"opacity":0.7,"stroke":"#777777","stroke-width":1.5,"stroke-dasharray":null,"stroke-linecap":null,"filter":null},"#landmass":{"opacity":1,"fill":"#e0e0e0","filter":null},"#markers":{"opacity":0.8,"rescale":1,"filter":"url(#dropShadow05)"},"#prec":{"opacity":null,"stroke":"#000000","stroke-width":0.1,"fill":"#003dff","filter":null},"#population":{"opacity":null,"stroke-width":1.6,"stroke-dasharray":null,"stroke-linecap":"butt","filter":null},"#rural":{"stroke":"#0000aa"},"#urban":{"stroke":"#9d0000"},"#freshwater":{"opacity":0.5,"fill":"#a6c1fd","stroke":"#5f799d","stroke-width":0.7,"filter":null},"#salt":{"opacity":0.5,"fill":"#409b8a","stroke":"#388985","stroke-width":0.7,"filter":null},"#sinkhole":{"opacity":1,"fill":"#5bc9fd","stroke":"#53a3b0","stroke-width":0.7,"filter":null},"#frozen":{"opacity":0.95,"fill":"#cdd4e7","stroke":"#cfe0eb","stroke-width":0,"filter":null},"#lava":{"opacity":0.7,"fill":"#90270d","stroke":"#f93e0c","stroke-width":2,"filter":"url(#crumpled)"},"#dry":{"opacity":0.7,"fill":"#c9bfa7","stroke":"#8e816f","stroke-width":0.7,"filter":null},"#sea_island":{"opacity":0.6,"stroke":"#1f3846","stroke-width":0.7,"filter":"url(#dropShadow)","auto-filter":1},"#lake_island":{"opacity":1,"stroke":"#7c8eaf","stroke-width":0.35,"filter":null},"#terrain":{"opacity":0.9,"set":"simple","size":1,"density":0.4,"filter":null,"mask":null},"#rivers":{"opacity":null,"filter":"","fill":"#779582"},"#ruler":{"opacity":null,"filter":null},"#roads":{"opacity":1,"stroke":"#8b4418","stroke-width":0.9,"stroke-dasharray":"2 3","stroke-linecap":"round","filter":"","mask":null},"#trails":{"opacity":1,"stroke":"#844017","stroke-width":0.2,"stroke-dasharray":".5 1","stroke-linecap":"round","filter":null,"mask":null},"#searoutes":{"opacity":0.8,"stroke":"#5e1865","stroke-width":0.6,"stroke-dasharray":"1.2 2.4","stroke-linecap":"round","filter":null,"mask":null},"#regions":{"opacity":0.4,"filter":"url(#dropShadow)"},"#statesHalo":{"opacity":1,"data-width":10.2,"stroke-width":10.2},"#provs":{"opacity":0.7,"fill":"#000000","data-size":10,"font-size":10,"font-family":"Georgia","data-font":"Georgia","filter":null},"#temperature":{"opacity":1,"font-size":"11px","fill":"#62001b","fill-opacity":0.3,"stroke":null,"stroke-width":2,"stroke-dasharray":2,"stroke-linecap":null,"filter":null},"#ice":{"opacity":0.9,"fill":"#e8f0f6","stroke":"#e8f0f6","stroke-width":1,"filter":"url(#dropShadow05)"},"#emblems": {"opacity":0.6,"stroke-width":0.5,"filter":null},"#texture":{"opacity":null,"filter":null,"mask":"url(#land)"},"#textureImage":{"x":0,"y":0},"#zones":{"opacity":0.5,"stroke":"#333333","stroke-width":0,"stroke-dasharray":null,"stroke-linecap":"butt","filter":"url(#dropShadow01)","mask":null},"#ocean":{"opacity":1},"#oceanLayers":{"filter":null,"layers":"-6,-4,-2"},"#oceanBase":{"fill":"#4e6964"},"#oceanPattern":{"opacity":0.2},"#oceanicPattern":{"href":"./images/pattern3.png"},"#terrs":{"opacity":1,"scheme":"bright","terracing":0,"skip":0,"relax":1,"curve":1,"filter":"url(#filter-grayscale)","mask":"url(#land)"},"#legend":{"data-size":13,"font-size":13,"data-font":"Almendra+SC","font-family":"Almendra SC","stroke":"#812929","stroke-width":2.5,"stroke-dasharray":"0 4 10 4","stroke-linecap":"round","data-x":99,"data-y":93,"data-columns":8},"#legendBox":{},"#burgLabels > #cities":{"opacity":1,"fill":"#3e3e4b","data-size":7,"font-size":7,"data-font":"Bitter","font-family":"Bitter"},"#burgIcons > #cities":{"opacity":1,"fill":"#ffffff","fill-opacity":0.7,"size":2,"stroke":"#444444","stroke-width":0.25,"stroke-dasharray":"","stroke-linecap":"butt"},"#anchors > #cities":{"opacity":0.8,"fill":"#ffffff","size":4,"stroke":"#3e3e4b","stroke-width":1},"#burgLabels > #towns":{"opacity":1,"fill":"#3e3e4b","data-size":3,"font-size":3,"data-font":"Bitter","font-family":"Bitter"},"#burgIcons > #towns":{"opacity":0.95,"fill":"#ffffff","fill-opacity":0.7,"size":0.8,"stroke":"#3e3e4b","stroke-width":0.2,"stroke-dasharray":"","stroke-linecap":"butt"},"#anchors > #towns":{"opacity":1,"fill":"#ffffff","size":1.6,"stroke":"#3e3e4b","stroke-width":1.2},"#labels > #states":{"opacity":1,"fill":"#4e4e4e","stroke":"#b5b5b5","stroke-width":0,"data-size":22,"font-size":22,"data-font":"Almendra+SC","font-family":"Almendra SC","filter":""},"#labels > #addedLabels":{"opacity":1,"fill":"#3e3e4b","stroke":"#3a3a3a","stroke-width":0,"data-size":18,"font-size":18,"data-font":"Almendra+SC","font-family":"Almendra SC","filter":null},"#fogging":{"opacity":0.98,"fill":"#1b1423","filter":null}}`,
styleClean: `{"#map":{"background-color":"#000000","filter":null,"data-filter":null},"#armies":{"font-size":6,"box-size":3,"stroke":"#000","stroke-width":0,"opacity":1,"fill-opacity":1,"filter":null},"#biomes":{"opacity":0.5,"filter":"url(#blur7)","mask":"url(#land)"},"#stateBorders":{"opacity":0.8,"stroke":"#414141","stroke-width":0.7,"stroke-dasharray":0,"stroke-linecap":"butt","filter":""},"#provinceBorders":{"opacity":0.8,"stroke":"#414141","stroke-width":0.45,"stroke-dasharray":1,"stroke-linecap":"butt","filter":null},"#cells":{"opacity":null,"stroke":"#808080","stroke-width":0.09,"filter":null,"mask":"url(#land)"},"#gridOverlay":{"opacity":0.8,"scale":1,"dx":0,"dy":"0","type":"pointyHex","stroke":"#808080","stroke-width":0.5,"stroke-dasharray":null,"stroke-linecap":null,"transform":null,"filter":null,"mask":null},"#coordinates":{"opacity":1,"data-size":12,"font-size":12,"stroke":"#414141","stroke-width":0.45,"stroke-dasharray":3,"stroke-linecap":null,"filter":null,"mask":null},"#compass":{"opacity":0.8,"transform":null,"filter":null,"mask":"url(#water)","shape-rendering":"optimizespeed"},"#rose":{"transform":null},"#relig":{"opacity":0.7,"stroke":"#404040","stroke-width":0.7,"filter":null},"#cults":{"opacity":0.6,"stroke":"#777777","stroke-width":0.5,"stroke-dasharray":null,"stroke-linecap":null,"filter":null},"#landmass":{"opacity":1,"fill":"#eeedeb","filter":null},"#markers":{"opacity":null,"rescale":null,"filter":"url(#dropShadow01)"},"#prec":{"opacity":null,"stroke":"#000000","stroke-width":0,"fill":"#0080ff","filter":null},"#population":{"opacity":null,"stroke-width":2.58,"stroke-dasharray":0,"stroke-linecap":"butt","filter":"url(#blur3)"},"#rural":{"stroke":"#ff0000"},"#urban":{"stroke":"#800000"},"#freshwater":{"opacity":0.5,"fill":"#aadaff","stroke":"#5f799d","stroke-width":0,"filter":null},"#salt":{"opacity":0.5,"fill":"#409b8a","stroke":"#388985","stroke-width":0.7,"filter":null},"#sinkhole":{"opacity":1,"fill":"#5bc9fd","stroke":"#53a3b0","stroke-width":0.7,"filter":null},"#frozen":{"opacity":0.95,"fill":"#cdd4e7","stroke":"#cfe0eb","stroke-width":0,"filter":null},"#lava":{"opacity":0.7,"fill":"#90270d","stroke":"#f93e0c","stroke-width":2,"filter":"url(#crumpled)"},"#dry":{"opacity":0.7,"fill":"#c9bfa7","stroke":"#8e816f","stroke-width":0.7,"filter":null},"#sea_island":{"opacity":0.6,"stroke":"#595959","stroke-width":0.4,"filter":"","auto-filter":0},"#lake_island":{"opacity":0,"stroke":"#7c8eaf","stroke-width":0,"filter":null},"#terrain":{"opacity":null,"set":"simple","size":1,"density":0.4,"filter":null,"mask":null},"#rivers":{"opacity":null,"filter":null,"fill":"#aadaff"},"#ruler":{"opacity":null,"filter":null},"#roads":{"opacity":0.9,"stroke":"#f6d068","stroke-width":0.7,"stroke-dasharray":0,"stroke-linecap":"inherit","filter":null,"mask":null},"#trails":{"opacity":1,"stroke":"#ffffff","stroke-width":0.25,"stroke-dasharray":"","stroke-linecap":"round","filter":null,"mask":null},"#searoutes":{"opacity":0.8,"stroke":"#4f82c6","stroke-width":0.45,"stroke-dasharray":2,"stroke-linecap":"butt","filter":null,"mask":"url(#water)"},"#regions":{"opacity":0.4,"filter":null},"#statesHalo":{"opacity":0,"data-width":null,"stroke-width":0},"#provs":{"opacity":0.7,"fill":"#000000","data-size":10,"font-size":10,"font-family":"Georgia","data-font":"Georgia","filter":null},"#temperature":{"opacity":null,"font-size":"8px","fill":"#000000","fill-opacity":0.3,"stroke":null,"stroke-width":1.8,"stroke-dasharray":null,"stroke-linecap":null,"filter":null},"#ice":{"opacity":0.9,"fill":"#e8f0f6","stroke":"#e8f0f6","stroke-width":1,"filter":"url(#dropShadow01)"},"#emblems":{"opacity":1,"stroke-width":1,"filter":null},"#texture":{"opacity":null,"filter":null,"mask":"url(#land)"},"#textureImage":{},"#zones":{"opacity":0.7,"stroke":"#ff6262","stroke-width":0,"stroke-dasharray":"","stroke-linecap":"butt","filter":null,"mask":null},"#ocean":{"opacity":null},"#oceanLayers":{"filter":"","layers":"none"},"#oceanBase":{"fill":"#aadaff"},"#oceanPattern":{"opacity":0.2},"#oceanicPattern":{"href":""},"#terrs":{"opacity":0.5,"scheme":"bright","terracing":0,"skip":5,"relax":0,"curve":0,"filter":"","mask":"url(#land)"},"#legend":{"data-size":12.74,"font-size":12.74,"data-font":"Arial","font-family":"Arial","stroke":"#909090","stroke-width":1.13,"stroke-dasharray":0,"stroke-linecap":"round","data-x":98.39,"data-y":12.67,"data-columns":null},"#legendBox":{},"#burgLabels > #cities":{"opacity":1,"fill":"#414141","data-size":7,"font-size":7,"data-font":"Arial","font-family":"Arial"},"#burgIcons > #cities":{"opacity":1,"fill":"#ffffff","fill-opacity":0.7,"size":1,"stroke":"#3e3e4b","stroke-width":0.24,"stroke-dasharray":"","stroke-linecap":"butt"},"#anchors > #cities":{"opacity":1,"fill":"#ffffff","size":2,"stroke":"#303030","stroke-width":1.7},"#burgLabels > #towns":{"opacity":1,"fill":"#414141","data-size":3,"font-size":3,"data-font":"Arial","font-family":"Arial"},"#burgIcons > #towns":{"opacity":1,"fill":"#ffffff","fill-opacity":0.7,"size":0.5,"stroke":"#3e3e4b","stroke-width":0.12,"stroke-dasharray":"","stroke-linecap":"butt"},"#anchors > #towns":{"opacity":1,"fill":"#ffffff","size":1,"stroke":"#3e3e4b","stroke-width":1.06},"#labels > #states":{"opacity":1,"fill":"#292929","stroke":"#303030","stroke-width":0,"data-size":10,"font-size":10,"data-font":"Arial","font-family":"Arial","filter":null},"#labels > #addedLabels":{"opacity":1,"fill":"#414141","stroke":"#3a3a3a","stroke-width":0,"data-size":18,"font-size":18,"data-font":"Arial","font-family":"Arial","filter":null},"#fogging":{"opacity":1,"fill":"#ffffff","filter":null}}`,
styleMonochrome: `{"#map":{"background-color":"#000000","filter":"url(#filter-grayscale)","data-filter":"grayscale"},"#armies":{"font-size":6,"box-size":3,"stroke":"#000","stroke-width":0.3,"opacity":1,"fill-opacity":1,"filter":null},"#biomes":{"opacity":null,"filter":"url(#blur5)","mask":null},"#stateBorders":{"opacity":1,"stroke":"#56566d","stroke-width":1,"stroke-dasharray":2,"stroke-linecap":"butt","filter":null},"#provinceBorders":{"opacity":1,"stroke":"#56566d","stroke-width":0.4,"stroke-dasharray":1,"stroke-linecap":"butt","filter":null},"#cells":{"opacity":null,"stroke":"#808080","stroke-width":0.1,"filter":null,"mask":null},"#gridOverlay":{"opacity":0.8,"scale":1,"dx":0,"dy":"0","type":"pointyHex","stroke":"#808080","stroke-width":0.5,"stroke-dasharray":null,"stroke-linecap":null,"transform":null,"filter":null,"mask":null},"#coordinates":{"opacity":1,"data-size":12,"font-size":12,"stroke":"#d4d4d4","stroke-width":1,"stroke-dasharray":5,"stroke-linecap":null,"filter":null,"mask":null},"#compass":{"opacity":0.8,"transform":null,"filter":null,"mask":"url(#water)","shape-rendering":"optimizespeed"},"#rose":{"transform":null},"#relig":{"opacity":0.7,"stroke":"#404040","stroke-width":0.7,"filter":null},"#cults":{"opacity":0.6,"stroke":"#777777","stroke-width":0.5,"stroke-dasharray":null,"stroke-linecap":null,"filter":null},"#landmass":{"opacity":1,"fill":"#000000","filter":null},"#markers":{"opacity":null,"rescale":1,"filter":"url(#dropShadow01)"},"#prec":{"opacity":null,"stroke":"#000000","stroke-width":0.1,"fill":"#003dff","filter":null},"#population":{"opacity":null,"stroke-width":1.6,"stroke-dasharray":null,"stroke-linecap":"butt","filter":null},"#rural":{"stroke":"#0000ff"},"#urban":{"stroke":"#ff0000"},"#freshwater":{"opacity":1,"fill":"#000000","stroke":"#515151","stroke-width":0,"filter":null},"#salt":{"opacity":1,"fill":"#000000","stroke":"#484848","stroke-width":0,"filter":null},"#sinkhole":{"opacity":1,"fill":"#000000","stroke":"#5f5f5f","stroke-width":0.5,"filter":null},"#frozen":{"opacity":1,"fill":"#000000","stroke":"#6f6f6f","stroke-width":0,"filter":null},"#lava":{"opacity":1,"fill":"#000000","stroke":"#5d5d5d","stroke-width":0,"filter":""},"#sea_island":{"opacity":1,"stroke":"#1f3846","stroke-width":0,"filter":"","auto-filter":0},"#lake_island":{"opacity":0,"stroke":"#7c8eaf","stroke-width":0,"filter":null},"#terrain":{"opacity":null,"set":"simple","size":1,"density":0.4,"filter":null,"mask":null},"#rivers":{"opacity":0.2,"filter":"url(#blur1)","fill":"#000000"},"#ruler":{"opacity":null,"filter":null},"#roads":{"opacity":0.9,"stroke":"#d06324","stroke-width":0.7,"stroke-dasharray":2,"stroke-linecap":"butt","filter":null,"mask":null},"#trails":{"opacity":0.9,"stroke":"#d06324","stroke-width":0.25,"stroke-dasharray":".8 1.6","stroke-linecap":"butt","filter":null,"mask":null},"#searoutes":{"opacity":0.8,"stroke":"#ffffff","stroke-width":0.45,"stroke-dasharray":"1 2","stroke-linecap":"round","filter":null,"mask":null},"#regions":{"opacity":0.4,"filter":null},"#statesHalo":{"opacity":1,"data-width":10,"stroke-width":10},"#provs":{"opacity":0.7,"fill":"#000000","data-size":10,"font-size":10,"font-family":"Georgia","data-font":"Georgia","filter":null},"#temperature":{"opacity":null,"font-size":"8px","fill":"#000000","fill-opacity":0.3,"stroke":null,"stroke-width":1.8,"stroke-dasharray":null,"stroke-linecap":null,"filter":null},"#ice":{"opacity":0.9,"fill":"#e8f0f6","stroke":"#e8f0f6","stroke-width":1,"filter":"url(#dropShadow05)"},"#texture":{"opacity":1,"filter":null,"mask":"url(#land)"},"#emblems": {"opacity": 0.5,"stroke-width": 0.5,"filter": null},"#textureImage":{},"#zones":{"opacity":0.6,"stroke":"#333333","stroke-width":0,"stroke-dasharray":null,"stroke-linecap":"butt","filter":null,"mask":null},"#ocean":{"opacity":0},"#oceanLayers":{"filter":null,"layers":"none"},"#oceanBase":{"fill":"#000000"},"#oceanPattern":{"opacity":0.2},"#oceanicPattern":{"href":""},"#terrs":{"opacity":1,"scheme":"monochrome","terracing":0,"skip":5,"relax":0,"curve":0,"filter":"url(#blur3)","mask":"url(#land)"},"#legend":{"data-size":13,"font-size":13,"data-font":"Almendra+SC","font-family":"Almendra SC","stroke":"#812929","stroke-width":2.5,"stroke-dasharray":"0 4 10 4","stroke-linecap":"round","data-x":99,"data-y":93,"data-columns":8},"#legendBox":{},"#burgLabels > #cities":{"opacity":1,"fill":"#3e3e4b","data-size":7,"font-size":7,"data-font":"Almendra+SC","font-family":"Almendra SC"},"#burgIcons > #cities":{"opacity":1,"fill":"#ffffff","fill-opacity":0.7,"size":1,"stroke":"#3e3e4b","stroke-width":0.24,"stroke-dasharray":"","stroke-linecap":"butt"},"#anchors > #cities":{"opacity":1,"fill":"#ffffff","size":2,"stroke":"#3e3e4b","stroke-width":1.2},"#burgLabels > #towns":{"opacity":1,"fill":"#3e3e4b","data-size":4,"font-size":4,"data-font":"Almendra+SC","font-family":"Almendra SC"},"#burgIcons > #towns":{"opacity":1,"fill":"#ffffff","fill-opacity":0.7,"size":0.5,"stroke":"#3e3e4b","stroke-width":0.12,"stroke-dasharray":"","stroke-linecap":"butt"},"#anchors > #towns":{"opacity":1,"fill":"#ffffff","size":1,"stroke":"#3e3e4b","stroke-width":1.2},"#labels > #states":{"opacity":1,"fill":"#3e3e4b","stroke":"#3a3a3a","stroke-width":0,"data-size":22,"font-size":22,"data-font":"Almendra+SC","font-family":"Almendra SC","filter":null},"#labels > #addedLabels":{"opacity":1,"fill":"#3e3e4b","stroke":"#3a3a3a","stroke-width":0,"data-size":18,"font-size":18,"data-font":"Almendra+SC","font-family":"Almendra SC","filter":null},"#fogging":{"opacity":0.98,"fill":"#30426f","filter":null}}`
-}
+};
// apply default or custom style settings on load
function applyStyleOnLoad() {
@@ -715,88 +746,85 @@ function applyStyleOnLoad() {
// set default style
function applyDefaultStyle() {
- armies.attr("opacity", 1).attr("fill-opacity", 1).attr("font-size", 6).attr("box-size", 3).attr("stroke", "#000").attr("stroke-width", .3);
+ armies.attr("opacity", 1).attr("fill-opacity", 1).attr("font-size", 6).attr("box-size", 3).attr("stroke", "#000").attr("stroke-width", 0.3);
biomes.attr("opacity", null).attr("filter", null).attr("mask", null);
- ice.attr("opacity", .9).attr("fill", "#e8f0f6").attr("stroke", "#e8f0f6").attr("stroke-width", 1).attr("filter", "url(#dropShadow05)");
- stateBorders.attr("opacity", .8).attr("stroke", "#56566d").attr("stroke-width", 1).attr("stroke-dasharray", "2").attr("stroke-linecap", "butt").attr("filter", null);
- provinceBorders.attr("opacity", .8).attr("stroke", "#56566d").attr("stroke-width", .5).attr("stroke-dasharray", "0 2").attr("stroke-linecap", "round").attr("filter", null);
- cells.attr("opacity", null).attr("stroke", "#808080").attr("stroke-width", .1).attr("filter", null).attr("mask", null);
+ 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);
+ 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", .8).attr("type", "pointyHex").attr("scale", 1).attr("dx", 0).attr("dy", 0).attr("stroke", "#777777").attr("stroke-width", .5).attr("stroke-dasharray", null).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);
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", .8).attr("transform", null).attr("filter", null).attr("mask", "url(#water)").attr("shape-rendering", "optimizespeed");
+ 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)");
- relig.attr("opacity", .7).attr("stroke", "#777777").attr("stroke-width", 0).attr("filter", null);
- cults.attr("opacity", .6).attr("stroke", "#777777").attr("stroke-width", .5).attr("filter", null);
+ relig.attr("opacity", 0.7).attr("stroke", "#777777").attr("stroke-width", 0).attr("filter", null);
+ cults.attr("opacity", 0.6).attr("stroke", "#777777").attr("stroke-width", 0.5).attr("filter", null);
landmass.attr("opacity", 1).attr("fill", "#eef6fb").attr("filter", null);
markers.attr("opacity", null).attr("rescale", 1).attr("filter", "url(#dropShadow01)");
- prec.attr("opacity", null).attr("stroke", "#000000").attr("stroke-width", .1).attr("fill", "#003dff").attr("filter", null);
+ prec.attr("opacity", null).attr("stroke", "#000000").attr("stroke-width", 0.1).attr("fill", "#003dff").attr("filter", null);
population.attr("opacity", null).attr("stroke-width", 1.6).attr("stroke-dasharray", null).attr("stroke-linecap", "butt").attr("filter", null);
population.select("#rural").attr("stroke", "#0000ff");
population.select("#urban").attr("stroke", "#ff0000");
- lakes.select("#freshwater").attr("opacity", .5).attr("fill", "#a6c1fd").attr("stroke", "#5f799d").attr("stroke-width", .7).attr("filter", null);
- lakes.select("#salt").attr("opacity", .5).attr("fill", "#409b8a").attr("stroke", "#388985").attr("stroke-width", .7).attr("filter", null);
- lakes.select("#sinkhole").attr("opacity", 1).attr("fill", "#5bc9fd").attr("stroke", "#53a3b0").attr("stroke-width", .7).attr("filter", null);
- lakes.select("#frozen").attr("opacity", .95).attr("fill", "#cdd4e7").attr("stroke", "#cfe0eb").attr("stroke-width", 0).attr("filter", null);
- lakes.select("#lava").attr("opacity", .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", .7).attr("filter", null);
+ lakes.select("#freshwater").attr("opacity", 0.5).attr("fill", "#a6c1fd").attr("stroke", "#5f799d").attr("stroke-width", 0.7).attr("filter", null);
+ lakes.select("#salt").attr("opacity", 0.5).attr("fill", "#409b8a").attr("stroke", "#388985").attr("stroke-width", 0.7).attr("filter", null);
+ lakes.select("#sinkhole").attr("opacity", 1).attr("fill", "#5bc9fd").attr("stroke", "#53a3b0").attr("stroke-width", 0.7).attr("filter", null);
+ lakes.select("#frozen").attr("opacity", 0.95).attr("fill", "#cdd4e7").attr("stroke", "#cfe0eb").attr("stroke-width", 0).attr("filter", null);
+ 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", .5).attr("stroke", "#1f3846").attr("stroke-width", .7).attr("auto-filter", 1).attr("filter", "url(#dropShadow)");
- coastline.select("#lake_island").attr("opacity", 1).attr("stroke", "#7c8eaf").attr("stroke-width", .35).attr("filter", null);
+ 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", .4).attr("filter", null).attr("mask", 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", .9).attr("stroke", "#d06324").attr("stroke-width", .7).attr("stroke-dasharray", "2").attr("stroke-linecap", "butt").attr("filter", null).attr("mask", null);
- trails.attr("opacity", .9).attr("stroke", "#d06324").attr("stroke-width", .25).attr("stroke-dasharray", ".8 1.6").attr("stroke-linecap", "butt").attr("filter", null).attr("mask", null);
- searoutes.attr("opacity", .8).attr("stroke", "#ffffff").attr("stroke-width", .45).attr("stroke-dasharray", "1 2").attr("stroke-linecap", "round").attr("filter", null).attr("mask", 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);
+ 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);
- regions.attr("opacity", .4).attr("filter", null);
+ regions.attr("opacity", 0.4).attr("filter", null);
statesHalo.attr("data-width", 10).attr("stroke-width", 10).attr("opacity", 1);
- provs.attr("opacity", .7).attr("fill", "#000000").attr("font-family", "Georgia").attr("data-font", "Georgia").attr("data-size", 10).attr("font-size", 10).attr("filter", null);
+ provs.attr("opacity", 0.7).attr("fill", "#000000").attr("font-family", "Georgia").attr("data-font", "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", .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", .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);
oceanLayers.select("rect").attr("fill", "#466eab"); // old color #53679f
oceanLayers.attr("filter", null).attr("layers", "-6,-3,-1");
- oceanPattern.attr("opacity", .2);
+ oceanPattern.attr("opacity", 0.2);
svg.select("#oceanicPattern").attr("href", "./images/pattern1.png");
// 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("data-font", "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", .8);
+ legend.attr("font-family", "Almendra SC").attr("data-font", "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).attr("font-family", "Almendra SC").attr("data-font", "Almendra+SC").attr("font-size", citiesSize).attr("data-size", citiesSize);
- burgIcons.select("#cities").attr("opacity", 1).attr("size", 1).attr("stroke-width", .24).attr("fill", "#ffffff").attr("stroke", "#3e3e4b").attr("fill-opacity", .7).attr("stroke-dasharray", "").attr("stroke-linecap", "butt");
+ 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).attr("font-family", "Almendra SC").attr("data-font", "Almendra+SC").attr("font-size", 3).attr("data-size", 4);
- burgIcons.select("#towns").attr("opacity", 1).attr("size", .5).attr("stroke-width", .12).attr("fill", "#ffffff").attr("stroke", "#3e3e4b").attr("fill-opacity", .7).attr("stroke-dasharray", "").attr("stroke-linecap", "butt");
+ 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).attr("font-family", "Almendra SC").attr("data-font", "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).attr("font-family", "Almendra SC").attr("data-font", "Almendra+SC").attr("font-size", 18).attr("data-size", 18).attr("filter", null);
- fogging.attr("opacity", .98).attr("fill", "#30426f");
- emblems.attr("opacity", .9).attr("stroke-width", 1).attr("filter", null);
+ fogging.attr("opacity", 0.98).attr("fill", "#30426f");
+ emblems.attr("opacity", 0.9).attr("stroke-width", 1).attr("filter", null);
}
// apply style settings in JSON
@@ -814,11 +842,17 @@ function applyStyle(style) {
// change current style preset to another saved one
function changeStylePreset(preset) {
- if (customization) {tip("Please exit the customization mode first", false, "error"); return;}
+ if (customization) {
+ tip("Please exit the customization mode first", false, "error");
+ return;
+ }
alertMessage.innerHTML = "Are you sure you want to change the style preset? All unsaved style changes will be lost";
- $("#alert").dialog({resizable: false, title: "Change style preset", width: "23em",
+ $("#alert").dialog({
+ resizable: false,
+ title: "Change style preset",
+ width: "23em",
buttons: {
- Change: function() {
+ Change: function () {
const customPreset = localStorage.getItem(preset);
if (customPreset) {
if (JSON.isValid(customPreset)) applyStyle(JSON.parse(customPreset));
@@ -837,7 +871,7 @@ function changeStylePreset(preset) {
stylePreset.dataset.old = stylePreset.value; // save current value
$(this).dialog("close");
},
- Cancel: function() {
+ Cancel: function () {
stylePreset.value = stylePreset.dataset.old;
$(this).dialog("close");
}
@@ -847,23 +881,35 @@ function changeStylePreset(preset) {
function updateElements() {
// burgIcons to desired size
- burgIcons.selectAll("g").each(function(d) {
+ burgIcons.selectAll("g").each(function (d) {
const size = +this.getAttribute("size");
- d3.select(this).selectAll("circle").each(function() {this.setAttribute("r", size)});
- burgLabels.select("g#"+this.id).selectAll("text").each(function() {this.setAttribute("dy", `${size * -1.5}px`)});
+ d3.select(this)
+ .selectAll("circle")
+ .each(function () {
+ this.setAttribute("r", size);
+ });
+ burgLabels
+ .select("g#" + this.id)
+ .selectAll("text")
+ .each(function () {
+ this.setAttribute("dy", `${size * -1.5}px`);
+ });
});
// anchor icons to desired size
- anchors.selectAll("g").each(function(d) {
+ anchors.selectAll("g").each(function (d) {
const size = +this.getAttribute("size");
- d3.select(this).selectAll("use").each(function() {
- const id = +this.dataset.id;
- const x = pack.burgs[id].x, y = pack.burgs[id].y;
- this.setAttribute("x", rn(x - size * .47, 2));
- this.setAttribute("y", rn(y- size * .47, 2));
- this.setAttribute("width", size);
- this.setAttribute("height", size);
- });
+ d3.select(this)
+ .selectAll("use")
+ .each(function () {
+ const id = +this.dataset.id;
+ const x = pack.burgs[id].x,
+ y = pack.burgs[id].y;
+ this.setAttribute("x", rn(x - size * 0.47, 2));
+ this.setAttribute("y", rn(y - size * 0.47, 2));
+ this.setAttribute("width", size);
+ this.setAttribute("height", size);
+ });
});
// redraw elements
@@ -876,7 +922,8 @@ function updateElements() {
function addStylePreset() {
$("#styleSaver").dialog({
- title: "Style Saver", width: "26em",
+ title: "Style Saver",
+ width: "26em",
position: {my: "center", at: "center", of: "svg"}
});
@@ -891,71 +938,74 @@ function addStylePreset() {
document.getElementById("styleSaverSave").addEventListener("click", saveStyle);
document.getElementById("styleSaverDownload").addEventListener("click", styleDownload);
document.getElementById("styleSaverLoad").addEventListener("click", () => styleToLoad.click());
- document.getElementById("styleToLoad").addEventListener("change", function() {uploadFile(this, styleUpload)});
+ document.getElementById("styleToLoad").addEventListener("change", function () {
+ uploadFile(this, styleUpload);
+ });
function getStyle() {
- const style = {}, attributes = {
- "#map":["background-color", "filter", "data-filter"],
- "#armies":["font-size","box-size","stroke","stroke-width","fill-opacity","filter"],
- "#biomes":["opacity", "filter", "mask"],
- "#stateBorders":["opacity", "stroke", "stroke-width", "stroke-dasharray", "stroke-linecap", "filter"],
- "#provinceBorders":["opacity", "stroke", "stroke-width", "stroke-dasharray", "stroke-linecap", "filter"],
- "#cells":["opacity", "stroke", "stroke-width", "filter", "mask"],
- "#gridOverlay":["opacity", "scale", "dx", "dy", "type", "stroke", "stroke-width", "stroke-dasharray", "stroke-linecap", "transform", "filter", "mask"],
- "#coordinates":["opacity", "data-size", "font-size", "stroke", "stroke-width", "stroke-dasharray", "stroke-linecap", "filter", "mask"],
- "#compass":["opacity", "transform", "filter", "mask", "shape-rendering"],
- "#rose":["transform"],
- "#relig":["opacity", "stroke", "stroke-width", "filter"],
- "#cults":["opacity", "stroke", "stroke-width", "stroke-dasharray", "stroke-linecap", "filter"],
- "#landmass":["opacity", "fill", "filter"],
- "#markers":["opacity", "rescale", "filter"],
- "#prec":["opacity", "stroke", "stroke-width", "fill", "filter"],
- "#population":["opacity", "stroke-width", "stroke-dasharray", "stroke-linecap", "filter"],
- "#rural":["stroke"],
- "#urban":["stroke"],
- "#freshwater":["opacity", "fill", "stroke", "stroke-width", "filter"],
- "#salt":["opacity", "fill", "stroke", "stroke-width", "filter"],
- "#sinkhole":["opacity", "fill", "stroke", "stroke-width", "filter"],
- "#frozen":["opacity", "fill", "stroke", "stroke-width", "filter"],
- "#lava":["opacity", "fill", "stroke", "stroke-width", "filter"],
- "#dry":["opacity", "fill", "stroke", "stroke-width", "filter"],
- "#sea_island":["opacity", "stroke", "stroke-width", "filter", "auto-filter"],
- "#lake_island":["opacity", "stroke", "stroke-width", "filter"],
- "#terrain":["opacity", "set", "size", "density", "filter", "mask"],
- "#rivers":["opacity", "filter", "fill"],
- "#ruler":["opacity", "filter"],
- "#roads":["opacity", "stroke", "stroke-width", "stroke-dasharray", "stroke-linecap", "filter", "mask"],
- "#trails":["opacity", "stroke", "stroke-width", "stroke-dasharray", "stroke-linecap", "filter", "mask"],
- "#searoutes":["opacity", "stroke", "stroke-width", "stroke-dasharray", "stroke-linecap", "filter", "mask"],
- "#regions":["opacity", "filter"],
- "#statesHalo":["opacity", "data-width", "stroke-width"],
- "#provs":["opacity", "fill", "font-size", "data-font", "font-family", "filter"],
- "#temperature":["opacity", "font-size", "fill", "fill-opacity", "stroke", "stroke-width", "stroke-dasharray", "stroke-linecap", "filter"],
- "#ice":["opacity", "fill", "stroke", "stroke-width", "filter"],
- "#emblems":["opacity", "stroke-width", "filter"],
- "#texture":["opacity", "filter", "mask"],
- "#textureImage":["x", "y"],
- "#zones":["opacity", "stroke", "stroke-width", "stroke-dasharray", "stroke-linecap", "filter", "mask"],
- "#oceanLayers":["filter", "layers"],
- "#oceanBase":["fill"],
- "#oceanPattern":["opacity"],
- "#oceanicPattern":["href"],
- "#terrs":["opacity", "scheme", "terracing", "skip", "relax", "curve", "filter", "mask"],
- "#legend":["data-size", "font-size", "data-font", "font-family", "stroke", "stroke-width", "stroke-dasharray", "stroke-linecap", "data-x", "data-y", "data-columns"],
- "#legendBox":["fill", "fill-opacity"],
- "#burgLabels > #cities":["opacity", "fill", "data-size", "font-size", "data-font", "font-family"],
- "#burgIcons > #cities":["opacity", "fill", "fill-opacity", "size", "stroke", "stroke-width", "stroke-dasharray", "stroke-linecap"],
- "#anchors > #cities":["opacity", "fill", "size", "stroke", "stroke-width"],
- "#burgLabels > #towns":["opacity", "fill", "data-size", "font-size", "data-font", "font-family"],
- "#burgIcons > #towns":["opacity", "fill", "fill-opacity", "size", "stroke", "stroke-width", "stroke-dasharray", "stroke-linecap"],
- "#anchors > #towns":["opacity", "fill", "size", "stroke", "stroke-width"],
- "#labels > #states":["opacity", "fill", "stroke", "stroke-width", "data-size", "font-size", "data-font", "font-family", "filter"],
- "#labels > #addedLabels":["opacity", "fill", "stroke", "stroke-width", "data-size", "font-size", "data-font", "font-family", "filter"],
- "#fogging":["opacity", "fill", "filter"]
- };
+ const style = {},
+ attributes = {
+ "#map": ["background-color", "filter", "data-filter"],
+ "#armies": ["font-size", "box-size", "stroke", "stroke-width", "fill-opacity", "filter"],
+ "#biomes": ["opacity", "filter", "mask"],
+ "#stateBorders": ["opacity", "stroke", "stroke-width", "stroke-dasharray", "stroke-linecap", "filter"],
+ "#provinceBorders": ["opacity", "stroke", "stroke-width", "stroke-dasharray", "stroke-linecap", "filter"],
+ "#cells": ["opacity", "stroke", "stroke-width", "filter", "mask"],
+ "#gridOverlay": ["opacity", "scale", "dx", "dy", "type", "stroke", "stroke-width", "stroke-dasharray", "stroke-linecap", "transform", "filter", "mask"],
+ "#coordinates": ["opacity", "data-size", "font-size", "stroke", "stroke-width", "stroke-dasharray", "stroke-linecap", "filter", "mask"],
+ "#compass": ["opacity", "transform", "filter", "mask", "shape-rendering"],
+ "#rose": ["transform"],
+ "#relig": ["opacity", "stroke", "stroke-width", "filter"],
+ "#cults": ["opacity", "stroke", "stroke-width", "stroke-dasharray", "stroke-linecap", "filter"],
+ "#landmass": ["opacity", "fill", "filter"],
+ "#markers": ["opacity", "rescale", "filter"],
+ "#prec": ["opacity", "stroke", "stroke-width", "fill", "filter"],
+ "#population": ["opacity", "stroke-width", "stroke-dasharray", "stroke-linecap", "filter"],
+ "#rural": ["stroke"],
+ "#urban": ["stroke"],
+ "#freshwater": ["opacity", "fill", "stroke", "stroke-width", "filter"],
+ "#salt": ["opacity", "fill", "stroke", "stroke-width", "filter"],
+ "#sinkhole": ["opacity", "fill", "stroke", "stroke-width", "filter"],
+ "#frozen": ["opacity", "fill", "stroke", "stroke-width", "filter"],
+ "#lava": ["opacity", "fill", "stroke", "stroke-width", "filter"],
+ "#dry": ["opacity", "fill", "stroke", "stroke-width", "filter"],
+ "#sea_island": ["opacity", "stroke", "stroke-width", "filter", "auto-filter"],
+ "#lake_island": ["opacity", "stroke", "stroke-width", "filter"],
+ "#terrain": ["opacity", "set", "size", "density", "filter", "mask"],
+ "#rivers": ["opacity", "filter", "fill"],
+ "#ruler": ["opacity", "filter"],
+ "#roads": ["opacity", "stroke", "stroke-width", "stroke-dasharray", "stroke-linecap", "filter", "mask"],
+ "#trails": ["opacity", "stroke", "stroke-width", "stroke-dasharray", "stroke-linecap", "filter", "mask"],
+ "#searoutes": ["opacity", "stroke", "stroke-width", "stroke-dasharray", "stroke-linecap", "filter", "mask"],
+ "#regions": ["opacity", "filter"],
+ "#statesHalo": ["opacity", "data-width", "stroke-width"],
+ "#provs": ["opacity", "fill", "font-size", "data-font", "font-family", "filter"],
+ "#temperature": ["opacity", "font-size", "fill", "fill-opacity", "stroke", "stroke-width", "stroke-dasharray", "stroke-linecap", "filter"],
+ "#ice": ["opacity", "fill", "stroke", "stroke-width", "filter"],
+ "#emblems": ["opacity", "stroke-width", "filter"],
+ "#texture": ["opacity", "filter", "mask"],
+ "#textureImage": ["x", "y"],
+ "#zones": ["opacity", "stroke", "stroke-width", "stroke-dasharray", "stroke-linecap", "filter", "mask"],
+ "#oceanLayers": ["filter", "layers"],
+ "#oceanBase": ["fill"],
+ "#oceanPattern": ["opacity"],
+ "#oceanicPattern": ["href"],
+ "#terrs": ["opacity", "scheme", "terracing", "skip", "relax", "curve", "filter", "mask"],
+ "#legend": ["data-size", "font-size", "data-font", "font-family", "stroke", "stroke-width", "stroke-dasharray", "stroke-linecap", "data-x", "data-y", "data-columns"],
+ "#legendBox": ["fill", "fill-opacity"],
+ "#burgLabels > #cities": ["opacity", "fill", "data-size", "font-size", "data-font", "font-family"],
+ "#burgIcons > #cities": ["opacity", "fill", "fill-opacity", "size", "stroke", "stroke-width", "stroke-dasharray", "stroke-linecap"],
+ "#anchors > #cities": ["opacity", "fill", "size", "stroke", "stroke-width"],
+ "#burgLabels > #towns": ["opacity", "fill", "data-size", "font-size", "data-font", "font-family"],
+ "#burgIcons > #towns": ["opacity", "fill", "fill-opacity", "size", "stroke", "stroke-width", "stroke-dasharray", "stroke-linecap"],
+ "#anchors > #towns": ["opacity", "fill", "size", "stroke", "stroke-width"],
+ "#labels > #states": ["opacity", "fill", "stroke", "stroke-width", "data-size", "font-size", "data-font", "font-family", "filter"],
+ "#labels > #addedLabels": ["opacity", "fill", "stroke", "stroke-width", "data-size", "font-size", "data-font", "font-family", "filter"],
+ "#fogging": ["opacity", "fill", "filter"]
+ };
for (const selector in attributes) {
- const s = style[selector] = {};
+ const s = (style[selector] = {});
attributes[selector].forEach(attr => {
const el = document.querySelector(selector);
if (!el) return;
@@ -971,13 +1021,13 @@ function addStylePreset() {
if (!isNaN(+value)) return +value;
return value;
}
-
+
return style;
}
function checkName() {
let tip = "";
- const v = "style"+styleSaverName.value;
+ const v = "style" + styleSaverName.value;
const listed = Array.from(stylePreset.options).some(o => o.value == v);
const stored = localStorage.getItem(v);
if (!stored && listed) tip = "default";
@@ -987,10 +1037,22 @@ function addStylePreset() {
}
function saveStyle() {
- if (!styleSaverJSON.value) {tip("Please provide a style JSON", false, "error"); return};
- if (!JSON.isValid(styleSaverJSON.value)) {tip("JSON string is not valid, please check the format", false, "error"); return};
- if (!styleSaverName.value) {tip("Please provide a preset name", false, "error"); return};
- if (styleSaverTip.innerHTML === "default") {tip("You cannot overwrite default preset, please change the name", false, "error"); return};
+ if (!styleSaverJSON.value) {
+ tip("Please provide a style JSON", false, "error");
+ return;
+ }
+ if (!JSON.isValid(styleSaverJSON.value)) {
+ tip("JSON string is not valid, please check the format", false, "error");
+ return;
+ }
+ if (!styleSaverName.value) {
+ tip("Please provide a preset name", false, "error");
+ return;
+ }
+ if (styleSaverTip.innerHTML === "default") {
+ tip("You cannot overwrite default preset, please change the name", false, "error");
+ return;
+ }
const preset = "style" + styleSaverName.value;
applyOption(stylePreset, preset, styleSaverName.value); // add option
localStorage.setItem("presetStyle", preset); // mark preset as default
@@ -1001,23 +1063,41 @@ function addStylePreset() {
}
function styleDownload() {
- if (!styleSaverJSON.value) {tip("Please provide a style JSON", false, "error"); return};
- if (!JSON.isValid(styleSaverJSON.value)) {tip("JSON string is not valid, please check the format", false, "error"); return};
- if (!styleSaverName.value) {tip("Please provide a preset name", false, "error"); return};
+ if (!styleSaverJSON.value) {
+ tip("Please provide a style JSON", false, "error");
+ return;
+ }
+ if (!JSON.isValid(styleSaverJSON.value)) {
+ tip("JSON string is not valid, please check the format", false, "error");
+ return;
+ }
+ if (!styleSaverName.value) {
+ tip("Please provide a preset name", false, "error");
+ return;
+ }
const data = styleSaverJSON.value;
- if (!data) {tip("Please provide a style JSON", false, "error"); return};
+ if (!data) {
+ tip("Please provide a style JSON", false, "error");
+ return;
+ }
downloadFile(data, "style" + styleSaverName.value + ".json", "application/json");
}
function styleUpload(dataLoaded) {
- if (!dataLoaded) {tip("Cannot load the file. Please check the data format", false, "error"); return;}
+ if (!dataLoaded) {
+ tip("Cannot load the file. Please check the data format", false, "error");
+ return;
+ }
const data = JSON.stringify(JSON.parse(dataLoaded), null, 2);
styleSaverJSON.value = data;
}
}
function removeStylePreset() {
- if (stylePreset.selectedOptions[0].dataset.system) {tip("Cannot remove system preset", false, "error"); return;};
+ if (stylePreset.selectedOptions[0].dataset.system) {
+ tip("Cannot remove system preset", false, "error");
+ return;
+ }
localStorage.removeItem("presetStyle");
localStorage.removeItem(stylePreset.value);
stylePreset.selectedOptions[0].remove();
@@ -1030,7 +1110,10 @@ function applyMapFilter(event) {
if (event.target.tagName !== "BUTTON") return;
const button = event.target;
svg.attr("data-filter", null).attr("filter", null);
- if (button.classList.contains("pressed")) {button.classList.remove("pressed"); return;}
+ if (button.classList.contains("pressed")) {
+ button.classList.remove("pressed");
+ return;
+ }
mapFilters.querySelectorAll(".pressed").forEach(button => button.classList.remove("pressed"));
button.classList.add("pressed");
svg.attr("data-filter", button.id).attr("filter", "url(#filter-" + button.id + ")");
@@ -1040,7 +1123,7 @@ function updateMapFilter() {
const filter = svg.attr("data-filter");
mapFilters.querySelectorAll(".pressed").forEach(button => button.classList.remove("pressed"));
if (!filter) return;
- mapFilters.querySelector("#"+filter).classList.add("pressed");
+ mapFilters.querySelector("#" + filter).classList.add("pressed");
}
// FONTS
@@ -1048,11 +1131,10 @@ function updateMapFilter() {
function loadDefaultFonts() {
if (!$('link[href="fonts.css"]').length) {
$("head").append('');
- const fontsToAdd = ["Amatic+SC:700", "IM+Fell+English", "Great+Vibes", "MedievalSharp", "Metamorphous",
- "Nova+Script", "Uncial+Antiqua", "Underdog", "Caesar+Dressing", "Bitter", "Yellowtail", "Montez",
- "Shadows+Into+Light", "Fredericka+the+Great", "Orbitron", "Dancing+Script:700",
- "Architects+Daughter", "Kaushan+Script", "Gloria+Hallelujah", "Satisfy", "Comfortaa:700", "Cinzel"];
- fontsToAdd.forEach(function(f) {if (fonts.indexOf(f) === -1) fonts.push(f);});
+ const fontsToAdd = ["Amatic+SC:700", "IM+Fell+English", "Great+Vibes", "MedievalSharp", "Metamorphous", "Nova+Script", "Uncial+Antiqua", "Underdog", "Caesar+Dressing", "Bitter", "Yellowtail", "Montez", "Shadows+Into+Light", "Fredericka+the+Great", "Orbitron", "Dancing+Script:700", "Architects+Daughter", "Kaushan+Script", "Gloria+Hallelujah", "Satisfy", "Comfortaa:700", "Cinzel"];
+ fontsToAdd.forEach(function (f) {
+ if (fonts.indexOf(f) === -1) fonts.push(f);
+ });
updateFontOptions();
}
}
@@ -1084,7 +1166,7 @@ function fetchFonts(url) {
}
resolve(fetched);
});
- })
+ });
}
function addFonts(url) {
@@ -1092,38 +1174,38 @@ function addFonts(url) {
return fetch(url)
.then(resp => resp.text())
.then(text => {
- let s = document.createElement('style');
+ let s = document.createElement("style");
s.innerHTML = text;
document.head.appendChild(s);
- let styleSheet = Array.prototype.filter.call(
- document.styleSheets,
- sS => sS.ownerNode === s)[0];
+ let styleSheet = Array.prototype.filter.call(document.styleSheets, sS => sS.ownerNode === s)[0];
let FontRule = rule => {
- let family = rule.style.getPropertyValue('font-family');
- let font = family.replace(/['"]+/g, '').replace(/ /g, "+");
- let weight = rule.style.getPropertyValue('font-weight');
+ let family = rule.style.getPropertyValue("font-family");
+ let font = family.replace(/['"]+/g, "").replace(/ /g, "+");
+ let weight = rule.style.getPropertyValue("font-weight");
if (weight && weight !== "400") font += ":" + weight;
if (fonts.indexOf(font) == -1) {
fonts.push(font);
- fetched++
+ fetched++;
}
};
let fetched = 0;
- for (let r of styleSheet.cssRules) {FontRule(r);}
+ for (let r of styleSheet.cssRules) {
+ FontRule(r);
+ }
document.head.removeChild(s);
return fetched;
})
- .catch(function() {});
+ .catch(function () {});
}
// Update font list for Label and Burg Editors
function updateFontOptions() {
styleSelectFont.innerHTML = "";
- for (let i=0; i < fonts.length; i++) {
- const opt = document.createElement('option');
+ for (let i = 0; i < fonts.length; i++) {
+ const opt = document.createElement("option");
opt.value = i;
- const font = fonts[i].split(':')[0].replace(/\+/g, " ");
+ const font = fonts[i].split(":")[0].replace(/\+/g, " ");
opt.style.fontFamily = opt.innerHTML = font;
styleSelectFont.add(opt);
}
-}
\ No newline at end of file
+}