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

package/README.md

@@ -75,8 +75,9 @@ await sw.addLayerConfig(new LayerConfig({
   tileUrlTemplates: ['https://tile.openstreetmap.de/{z}/{x}/{y}.png'],
   lineWidthStops: { 1: 0.5, 2: 0.6, 3: 0.7, 4: 1.0, 10: 3.75 },
   lineStyles: [
-    { color: 'rgb(180, 200, 180)' },
-    { color: 'rgb(121, 146, 127)', widthFraction: 1/3, dashArray: [30, 2, 8, 2] },
+    // layerSuffix determines which PMTiles layer to use
+    { color: 'rgb(180, 200, 180)', layerSuffix: 'osm' },
+    { color: 'rgb(121, 146, 127)', layerSuffix: 'osm', widthFraction: 1/3, dashArray: [30, 2, 8, 2] },
   ],
 }));
 ```
@@ -126,7 +127,7 @@ importScripts('https://cdn.jsdelivr.net/npm/@india-boundary-corrector/service-wo
     await sw.addLayerConfig(new LayerConfig({
       id: 'my-tiles',
       tileUrlTemplates: ['https://mytiles.example.com/{z}/{x}/{y}.png'],
-      lineStyles: [{ color: 'rgb(165, 180, 165)' }],
+      lineStyles: [{ color: 'rgb(165, 180, 165)', layerSuffix: 'osm' }],
     }));
   });
 </script>

package/dist/index.global.js

@@ -33,7 +33,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",
@@ -42,15 +41,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",
@@ -65,56 +66,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) => {
@@ -181,6 +188,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`);
       }
@@ -193,26 +203,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.
@@ -220,34 +242,34 @@ var IndiaBoundaryCorrector = (() => {
      * @returns {boolean}
      */
     isActiveAtZoom(z) {
-      return z >= this.startZoom && z <= this.endZoom;
+      return z >= this.startZoom && (this.endZoom === INFINITY || z <= 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 {
@@ -268,17 +290,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`);
@@ -297,59 +308,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 i = 0; i < obj.lineStyles.length; i++) {
-          LineStyle.validateJSON(obj.lineStyles[i], i);
-        }
-      }
-      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 i = 0; i < obj.lineStyles.length; i++) {
+        LineStyle.validateJSON(obj.lineStyles[i], i);
       }
     }
     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
@@ -359,6 +346,15 @@ var IndiaBoundaryCorrector = (() => {
     getLineStylesForZoom(z) {
       return this.lineStyles.filter((style) => style.isActiveAtZoom(z));
     }
+    /**
+     * Get unique layer suffixes from styles active at a given zoom level
+     * @param {number} z - Zoom level
+     * @returns {string[]}
+     */
+    getLayerSuffixesForZoom(z) {
+      const activeStyles = this.getLineStylesForZoom(z);
+      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
@@ -416,13 +412,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())
       };
     }
     /**
@@ -528,7 +520,7 @@ var IndiaBoundaryCorrector = (() => {
   }
 
   // ../data/version.js
-  var packageVersion = "0.0.5";
+  var packageVersion = "0.1.0";
 
   // ../data/index.js
   var import_meta = {};
@@ -549,14 +541,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) {