@india-boundary-corrector/openlayers-layer 0.0.1

package/dist/index.js

@@ -0,0 +1,161 @@
+// src/index.js
+import TileLayer from "ol/layer/Tile.js";
+import XYZ from "ol/source/XYZ.js";
+import { getPmtilesUrl } from "@india-boundary-corrector/data";
+import { layerConfigs } from "@india-boundary-corrector/layer-configs";
+import { BoundaryCorrector as TileFixer } from "@india-boundary-corrector/tilefixer";
+import { layerConfigs as layerConfigs2, LayerConfig } from "@india-boundary-corrector/layer-configs";
+import { getPmtilesUrl as getPmtilesUrl2 } from "@india-boundary-corrector/data";
+async function fetchAndFixTile(src, z, x, y, tileFixer, layerConfig, tileSize) {
+  const { data, wasFixed, correctionsFailed, correctionsError } = await tileFixer.fetchAndFixTile(
+    src,
+    z,
+    x,
+    y,
+    layerConfig,
+    { tileSize, mode: "cors" }
+  );
+  const blob = new Blob([data], { type: wasFixed ? "image/png" : void 0 });
+  return { blob, wasFixed, correctionsFailed, correctionsError };
+}
+function createCorrectedTileLoadFunction(tileFixer, layerConfig, tileSize, layer) {
+  return async function(imageTile, src) {
+    const tileCoord = imageTile.getTileCoord();
+    const z = tileCoord[0];
+    const x = tileCoord[1];
+    const y = tileCoord[2];
+    try {
+      const { blob, correctionsFailed, correctionsError } = await fetchAndFixTile(src, z, x, y, tileFixer, layerConfig, tileSize);
+      if (correctionsFailed) {
+        console.warn("[IndiaBoundaryCorrectedTileLayer] Corrections fetch failed:", correctionsError);
+        layer.dispatchEvent({ type: "correctionerror", error: correctionsError, coords: { z, x, y }, tileUrl: src });
+      }
+      const image = imageTile.getImage();
+      if (typeof image.getContext === "function") {
+        const imageBitmap = await createImageBitmap(blob);
+        image.width = imageBitmap.width;
+        image.height = imageBitmap.height;
+        const ctx = image.getContext("2d");
+        ctx.drawImage(imageBitmap, 0, 0);
+        imageBitmap.close?.();
+        image.dispatchEvent(new Event("load"));
+      } else {
+        const blobUrl = URL.createObjectURL(blob);
+        image.onload = () => {
+          URL.revokeObjectURL(blobUrl);
+        };
+        image.onerror = () => {
+          URL.revokeObjectURL(blobUrl);
+        };
+        image.src = blobUrl;
+      }
+    } catch (err) {
+      console.warn("[IndiaBoundaryCorrectedTileLayer] Error applying corrections, falling back to original:", err);
+      layer.dispatchEvent({ type: "correctionerror", error: err, coords: { z, x, y }, tileUrl: src });
+      const image = imageTile.getImage();
+      if (typeof image.src !== "undefined") {
+        image.src = src;
+      } else if (typeof image.dispatchEvent === "function") {
+        image.dispatchEvent(new Event("error"));
+      }
+    }
+  };
+}
+var IndiaBoundaryCorrectedTileLayer = class extends TileLayer {
+  /**
+   * @param {Object} options - Layer options
+   * @param {string} options.url - Tile URL template with {x}, {y}, {z} placeholders
+   * @param {string} [options.pmtilesUrl] - URL to PMTiles file (defaults to CDN)
+   * @param {Object|string} [options.layerConfig] - LayerConfig or config ID (auto-detected if not provided)
+   * @param {Object[]} [options.extraLayerConfigs] - Additional LayerConfigs for matching
+   * @param {number} [options.tileSize=256] - Tile size in pixels
+   * @param {Object} [options.sourceOptions] - Additional options for XYZ source
+   * @param {Object} [options.layerOptions] - Additional options for TileLayer
+   */
+  constructor(options) {
+    const {
+      url,
+      pmtilesUrl,
+      layerConfig,
+      extraLayerConfigs,
+      tileSize = 256,
+      sourceOptions = {},
+      ...layerOptions
+    } = options;
+    const registry = layerConfigs.createMergedRegistry(extraLayerConfigs);
+    let resolvedConfig;
+    if (typeof layerConfig === "string") {
+      resolvedConfig = registry.get(layerConfig);
+    } else if (layerConfig) {
+      resolvedConfig = layerConfig;
+    } else {
+      resolvedConfig = registry.detectFromTemplates([url]);
+    }
+    const tileFixer = new TileFixer(pmtilesUrl ?? getPmtilesUrl());
+    const source = new XYZ({
+      url,
+      tileSize,
+      crossOrigin: "anonymous",
+      ...sourceOptions
+    });
+    super({
+      source,
+      ...layerOptions
+    });
+    this._tileFixer = tileFixer;
+    this._layerConfig = resolvedConfig;
+    this._registry = registry;
+    if (resolvedConfig) {
+      source.setTileLoadFunction(createCorrectedTileLoadFunction(tileFixer, resolvedConfig, tileSize, this));
+    }
+    if (!resolvedConfig) {
+      console.warn("[IndiaBoundaryCorrectedTileLayer] Could not detect layer config from URL. Corrections will not be applied.");
+    }
+  }
+  /**
+   * Get the TileFixer instance.
+   * @returns {TileFixer}
+   */
+  getTileFixer() {
+    return this._tileFixer;
+  }
+  /**
+   * Get the resolved LayerConfig.
+   * @returns {Object|null}
+   */
+  getLayerConfig() {
+    return this._layerConfig;
+  }
+  /**
+   * Get the registry.
+   * @returns {LayerConfigRegistry}
+   */
+  getRegistry() {
+    return this._registry;
+  }
+  /**
+   * Fetch and fix a tile (exposed for testing).
+   * @param {string} src - Tile URL
+   * @param {number} z - Zoom level
+   * @param {number} x - Tile X coordinate
+   * @param {number} y - Tile Y coordinate
+   * @returns {Promise<{blob: Blob, wasFixed: boolean}>}
+   * @private
+   */
+  async _fetchAndFixTile(src, z, x, y) {
+    const tileSize = this.getSource().getTileGrid()?.getTileSize(z) || 256;
+    return fetchAndFixTile(src, z, x, y, this._tileFixer, this._layerConfig, tileSize);
+  }
+};
+function indiaBoundaryCorrectedTileLayer(options) {
+  return new IndiaBoundaryCorrectedTileLayer(options);
+}
+export {
+  IndiaBoundaryCorrectedTileLayer,
+  LayerConfig,
+  fetchAndFixTile,
+  getPmtilesUrl2 as getPmtilesUrl,
+  indiaBoundaryCorrectedTileLayer,
+  layerConfigs2 as layerConfigs
+};
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/index.js"],"sourcesContent":["import TileLayer from 'ol/layer/Tile.js';\nimport XYZ from 'ol/source/XYZ.js';\nimport { getPmtilesUrl } from '@india-boundary-corrector/data';\nimport { layerConfigs } from '@india-boundary-corrector/layer-configs';\nimport { BoundaryCorrector as TileFixer } from '@india-boundary-corrector/tilefixer';\n\n// Re-export for convenience\nexport { layerConfigs, LayerConfig } from '@india-boundary-corrector/layer-configs';\nexport { getPmtilesUrl } from '@india-boundary-corrector/data';\n\n/**\n * Handle tile fetching and correction application logic.\n * This method is extracted for testability.\n * @param {string} src - URL of the raster tile\n * @param {number} z - Zoom level\n * @param {number} x - Tile X coordinate\n * @param {number} y - Tile Y coordinate\n * @param {TileFixer} tileFixer - TileFixer instance\n * @param {Object} layerConfig - Layer configuration\n * @param {number} tileSize - Tile size in pixels\n * @returns {Promise<{blob: Blob, wasFixed: boolean, correctionsFailed: boolean, correctionsError: Error|null}>}\n */\nasync function fetchAndFixTile(src, z, x, y, tileFixer, layerConfig, tileSize) {\n  const { data, wasFixed, correctionsFailed, correctionsError } = await tileFixer.fetchAndFixTile(\n    src, z, x, y, layerConfig, { tileSize, mode: 'cors' }\n  );\n  const blob = new Blob([data], { type: wasFixed ? 'image/png' : undefined });\n  return { blob, wasFixed, correctionsFailed, correctionsError };\n}\n\n/**\n * Create a custom tileLoadFunction that applies boundary corrections.\n * @param {TileFixer} tileFixer - The TileFixer instance\n * @param {Object} layerConfig - The layer configuration\n * @param {number} tileSize - Tile size in pixels\n * @param {IndiaBoundaryCorrectedTileLayer} layer - The layer instance for event dispatching\n * @returns {Function} Custom tile load function\n */\nfunction createCorrectedTileLoadFunction(tileFixer, layerConfig, tileSize, layer) {\n  return async function(imageTile, src) {\n    const tileCoord = imageTile.getTileCoord();\n    const z = tileCoord[0];\n    const x = tileCoord[1];\n    const y = tileCoord[2];\n\n    // TODO: Pass AbortSignal to fetchAndFixTile to cancel in-flight requests when tiles\n    // go off-screen. OpenLayers' tileLoadFunction doesn't provide an AbortController,\n    // so this would require custom tracking. Deferred due to complexity - will revisit\n    // if performance becomes an issue during rapid panning.\n    try {\n      const { blob, correctionsFailed, correctionsError } = await fetchAndFixTile(src, z, x, y, tileFixer, layerConfig, tileSize);\n\n      if (correctionsFailed) {\n        console.warn('[IndiaBoundaryCorrectedTileLayer] Corrections fetch failed:', correctionsError);\n        layer.dispatchEvent({ type: 'correctionerror', error: correctionsError, coords: { z, x, y }, tileUrl: src });\n      }\n\n      const image = imageTile.getImage();\n      \n      // Check if image is a canvas (OffscreenCanvas) or HTMLImageElement\n      if (typeof image.getContext === 'function') {\n        // OffscreenCanvas path\n        const imageBitmap = await createImageBitmap(blob);\n        image.width = imageBitmap.width;\n        image.height = imageBitmap.height;\n        const ctx = image.getContext('2d');\n        ctx.drawImage(imageBitmap, 0, 0);\n        imageBitmap.close?.();\n        image.dispatchEvent(new Event('load'));\n      } else {\n        // HTMLImageElement path - use blob URL\n        const blobUrl = URL.createObjectURL(blob);\n        image.onload = () => {\n          URL.revokeObjectURL(blobUrl);\n        };\n        image.onerror = () => {\n          URL.revokeObjectURL(blobUrl);\n        };\n        image.src = blobUrl;\n      }\n    } catch (err) {\n      console.warn('[IndiaBoundaryCorrectedTileLayer] Error applying corrections, falling back to original:', err);\n      layer.dispatchEvent({ type: 'correctionerror', error: err, coords: { z, x, y }, tileUrl: src });\n      // Fall back to original tile\n      const image = imageTile.getImage();\n      if (typeof image.src !== 'undefined') {\n        // HTMLImageElement - load original tile\n        image.src = src;\n      } else if (typeof image.dispatchEvent === 'function') {\n        // OffscreenCanvas - can't fall back, signal error\n        image.dispatchEvent(new Event('error'));\n      }\n    }\n  };\n}\n\n/**\n * Extended OpenLayers TileLayer with India boundary corrections.\n * Extends ol/layer/Tile with a custom XYZ source that applies corrections.\n */\nexport class IndiaBoundaryCorrectedTileLayer extends TileLayer {\n  /**\n   * @param {Object} options - Layer options\n   * @param {string} options.url - Tile URL template with {x}, {y}, {z} placeholders\n   * @param {string} [options.pmtilesUrl] - URL to PMTiles file (defaults to CDN)\n   * @param {Object|string} [options.layerConfig] - LayerConfig or config ID (auto-detected if not provided)\n   * @param {Object[]} [options.extraLayerConfigs] - Additional LayerConfigs for matching\n   * @param {number} [options.tileSize=256] - Tile size in pixels\n   * @param {Object} [options.sourceOptions] - Additional options for XYZ source\n   * @param {Object} [options.layerOptions] - Additional options for TileLayer\n   */\n  constructor(options) {\n    const {\n      url,\n      pmtilesUrl,\n      layerConfig,\n      extraLayerConfigs,\n      tileSize = 256,\n      sourceOptions = {},\n      ...layerOptions\n    } = options;\n\n    // Initialize registry and resolve layer config\n    const registry = layerConfigs.createMergedRegistry(extraLayerConfigs);\n    let resolvedConfig;\n    \n    if (typeof layerConfig === 'string') {\n      resolvedConfig = registry.get(layerConfig);\n    } else if (layerConfig) {\n      resolvedConfig = layerConfig;\n    } else {\n      // Auto-detect from URL\n      resolvedConfig = registry.detectFromTemplates([url]);\n    }\n\n    // Create TileFixer\n    const tileFixer = new TileFixer(pmtilesUrl ?? getPmtilesUrl());\n\n    // Create XYZ source (tileLoadFunction set after super() to access 'this')\n    const source = new XYZ({\n      url,\n      tileSize,\n      crossOrigin: 'anonymous',\n      ...sourceOptions,\n    });\n\n    super({\n      source,\n      ...layerOptions\n    });\n\n    this._tileFixer = tileFixer;\n    this._layerConfig = resolvedConfig;\n    this._registry = registry;\n\n    // Set tileLoadFunction after super() so we can pass 'this' for event dispatching\n    if (resolvedConfig) {\n      source.setTileLoadFunction(createCorrectedTileLoadFunction(tileFixer, resolvedConfig, tileSize, this));\n    }\n\n    if (!resolvedConfig) {\n      console.warn('[IndiaBoundaryCorrectedTileLayer] Could not detect layer config from URL. Corrections will not be applied.');\n    }\n  }\n\n  /**\n   * Get the TileFixer instance.\n   * @returns {TileFixer}\n   */\n  getTileFixer() {\n    return this._tileFixer;\n  }\n\n  /**\n   * Get the resolved LayerConfig.\n   * @returns {Object|null}\n   */\n  getLayerConfig() {\n    return this._layerConfig;\n  }\n\n  /**\n   * Get the registry.\n   * @returns {LayerConfigRegistry}\n   */\n  getRegistry() {\n    return this._registry;\n  }\n\n  /**\n   * Fetch and fix a tile (exposed for testing).\n   * @param {string} src - Tile URL\n   * @param {number} z - Zoom level\n   * @param {number} x - Tile X coordinate\n   * @param {number} y - Tile Y coordinate\n   * @returns {Promise<{blob: Blob, wasFixed: boolean}>}\n   * @private\n   */\n  async _fetchAndFixTile(src, z, x, y) {\n    const tileSize = this.getSource().getTileGrid()?.getTileSize(z) || 256;\n    return fetchAndFixTile(src, z, x, y, this._tileFixer, this._layerConfig, tileSize);\n  }\n}\n\n// Export for testing\nexport { fetchAndFixTile };\n\n/**\n * Factory function to create an IndiaBoundaryCorrectedTileLayer.\n * @param {Object} options - Layer options (see IndiaBoundaryCorrectedTileLayer constructor)\n * @returns {IndiaBoundaryCorrectedTileLayer}\n */\nexport function indiaBoundaryCorrectedTileLayer(options) {\n  return new IndiaBoundaryCorrectedTileLayer(options);\n}\n"],"mappings":"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","names":["layerConfigs","getPmtilesUrl"]}

