diff --git a/index.css b/index.css index 558728b7..d5c5ef34 100644 --- a/index.css +++ b/index.css @@ -1876,12 +1876,6 @@ div.editorLine { margin: 0.4em 0 0 -0.9em; } -#barBackColor { - width: 3.5em; - padding: 0px; - height: 1.2em; -} - #ruler { cursor: move; fill: none; @@ -1921,18 +1915,6 @@ div.editorLine { stroke: #737373; } -#scaleBar { - stroke: none; - fill: none; - cursor: pointer; -} - -#scaleBar text { - fill: #353540; - text-anchor: middle; - font-family: var(--serif); -} - #militaryOptionsTable select { border: 1px solid #d4d4d4; } diff --git a/index.html b/index.html index 771a8ba0..96f2fe5a 100644 --- a/index.html +++ b/index.html @@ -366,7 +366,9 @@ - + + + @@ -799,6 +801,7 @@ + @@ -1453,6 +1456,84 @@ + + + + Size + + Bar + + Font + + + + + + Position + + x + + y + + + + + + Label + + + + + + + Back opacity + + + + + + + + Back fill + + + + + + + + Back stroke + + + + + Width + + + + + + Back padding + + + + + + + + + + Back filter + -
- -
Scale bar:
-
- -
-
Bar size:
- - -
- -
-
Bar label:
- -
- -
-
Bar background:
- - -
- -
-
Bar position:
- x: y: -
-
Population:
@@ -8001,16 +8039,16 @@ - - - + + + - - + + - + @@ -8029,7 +8067,7 @@ - + @@ -8048,10 +8086,10 @@ - - + + - + diff --git a/modules/dynamic/auto-update.js b/modules/dynamic/auto-update.js index 124e32ff..777ad6d2 100644 --- a/modules/dynamic/auto-update.js +++ b/modules/dynamic/auto-update.js @@ -777,5 +777,37 @@ export function resolveVersionConflicts(version) { .attr("mask", "url(#land)"); if (layerIsOn("toggleHeight")) drawHeightmap(); + + // v1.96.00 moved scaleBar options from units editor to style + d3.select("#scaleBar").remove(); + + scaleBar = svg + .insert("g", "#viewbox + *") + .attr("id", "scaleBar") + .attr("opacity", 1) + .attr("fill", "#353540") + .attr("font-size", 10) + .attr("data-size", 2) + .attr("data-x", 99) + .attr("data-y", 99) + .attr("data-label", ""); + + scaleBar + .append("rect") + .attr("id", "scaleBarBack") + .attr("opacity", 0.2) + .attr("fill", "#ffffff") + .attr("stroke", "#000000") + .attr("stroke-width", 1) + .attr("filter", "url(#blur5)") + .attr("data-top", 20) + .attr("data-right", 15) + .attr("data-bottom", 15) + .attr("data-left", 10); + + drawScaleBar(scaleBar, scale); + fitScaleBar(scaleBar, svgWidth, svgHeight); + + if (!layerIsOn("toggleScaleBar")) scaleBar.style("display", "none"); } } diff --git a/modules/dynamic/export-json.js b/modules/dynamic/export-json.js index 4201aa02..c8110b80 100644 --- a/modules/dynamic/export-json.js +++ b/modules/dynamic/export-json.js @@ -88,12 +88,6 @@ function getSettings() { heightUnit: heightUnit.value, heightExponent: heightExponentInput.value, temperatureScale: temperatureScale.value, - barSize: barSizeInput.value, - barLabel: barLabel.value, - barBackOpacity: barBackOpacity.value, - barBackColor: barBackColor.value, - barPosX: barPosX.value, - barPosY: barPosY.value, populationRate: populationRate, urbanization: urbanization, mapSize: mapSizeOutput.value, diff --git a/modules/io/load.js b/modules/io/load.js index 181b633a..a494b606 100644 --- a/modules/io/load.js +++ b/modules/io/load.js @@ -218,6 +218,7 @@ async function parseLoadedData(data) { INFO && console.group("Loaded Map " + seed); + // TODO: move all to options object void (function parseSettings() { const settings = data[1].split("|"); if (settings[0]) applyOption(distanceUnitInput, settings[0]); @@ -226,23 +227,16 @@ async function parseLoadedData(data) { if (settings[3]) applyOption(heightUnit, settings[3]); if (settings[4]) heightExponentInput.value = heightExponentOutput.value = settings[4]; if (settings[5]) temperatureScale.value = settings[5]; - if (settings[6]) barSizeInput.value = barSizeOutput.value = settings[6]; - if (settings[7] !== undefined) barLabel.value = settings[7]; - if (settings[8] !== undefined) barBackOpacity.value = settings[8]; - if (settings[9]) barBackColor.value = settings[9]; - if (settings[10]) barPosX.value = settings[10]; - if (settings[11]) barPosY.value = settings[11]; + // setting 6-11 (scaleBar) are part of style now, kept as "" in newer versions for compatibility if (settings[12]) populationRate = populationRateInput.value = populationRateOutput.value = settings[12]; if (settings[13]) urbanization = urbanizationInput.value = urbanizationOutput.value = settings[13]; if (settings[14]) mapSizeInput.value = mapSizeOutput.value = minmax(settings[14], 1, 100); if (settings[15]) latitudeInput.value = latitudeOutput.value = minmax(settings[15], 0, 100); if (settings[18]) precInput.value = precOutput.value = settings[18]; - if (settings[19]) options = JSON.parse(settings[19]); // setting 16 and 17 (temperature) are part of options now, kept as "" in newer versions for compatibility if (settings[16]) options.temperatureEquator = +settings[16]; if (settings[17]) options.temperatureNorthPole = options.temperatureSouthPole = +settings[17]; - if (settings[20]) mapName.value = settings[20]; if (settings[21]) hideLabels.checked = +settings[21]; if (settings[22]) stylePreset.value = settings[22]; @@ -453,7 +447,6 @@ async function parseLoadedData(data) { })(); void (function restoreEvents() { - scaleBar.on("mousemove", () => tip("Click to open Units Editor")).on("click", () => editUnits()); legend .on("mousemove", () => tip("Drag to change the position. Click to hide the legend")) .on("click", () => clearLegend()); diff --git a/modules/io/save.js b/modules/io/save.js index 1f6d629b..efa1e89a 100644 --- a/modules/io/save.js +++ b/modules/io/save.js @@ -49,12 +49,12 @@ function prepareMapData() { heightUnit.value, heightExponentInput.value, temperatureScale.value, - barSizeInput.value, - barLabel.value, - barBackOpacity.value, - barBackColor.value, - barPosX.value, - barPosY.value, + "", // previously used for barSize.value + "", // previously used for barLabel.value + "", // previously used for barBackColor.value + "", // previously used for barBackColor.value + "", // previously used for barPosX.value + "", // previously used for barPosY.value populationRate, urbanization, mapSizeOutput.value, diff --git a/modules/ui/layers.js b/modules/ui/layers.js index 720730c2..9db58faa 100644 --- a/modules/ui/layers.js +++ b/modules/ui/layers.js @@ -1713,10 +1713,7 @@ function toggleLabels(event) { invokeActiveZooming(); if (event && isCtrlClick(event)) editStyle("labels"); } else { - if (event && isCtrlClick(event)) { - editStyle("labels"); - return; - } + if (event && isCtrlClick(event)) return editStyle("labels"); turnButtonOff("toggleLabels"); labels.style("display", "none"); } @@ -1728,10 +1725,7 @@ function toggleIcons(event) { $("#icons").fadeIn(); if (event && isCtrlClick(event)) editStyle("burgIcons"); } else { - if (event && isCtrlClick(event)) { - editStyle("burgIcons"); - return; - } + if (event && isCtrlClick(event)) return editStyle("burgIcons"); turnButtonOff("toggleIcons"); $("#icons").fadeOut(); } @@ -1744,10 +1738,7 @@ function toggleRulers(event) { rulers.draw(); ruler.style("display", null); } else { - if (event && isCtrlClick(event)) { - editStyle("ruler"); - return; - } + if (event && isCtrlClick(event)) return editStyle("ruler"); turnButtonOff("toggleRulers"); ruler.selectAll("*").remove(); ruler.style("display", "none"); @@ -1758,17 +1749,113 @@ function toggleScaleBar(event) { if (!layerIsOn("toggleScaleBar")) { turnButtonOn("toggleScaleBar"); $("#scaleBar").fadeIn(); - if (event && isCtrlClick(event)) editUnits(); + if (event && isCtrlClick(event)) editStyle("scaleBar"); } else { - if (event && isCtrlClick(event)) { - editUnits(); - return; - } + if (event && isCtrlClick(event)) return editStyle("scaleBar"); $("#scaleBar").fadeOut(); turnButtonOff("toggleScaleBar"); } } +function drawScaleBar(scaleBar, scaleLevel) { + if (!scaleBar.size() || scaleBar.style("display") === "none") return; + + const distanceScale = +distanceScaleInput.value; + const unit = distanceUnitInput.value; + const size = +scaleBar.attr("data-bar-size"); + + const length = (function () { + const init = 100; + let val = (init * size * distanceScale) / scaleLevel; // bar length in distance unit + if (val > 900) val = rn(val, -3); // round to 1000 + else if (val > 90) val = rn(val, -2); // round to 100 + else if (val > 9) val = rn(val, -1); // round to 10 + else val = rn(val); // round to 1 + const length = (val * scaleLevel) / distanceScale; // actual length in pixels on this scale + return length; + })(); + + scaleBar.select("#scaleBarContent").remove(); // redraw content every time + const content = scaleBar.append("g").attr("id", "scaleBarContent"); + + const lines = content.append("g"); + lines + .append("line") + .attr("x1", 0.5) + .attr("y1", 0) + .attr("x2", length + size - 0.5) + .attr("y2", 0) + .attr("stroke-width", size) + .attr("stroke", "white"); + lines + .append("line") + .attr("x1", 0) + .attr("y1", size) + .attr("x2", length + size) + .attr("y2", size) + .attr("stroke-width", size) + .attr("stroke", "#3d3d3d"); + lines + .append("line") + .attr("x1", 0) + .attr("y1", 0) + .attr("x2", length + size) + .attr("y2", 0) + .attr("stroke-width", rn(size * 3, 2)) + .attr("stroke-dasharray", size + " " + rn(length / 5 - size, 2)) + .attr("stroke", "#3d3d3d"); + + const texts = content.append("g").attr("text-anchor", "middle").attr("font-family", "var(--serif)"); + texts + .selectAll("text") + .data(d3.range(0, 6)) + .enter() + .append("text") + .attr("x", d => rn((d * length) / 5, 2)) + .attr("y", 0) + .attr("dy", "-.6em") + .text(d => rn((((d * length) / 5) * distanceScale) / scaleLevel) + (d < 5 ? "" : " " + unit)); + + const label = scaleBar.attr("data-label"); + if (label) { + texts + .append("text") + .attr("x", (length + 1) / 2) + .attr("dy", ".6em") + .attr("dominant-baseline", "text-before-edge") + .text(label); + } + + const scaleBarBack = scaleBar.select("#scaleBarBack"); + if (scaleBarBack.size()) { + const bbox = content.node().getBBox(); + const paddingTop = +scaleBarBack.attr("data-top") || 0; + const paddingLeft = +scaleBarBack.attr("data-left") || 0; + const paddingRight = +scaleBarBack.attr("data-right") || 0; + const paddingBottom = +scaleBarBack.attr("data-bottom") || 0; + + scaleBar + .select("#scaleBarBack") + .attr("x", -paddingLeft) + .attr("y", -paddingTop) + .attr("width", bbox.width + paddingRight) + .attr("height", bbox.height + paddingBottom); + } +} + +// fit ScaleBar to screen size +function fitScaleBar(scaleBar, fullWidth, fullHeight) { + if (!scaleBar.select("rect").size() || scaleBar.style("display") === "none") return; + + const posX = +scaleBar.attr("data-x") || 99; + const posY = +scaleBar.attr("data-y") || 99; + const bbox = scaleBar.select("rect").node().getBBox(); + + const x = rn((fullWidth * posX) / 100 - bbox.width + 10); + const y = rn((fullHeight * posY) / 100 - bbox.height + 20); + scaleBar.attr("transform", `translate(${x},${y})`); +} + function toggleZones(event) { if (!layerIsOn("toggleZones")) { turnButtonOn("toggleZones"); @@ -1791,10 +1878,7 @@ function toggleEmblems(event) { $("#emblems").fadeIn(); if (event && isCtrlClick(event)) editStyle("emblems"); } else { - if (event && isCtrlClick(event)) { - editStyle("emblems"); - return; - } + if (event && isCtrlClick(event)) return editStyle("emblems"); $("#emblems").fadeOut(); turnButtonOff("toggleEmblems"); } diff --git a/modules/ui/measurers.js b/modules/ui/measurers.js index eedeaffb..8120fff1 100644 --- a/modules/ui/measurers.js +++ b/modules/ui/measurers.js @@ -532,101 +532,3 @@ class Planimeter extends Measurer { this.el.select("text").attr("x", c[0]).attr("y", c[1]).text(area); } } - -// Scale bar -function drawScaleBar(scaleBar, scaleLevel) { - if (!scaleBar.size() || scaleBar.style("display") === "none") return; - scaleBar.selectAll("*").remove(); // fully redraw every time - - const distanceScale = +distanceScaleInput.value; - const unit = distanceUnitInput.value; - const size = +barSizeInput.value; - - // calculate size - const init = 100; - let val = (init * size * distanceScale) / scaleLevel; // bar length in distance unit - if (val > 900) val = rn(val, -3); - // round to 1000 - else if (val > 90) val = rn(val, -2); - // round to 100 - else if (val > 9) val = rn(val, -1); - // round to 10 - else val = rn(val); // round to 1 - const length = (val * scaleLevel) / distanceScale; // actual length in pixels on this scale - - scaleBar - .append("line") - .attr("x1", 0.5) - .attr("y1", 0) - .attr("x2", length + size - 0.5) - .attr("y2", 0) - .attr("stroke-width", size) - .attr("stroke", "white"); - scaleBar - .append("line") - .attr("x1", 0) - .attr("y1", size) - .attr("x2", length + size) - .attr("y2", size) - .attr("stroke-width", size) - .attr("stroke", "#3d3d3d"); - const dash = size + " " + rn(length / 5 - size, 2); - scaleBar - .append("line") - .attr("x1", 0) - .attr("y1", 0) - .attr("x2", length + size) - .attr("y2", 0) - .attr("stroke-width", rn(size * 3, 2)) - .attr("stroke-dasharray", dash) - .attr("stroke", "#3d3d3d"); - - const fontSize = rn(5 * size, 1); - scaleBar - .selectAll("text") - .data(d3.range(0, 6)) - .enter() - .append("text") - .attr("x", d => rn((d * length) / 5, 2)) - .attr("y", 0) - .attr("dy", "-.6em") - .attr("font-size", fontSize) - .text(d => rn((((d * length) / 5) * distanceScale) / scaleLevel) + (d < 5 ? "" : " " + unit)); - - if (barLabel.value !== "") { - scaleBar - .append("text") - .attr("x", (length + 1) / 2) - .attr("y", 2 * size) - .attr("dominant-baseline", "text-before-edge") - .attr("font-size", fontSize) - .text(barLabel.value); - } - - const bbox = scaleBar.node().getBBox(); - // append backbround rectangle - scaleBar - .insert("rect", ":first-child") - .attr("x", -10) - .attr("y", -20) - .attr("width", bbox.width + 10) - .attr("height", bbox.height + 15) - .attr("stroke-width", size) - .attr("stroke", "none") - .attr("filter", "url(#blur5)") - .attr("fill", barBackColor.value) - .attr("opacity", +barBackOpacity.value); -} - -// fit ScaleBar to screen size -function fitScaleBar(scaleBar, fullWidth, fullHeight) { - if (!scaleBar.select("rect").size() || scaleBar.style("display") === "none") return; - - const px = isNaN(+barPosX.value) ? 0.99 : barPosX.value / 100; - const py = isNaN(+barPosY.value) ? 0.99 : barPosY.value / 100; - const bbox = scaleBar.select("rect").node().getBBox(); - - const x = rn(fullWidth * px - bbox.width + 10); - const y = rn(fullHeight * py - bbox.height + 20); - scaleBar.attr("transform", `translate(${x},${y})`); -} diff --git a/modules/ui/options.js b/modules/ui/options.js index 145c319a..26725f58 100644 --- a/modules/ui/options.js +++ b/modules/ui/options.js @@ -774,7 +774,7 @@ function showExportPane() { } async function exportToJson(type) { - const {exportToJson} = await import("../dynamic/export-json.js?v=1.93.03"); + const {exportToJson} = await import("../dynamic/export-json.js?v=1.96.00"); exportToJson(type); } diff --git a/modules/ui/style.js b/modules/ui/style.js index 26819300..67e87928 100644 --- a/modules/ui/style.js +++ b/modules/ui/style.js @@ -14,6 +14,7 @@ byId("styleFilterInput").innerHTML = allOptions; byId("styleStatesBodyFilter").innerHTML = allOptions; + byId("styleScaleBarBackgroundFilter").innerHTML = allOptions; } // store some style inputs as options @@ -95,13 +96,13 @@ function selectStyleElement() { } // filter - if (!["landmass", "legend", "regions"].includes(styleElement)) { + if (!["landmass", "legend", "regions", "scaleBar"].includes(styleElement)) { styleFilter.style.display = "block"; styleFilterInput.value = el.attr("filter") || ""; } // fill - if (["rivers", "lakes", "landmass", "prec", "ice", "fogging", "vignette"].includes(styleElement)) { + if (["rivers", "lakes", "landmass", "prec", "ice", "fogging", "scaleBar", "vignette"].includes(styleElement)) { styleFill.style.display = "block"; styleFillInput.value = styleFillOutput.value = el.attr("fill"); } @@ -360,6 +361,31 @@ function selectStyleElement() { if (auto) styleFilter.style.display = "none"; } + if (styleElement === "scaleBar") { + styleScaleBar.style.display = "block"; + + styleScaleBarSize.value = el.attr("data-bar-size"); + styleScaleBarFontSize.value = el.attr("font-size"); + styleScaleBarPositionX.value = el.attr("data-x") || "99"; + styleScaleBarPositionY.value = el.attr("data-y") || "99"; + styleScaleBarLabel.value = el.attr("data-label") || ""; + + const scaleBarBack = el.select("#scaleBarBack"); + if (scaleBarBack.size()) { + styleScaleBarBackgroundOpacityInput.value = styleScaleBarBackgroundOpacityOutput.value = + scaleBarBack.attr("opacity"); + styleScaleBarBackgroundFillInput.value = styleScaleBarBackgroundFillOutput.value = scaleBarBack.attr("fill"); + styleScaleBarBackgroundStrokeInput.value = styleScaleBarBackgroundStrokeOutput.value = + scaleBarBack.attr("stroke"); + styleScaleBarBackgroundStrokeWidth.value = scaleBarBack.attr("stroke-width"); + styleScaleBarBackgroundFilter.value = scaleBarBack.attr("filter"); + styleScaleBarBackgroundPaddingTop.value = scaleBarBack.attr("data-top"); + styleScaleBarBackgroundPaddingRight.value = scaleBarBack.attr("data-right"); + styleScaleBarBackgroundPaddingBottom.value = scaleBarBack.attr("data-bottom"); + styleScaleBarBackgroundPaddingLeft.value = scaleBarBack.attr("data-left"); + } + } + if (styleElement === "vignette") { styleVignette.style.display = "block"; @@ -1050,6 +1076,44 @@ styleVignetteBlur.addEventListener("input", function () { byId("vignette-rect")?.setAttribute("filter", `blur(${this.value}px)`); }); +styleScaleBar.addEventListener("input", function (event) { + const scaleBarBack = scaleBar.select("#scaleBarBack"); + if (!scaleBarBack.size()) return; + + const {id, value} = event.target; + + if (id === "styleScaleBarSize") scaleBar.attr("data-bar-size", value); + else if (id === "styleScaleBarFontSize") scaleBar.attr("font-size", value); + else if (id === "styleScaleBarPositionX") scaleBar.attr("data-x", value); + else if (id === "styleScaleBarPositionY") scaleBar.attr("data-y", value); + else if (id === "styleScaleBarLabel") scaleBar.attr("data-label", value); + else if (id === "styleScaleBarBackgroundOpacityInput") scaleBarBack.attr("opacity", value); + else if (id === "styleScaleBarBackgroundFillInput") scaleBarBack.attr("fill", value); + else if (id === "styleScaleBarBackgroundStrokeInput") scaleBarBack.attr("stroke", value); + else if (id === "styleScaleBarBackgroundStrokeWidth") scaleBarBack.attr("stroke-width", value); + else if (id === "styleScaleBarBackgroundFilter") scaleBarBack.attr("filter", value); + else if (id === "styleScaleBarBackgroundPaddingTop") scaleBarBack.attr("data-top", value); + else if (id === "styleScaleBarBackgroundPaddingRight") scaleBarBack.attr("data-right", value); + else if (id === "styleScaleBarBackgroundPaddingBottom") scaleBarBack.attr("data-bottom", value); + else if (id === "styleScaleBarBackgroundPaddingLeft") scaleBarBack.attr("data-left", value); + + if ( + [ + "styleScaleBarSize", + "styleScaleBarPositionX", + "styleScaleBarPositionY", + "styleScaleBarLabel", + "styleScaleBarBackgroundPaddingLeft", + "styleScaleBarBackgroundPaddingTop", + "styleScaleBarBackgroundPaddingRight", + "styleScaleBarBackgroundPaddingBottom" + ].includes(id) + ) { + drawScaleBar(scaleBar, scale); + fitScaleBar(scaleBar, svgWidth, svgHeight); + } +}); + function updateElements() { // burgIcons to desired size burgIcons.selectAll("g").each(function () { diff --git a/modules/ui/stylePresets.js b/modules/ui/stylePresets.js index db0a6c03..aa13d800 100644 --- a/modules/ui/stylePresets.js +++ b/modules/ui/stylePresets.js @@ -140,6 +140,9 @@ function applyStyleWithUiRefresh(style) { invokeActiveZooming(); setPresetRemoveButtonVisibiliy(); + + drawScaleBar(scaleBar, scale); + fitScaleBar(scaleBar, svgWidth, svgHeight); } function addStylePreset() { @@ -312,7 +315,19 @@ function addStylePreset() { ], "#fogging": ["opacity", "fill", "filter"], "#vignette": ["opacity", "fill", "filter"], - "#vignette-rect": ["x", "y", "width", "height", "rx", "ry", "filter"] + "#vignette-rect": ["x", "y", "width", "height", "rx", "ry", "filter"], + "#scaleBar": ["opacity", "fill", "font-size", "data-bar-size", "data-x", "data-y", "data-label"], + "#scaleBarBack": [ + "opacity", + "fill", + "stroke", + "stroke-width", + "filter", + "data-top", + "data-right", + "data-bottom", + "data-left" + ] }; for (const selector in attributes) { diff --git a/modules/ui/units-editor.js b/modules/ui/units-editor.js index dabd7793..97a3573f 100644 --- a/modules/ui/units-editor.js +++ b/modules/ui/units-editor.js @@ -24,13 +24,6 @@ function editUnits() { byId("heightExponentInput").addEventListener("input", changeHeightExponent); byId("heightExponentOutput").addEventListener("input", changeHeightExponent); byId("temperatureScale").addEventListener("change", changeTemperatureScale); - byId("barSizeOutput").addEventListener("input", renderScaleBar); - byId("barSizeInput").addEventListener("input", renderScaleBar); - byId("barLabel").addEventListener("input", renderScaleBar); - byId("barPosX").addEventListener("input", fitScaleBar); - byId("barPosY").addEventListener("input", fitScaleBar); - byId("barBackOpacity").addEventListener("input", changeScaleBarOpacity); - byId("barBackColor").addEventListener("input", changeScaleBarColor); byId("populationRateOutput").addEventListener("input", changePopulationRate); byId("populationRateInput").addEventListener("change", changePopulationRate); @@ -84,14 +77,6 @@ function editUnits() { if (layerIsOn("toggleTemp")) drawTemp(); } - function changeScaleBarOpacity() { - scaleBar.select("rect").attr("opacity", this.value); - } - - function changeScaleBarColor() { - scaleBar.select("rect").attr("fill", this.value); - } - function changePopulationRate() { populationRate = +this.value; } @@ -129,19 +114,6 @@ function editUnits() { localStorage.removeItem("heightExponent"); calculateTemperatures(); - // scale bar - barSizeOutput.value = barSizeInput.value = 2; - barLabel.value = ""; - barBackOpacity.value = 0.2; - barBackColor.value = "#ffffff"; - barPosX.value = barPosY.value = 99; - - localStorage.removeItem("barSize"); - localStorage.removeItem("barLabel"); - localStorage.removeItem("barBackOpacity"); - localStorage.removeItem("barBackColor"); - localStorage.removeItem("barPosX"); - localStorage.removeItem("barPosY"); renderScaleBar(); // population diff --git a/styles/ancient.json b/styles/ancient.json index 7d675a3f..06890a36 100644 --- a/styles/ancient.json +++ b/styles/ancient.json @@ -400,5 +400,25 @@ "rx": "0%", "ry": "0%", "filter": "blur(50px)" + }, + "#scaleBar": { + "opacity": 1, + "fill": "#353540", + "font-size": 10, + "data-bar-size": 2, + "data-x": 99, + "data-y": 99, + "data-label": "" + }, + "#scaleBarBack": { + "opacity": 0, + "fill": "#ffffff", + "stroke": "#000000", + "stroke-width": 1, + "filter": "url(#blur5)", + "data-top": 20, + "data-right": 15, + "data-bottom": 15, + "data-left": 10 } } diff --git a/styles/atlas.json b/styles/atlas.json index 79ba9a87..1a0a6198 100644 --- a/styles/atlas.json +++ b/styles/atlas.json @@ -400,5 +400,25 @@ "rx": "5%", "ry": "5%", "filter": "blur(30px)" + }, + "#scaleBar": { + "opacity": 1, + "fill": "#353540", + "font-size": 9, + "data-bar-size": 1.5, + "data-x": 99, + "data-y": 99, + "data-label": "" + }, + "#scaleBarBack": { + "opacity": 0.2, + "fill": "#ffffff", + "stroke": "#000000", + "stroke-width": 1, + "filter": null, + "data-top": 18, + "data-right": 15, + "data-bottom": 15, + "data-left": 10 } } diff --git a/styles/clean.json b/styles/clean.json index 53419fba..2e02bd64 100644 --- a/styles/clean.json +++ b/styles/clean.json @@ -402,5 +402,25 @@ "rx": "5%", "ry": "5%", "filter": "blur(20px)" + }, + "#scaleBar": { + "opacity": 1, + "fill": "#353540", + "font-size": 8, + "data-bar-size": 1.5, + "data-x": 99, + "data-y": 99, + "data-label": "" + }, + "#scaleBarBack": { + "opacity": 0, + "fill": "#ffffff", + "stroke": "#000000", + "stroke-width": 1, + "filter": "", + "data-top": 17, + "data-right": 15, + "data-bottom": 15, + "data-left": 10 } } diff --git a/styles/cyberpunk.json b/styles/cyberpunk.json index c8b99264..a99471a0 100644 --- a/styles/cyberpunk.json +++ b/styles/cyberpunk.json @@ -400,5 +400,25 @@ "rx": "5%", "ry": "5%", "filter": "blur(20px)" + }, + "#scaleBar": { + "opacity": 1, + "fill": "#d0d0dc", + "font-size": 11, + "data-bar-size": 2, + "data-x": 99, + "data-y": 99, + "data-label": "" + }, + "#scaleBarBack": { + "opacity": 0.3, + "fill": "#05001f", + "stroke": "#000000", + "stroke-width": 1, + "filter": "", + "data-top": 23, + "data-right": 18, + "data-bottom": 18, + "data-left": 12 } } diff --git a/styles/default.json b/styles/default.json index 45b28bc5..7e6521ea 100644 --- a/styles/default.json +++ b/styles/default.json @@ -409,5 +409,25 @@ "rx": "5%", "ry": "5%", "filter": "blur(20px)" + }, + "#scaleBar": { + "opacity": 1, + "fill": "#353540", + "font-size": 10, + "data-bar-size": 2, + "data-x": 99, + "data-y": 99, + "data-label": "" + }, + "#scaleBarBack": { + "opacity": 0.2, + "fill": "#ffffff", + "stroke": "#000000", + "stroke-width": 1, + "filter": "url(#blur5)", + "data-top": 20, + "data-right": 15, + "data-bottom": 15, + "data-left": 10 } } diff --git a/styles/gloom.json b/styles/gloom.json index 80e4f196..e590d616 100644 --- a/styles/gloom.json +++ b/styles/gloom.json @@ -402,5 +402,25 @@ "rx": "10%", "ry": "10%", "filter": "blur(30px)" + }, + "#scaleBar": { + "opacity": 1, + "fill": "#121212", + "font-size": 10, + "data-bar-size": 2, + "data-x": 99, + "data-y": 99, + "data-label": "" + }, + "#scaleBarBack": { + "opacity": 0.2, + "fill": "#607671", + "stroke": "#000000", + "stroke-width": 1, + "filter": "url(#blur5)", + "data-top": 20, + "data-right": 15, + "data-bottom": 15, + "data-left": 10 } } diff --git a/styles/light.json b/styles/light.json index 43f7acd4..4de30f7e 100644 --- a/styles/light.json +++ b/styles/light.json @@ -400,5 +400,25 @@ "rx": "5%", "ry": "5%", "filter": "blur(20px)" + }, + "#scaleBar": { + "opacity": 1, + "fill": "#353540", + "font-size": 10, + "data-bar-size": 2, + "data-x": 99, + "data-y": 99, + "data-label": "" + }, + "#scaleBarBack": { + "opacity": 0.2, + "fill": "#ffffff", + "stroke": "#000000", + "stroke-width": 1, + "filter": "url(#blur5)", + "data-top": 20, + "data-right": 15, + "data-bottom": 15, + "data-left": 10 } } diff --git a/styles/monochrome.json b/styles/monochrome.json index 7f93bb43..c45fdde5 100644 --- a/styles/monochrome.json +++ b/styles/monochrome.json @@ -396,5 +396,25 @@ "rx": "5%", "ry": "5%", "filter": "blur(20px)" + }, + "#scaleBar": { + "opacity": 1, + "fill": "#ffffff", + "font-size": 8, + "data-bar-size": 1.5, + "data-x": 99, + "data-y": 99, + "data-label": "" + }, + "#scaleBarBack": { + "opacity": 0, + "fill": "#ffffff", + "stroke": "#000000", + "stroke-width": 1, + "filter": "", + "data-top": 18, + "data-right": 15, + "data-bottom": 15, + "data-left": 10 } } diff --git a/styles/night.json b/styles/night.json index 83b278e2..7c4c6b1e 100644 --- a/styles/night.json +++ b/styles/night.json @@ -400,5 +400,25 @@ "rx": "5%", "ry": "5%", "filter": "blur(20px)" + }, + "#scaleBar": { + "opacity": 1, + "fill": "#b5c1d4", + "font-size": 11, + "data-bar-size": 2, + "data-x": 99, + "data-y": 99, + "data-label": "" + }, + "#scaleBarBack": { + "opacity": 0.5, + "fill": "#0a1e24", + "stroke": "#40547a", + "stroke-width": 1, + "filter": "", + "data-top": 22, + "data-right": 15, + "data-bottom": 16, + "data-left": 10 } } diff --git a/styles/pale.json b/styles/pale.json index 4267f47d..35702bc1 100644 --- a/styles/pale.json +++ b/styles/pale.json @@ -400,5 +400,25 @@ "rx": "5%", "ry": "5%", "filter": "blur(30px)" + }, + "#scaleBar": { + "opacity": 1, + "fill": "#353540", + "font-size": 10, + "data-bar-size": 2, + "data-x": 99, + "data-y": 99, + "data-label": "" + }, + "#scaleBarBack": { + "opacity": 0.2, + "fill": "#ffffff", + "stroke": "#000000", + "stroke-width": 1, + "filter": "url(#blur5)", + "data-top": 20, + "data-right": 15, + "data-bottom": 15, + "data-left": 10 } } diff --git a/styles/watercolor.json b/styles/watercolor.json index fc0201bc..cf90e3f7 100644 --- a/styles/watercolor.json +++ b/styles/watercolor.json @@ -400,5 +400,25 @@ "rx": "5%", "ry": "5%", "filter": "blur(20px)" + }, + "#scaleBar": { + "opacity": 1, + "fill": "#353540", + "font-size": 10, + "data-bar-size": 2, + "data-x": 99, + "data-y": 99, + "data-label": "" + }, + "#scaleBarBack": { + "opacity": 0.2, + "fill": "#ffffff", + "stroke": "#000000", + "stroke-width": 1, + "filter": "url(#blur5)", + "data-top": 20, + "data-right": 15, + "data-bottom": 15, + "data-left": 10 } }