feat: add zoom-based route visibility by type tier

Add data-type attributes to route SVG paths and toggle visibility in
invokeActiveZooming based on route tier: royal/main/major at zoom 1,
market/town/local at zoom 4, trail at zoom 7, footpath at zoom 10.
Also adjust label zoom thresholds (states always visible, skyburg at 4).

Author: barrulus

public/main.js

@@ -499,8 +499,8 @@ function invokeActiveZooming() {
   // rescale labels on zoom
   if (labels.style("display") !== "none") {
     const MIN_ZOOM_DEFAULTS = {
-      states: 2,
-      capital: 1, skyburg: 1,
+      states: 0,
+      capital: 1, skyburg: 4,
       city: 4, town: 6,
       fort: 7, monastery: 7, caravanserai: 7, trading_post: 7,
       village: 10, hamlet: 14
@@ -519,6 +519,24 @@ function invokeActiveZooming() {
     });
   }
 
+  // toggle route visibility by type on zoom
+  if (routes.style("display") !== "none") {
+    const ROUTE_MIN_ZOOM = {
+      royal: 1, main: 1, major: 1,
+      market: 4, town: 4, local: 4,
+      trail: 7,
+      footpath: 10
+    };
+
+    routes.selectAll("path").each(function () {
+      const type = this.dataset.type;
+      if (!type) return;
+      const minZoom = ROUTE_MIN_ZOOM[type] || 0;
+      if (scale < minZoom) this.classList.add("hidden");
+      else this.classList.remove("hidden");
+    });
+  }
+
   // rescale emblems on zoom
   if (emblems.style("display") !== "none") {
     emblems.selectAll("g").each(function () {

public/modules/ui/layers.js

@@ -791,7 +791,8 @@ function drawRoutes() {
     const {i, group, points} = route;
     if (!points || points.length < 2) continue;
     if (!routePaths[group]) routePaths[group] = [];
-    routePaths[group].push(`<path id="route${i}" d="${Routes.getPath(route)}"/>`);
+    const typeAttr = route.type ? ` data-type="${route.type}"` : "";
+    routePaths[group].push(`<path id="route${i}"${typeAttr} d="${Routes.getPath(route)}"/>`);
   }
 
   routes.selectAll("path").remove();
@@ -803,11 +804,12 @@ function drawRoutes() {
 }
 
 function drawRoute(route) {
-  routes
+  const el = routes
     .select("#" + route.group)
     .append("path")
     .attr("d", Routes.getPath(route))
     .attr("id", "route" + route.i);
+  if (route.type) el.attr("data-type", route.type);
 }
 
 function toggleMilitary(event) {