package/package.json

@@ -0,0 +1,54 @@
+{
+  "name": "@india-boundary-corrector/openlayers-layer",
+  "version": "0.0.1",
+  "description": "OpenLayers TileLayer with India boundary corrections",
+  "type": "module",
+  "main": "dist/index.cjs",
+  "module": "dist/index.js",
+  "types": "src/index.d.ts",
+  "exports": {
+    ".": {
+      "import": {
+        "types": "./src/index.d.ts",
+        "default": "./dist/index.js"
+      },
+      "require": {
+        "types": "./src/index.d.ts",
+        "default": "./dist/index.cjs"
+      }
+    }
+  },
+  "files": [
+    "src",
+    "dist"
+  ],
+  "scripts": {
+    "build": "tsup"
+  },
+  "peerDependencies": {
+    "ol": ">=7.0.0"
+  },
+  "dependencies": {
+    "@india-boundary-corrector/data": "^0.0.1",
+    "@india-boundary-corrector/layer-configs": "^0.0.1",
+    "@india-boundary-corrector/tilefixer": "^0.0.1"
+  },
+  "keywords": [
+    "india",
+    "boundary",
+    "map",
+    "openlayers",
+    "tilelayer"
+  ],
+  "author": "ramSeraph",
+  "license": "Unlicense",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/ramSeraph/india_boundary_corrector.git",
+    "directory": "packages/openlayers-layer"
+  },
+  "bugs": {
+    "url": "https://github.com/ramSeraph/india_boundary_corrector/issues"
+  },
+  "homepage": "https://github.com/ramSeraph/india_boundary_corrector#readme"
+}

