feat: burg groups - image icons

modules/renderers/draw-burg-icons.js

@@ -12,6 +12,7 @@ function drawBurgIcons() {
     if (g.empty()) continue;
 
     const icon = g.attr("data-icon") || "#icon-circle";
+
     g.selectAll("use")
       .data(burgsInGroup)
       .enter()
@@ -22,6 +23,17 @@ function drawBurgIcons() {
       .attr("x", d => d.x)
       .attr("y", d => d.y);
 
+    // g.selectAll("circle")
+    //   .data(burgsInGroup)
+    //   .enter()
+    //   .append("circle")
+    //   .attr("id", d => "burg_circle" + d.i)
+    //   .attr("cx", d => d.x)
+    //   .attr("cy", d => d.y)
+    //   .attr("r", 0.2)
+    //   .attr("fill", "red")
+    //   .attr("stroke", "none");
+
     // capitalAnchors
     //   .selectAll("use")
     //   .data(capitals.filter(c => c.port))

modules/renderers/draw-burg-labels.js

@@ -10,6 +10,8 @@ function drawBurgLabels() {
 
     const labelGroup = burgLabels.select("#" + name);
     if (labelGroup.empty()) continue;
+
+    const dx = labelGroup.attr("data-dx");
     const dy = labelGroup.attr("data-dy");
 
     labelGroup
@@ -21,6 +23,7 @@ function drawBurgLabels() {
       .attr("data-id", d => d.i)
       .attr("x", d => d.x)
       .attr("y", d => d.y)
+      .attr("dx", dx + "em")
       .attr("dy", dy + "em")
       .text(d => d.name);
   }
@@ -30,6 +33,7 @@ function drawBurgLabels() {
 
 function drawBurgLabel(burg) {
   const group = burgLabels.select("#" + burg.group);
+  const dx = labelGroup.attr("data-dx");
   const dy = labelGroup.attr("data-dy");
 
   group
@@ -38,6 +42,7 @@ function drawBurgLabel(burg) {
     .attr("data-id", burg.i)
     .attr("x", burg.x)
     .attr("y", burg.y)
+    .attr("dx", dx + "em")
     .attr("dy", dy + "em")
     .text(burg.name);
 }

modules/ui/general.js

@@ -167,7 +167,7 @@ function showMapTooltip(point, e, i, g) {
     if (burgId) {
       const burg = pack.burgs[burgId];
       const population = si(burg.population * populationRate * urbanization);
-      tip(`${burg.name}. Population: ${population}. Click to edit`);
+      tip(`${burg.name}. Population: ${population}. Group: ${burg.group}. Click to edit`);
       if (burgsOverview?.offsetParent) highlightEditorLine(burgsOverview, burgId, 5000);
       return;
     }

modules/ui/style-presets.js

@@ -135,6 +135,7 @@ async function changeStyle(desiredPreset) {
   const [presetName, style] = styleData;
   localStorage.setItem("presetStyle", presetName);
   applyStyleWithUiRefresh(style);
+  if (layerIsOn("toggleBurgIcons")) drawBurgIcons();
 }
 
 function applyStyleWithUiRefresh(style) {
@@ -325,6 +326,7 @@ function addStylePreset() {
       "data-size",
       "font-size",
       "font-family",
+      "data-dx",
       "data-dy"
     ];
     const burgIconsAttributes = [

modules/ui/style.js

@@ -279,6 +279,7 @@ function selectStyleElement() {
 
     if (el.node().parentNode.id === "burgLabels") {
       styleFontShift.style.display = "block";
+      styleFontShiftX.value = el.attr("data-dx") || 0;
       styleFontShiftY.value = el.attr("data-dy") || 0;
     }
   }
@@ -892,6 +893,13 @@ function changeFontSize(el, size) {
   if (styleElementSelect.value === "legend") redrawLegend();
 }
 
+styleFontShiftX.on("input", e => {
+  getEl()
+    .attr("data-dx", e.target.value)
+    .selectAll("text")
+    .attr("dx", e.target.value + "em");
+});
+
 styleFontShiftY.on("input", e => {
   getEl()
     .attr("data-dy", e.target.value)