@india-boundary-corrector/leaflet-layer 0.0.2 → 0.0.4

package/README.md

@@ -19,9 +19,9 @@ npm install @india-boundary-corrector/leaflet-layer leaflet
 No bundler required! Just include the script and use the global `IndiaBoundaryCorrector`:
 
 ```html
-<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" />
-<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
-<script src="https://unpkg.com/@india-boundary-corrector/leaflet-layer/dist/index.global.js"></script>
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/leaflet@1.9.4/dist/leaflet.css" />
+<script src="https://cdn.jsdelivr.net/npm/leaflet@1.9.4/dist/leaflet.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/@india-boundary-corrector/leaflet-layer/dist/index.global.js"></script>
 
 <div id="map" style="height: 400px;"></div>
 
@@ -117,6 +117,7 @@ All standard `L.TileLayer` options are supported, plus:
 | `pmtilesUrl` | string | URL to PMTiles file (auto-detected if not provided) |
 | `layerConfig` | LayerConfig \| string | Layer config object or config ID |
 | `extraLayerConfigs` | LayerConfig[] | Additional configs for auto-detection |
+| `fallbackOnCorrectionFailure` | boolean | Return original tile if corrections fail (default: true) |
 
 ## Events
 
@@ -138,6 +139,10 @@ layer.on('correctionerror', (e) => {
 | `coords` | object | Tile coordinates `{ z, x, y }` |
 | `tileUrl` | string | URL of the tile being loaded |
 
+## Bundling
+
+If you're bundling your application (Rollup, Webpack, Vite, etc.), you may need to copy the PMTiles data file to your output directory. See **[Bundling the PMTiles Asset](../data/bundling-pmtiles.md)** for instructions.
+
 ## License
 
 Unlicense

package/dist/index.cjs

@@ -139,10 +139,10 @@ function templateToTemplateRegex(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}\\}|[a-z0-9]+)`).replace(/\{(z|x|y|s|r)\}/gi, (_2, name) => {
+  }).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]+)";
+      return "(\\{s\\}|\\{[a-z0-9]-[a-z0-9]\\}|[a-z0-9]+)";
     }
     if (lowerName === "r") {
       return "(\\{r\\}|@\\d+x)?";
@@ -159,6 +159,7 @@ var LayerConfig = class _LayerConfig {
     // 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 }
@@ -176,6 +177,9 @@ var LayerConfig = class _LayerConfig {
     if (!id || typeof id !== "string") {
       throw new Error("LayerConfig requires a non-empty string id");
     }
+    if (id.includes("/")) {
+      throw new Error(`LayerConfig id cannot contain slashes: "${id}"`);
+    }
     this.id = id;
     this.startZoom = startZoom;
     this.zoomThreshold = zoomThreshold;
@@ -398,6 +402,9 @@ for (const configData of configs_default) {
 }
 
 // ../tilefixer/dist/index.js
+var __defProp2 = Object.defineProperty;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp2(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
 var u8 = Uint8Array;
 var u16 = Uint16Array;
 var i32 = Int32Array;
@@ -2413,10 +2420,16 @@ function writeUtf8(buf, str, pos) {
   }
   return pos;
 }
-var DEFAULT_CACHE_SIZE = 64;
 function toIndex(z2, x22, y) {
   return `${x22}:${y}:${z2}`;
 }
+function countFeatures(corrections) {
+  let count = 0;
+  for (const features of Object.values(corrections)) {
+    count += features.length;
+  }
+  return count;
+}
 function parseTile(buffer) {
   const tile = new VectorTile(new Pbf(buffer));
   const result = {};
@@ -2465,16 +2478,19 @@ var CorrectionsSource = class {
   /**
    * @param {string} pmtilesUrl - URL to the PMTiles file
    * @param {Object} [options] - Options
-   * @param {number} [options.cacheSize=64] - Maximum number of tiles to cache
+   * @param {number} [options.cacheMaxFeatures=10000] - Maximum number of features to cache
    * @param {number} [options.maxDataZoom] - Maximum zoom level in PMTiles (auto-detected if not provided)
    */
   constructor(pmtilesUrl, options = {}) {
     this.pmtilesUrl = pmtilesUrl;
     this.pmtiles = new x(pmtilesUrl);
-    this.cacheSize = options.cacheSize ?? DEFAULT_CACHE_SIZE;
+    this.cacheMaxFeatures = options.cacheMaxFeatures;
     this.maxDataZoom = options.maxDataZoom;
     this.cache = /* @__PURE__ */ new Map();
     this.inflight = /* @__PURE__ */ new Map();
+    this.cachedFeatureCount = 0;
+    this.emptyKeys = /* @__PURE__ */ new Set();
+    this.nonEmptyKeys = /* @__PURE__ */ new Set();
   }
   /**
    * Get the PMTiles source object.
@@ -2489,6 +2505,35 @@ var CorrectionsSource = class {
   clearCache() {
     this.cache.clear();
     this.inflight.clear();
+    this.cachedFeatureCount = 0;
+    this.emptyKeys.clear();
+    this.nonEmptyKeys.clear();
+  }
+  /**
+   * Evict cache entries to stay under the feature limit.
+   * Empty entries are evicted first (cheap to re-fetch from PMTiles directory cache).
+   * Within each category, evicts LRU (least recently used) entries.
+   * @private
+   */
+  _evictIfNeeded() {
+    while (this.cachedFeatureCount > this.cacheMaxFeatures && this.cache.size > 1) {
+      const targetSet = this.emptyKeys.size > 0 ? this.emptyKeys : this.nonEmptyKeys;
+      if (targetSet.size === 0) break;
+      let evictKey = void 0;
+      let minUsed = Infinity;
+      for (const key of targetSet) {
+        const entry = this.cache.get(key);
+        if (entry && entry.used < minUsed) {
+          minUsed = entry.used;
+          evictKey = key;
+        }
+      }
+      if (!evictKey) break;
+      const evicted = this.cache.get(evictKey);
+      this.cachedFeatureCount -= evicted.featureCount;
+      targetSet.delete(evictKey);
+      this.cache.delete(evictKey);
+    }
   }
   /**
    * Auto-detect max zoom from PMTiles metadata.
@@ -2534,7 +2579,11 @@ var CorrectionsSource = class {
         } else {
           data = {};
         }
-        this.cache.set(idx, { used: performance.now(), data });
+        const featureCount = countFeatures(data);
+        const empty = featureCount === 0;
+        this.cache.set(idx, { used: performance.now(), data, featureCount, empty });
+        this.cachedFeatureCount += featureCount;
+        (empty ? this.emptyKeys : this.nonEmptyKeys).add(idx);
         const ifentry2 = this.inflight.get(idx);
         if (ifentry2) {
           for (const waiter of ifentry2) {
@@ -2543,19 +2592,7 @@ var CorrectionsSource = class {
         }
         this.inflight.delete(idx);
         resolve(data);
-        if (this.cache.size > this.cacheSize) {
-          let minUsed = Infinity;
-          let minKey = void 0;
-          this.cache.forEach((value, key) => {
-            if (value.used < minUsed) {
-              minUsed = value.used;
-              minKey = key;
-            }
-          });
-          if (minKey) {
-            this.cache.delete(minKey);
-          }
-        }
+        this._evictIfNeeded();
       }).catch((e) => {
         const ifentry2 = this.inflight.get(idx);
         if (ifentry2) {
@@ -2594,6 +2631,33 @@ var CorrectionsSource = class {
     return await this._fetchTile(z2, x22, y);
   }
 };
+var TileFetchError = class _TileFetchError extends Error {
+  /**
+   * @param {number} status - HTTP status code
+   * @param {string} [url] - The URL that failed
+   * @param {string} [body] - Response body text
+   */
+  constructor(status, url, body) {
+    super(`Tile fetch failed: ${status}`);
+    this.name = "TileFetchError";
+    this.status = status;
+    this.url = url;
+    this.body = body;
+  }
+  /**
+   * Create a TileFetchError from a failed Response.
+   * @param {Response} response - The failed fetch response
+   * @returns {Promise<TileFetchError>}
+   */
+  static async fromResponse(response) {
+    let body;
+    try {
+      body = await response.text();
+    } catch {
+    }
+    return new _TileFetchError(response.status, response.url, body);
+  }
+};
 var MIN_LINE_WIDTH = 0.5;
 function getLineWidth(zoom, lineWidthStops) {
   const zooms = Object.keys(lineWidthStops).map(Number).sort((a, b2) => a - b2);
@@ -2811,11 +2875,34 @@ function drawFeatures(ctx, features, color, lineWidth, tileSize, dashArray, alph
     ctx.globalAlpha = prevAlpha;
   }
 }
-var BoundaryCorrector = class {
+var _TileFixer = class _TileFixer2 {
+  /**
+   * Set the default maximum features to cache for new TileFixer instances.
+   * @param {number} maxFeatures - Maximum features to cache
+   */
+  static setDefaultCacheMaxFeatures(maxFeatures) {
+    _TileFixer2._defaultCacheMaxFeatures = maxFeatures;
+  }
+  /**
+   * Get or create a TileFixer instance for a given PMTiles URL.
+   * Reuses existing instances for the same URL.
+   * @param {string} pmtilesUrl - URL to the PMTiles file
+   * @returns {TileFixer}
+   */
+  static getOrCreate(pmtilesUrl) {
+    let instance = _TileFixer2._instances.get(pmtilesUrl);
+    if (!instance) {
+      instance = new _TileFixer2(pmtilesUrl, {
+        cacheMaxFeatures: _TileFixer2._defaultCacheMaxFeatures
+      });
+      _TileFixer2._instances.set(pmtilesUrl, instance);
+    }
+    return instance;
+  }
   /**
    * @param {string} pmtilesUrl - URL to the PMTiles file
    * @param {Object} [options] - Options
-   * @param {number} [options.cacheSize=64] - Maximum number of tiles to cache
+   * @param {number} [options.cacheMaxFeatures] - Maximum number of features to cache
    * @param {number} [options.maxDataZoom] - Maximum zoom level in PMTiles (auto-detected if not provided)
    */
   constructor(pmtilesUrl, options = {}) {
@@ -2852,10 +2939,9 @@ var BoundaryCorrector = class {
    * @param {ArrayBuffer} rasterTile - The original raster tile as ArrayBuffer
    * @param {Object} layerConfig - Layer configuration with colors and styles
    * @param {number} zoom - Current zoom level
-   * @param {number} [tileSize=256] - Size of the tile in pixels
    * @returns {Promise<ArrayBuffer>} The corrected tile as ArrayBuffer (PNG)
    */
-  async fixTile(corrections, rasterTile, layerConfig, zoom, tileSize = 256) {
+  async fixTile(corrections, rasterTile, layerConfig, zoom) {
     const {
       startZoom = 0,
       zoomThreshold,
@@ -2879,13 +2965,14 @@ var BoundaryCorrector = class {
     const useOsm = zoom >= zoomThreshold;
     const addLayerName = useOsm ? "to-add-osm" : "to-add-ne";
     const delLayerName = useOsm ? "to-del-osm" : "to-del-ne";
+    const blob = new Blob([rasterTile]);
+    const imageBitmap = await createImageBitmap(blob);
+    const tileSize = imageBitmap.width;
     if (!this._canvas || this._canvas.width !== tileSize) {
       this._canvas = new OffscreenCanvas(tileSize, tileSize);
     }
     const canvas = this._canvas;
     const ctx = canvas.getContext("2d", { willReadFrequently: true });
-    const blob = new Blob([rasterTile]);
-    const imageBitmap = await createImageBitmap(blob);
     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)) : 1;
@@ -2922,24 +3009,24 @@ var BoundaryCorrector = class {
    * @param {number} y - Tile Y coordinate
    * @param {Object} layerConfig - Layer configuration with colors and styles
    * @param {Object} [options] - Fetch options
-   * @param {number} [options.tileSize=256] - Tile size in pixels
    * @param {AbortSignal} [options.signal] - Abort signal for fetch
    * @param {RequestMode} [options.mode] - Fetch mode (e.g., 'cors')
+   * @param {boolean} [options.fallbackOnCorrectionFailure=true] - Return original tile if corrections fail
    * @returns {Promise<{data: ArrayBuffer, wasFixed: boolean}>}
    */
   async fetchAndFixTile(tileUrl, z2, x22, y, layerConfig, options = {}) {
-    const { tileSize = 256, signal, mode } = options;
+    const { signal, mode, fallbackOnCorrectionFailure = true } = options;
     const fetchOptions = {};
     if (signal) fetchOptions.signal = signal;
     if (mode) fetchOptions.mode = mode;
     if (!layerConfig) {
       const response = await fetch(tileUrl, fetchOptions);
-      if (!response.ok) throw new Error(`Tile fetch failed: ${response.status}`);
+      if (!response.ok) throw await TileFetchError.fromResponse(response);
       return { data: await response.arrayBuffer(), wasFixed: false };
     }
     const [tileResult, correctionsResult] = await Promise.allSettled([
-      fetch(tileUrl, fetchOptions).then((r) => {
-        if (!r.ok) throw new Error(`Tile fetch failed: ${r.status}`);
+      fetch(tileUrl, fetchOptions).then(async (r) => {
+        if (!r.ok) throw await TileFetchError.fromResponse(r);
         return r.arrayBuffer();
       }),
       this.getCorrections(z2, x22, y)
@@ -2953,15 +3040,21 @@ var BoundaryCorrector = class {
     const tileData = tileResult.value;
     const correctionsFailed = correctionsResult.status === "rejected";
     const correctionsError = correctionsFailed ? correctionsResult.reason : null;
+    if (correctionsFailed && !fallbackOnCorrectionFailure) {
+      throw correctionsError;
+    }
     const corrections = correctionsResult.status === "fulfilled" ? correctionsResult.value : {};
     const hasCorrections = Object.values(corrections).some((arr) => arr && arr.length > 0);
     if (!hasCorrections) {
       return { data: tileData, wasFixed: false, correctionsFailed, correctionsError };
     }
-    const fixedData = await this.fixTile(corrections, tileData, layerConfig, z2, tileSize);
+    const fixedData = await this.fixTile(corrections, tileData, layerConfig, z2);
     return { data: fixedData, wasFixed: true, correctionsFailed: false, correctionsError: null };
   }
 };
+__publicField(_TileFixer, "_instances", /* @__PURE__ */ new Map());
+__publicField(_TileFixer, "_defaultCacheMaxFeatures", 25e3);
+var TileFixer = _TileFixer;
 
 // src/index.js
 var import_data2 = require("@india-boundary-corrector/data");
@@ -2973,12 +3066,13 @@ function extendLeaflet(L2) {
     options: {
       pmtilesUrl: null,
       layerConfig: null,
-      extraLayerConfigs: null
+      extraLayerConfigs: null,
+      fallbackOnCorrectionFailure: true
     },
     initialize: function(url, options) {
       L2.TileLayer.prototype.initialize.call(this, url, options);
       this._pmtilesUrl = this.options.pmtilesUrl ?? (0, import_data.getPmtilesUrl)();
-      this._tileFixer = new BoundaryCorrector(this._pmtilesUrl);
+      this._tileFixer = TileFixer.getOrCreate(this._pmtilesUrl);
       this._registry = layerConfigs.createMergedRegistry(this.options.extraLayerConfigs);
       if (typeof this.options.layerConfig === "string") {
         this._layerConfig = this._registry.get(this.options.layerConfig);
@@ -2991,29 +3085,6 @@ function extendLeaflet(L2) {
         console.warn("[L.TileLayer.IndiaBoundaryCorrected] Could not detect layer config from URL. Corrections will not be applied.");
       }
     },
-    /**
-     * Handle tile fetching and correction application logic.
-     * This method is extracted for testability.
-     * @param {string} tileUrl - URL of the raster tile
-     * @param {number} z - Zoom level
-     * @param {number} x - Tile X coordinate
-     * @param {number} y - Tile Y coordinate
-     * @param {number} tileSize - Tile size in pixels
-     * @returns {Promise<{blob: Blob, wasFixed: boolean, correctionsFailed: boolean, correctionsError: Error|null}>}
-     * @private
-     */
-    _fetchAndFixTile: async function(tileUrl, z2, x3, y, tileSize) {
-      const { data, wasFixed, correctionsFailed, correctionsError } = await this._tileFixer.fetchAndFixTile(
-        tileUrl,
-        z2,
-        x3,
-        y,
-        this._layerConfig,
-        { tileSize }
-      );
-      const blob = new Blob([data], { type: wasFixed ? "image/png" : void 0 });
-      return { blob, wasFixed, correctionsFailed, correctionsError };
-    },
     createTile: function(coords, done) {
       const tile = document.createElement("img");
       tile.alt = "";
@@ -3033,12 +3104,13 @@ function extendLeaflet(L2) {
       const z2 = coords.z;
       const x3 = coords.x;
       const y = coords.y;
-      const tileSize = this.options.tileSize || 256;
-      this._fetchAndFixTile(tileUrl, z2, x3, y, tileSize).then(({ blob, wasFixed, correctionsFailed, correctionsError }) => {
+      const fallbackOnCorrectionFailure = this.options.fallbackOnCorrectionFailure;
+      this._tileFixer.fetchAndFixTile(tileUrl, z2, x3, y, this._layerConfig, { fallbackOnCorrectionFailure }).then(({ data, correctionsFailed, correctionsError }) => {
         if (correctionsFailed) {
           console.warn("[L.TileLayer.IndiaBoundaryCorrected] Corrections fetch failed:", correctionsError);
           this.fire("correctionerror", { error: correctionsError, coords: { z: z2, x: x3, y }, tileUrl });
         }
+        const blob = new Blob([data]);
         tile.src = URL.createObjectURL(blob);
         tile.onload = () => {
           URL.revokeObjectURL(tile.src);