package/src/index.d.ts

@@ -0,0 +1,48 @@
+import TileLayer from 'ol/layer/Tile';
+import XYZ from 'ol/source/XYZ';
+import { LayerConfig, LayerConfigRegistry } from '@india-boundary-corrector/layer-configs';
+import { BoundaryCorrector as TileFixer } from '@india-boundary-corrector/tilefixer';
+
+export { layerConfigs, LayerConfig } from '@india-boundary-corrector/layer-configs';
+export { getPmtilesUrl } from '@india-boundary-corrector/data';
+
+/**
+ * Options for IndiaBoundaryCorrectedTileLayer
+ */
+export interface IndiaBoundaryCorrectedTileLayerOptions {
+  /** Tile URL template with {x}, {y}, {z} placeholders */
+  url: string;
+  /** URL to PMTiles file (defaults to CDN) */
+  pmtilesUrl?: string;
+  /** LayerConfig object or config ID string (auto-detected from URL if not provided) */
+  layerConfig?: LayerConfig | string;
+  /** Additional layer configs for matching */
+  extraLayerConfigs?: LayerConfig[];
+  /** Tile size in pixels (default: 256) */
+  tileSize?: number;
+  /** Additional options for XYZ source */
+  sourceOptions?: Partial<ConstructorParameters<typeof XYZ>[0]>;
+  /** Additional options for TileLayer (opacity, visible, etc.) */
+  [key: string]: unknown;
+}
+
+/**
+ * Extended OpenLayers TileLayer with India boundary corrections.
+ */
+export declare class IndiaBoundaryCorrectedTileLayer extends TileLayer<XYZ> {
+  constructor(options: IndiaBoundaryCorrectedTileLayerOptions);
+  
+  /** Get the TileFixer instance */
+  getTileFixer(): TileFixer;
+  
+  /** Get the resolved LayerConfig */
+  getLayerConfig(): LayerConfig | null;
+  
+  /** Get the registry */
+  getRegistry(): LayerConfigRegistry;
+}
+
+/**
+ * Factory function to create an IndiaBoundaryCorrectedTileLayer.
+ */
+export declare function indiaBoundaryCorrectedTileLayer(options: IndiaBoundaryCorrectedTileLayerOptions): IndiaBoundaryCorrectedTileLayer;

