@india-boundary-corrector/service-worker 0.0.5 → 0.1.0

package/dist/worker.global.js

@@ -1,7 +1,7 @@
 "use strict";
 var IndiaBoundaryCorrector = (() => {
   // ../data/version.js
-  var packageVersion = "0.0.5";
+  var packageVersion = "0.1.0";
 
   // ../data/index.js
   var import_meta = {};
@@ -22,14 +22,17 @@ var IndiaBoundaryCorrector = (() => {
       scriptUrl = CURRENT_SCRIPT_URL;
     }
     if (scriptUrl) {
-      const moduleUrl = new URL(".", scriptUrl);
-      if (FALLBACK_CDNS.has(moduleUrl.hostname)) {
-        return DEFAULT_CDN_URL;
-      }
-      return new URL(PMTILES_FILENAME, moduleUrl).href;
+      return resolvePmtilesUrl(scriptUrl);
     }
     return DEFAULT_CDN_URL;
   }
+  function resolvePmtilesUrl(scriptUrl) {
+    const moduleUrl = new URL(".", scriptUrl);
+    if (FALLBACK_CDNS.has(moduleUrl.hostname)) {
+      return DEFAULT_CDN_URL;
+    }
+    return new URL(PMTILES_FILENAME, moduleUrl).href;
+  }
   var cachedPmtilesUrl = null;
   function getPmtilesUrl() {
     if (cachedPmtilesUrl === null) {
@@ -42,7 +45,6 @@ var IndiaBoundaryCorrector = (() => {
   var configs_default = [
     {
       id: "cartodb-dark",
-      zoomThreshold: 5,
       tileUrlTemplates: [
         "https://{s}.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}{r}.png",
         "https://basemaps.cartocdn.com/dark_all/{z}/{x}/{y}{r}.png",
@@ -51,15 +53,17 @@ var IndiaBoundaryCorrector = (() => {
         "https://basemaps.cartocdn.com/dark_nolabels/{z}/{x}/{y}{r}.png",
         "https://cartodb-basemaps-{s}.global.ssl.fastly.net/dark_nolabels/{z}/{x}/{y}{r}.png"
       ],
-      lineWidthStops: { "1": 0.5, "10": 2.5 },
+      lineWidthStops: { "0": 1, "2": 1, "3": 1, "10": 2.5 },
       lineStyles: [
-        { color: "rgb(40, 40, 40)" }
+        { color: "rgb(40, 40, 40)", layerSuffix: "ne", endZoom: 4 },
+        { color: "rgb(40, 40, 40)", layerSuffix: "ne-disp", endZoom: 4 },
+        { color: "rgb(40, 40, 40)", layerSuffix: "osm", startZoom: 5 },
+        { color: "rgb(40, 40, 40)", layerSuffix: "osm-disp", startZoom: 5 },
+        { color: "rgb(40, 40, 40)", layerSuffix: "osm-internal", startZoom: 4, widthFraction: 0.3, dashArray: [2, 2] }
       ]
     },
     {
       id: "cartodb-light",
-      startZoom: 0,
-      zoomThreshold: 5,
       tileUrlTemplates: [
         "https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}{r}.png",
         "https://basemaps.cartocdn.com/light_all/{z}/{x}/{y}{r}.png",
@@ -74,56 +78,62 @@ var IndiaBoundaryCorrector = (() => {
         "https://{s}.basemaps.cartocdn.com/rastertiles/voyager_labels_under/{z}/{x}/{y}{r}.png",
         "https://basemaps.cartocdn.com/rastertiles/voyager_labels_under/{z}/{x}/{y}{r}.png"
       ],
-      lineWidthStops: { "1": 0.25, "2": 0.25, "3": 0.5, "4": 0.75, "5": 1 },
+      lineWidthStops: { "1": 0.5, "2": 0.5, "3": 0.5, "4": 1, "5": 1.25, "7": 1.5, "16": 2.5 },
       lineStyles: [
-        { color: "rgb(235, 214, 214)", alpha: 0.2, startZoom: 6, widthFraction: 5 },
-        { color: "rgb(235, 214, 214)" }
+        { color: "rgb(235, 214, 214)", layerSuffix: "ne", endZoom: 4, lineExtensionFactor: 0.1, delWidthFactor: 2 },
+        { color: "rgb(235, 214, 214)", layerSuffix: "ne-disp", endZoom: 4, lineExtensionFactor: 0 },
+        { color: "rgb(235, 214, 214)", layerSuffix: "osm", alpha: 0.2, startZoom: 6, widthFraction: 3, lineExtensionFactor: 0.1 },
+        { color: "rgb(235, 214, 214)", layerSuffix: "osm", startZoom: 5, lineExtensionFactor: 0.1 },
+        { color: "rgb(235, 214, 214)", layerSuffix: "osm-disp", alpha: 0.2, startZoom: 6, widthFraction: 3, lineExtensionFactor: 0 },
+        { color: "rgb(235, 214, 214)", layerSuffix: "osm-disp", startZoom: 5, lineExtensionFactor: 0 },
+        { color: "rgb(235, 214, 214)", layerSuffix: "osm-internal", startZoom: 4, widthFraction: 0.75, dashArray: [2, 2], delWidthFactor: 2 }
       ]
     },
     {
       id: "open-topo",
-      startZoom: 4,
-      zoomThreshold: 4,
       tileUrlTemplates: [
         "https://{s}.tile.opentopomap.org/{z}/{x}/{y}.png",
         "https://tile.opentopomap.org/{z}/{x}/{y}.png"
       ],
       lineWidthStops: { "4": 0.75, "5": 1, "6": 1.25, "7": 1.5, "8": 1.75, "9": 1.25, "10": 1.25, "13": 1.5 },
       lineStyles: [
-        { color: "rgb(83, 83, 83)", startZoom: 7, endZoom: 8, alpha: 0.4, widthFraction: 4 },
-        { color: "rgb(83, 83, 83)", endZoom: 8 },
-        { color: "rgb(140, 20, 180)", startZoom: 9, widthFraction: 9, alpha: 0.2 },
-        { color: "rgb(140, 20, 180)", startZoom: 9 }
+        { color: "rgb(83, 83, 83)", layerSuffix: "ne", startZoom: 4, endZoom: 6 },
+        { color: "rgb(173, 173, 173)", layerSuffix: "osm", startZoom: 7, endZoom: 8, alpha: 0.5, widthFraction: 4 },
+        { color: "rgb(83, 83, 83)", layerSuffix: "osm", startZoom: 7, endZoom: 8 },
+        { color: "rgb(199, 158, 204)", layerSuffix: "osm", startZoom: 9, widthFraction: 7, alpha: 0.6, lineExtensionFactor: 0.2 },
+        { color: "rgb(175, 41, 203)", layerSuffix: "osm", startZoom: 9, lineExtensionFactor: 0.2 }
       ]
     },
     {
       id: "osm-carto",
-      startZoom: 1,
-      zoomThreshold: 1,
       tileUrlTemplates: [
         "https://tile.openstreetmap.org/{z}/{x}/{y}.png",
         "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
       ],
       lineWidthStops: { "1": 0.5, "2": 0.6, "3": 0.7, "4": 1, "10": 3.75 },
       lineStyles: [
-        { color: "rgb(200, 180, 200)" },
-        { color: "rgb(160, 120, 160)", widthFraction: 0.333, dashArray: [30, 2, 8, 2] }
+        { color: "rgb(200, 180, 200)", layerSuffix: "osm", startZoom: 1, endZoom: 3, delWidthFactor: 2.5, widthFraction: 1.5 },
+        { color: "rgb(200, 180, 200)", layerSuffix: "osm", startZoom: 4 },
+        { color: "rgb(160, 120, 160)", layerSuffix: "osm", startZoom: 4, widthFraction: 0.333, dashArray: [30, 2, 8, 2] },
+        { color: "rgb(200, 180, 200)", layerSuffix: "osm-internal", startZoom: 4, widthFraction: 0.45 },
+        { color: "rgb(160, 120, 160)", layerSuffix: "osm-internal", startZoom: 4, widthFraction: 0.15, dashArray: [4, 2, 10] }
       ]
     },
     {
       id: "osm-hot",
-      startZoom: 2,
-      zoomThreshold: 2,
       tileUrlTemplates: [
-        "https://{s}.tile.openstreetmap.fr/hot/{z}/{x}/{y}.png"
+        "https://{s}.tile.openstreetmap.fr/hot/{z}/{x}/{y}.png",
+        "https://tile.openstreetmap.fr/hot/{z}/{x}/{y}.png"
       ],
       lineWidthStops: { "2": 3, "3": 3, "7": 3, "8": 3.5, "9": 3.5 },
       lineStyles: [
-        { color: "rgb(149, 175, 180)" },
-        { color: "rgb(89, 117, 123)", widthFraction: 0.33 }
+        { color: "rgb(149, 175, 180)", layerSuffix: "osm", lineExtensionFactor: 0.25, startZoom: 2 },
+        { color: "rgb(89, 117, 123)", layerSuffix: "osm", widthFraction: 0.33, lineExtensionFactor: 0.25, startZoom: 2 },
+        { color: "rgb(172, 163, 163)", layerSuffix: "osm-internal", widthFraction: 0.33, startZoom: 4, dashArray: [7, 7, 7] }
       ]
     }
   ];
+  var INFINITY = -1;
   function templateToRegex(template) {
     const groups = [];
     let pattern = template.replace(/[.*+?^${}()|[\]\\]/g, (char) => {
@@ -190,6 +200,9 @@ var IndiaBoundaryCorrector = (() => {
       if (!isValidColor(obj.color)) {
         throw new Error(`${prefix}: color "${obj.color}" is not a valid CSS color`);
       }
+      if (!obj.layerSuffix || typeof obj.layerSuffix !== "string") {
+        throw new Error(`${prefix}: layerSuffix must be a non-empty string`);
+      }
       if (obj.widthFraction !== void 0 && (typeof obj.widthFraction !== "number" || obj.widthFraction <= 0)) {
         throw new Error(`${prefix}: widthFraction must be a positive number`);
       }
@@ -202,26 +215,38 @@ var IndiaBoundaryCorrector = (() => {
       if (obj.startZoom !== void 0 && (typeof obj.startZoom !== "number" || obj.startZoom < 0)) {
         throw new Error(`${prefix}: startZoom must be a non-negative number`);
       }
-      if (obj.endZoom !== void 0 && (typeof obj.endZoom !== "number" || obj.endZoom < 0)) {
-        throw new Error(`${prefix}: endZoom must be a non-negative number`);
+      if (obj.endZoom !== void 0 && (typeof obj.endZoom !== "number" || obj.endZoom < 0 && obj.endZoom !== INFINITY)) {
+        throw new Error(`${prefix}: endZoom must be a non-negative number or INFINITY (${INFINITY})`);
+      }
+      if (obj.lineExtensionFactor !== void 0 && (typeof obj.lineExtensionFactor !== "number" || obj.lineExtensionFactor < 0)) {
+        throw new Error(`${prefix}: lineExtensionFactor must be a non-negative number`);
+      }
+      if (obj.delWidthFactor !== void 0 && (typeof obj.delWidthFactor !== "number" || obj.delWidthFactor < 0)) {
+        throw new Error(`${prefix}: delWidthFactor must be a non-negative number`);
       }
     }
     /**
      * @param {Object} options
      * @param {string} options.color - CSS color string
+     * @param {string} options.layerSuffix - Layer suffix (e.g., 'osm', 'ne', 'osm-disp')
      * @param {number} [options.widthFraction=1.0] - Multiplier for base line width
      * @param {number[]} [options.dashArray] - Dash pattern for dashed lines
      * @param {number} [options.alpha=1.0] - Opacity (0-1)
-     * @param {number} [options.startZoom] - Minimum zoom level for this style
-     * @param {number} [options.endZoom=Infinity] - Maximum zoom level for this style
+     * @param {number} [options.startZoom=0] - Minimum zoom level for this style
+     * @param {number} [options.endZoom=INFINITY] - Maximum zoom level for this style (INFINITY means no limit)
+     * @param {number} [options.lineExtensionFactor=0.5] - Factor to extend lines by (multiplied by deletion line width)
+     * @param {number} [options.delWidthFactor=1.5] - Factor to multiply line width for deletion blur
      */
-    constructor({ color, widthFraction = 1, dashArray, alpha = 1, startZoom, endZoom = Infinity }) {
+    constructor({ color, layerSuffix, widthFraction = 1, dashArray, alpha = 1, startZoom = 0, endZoom = INFINITY, lineExtensionFactor = 0.5, delWidthFactor = 1.5 }) {
       this.color = color;
+      this.layerSuffix = layerSuffix;
       this.widthFraction = widthFraction;
       this.dashArray = dashArray;
       this.alpha = alpha;
       this.startZoom = startZoom;
       this.endZoom = endZoom;
+      this.lineExtensionFactor = lineExtensionFactor;
+      this.delWidthFactor = delWidthFactor;
     }
     /**
      * Check if this style is active at the given zoom level.
@@ -229,34 +254,34 @@ var IndiaBoundaryCorrector = (() => {
      * @returns {boolean}
      */
     isActiveAtZoom(z2) {
-      return z2 >= this.startZoom && z2 <= this.endZoom;
+      return z2 >= this.startZoom && (this.endZoom === INFINITY || z2 <= this.endZoom);
     }
     /**
      * Serialize to plain object.
      * @returns {Object}
      */
     toJSON() {
-      const obj = { color: this.color };
-      if (this.widthFraction !== 1) obj.widthFraction = this.widthFraction;
-      if (this.dashArray) obj.dashArray = this.dashArray;
-      if (this.alpha !== 1) obj.alpha = this.alpha;
-      if (this.startZoom !== void 0) obj.startZoom = this.startZoom;
-      if (this.endZoom !== Infinity) obj.endZoom = this.endZoom;
-      return obj;
+      return {
+        color: this.color,
+        layerSuffix: this.layerSuffix,
+        widthFraction: this.widthFraction,
+        dashArray: this.dashArray,
+        alpha: this.alpha,
+        startZoom: this.startZoom,
+        endZoom: this.endZoom,
+        lineExtensionFactor: this.lineExtensionFactor,
+        delWidthFactor: this.delWidthFactor
+      };
     }
     /**
      * Create from plain object with validation.
      * @param {Object} obj
-     * @param {number} [defaultStartZoom=0] - Default startZoom if not specified
      * @param {number} [index] - Optional index for error messages
      * @returns {LineStyle}
      */
-    static fromJSON(obj, defaultStartZoom = 0, index) {
+    static fromJSON(obj, index) {
       _LineStyle.validateJSON(obj, index);
-      return new _LineStyle({
-        ...obj,
-        startZoom: obj.startZoom ?? defaultStartZoom
-      });
+      return new _LineStyle(obj);
     }
   };
   var LayerConfig = class _LayerConfig {
@@ -277,17 +302,6 @@ var IndiaBoundaryCorrector = (() => {
         throw new Error(`LayerConfig: id cannot contain slashes: "${obj.id}"`);
       }
       const id = obj.id;
-      if (obj.startZoom !== void 0 && (typeof obj.startZoom !== "number" || obj.startZoom < 0)) {
-        throw new Error(`LayerConfig "${id}": startZoom must be a non-negative number`);
-      }
-      if (obj.zoomThreshold !== void 0 && (typeof obj.zoomThreshold !== "number" || obj.zoomThreshold < 0)) {
-        throw new Error(`LayerConfig "${id}": zoomThreshold must be a non-negative number`);
-      }
-      const startZoom = obj.startZoom ?? 0;
-      const zoomThreshold = obj.zoomThreshold ?? 5;
-      if (startZoom > zoomThreshold) {
-        throw new Error(`LayerConfig "${id}": startZoom (${startZoom}) must be <= zoomThreshold (${zoomThreshold})`);
-      }
       if (obj.lineWidthStops !== void 0) {
         if (!obj.lineWidthStops || typeof obj.lineWidthStops !== "object" || Array.isArray(obj.lineWidthStops)) {
           throw new Error(`LayerConfig "${id}": lineWidthStops must be an object`);
@@ -306,59 +320,35 @@ var IndiaBoundaryCorrector = (() => {
           }
         }
       }
-      if (obj.lineStyles !== void 0) {
-        if (!Array.isArray(obj.lineStyles) || obj.lineStyles.length === 0) {
-          throw new Error(`LayerConfig "${id}": lineStyles must be a non-empty array`);
-        }
-        for (let i2 = 0; i2 < obj.lineStyles.length; i2++) {
-          LineStyle.validateJSON(obj.lineStyles[i2], i2);
-        }
-      }
-      if (obj.delWidthFactor !== void 0 && (typeof obj.delWidthFactor !== "number" || obj.delWidthFactor <= 0)) {
-        throw new Error(`LayerConfig "${id}": delWidthFactor must be a positive number`);
+      if (!Array.isArray(obj.lineStyles) || obj.lineStyles.length === 0) {
+        throw new Error(`LayerConfig "${id}": lineStyles must be a non-empty array`);
       }
-      if (obj.lineExtensionFactor !== void 0 && (typeof obj.lineExtensionFactor !== "number" || obj.lineExtensionFactor < 0)) {
-        throw new Error(`LayerConfig "${id}": lineExtensionFactor must be a non-negative number`);
+      for (let i2 = 0; i2 < obj.lineStyles.length; i2++) {
+        LineStyle.validateJSON(obj.lineStyles[i2], i2);
       }
     }
     constructor({
       id,
-      startZoom = 0,
-      zoomThreshold = 5,
       // Tile URL templates for matching (e.g., "https://{s}.tile.example.com/{z}/{x}/{y}.png")
       tileUrlTemplates = [],
       // Line width stops: map of zoom level to line width (at least 2 entries)
       // Note: interpolated/extrapolated line width is capped at a minimum of 0.5
       lineWidthStops = { 1: 0.5, 10: 2.5 },
-      // Line styles array - each element describes a line to draw
-      // { color: string, widthFraction?: number, dashArray?: number[], startZoom?: number, endZoom?: number }
-      // Lines are drawn in array order. startZoom defaults to layerConfig startZoom, endZoom defaults to Infinity
-      lineStyles = [{ color: "green", widthFraction: 1 }],
-      // Factor to multiply line width for deletion blur (default 1.5)
-      // Higher values leave gaps where wiped lines meet existing lines
-      // Lower values mean wiped lines show through
-      delWidthFactor = 1.5,
-      // Factor to extend add lines by (multiplied by deletion line width)
-      // Helps cover gaps where deleted lines meet the new boundary
-      // Set to 0 to disable extension
-      lineExtensionFactor = 0.5
+      // Line styles array - each element describes a line to draw from a specific layer
+      // { color: string, layerSuffix: string, widthFraction?: number, dashArray?: number[], 
+      //   startZoom?: number, endZoom?: number, lineExtensionFactor?: number, delWidthFactor?: number }
+      // Lines are drawn in array order. layerSuffix determines which PMTiles layer to use.
+      lineStyles
     }) {
       this.id = id;
-      this.startZoom = startZoom;
-      this.zoomThreshold = zoomThreshold;
       const templates = Array.isArray(tileUrlTemplates) ? tileUrlTemplates : tileUrlTemplates ? [tileUrlTemplates] : [];
       this.tileUrlTemplates = templates;
       this._compiledPatterns = templates.map((t) => templateToRegex(t));
       this._templatePatterns = templates.map((t) => templateToTemplateRegex(t));
       this.lineWidthStops = lineWidthStops;
       this.lineStyles = lineStyles.map(
-        (style) => style instanceof LineStyle ? style : new LineStyle({
-          ...style,
-          startZoom: style.startZoom ?? startZoom
-        })
+        (style) => style instanceof LineStyle ? style : new LineStyle(style)
       );
-      this.delWidthFactor = delWidthFactor;
-      this.lineExtensionFactor = lineExtensionFactor;
     }
     /**
      * Get line styles active at a given zoom level
@@ -368,6 +358,15 @@ var IndiaBoundaryCorrector = (() => {
     getLineStylesForZoom(z2) {
       return this.lineStyles.filter((style) => style.isActiveAtZoom(z2));
     }
+    /**
+     * Get unique layer suffixes from styles active at a given zoom level
+     * @param {number} z - Zoom level
+     * @returns {string[]}
+     */
+    getLayerSuffixesForZoom(z2) {
+      const activeStyles = this.getLineStylesForZoom(z2);
+      return [...new Set(activeStyles.map((s) => s.layerSuffix))];
+    }
     /**
      * Check if this config matches the given template URLs (with {z}/{x}/{y} placeholders)
      * @param {string | string[]} templates - Single template URL or array of template URLs
@@ -425,13 +424,9 @@ var IndiaBoundaryCorrector = (() => {
     toJSON() {
       return {
         id: this.id,
-        startZoom: this.startZoom,
-        zoomThreshold: this.zoomThreshold,
         tileUrlTemplates: this.tileUrlTemplates,
         lineWidthStops: this.lineWidthStops,
-        lineStyles: this.lineStyles.map((s) => s.toJSON()),
-        delWidthFactor: this.delWidthFactor,
-        lineExtensionFactor: this.lineExtensionFactor
+        lineStyles: this.lineStyles.map((s) => s.toJSON())
       };
     }
     /**
@@ -2768,6 +2763,494 @@ var IndiaBoundaryCorrector = (() => {
       return await this._fetchTile(z2, x22, y, signal);
     }
   };
+  var configs_default2 = [
+    {
+      id: "cartodb-dark",
+      tileUrlTemplates: [
+        "https://{s}.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}{r}.png",
+        "https://basemaps.cartocdn.com/dark_all/{z}/{x}/{y}{r}.png",
+        "https://cartodb-basemaps-{s}.global.ssl.fastly.net/dark_all/{z}/{x}/{y}{r}.png",
+        "https://{s}.basemaps.cartocdn.com/dark_nolabels/{z}/{x}/{y}{r}.png",
+        "https://basemaps.cartocdn.com/dark_nolabels/{z}/{x}/{y}{r}.png",
+        "https://cartodb-basemaps-{s}.global.ssl.fastly.net/dark_nolabels/{z}/{x}/{y}{r}.png"
+      ],
+      lineWidthStops: { "0": 1, "2": 1, "3": 1, "10": 2.5 },
+      lineStyles: [
+        { color: "rgb(40, 40, 40)", layerSuffix: "ne", endZoom: 4 },
+        { color: "rgb(40, 40, 40)", layerSuffix: "ne-disp", endZoom: 4 },
+        { color: "rgb(40, 40, 40)", layerSuffix: "osm", startZoom: 5 },
+        { color: "rgb(40, 40, 40)", layerSuffix: "osm-disp", startZoom: 5 },
+        { color: "rgb(40, 40, 40)", layerSuffix: "osm-internal", startZoom: 4, widthFraction: 0.3, dashArray: [2, 2] }
+      ]
+    },
+    {
+      id: "cartodb-light",
+      tileUrlTemplates: [
+        "https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}{r}.png",
+        "https://basemaps.cartocdn.com/light_all/{z}/{x}/{y}{r}.png",
+        "https://cartodb-basemaps-{s}.global.ssl.fastly.net/light_all/{z}/{x}/{y}{r}.png",
+        "https://{s}.basemaps.cartocdn.com/light_nolabels/{z}/{x}/{y}{r}.png",
+        "https://basemaps.cartocdn.com/light_nolabels/{z}/{x}/{y}{r}.png",
+        "https://cartodb-basemaps-{s}.global.ssl.fastly.net/light_nolabels/{z}/{x}/{y}{r}.png",
+        "https://{s}.basemaps.cartocdn.com/rastertiles/voyager/{z}/{x}/{y}{r}.png",
+        "https://basemaps.cartocdn.com/rastertiles/voyager/{z}/{x}/{y}{r}.png",
+        "https://{s}.basemaps.cartocdn.com/rastertiles/voyager_nolabels/{z}/{x}/{y}{r}.png",
+        "https://basemaps.cartocdn.com/rastertiles/voyager_nolabels/{z}/{x}/{y}{r}.png",
+        "https://{s}.basemaps.cartocdn.com/rastertiles/voyager_labels_under/{z}/{x}/{y}{r}.png",
+        "https://basemaps.cartocdn.com/rastertiles/voyager_labels_under/{z}/{x}/{y}{r}.png"
+      ],
+      lineWidthStops: { "1": 0.5, "2": 0.5, "3": 0.5, "4": 1, "5": 1.25, "7": 1.5, "16": 2.5 },
+      lineStyles: [
+        { color: "rgb(235, 214, 214)", layerSuffix: "ne", endZoom: 4, lineExtensionFactor: 0.1, delWidthFactor: 2 },
+        { color: "rgb(235, 214, 214)", layerSuffix: "ne-disp", endZoom: 4, lineExtensionFactor: 0 },
+        { color: "rgb(235, 214, 214)", layerSuffix: "osm", alpha: 0.2, startZoom: 6, widthFraction: 3, lineExtensionFactor: 0.1 },
+        { color: "rgb(235, 214, 214)", layerSuffix: "osm", startZoom: 5, lineExtensionFactor: 0.1 },
+        { color: "rgb(235, 214, 214)", layerSuffix: "osm-disp", alpha: 0.2, startZoom: 6, widthFraction: 3, lineExtensionFactor: 0 },
+        { color: "rgb(235, 214, 214)", layerSuffix: "osm-disp", startZoom: 5, lineExtensionFactor: 0 },
+        { color: "rgb(235, 214, 214)", layerSuffix: "osm-internal", startZoom: 4, widthFraction: 0.75, dashArray: [2, 2], delWidthFactor: 2 }
+      ]
+    },
+    {
+      id: "open-topo",
+      tileUrlTemplates: [
+        "https://{s}.tile.opentopomap.org/{z}/{x}/{y}.png",
+        "https://tile.opentopomap.org/{z}/{x}/{y}.png"
+      ],
+      lineWidthStops: { "4": 0.75, "5": 1, "6": 1.25, "7": 1.5, "8": 1.75, "9": 1.25, "10": 1.25, "13": 1.5 },
+      lineStyles: [
+        { color: "rgb(83, 83, 83)", layerSuffix: "ne", startZoom: 4, endZoom: 6 },
+        { color: "rgb(173, 173, 173)", layerSuffix: "osm", startZoom: 7, endZoom: 8, alpha: 0.5, widthFraction: 4 },
+        { color: "rgb(83, 83, 83)", layerSuffix: "osm", startZoom: 7, endZoom: 8 },
+        { color: "rgb(199, 158, 204)", layerSuffix: "osm", startZoom: 9, widthFraction: 7, alpha: 0.6, lineExtensionFactor: 0.2 },
+        { color: "rgb(175, 41, 203)", layerSuffix: "osm", startZoom: 9, lineExtensionFactor: 0.2 }
+      ]
+    },
+    {
+      id: "osm-carto",
+      tileUrlTemplates: [
+        "https://tile.openstreetmap.org/{z}/{x}/{y}.png",
+        "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
+      ],
+      lineWidthStops: { "1": 0.5, "2": 0.6, "3": 0.7, "4": 1, "10": 3.75 },
+      lineStyles: [
+        { color: "rgb(200, 180, 200)", layerSuffix: "osm", startZoom: 1, endZoom: 3, delWidthFactor: 2.5, widthFraction: 1.5 },
+        { color: "rgb(200, 180, 200)", layerSuffix: "osm", startZoom: 4 },
+        { color: "rgb(160, 120, 160)", layerSuffix: "osm", startZoom: 4, widthFraction: 0.333, dashArray: [30, 2, 8, 2] },
+        { color: "rgb(200, 180, 200)", layerSuffix: "osm-internal", startZoom: 4, widthFraction: 0.45 },
+        { color: "rgb(160, 120, 160)", layerSuffix: "osm-internal", startZoom: 4, widthFraction: 0.15, dashArray: [4, 2, 10] }
+      ]
+    },
+    {
+      id: "osm-hot",
+      tileUrlTemplates: [
+        "https://{s}.tile.openstreetmap.fr/hot/{z}/{x}/{y}.png",
+        "https://tile.openstreetmap.fr/hot/{z}/{x}/{y}.png"
+      ],
+      lineWidthStops: { "2": 3, "3": 3, "7": 3, "8": 3.5, "9": 3.5 },
+      lineStyles: [
+        { color: "rgb(149, 175, 180)", layerSuffix: "osm", lineExtensionFactor: 0.25, startZoom: 2 },
+        { color: "rgb(89, 117, 123)", layerSuffix: "osm", widthFraction: 0.33, lineExtensionFactor: 0.25, startZoom: 2 },
+        { color: "rgb(172, 163, 163)", layerSuffix: "osm-internal", widthFraction: 0.33, startZoom: 4, dashArray: [7, 7, 7] }
+      ]
+    }
+  ];
+  var INFINITY2 = -1;
+  function templateToRegex2(template) {
+    const groups = [];
+    let pattern = template.replace(/[.*+?^${}()|[\]\\]/g, (char) => {
+      if (char === "{" || char === "}") return char;
+      return "\\" + char;
+    }).replace(/^https:\/\//, "https?://").replace(/^http:\/\//, "https?://").replace(/\{[a-z0-9]-[a-z0-9]\}/gi, () => {
+      groups.push("s");
+      return "([a-z0-9]+)";
+    }).replace(/\{(z|x|y|s|r)\}/gi, (_2, name) => {
+      const lowerName = name.toLowerCase();
+      groups.push(lowerName);
+      if (lowerName === "s") {
+        return "([a-z0-9]+)";
+      }
+      if (lowerName === "r") {
+        return "(@\\d+x)?";
+      }
+      return "(\\d+)";
+    });
+    return { pattern: new RegExp("^" + pattern + "(\\?.*)?$", "i"), groups };
+  }
+  function templateToTemplateRegex2(template) {
+    let pattern = template.replace(/[.*+?^${}()|[\]\\]/g, (char) => {
+      if (char === "{" || char === "}") return char;
+      return "\\" + char;
+    }).replace(/^https:\/\//, "https?://").replace(/^http:\/\//, "https?://").replace(/\{([a-z0-9])-([a-z0-9])\}/gi, (_2, start, end) => `(\\{${start}-${end}\\}|\\{s\\}|[a-z0-9]+)`).replace(/\{(z|x|y|s|r)\}/gi, (_2, name) => {
+      const lowerName = name.toLowerCase();
+      if (lowerName === "s") {
+        return "(\\{s\\}|\\{[a-z0-9]-[a-z0-9]\\}|[a-z0-9]+)";
+      }
+      if (lowerName === "r") {
+        return "(\\{r\\}|@\\d+x)?";
+      }
+      return `\\{${lowerName}\\}`;
+    });
+    return new RegExp("^" + pattern + "(\\?.*)?$", "i");
+  }
+  function isValidColor2(color) {
+    if (typeof color !== "string" || !color.trim()) return false;
+    if (typeof CSS !== "undefined" && CSS.supports) {
+      return CSS.supports("color", color);
+    }
+    const trimmed = color.trim().toLowerCase();
+    if (/^#([0-9a-f]{3}|[0-9a-f]{6}|[0-9a-f]{8})$/.test(trimmed)) return true;
+    if (/^(rgb|hsl)a?\(/.test(trimmed)) return true;
+    if (/^[a-z]+$/.test(trimmed)) return true;
+    return false;
+  }
+  var LineStyle2 = class _LineStyle2 {
+    /**
+     * Validate a LineStyle configuration object.
+     * @param {Object} obj - The object to validate
+     * @param {number} [index] - Optional index for error messages (when validating in an array)
+     * @throws {Error} If validation fails
+     */
+    static validateJSON(obj, index) {
+      const prefix = index !== void 0 ? `lineStyles[${index}]` : "LineStyle";
+      if (!obj || typeof obj !== "object") {
+        throw new Error(`${prefix}: must be an object`);
+      }
+      if (!obj.color || typeof obj.color !== "string") {
+        throw new Error(`${prefix}: color must be a non-empty string`);
+      }
+      if (!isValidColor2(obj.color)) {
+        throw new Error(`${prefix}: color "${obj.color}" is not a valid CSS color`);
+      }
+      if (!obj.layerSuffix || typeof obj.layerSuffix !== "string") {
+        throw new Error(`${prefix}: layerSuffix must be a non-empty string`);
+      }
+      if (obj.widthFraction !== void 0 && (typeof obj.widthFraction !== "number" || obj.widthFraction <= 0)) {
+        throw new Error(`${prefix}: widthFraction must be a positive number`);
+      }
+      if (obj.dashArray !== void 0 && !Array.isArray(obj.dashArray)) {
+        throw new Error(`${prefix}: dashArray must be an array`);
+      }
+      if (obj.alpha !== void 0 && (typeof obj.alpha !== "number" || obj.alpha < 0 || obj.alpha > 1)) {
+        throw new Error(`${prefix}: alpha must be a number between 0 and 1`);
+      }
+      if (obj.startZoom !== void 0 && (typeof obj.startZoom !== "number" || obj.startZoom < 0)) {
+        throw new Error(`${prefix}: startZoom must be a non-negative number`);
+      }
+      if (obj.endZoom !== void 0 && (typeof obj.endZoom !== "number" || obj.endZoom < 0 && obj.endZoom !== INFINITY2)) {
+        throw new Error(`${prefix}: endZoom must be a non-negative number or INFINITY (${INFINITY2})`);
+      }
+      if (obj.lineExtensionFactor !== void 0 && (typeof obj.lineExtensionFactor !== "number" || obj.lineExtensionFactor < 0)) {
+        throw new Error(`${prefix}: lineExtensionFactor must be a non-negative number`);
+      }
+      if (obj.delWidthFactor !== void 0 && (typeof obj.delWidthFactor !== "number" || obj.delWidthFactor < 0)) {
+        throw new Error(`${prefix}: delWidthFactor must be a non-negative number`);
+      }
+    }
+    /**
+     * @param {Object} options
+     * @param {string} options.color - CSS color string
+     * @param {string} options.layerSuffix - Layer suffix (e.g., 'osm', 'ne', 'osm-disp')
+     * @param {number} [options.widthFraction=1.0] - Multiplier for base line width
+     * @param {number[]} [options.dashArray] - Dash pattern for dashed lines
+     * @param {number} [options.alpha=1.0] - Opacity (0-1)
+     * @param {number} [options.startZoom=0] - Minimum zoom level for this style
+     * @param {number} [options.endZoom=INFINITY] - Maximum zoom level for this style (INFINITY means no limit)
+     * @param {number} [options.lineExtensionFactor=0.5] - Factor to extend lines by (multiplied by deletion line width)
+     * @param {number} [options.delWidthFactor=1.5] - Factor to multiply line width for deletion blur
+     */
+    constructor({ color, layerSuffix, widthFraction = 1, dashArray, alpha = 1, startZoom = 0, endZoom = INFINITY2, lineExtensionFactor = 0.5, delWidthFactor = 1.5 }) {
+      this.color = color;
+      this.layerSuffix = layerSuffix;
+      this.widthFraction = widthFraction;
+      this.dashArray = dashArray;
+      this.alpha = alpha;
+      this.startZoom = startZoom;
+      this.endZoom = endZoom;
+      this.lineExtensionFactor = lineExtensionFactor;
+      this.delWidthFactor = delWidthFactor;
+    }
+    /**
+     * Check if this style is active at the given zoom level.
+     * @param {number} z - Zoom level
+     * @returns {boolean}
+     */
+    isActiveAtZoom(z2) {
+      return z2 >= this.startZoom && (this.endZoom === INFINITY2 || z2 <= this.endZoom);
+    }
+    /**
+     * Serialize to plain object.
+     * @returns {Object}
+     */
+    toJSON() {
+      return {
+        color: this.color,
+        layerSuffix: this.layerSuffix,
+        widthFraction: this.widthFraction,
+        dashArray: this.dashArray,
+        alpha: this.alpha,
+        startZoom: this.startZoom,
+        endZoom: this.endZoom,
+        lineExtensionFactor: this.lineExtensionFactor,
+        delWidthFactor: this.delWidthFactor
+      };
+    }
+    /**
+     * Create from plain object with validation.
+     * @param {Object} obj
+     * @param {number} [index] - Optional index for error messages
+     * @returns {LineStyle}
+     */
+    static fromJSON(obj, index) {
+      _LineStyle2.validateJSON(obj, index);
+      return new _LineStyle2(obj);
+    }
+  };
+  var LayerConfig2 = class _LayerConfig2 {
+    /**
+     * Validate a LayerConfig configuration object.
+     * Also validates all lineStyles within the config.
+     * @param {Object} obj - The object to validate
+     * @throws {Error} If validation fails
+     */
+    static validateJSON(obj) {
+      if (!obj || typeof obj !== "object") {
+        throw new Error("LayerConfig: must be an object");
+      }
+      if (!obj.id || typeof obj.id !== "string") {
+        throw new Error("LayerConfig: id must be a non-empty string");
+      }
+      if (obj.id.includes("/")) {
+        throw new Error(`LayerConfig: id cannot contain slashes: "${obj.id}"`);
+      }
+      const id = obj.id;
+      if (obj.lineWidthStops !== void 0) {
+        if (!obj.lineWidthStops || typeof obj.lineWidthStops !== "object" || Array.isArray(obj.lineWidthStops)) {
+          throw new Error(`LayerConfig "${id}": lineWidthStops must be an object`);
+        }
+        const stopKeys = Object.keys(obj.lineWidthStops);
+        if (stopKeys.length < 2) {
+          throw new Error(`LayerConfig "${id}": lineWidthStops must have at least 2 entries`);
+        }
+        for (const key of stopKeys) {
+          const zoom = Number(key);
+          if (!Number.isInteger(zoom) || zoom < 0) {
+            throw new Error(`LayerConfig "${id}": lineWidthStops keys must be non-negative integers, got "${key}"`);
+          }
+          if (typeof obj.lineWidthStops[key] !== "number" || obj.lineWidthStops[key] <= 0) {
+            throw new Error(`LayerConfig "${id}": lineWidthStops values must be positive numbers`);
+          }
+        }
+      }
+      if (!Array.isArray(obj.lineStyles) || obj.lineStyles.length === 0) {
+        throw new Error(`LayerConfig "${id}": lineStyles must be a non-empty array`);
+      }
+      for (let i2 = 0; i2 < obj.lineStyles.length; i2++) {
+        LineStyle2.validateJSON(obj.lineStyles[i2], i2);
+      }
+    }
+    constructor({
+      id,
+      // Tile URL templates for matching (e.g., "https://{s}.tile.example.com/{z}/{x}/{y}.png")
+      tileUrlTemplates = [],
+      // Line width stops: map of zoom level to line width (at least 2 entries)
+      // Note: interpolated/extrapolated line width is capped at a minimum of 0.5
+      lineWidthStops = { 1: 0.5, 10: 2.5 },
+      // Line styles array - each element describes a line to draw from a specific layer
+      // { color: string, layerSuffix: string, widthFraction?: number, dashArray?: number[], 
+      //   startZoom?: number, endZoom?: number, lineExtensionFactor?: number, delWidthFactor?: number }
+      // Lines are drawn in array order. layerSuffix determines which PMTiles layer to use.
+      lineStyles
+    }) {
+      this.id = id;
+      const templates = Array.isArray(tileUrlTemplates) ? tileUrlTemplates : tileUrlTemplates ? [tileUrlTemplates] : [];
+      this.tileUrlTemplates = templates;
+      this._compiledPatterns = templates.map((t) => templateToRegex2(t));
+      this._templatePatterns = templates.map((t) => templateToTemplateRegex2(t));
+      this.lineWidthStops = lineWidthStops;
+      this.lineStyles = lineStyles.map(
+        (style) => style instanceof LineStyle2 ? style : new LineStyle2(style)
+      );
+    }
+    /**
+     * Get line styles active at a given zoom level
+     * @param {number} z - Zoom level
+     * @returns {LineStyle[]}
+     */
+    getLineStylesForZoom(z2) {
+      return this.lineStyles.filter((style) => style.isActiveAtZoom(z2));
+    }
+    /**
+     * Get unique layer suffixes from styles active at a given zoom level
+     * @param {number} z - Zoom level
+     * @returns {string[]}
+     */
+    getLayerSuffixesForZoom(z2) {
+      const activeStyles = this.getLineStylesForZoom(z2);
+      return [...new Set(activeStyles.map((s) => s.layerSuffix))];
+    }
+    /**
+     * Check if this config matches the given template URLs (with {z}/{x}/{y} placeholders)
+     * @param {string | string[]} templates - Single template URL or array of template URLs
+     * @returns {boolean}
+     */
+    matchTemplate(templates) {
+      if (this._templatePatterns.length === 0) return false;
+      const urls = Array.isArray(templates) ? templates : [templates];
+      if (urls.length === 0) return false;
+      return urls.some(
+        (url) => this._templatePatterns.some((pattern) => pattern.test(url))
+      );
+    }
+    /**
+     * Check if this config matches the given tile URLs (with actual coordinates)
+     * @param {string | string[]} tiles - Single tile URL or array of tile URLs
+     * @returns {boolean}
+     */
+    matchTileUrl(tiles) {
+      if (this._compiledPatterns.length === 0) return false;
+      const urls = Array.isArray(tiles) ? tiles : [tiles];
+      if (urls.length === 0) return false;
+      return urls.some(
+        (url) => this._compiledPatterns.some(({ pattern }) => pattern.test(url))
+      );
+    }
+    /**
+     * Extract tile coordinates (z, x, y) from a URL using this config's templates
+     * @param {string} url - Tile URL to extract coordinates from
+     * @returns {{ z: number, x: number, y: number } | null}
+     */
+    extractCoords(url) {
+      for (const { pattern, groups } of this._compiledPatterns) {
+        const match = url.match(pattern);
+        if (match) {
+          const result = {};
+          for (let i2 = 0; i2 < groups.length; i2++) {
+            const name = groups[i2];
+            const value = match[i2 + 1];
+            if (name === "z" || name === "x" || name === "y") {
+              result[name] = parseInt(value, 10);
+            }
+          }
+          if ("z" in result && "x" in result && "y" in result) {
+            return { z: result.z, x: result.x, y: result.y };
+          }
+        }
+      }
+      return null;
+    }
+    /**
+     * Serialize the config to a plain object for postMessage
+     * @returns {Object}
+     */
+    toJSON() {
+      return {
+        id: this.id,
+        tileUrlTemplates: this.tileUrlTemplates,
+        lineWidthStops: this.lineWidthStops,
+        lineStyles: this.lineStyles.map((s) => s.toJSON())
+      };
+    }
+    /**
+     * Create a LayerConfig from a plain object with validation.
+     * @param {Object} obj
+     * @returns {LayerConfig}
+     * @throws {Error} If validation fails
+     */
+    static fromJSON(obj) {
+      _LayerConfig2.validateJSON(obj);
+      return new _LayerConfig2(obj);
+    }
+  };
+  var LayerConfigRegistry2 = class _LayerConfigRegistry2 {
+    constructor() {
+      this.registry = {};
+    }
+    /**
+     * Get a layer config by id
+     */
+    get(id) {
+      return this.registry[id];
+    }
+    /**
+     * Register a new layer config
+     */
+    register(config) {
+      this.registry[config.id] = config;
+    }
+    /**
+     * Remove a layer config by id
+     */
+    remove(id) {
+      if (!this.registry[id]) return false;
+      delete this.registry[id];
+      return true;
+    }
+    /**
+     * Detect layer config from tile URL templates (with {z}/{x}/{y} placeholders)
+     * @param {string | string[]} templates - Single template URL or array of template URLs
+     */
+    detectFromTemplates(templates) {
+      if (!templates || Array.isArray(templates) && templates.length === 0) return void 0;
+      for (const config of Object.values(this.registry)) {
+        if (config.matchTemplate(templates)) {
+          return config;
+        }
+      }
+      return void 0;
+    }
+    /**
+     * Detect layer config from actual tile URLs (with numeric coordinates)
+     * @param {string | string[]} urls - Single tile URL or array of tile URLs
+     */
+    detectFromTileUrls(urls) {
+      if (!urls || Array.isArray(urls) && urls.length === 0) return void 0;
+      for (const config of Object.values(this.registry)) {
+        if (config.matchTileUrl(urls)) {
+          return config;
+        }
+      }
+      return void 0;
+    }
+    /**
+     * Get all available layer config ids
+     */
+    getAvailableIds() {
+      return Object.keys(this.registry);
+    }
+    /**
+     * Create a new registry with all configs from this registry plus extra configs.
+     * @param {LayerConfig[]} extraLayerConfigs - Additional configs to add
+     * @returns {LayerConfigRegistry} A new registry with merged configs
+     */
+    createMergedRegistry(extraLayerConfigs) {
+      const registry = new _LayerConfigRegistry2();
+      for (const id of this.getAvailableIds()) {
+        registry.register(this.get(id));
+      }
+      if (extraLayerConfigs && extraLayerConfigs.length > 0) {
+        for (const config of extraLayerConfigs) {
+          registry.register(config);
+        }
+      }
+      return registry;
+    }
+    /**
+     * Parse a tile URL into its components: layer config and coordinates
+     * @param {string} url - Tile URL to parse
+     * @returns {{ layerConfig: LayerConfig, coords: { z: number, x: number, y: number } } | null}
+     */
+    parseTileUrl(url) {
+      const layerConfig = this.detectFromTileUrls([url]);
+      if (!layerConfig) return null;
+      const coords = layerConfig.extractCoords(url);
+      if (!coords) return null;
+      return { layerConfig, coords };
+    }
+  };
+  var layerConfigs2 = new LayerConfigRegistry2();
+  for (const configData of configs_default2) {
+    layerConfigs2.register(new LayerConfig2(configData));
+  }
   var TileFetchError = class _TileFetchError extends Error {
     /**
      * @param {number} status - HTTP status code
@@ -2795,7 +3278,7 @@ var IndiaBoundaryCorrector = (() => {
       return new _TileFetchError(response.status, response.url, body);
     }
   };
-  var MIN_LINE_WIDTH = 0.5;
+  var MIN_LINE_WIDTH = 0.1;
   var DEFAULT_TILE_EXTENT = 4096;
   var DEFAULT_LINE_WIDTH = 1;
   function getLineWidth(zoom, lineWidthStops) {
@@ -3091,29 +3574,22 @@ var IndiaBoundaryCorrector = (() => {
      * @returns {Promise<ArrayBuffer>} The corrected tile as ArrayBuffer (PNG)
      */
     async fixTile(corrections, rasterTile, layerConfig, zoom) {
-      const {
-        startZoom = 0,
-        zoomThreshold,
-        lineWidthStops,
-        delWidthFactor
-      } = layerConfig;
-      if (zoom < startZoom) {
-        return rasterTile;
-      }
+      const { lineWidthStops } = layerConfig;
       let activeLineStyles;
       if (layerConfig.getLineStylesForZoom) {
         activeLineStyles = layerConfig.getLineStylesForZoom(zoom);
       } else {
         const allStyles = layerConfig.lineStyles || [];
         activeLineStyles = allStyles.filter((style) => {
-          const styleStart = style.startZoom ?? startZoom;
-          const styleEnd = style.endZoom ?? Infinity;
-          return zoom >= styleStart && zoom <= styleEnd;
+          const styleStart = style.startZoom ?? 0;
+          const styleEnd = style.endZoom ?? INFINITY2;
+          return zoom >= styleStart && (styleEnd === INFINITY2 || zoom <= styleEnd);
         });
       }
-      const useOsm = zoom >= zoomThreshold;
-      const addLayerName = useOsm ? "to-add-osm" : "to-add-ne";
-      const delLayerName = useOsm ? "to-del-osm" : "to-del-ne";
+      if (activeLineStyles.length === 0) {
+        return rasterTile;
+      }
+      const layerSuffixes = [...new Set(activeLineStyles.map((s) => s.layerSuffix))];
       const blob = new Blob([rasterTile]);
       const imageBitmap = await createImageBitmap(blob);
       const tileSize = imageBitmap.width;
@@ -3124,22 +3600,33 @@ var IndiaBoundaryCorrector = (() => {
       const ctx = canvas.getContext("2d", { willReadFrequently: true });
       ctx.drawImage(imageBitmap, 0, 0, tileSize, tileSize);
       const baseLineWidth = getLineWidth(zoom, lineWidthStops);
-      const maxWidthFraction = activeLineStyles.length > 0 ? Math.max(...activeLineStyles.map((s) => s.widthFraction)) : 1;
-      const delLineWidth = baseLineWidth * maxWidthFraction * delWidthFactor;
-      const delFeatures = corrections[delLayerName] || [];
-      if (delFeatures.length > 0) {
-        if (!this._maskCanvas || this._maskCanvas.width !== tileSize) {
-          this._maskCanvas = new OffscreenCanvas(tileSize, tileSize);
-        }
-        applyMedianBlurAlongPath(ctx, delFeatures, delLineWidth, tileSize, this._maskCanvas);
-      }
-      let addFeatures = corrections[addLayerName] || [];
-      if (addFeatures.length > 0 && activeLineStyles.length > 0) {
+      const delLineWidthBySuffix = {};
+      for (const suffix of layerSuffixes) {
+        const stylesForSuffix = activeLineStyles.filter((s) => s.layerSuffix === suffix);
+        const maxProduct = Math.max(...stylesForSuffix.map((s) => s.widthFraction * s.delWidthFactor));
+        delLineWidthBySuffix[suffix] = baseLineWidth * maxProduct;
+      }
+      for (const suffix of layerSuffixes) {
+        const delLineWidth = delLineWidthBySuffix[suffix];
+        if (delLineWidth === 0) continue;
+        const delLayerName = `to-del-${suffix}`;
+        const delFeatures = corrections[delLayerName] || [];
         if (delFeatures.length > 0) {
-          addFeatures = extendFeaturesByFactor(addFeatures, layerConfig.lineExtensionFactor, delLineWidth, tileSize);
+          if (!this._maskCanvas || this._maskCanvas.width !== tileSize) {
+            this._maskCanvas = new OffscreenCanvas(tileSize, tileSize);
+          }
+          applyMedianBlurAlongPath(ctx, delFeatures, delLineWidth, tileSize, this._maskCanvas);
         }
-        for (const style of activeLineStyles) {
-          const { color, widthFraction, dashArray, alpha } = style;
+      }
+      for (const style of activeLineStyles) {
+        const { color, layerSuffix, widthFraction, dashArray, alpha, lineExtensionFactor } = style;
+        const addLayerName = `to-add-${layerSuffix}`;
+        let addFeatures = corrections[addLayerName] || [];
+        if (addFeatures.length > 0) {
+          const delLineWidth = delLineWidthBySuffix[layerSuffix];
+          if (lineExtensionFactor > 0) {
+            addFeatures = extendFeaturesByFactor(addFeatures, lineExtensionFactor, delLineWidth, tileSize);
+          }
           const lineWidth = baseLineWidth * widthFraction;
           drawFeatures(ctx, addFeatures, color, lineWidth, tileSize, dashArray, alpha);
         }