package/src/index.js

@@ -0,0 +1,215 @@
+import TileLayer from 'ol/layer/Tile.js';
+import XYZ from 'ol/source/XYZ.js';
+import { getPmtilesUrl } from '@india-boundary-corrector/data';
+import { layerConfigs } from '@india-boundary-corrector/layer-configs';
+import { BoundaryCorrector as TileFixer } from '@india-boundary-corrector/tilefixer';
+
+// Re-export for convenience
+export { layerConfigs, LayerConfig } from '@india-boundary-corrector/layer-configs';
+export { getPmtilesUrl } from '@india-boundary-corrector/data';
+
+/**
+ * Handle tile fetching and correction application logic.
+ * This method is extracted for testability.
+ * @param {string} src - URL of the raster tile
+ * @param {number} z - Zoom level
+ * @param {number} x - Tile X coordinate
+ * @param {number} y - Tile Y coordinate
+ * @param {TileFixer} tileFixer - TileFixer instance
+ * @param {Object} layerConfig - Layer configuration
+ * @param {number} tileSize - Tile size in pixels
+ * @returns {Promise<{blob: Blob, wasFixed: boolean, correctionsFailed: boolean, correctionsError: Error|null}>}
+ */
+async function fetchAndFixTile(src, z, x, y, tileFixer, layerConfig, tileSize) {
+  const { data, wasFixed, correctionsFailed, correctionsError } = await tileFixer.fetchAndFixTile(
+    src, z, x, y, layerConfig, { tileSize, mode: 'cors' }
+  );
+  const blob = new Blob([data], { type: wasFixed ? 'image/png' : undefined });
+  return { blob, wasFixed, correctionsFailed, correctionsError };
+}
+
+/**
+ * Create a custom tileLoadFunction that applies boundary corrections.
+ * @param {TileFixer} tileFixer - The TileFixer instance
+ * @param {Object} layerConfig - The layer configuration
+ * @param {number} tileSize - Tile size in pixels
+ * @param {IndiaBoundaryCorrectedTileLayer} layer - The layer instance for event dispatching
+ * @returns {Function} Custom tile load function
+ */
+function createCorrectedTileLoadFunction(tileFixer, layerConfig, tileSize, layer) {
+  return async function(imageTile, src) {
+    const tileCoord = imageTile.getTileCoord();
+    const z = tileCoord[0];
+    const x = tileCoord[1];
+    const y = tileCoord[2];
+
+    // TODO: Pass AbortSignal to fetchAndFixTile to cancel in-flight requests when tiles
+    // go off-screen. OpenLayers' tileLoadFunction doesn't provide an AbortController,
+    // so this would require custom tracking. Deferred due to complexity - will revisit
+    // if performance becomes an issue during rapid panning.
+    try {
+      const { blob, correctionsFailed, correctionsError } = await fetchAndFixTile(src, z, x, y, tileFixer, layerConfig, tileSize);
+
+      if (correctionsFailed) {
+        console.warn('[IndiaBoundaryCorrectedTileLayer] Corrections fetch failed:', correctionsError);
+        layer.dispatchEvent({ type: 'correctionerror', error: correctionsError, coords: { z, x, y }, tileUrl: src });
+      }
+
+      const image = imageTile.getImage();
+      
+      // Check if image is a canvas (OffscreenCanvas) or HTMLImageElement
+      if (typeof image.getContext === 'function') {
+        // OffscreenCanvas path
+        const imageBitmap = await createImageBitmap(blob);
+        image.width = imageBitmap.width;
+        image.height = imageBitmap.height;
+        const ctx = image.getContext('2d');
+        ctx.drawImage(imageBitmap, 0, 0);
+        imageBitmap.close?.();
+        image.dispatchEvent(new Event('load'));
+      } else {
+        // HTMLImageElement path - use blob URL
+        const blobUrl = URL.createObjectURL(blob);
+        image.onload = () => {
+          URL.revokeObjectURL(blobUrl);
+        };
+        image.onerror = () => {
+          URL.revokeObjectURL(blobUrl);
+        };
+        image.src = blobUrl;
+      }
+    } catch (err) {
+      console.warn('[IndiaBoundaryCorrectedTileLayer] Error applying corrections, falling back to original:', err);
+      layer.dispatchEvent({ type: 'correctionerror', error: err, coords: { z, x, y }, tileUrl: src });
+      // Fall back to original tile
+      const image = imageTile.getImage();
+      if (typeof image.src !== 'undefined') {
+        // HTMLImageElement - load original tile
+        image.src = src;
+      } else if (typeof image.dispatchEvent === 'function') {
+        // OffscreenCanvas - can't fall back, signal error
+        image.dispatchEvent(new Event('error'));
+      }
+    }
+  };
+}
+
+/**
+ * Extended OpenLayers TileLayer with India boundary corrections.
+ * Extends ol/layer/Tile with a custom XYZ source that applies corrections.
+ */
+export class IndiaBoundaryCorrectedTileLayer extends TileLayer {
+  /**
+   * @param {Object} options - Layer options
+   * @param {string} options.url - Tile URL template with {x}, {y}, {z} placeholders
+   * @param {string} [options.pmtilesUrl] - URL to PMTiles file (defaults to CDN)
+   * @param {Object|string} [options.layerConfig] - LayerConfig or config ID (auto-detected if not provided)
+   * @param {Object[]} [options.extraLayerConfigs] - Additional LayerConfigs for matching
+   * @param {number} [options.tileSize=256] - Tile size in pixels
+   * @param {Object} [options.sourceOptions] - Additional options for XYZ source
+   * @param {Object} [options.layerOptions] - Additional options for TileLayer
+   */
+  constructor(options) {
+    const {
+      url,
+      pmtilesUrl,
+      layerConfig,
+      extraLayerConfigs,
+      tileSize = 256,
+      sourceOptions = {},
+      ...layerOptions
+    } = options;
+
+    // Initialize registry and resolve layer config
+    const registry = layerConfigs.createMergedRegistry(extraLayerConfigs);
+    let resolvedConfig;
+    
+    if (typeof layerConfig === 'string') {
+      resolvedConfig = registry.get(layerConfig);
+    } else if (layerConfig) {
+      resolvedConfig = layerConfig;
+    } else {
+      // Auto-detect from URL
+      resolvedConfig = registry.detectFromTemplates([url]);
+    }
+
+    // Create TileFixer
+    const tileFixer = new TileFixer(pmtilesUrl ?? getPmtilesUrl());
+
+    // Create XYZ source (tileLoadFunction set after super() to access 'this')
+    const source = new XYZ({
+      url,
+      tileSize,
+      crossOrigin: 'anonymous',
+      ...sourceOptions,
+    });
+
+    super({
+      source,
+      ...layerOptions
+    });
+
+    this._tileFixer = tileFixer;
+    this._layerConfig = resolvedConfig;
+    this._registry = registry;
+
+    // Set tileLoadFunction after super() so we can pass 'this' for event dispatching
+    if (resolvedConfig) {
+      source.setTileLoadFunction(createCorrectedTileLoadFunction(tileFixer, resolvedConfig, tileSize, this));
+    }
+
+    if (!resolvedConfig) {
+      console.warn('[IndiaBoundaryCorrectedTileLayer] Could not detect layer config from URL. Corrections will not be applied.');
+    }
+  }
+
+  /**
+   * Get the TileFixer instance.
+   * @returns {TileFixer}
+   */
+  getTileFixer() {
+    return this._tileFixer;
+  }
+
+  /**
+   * Get the resolved LayerConfig.
+   * @returns {Object|null}
+   */
+  getLayerConfig() {
+    return this._layerConfig;
+  }
+
+  /**
+   * Get the registry.
+   * @returns {LayerConfigRegistry}
+   */
+  getRegistry() {
+    return this._registry;
+  }
+
+  /**
+   * Fetch and fix a tile (exposed for testing).
+   * @param {string} src - Tile URL
+   * @param {number} z - Zoom level
+   * @param {number} x - Tile X coordinate
+   * @param {number} y - Tile Y coordinate
+   * @returns {Promise<{blob: Blob, wasFixed: boolean}>}
+   * @private
+   */
+  async _fetchAndFixTile(src, z, x, y) {
+    const tileSize = this.getSource().getTileGrid()?.getTileSize(z) || 256;
+    return fetchAndFixTile(src, z, x, y, this._tileFixer, this._layerConfig, tileSize);
+  }
+}
+
+// Export for testing
+export { fetchAndFixTile };
+
+/**
+ * Factory function to create an IndiaBoundaryCorrectedTileLayer.
+ * @param {Object} options - Layer options (see IndiaBoundaryCorrectedTileLayer constructor)
+ * @returns {IndiaBoundaryCorrectedTileLayer}
+ */
+export function indiaBoundaryCorrectedTileLayer(options) {
+  return new IndiaBoundaryCorrectedTileLayer(options);
+}