@naivemap/maplibre-gl-image-layer 0.1.0 → 0.2.0-alpha.1

package/LICENSE

@@ -1,21 +1,21 @@
-MIT License
-
-Copyright (c) 2022 Naive Map
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.
+MIT License
+
+Copyright (c) 2022 Naive Map
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -1,11 +1,11 @@
-# @naivemap/maplibre-gl-image-layer
-
-ImageLayer ([@naivemap/maplibre-gl-image-layer](https://www.npmjs.com/package/@naivemap/maplibre-gl-image-layer)): A versatile layer for displaying georeferenced images with **various projections** on the map. It supports loading and correctly positioning images from different coordinate systems, making it ideal for integrating non-standard raster data, historical maps, or aerial imagery.
-
-[API References](https://www.naivemap.com/maplibre-gl-layers/api/image-layer/)
-
-## Install
-
-```bash
-pnpm add @naivemap/maplibre-gl-image-layer proj4
-```
+# @naivemap/maplibre-gl-image-layer
+
+ImageLayer ([@naivemap/maplibre-gl-image-layer](https://www.npmjs.com/package/@naivemap/maplibre-gl-image-layer)): A versatile layer for displaying georeferenced images with **various projections** on the map. It supports loading and correctly positioning images from different coordinate systems, making it ideal for integrating non-standard raster data, historical maps, or aerial imagery.
+
+[API References](https://www.naivemap.com/map-gl-layers/api/image-layer/)
+
+## Install
+
+```bash
+pnpm add @naivemap/maplibre-gl-image-layer proj4
+```

package/dist/index.d.ts

@@ -1,4 +1,6 @@
-import { default as ImageLayer } from './ImageLayer';
-export type { ImageLayerOption } from './ImageLayer';
-export default ImageLayer;
-export type { MaskProperty } from './mask';
+export * from './maplibre-gl-image-layer/src/index'
+export {}
+import ImageLayer from './maplibre-gl-image-layer/src/index'
+export default ImageLayer
+export * from './maplibre-gl-image-layer/src/index'
+export {}

package/dist/index.es.js

@@ -0,0 +1,61 @@
+import t from "@naivemap/image-layer-core";
+import { createMapLibreLayerAdaptor as o, clearTileClippingMask as d } from "@naivemap/map-gl-layer-adaptor";
+class n {
+  id;
+  /**
+   * @ignore
+   */
+  type = "custom";
+  /**
+   * @ignore
+   */
+  renderingMode = "2d";
+  core;
+  adaptor;
+  /**
+   * @param id - A unique layer id
+   * @param option - ImageLayer options
+   */
+  constructor(e, r) {
+    this.id = e, this.core = new t(r), this.adaptor = o(this.core, {
+      id: e,
+      renderingMode: this.renderingMode,
+      prepareStencilMask: (a) => d(a)
+    });
+  }
+  /**
+   * @ignore
+   */
+  onAdd(e, r) {
+    this.adaptor.onAdd(e, r);
+  }
+  /**
+   * @ignore
+   */
+  onRemove(e, r) {
+    this.adaptor.onRemove(e, r);
+  }
+  /**
+   * @ignore
+   */
+  render(e, r) {
+    this.adaptor.render(e, r);
+  }
+  /**
+   * Updates the URL, the projection, the coordinates, the opacity or the resampling of the image.
+   * @param {Object} option Options object.
+   */
+  updateImage(e) {
+    return this.core.updateImage(e);
+  }
+  /**
+   * Updates the mask property of the image layer.
+   * @param mask
+   */
+  updateMask(e) {
+    return this.core.updateMask(e);
+  }
+}
+export {
+  n as default
+};

package/dist/index.umd.js

@@ -0,0 +1 @@
+(function(r,t){typeof exports=="object"&&typeof module<"u"?module.exports=t(require("@naivemap/image-layer-core"),require("@naivemap/map-gl-layer-adaptor")):typeof define=="function"&&define.amd?define(["@naivemap/image-layer-core","@naivemap/map-gl-layer-adaptor"],t):(r=typeof globalThis<"u"?globalThis:r||self,r.ImageLayer=t(r.ImageLayerCore,r.mapGlLayerAdaptor))})(this,function(r,t){"use strict";class i{id;type="custom";renderingMode="2d";core;adaptor;constructor(e,a){this.id=e,this.core=new r(a),this.adaptor=t.createMapLibreLayerAdaptor(this.core,{id:e,renderingMode:this.renderingMode,prepareStencilMask:d=>t.clearTileClippingMask(d)})}onAdd(e,a){this.adaptor.onAdd(e,a)}onRemove(e,a){this.adaptor.onRemove(e,a)}render(e,a){this.adaptor.render(e,a)}updateImage(e){return this.core.updateImage(e)}updateMask(e){return this.core.updateMask(e)}}return i});

package/dist/maplibre-gl-image-layer/src/ImageLayer.d.ts

@@ -0,0 +1,76 @@
+import { default as ImageLayerCore, ImageLayerOption, MaskProperty } from '@naivemap/image-layer-core';
+import { CustomLayerInterface, Map } from 'maplibre-gl';
+export type { ImageLayerOption } from '@naivemap/image-layer-core';
+/**
+ * A custom MapLibre GL JS layer for rendering georeferenced images with arbitrary projections.
+ *
+ * @remarks
+ * This layer uses `proj4js` to transform image coordinates from any source projection
+ * into the map's coordinate system. It triangulates the image corners to correctly
+ * warp and display it on the map canvas. This is ideal for overlaying historical maps,
+ * floor plans, or other non-standard raster data.
+ *
+ * @example
+ * ```ts
+ * import ImageLayer from '@naivemap/maplibre-gl-image-layer';
+ * import proj4 from 'proj4';
+ *
+ * // 1. Define the source projection if it's not standard
+ * proj4.defs('EPSG:2154', '+proj=lcc +lat_0=46.5 +lon_0=3 +lat_1=49 +lat_2=44 +x_0=700000 +y_0=6600000 +ellps=GRS80 +units=m +no_defs');
+ *
+ * // 2. Create the layer instance
+ * const layer = new ImageLayer('image-layer', {
+ *   url: 'https://example.com/my-image.png',
+ *   coordinates: [
+ *     [100000, 6700000], // Top-left corner in source projection
+ *     [110000, 6700000], // Top-right
+ *     [110000, 6600000], // Bottom-right
+ *     [100000, 6600000]  // Bottom-left
+ *   ],
+ *   projection: 'EPSG:2154'
+ * });
+ *
+ * // 3. Add the layer to the map
+ * map.addLayer(layer);
+ * ```
+ */
+export default class ImageLayer implements CustomLayerInterface {
+    id: string;
+    /**
+     * @ignore
+     */
+    type: 'custom';
+    /**
+     * @ignore
+     */
+    renderingMode?: '2d' | '3d' | undefined;
+    private core;
+    private adaptor;
+    /**
+     * @param id - A unique layer id
+     * @param option - ImageLayer options
+     */
+    constructor(id: string, option: ImageLayerOption);
+    /**
+     * @ignore
+     */
+    onAdd(map: Map, gl: WebGLRenderingContext): void;
+    /**
+     * @ignore
+     */
+    onRemove(map: Map, gl: WebGLRenderingContext): void;
+    /**
+     * @ignore
+     */
+    render(gl: WebGLRenderingContext, args: unknown): void;
+    /**
+     * Updates the URL, the projection, the coordinates, the opacity or the resampling of the image.
+     * @param {Object} option Options object.
+     */
+    updateImage(option: Partial<Omit<ImageLayerOption, 'mask'>>): ImageLayerCore;
+    /**
+     * Updates the mask property of the image layer.
+     * @param mask
+     */
+    updateMask(mask: Partial<MaskProperty>): ImageLayerCore;
+}

package/dist/maplibre-gl-image-layer/src/index.d.ts

@@ -0,0 +1,4 @@
+import { default as ImageLayer } from './ImageLayer';
+export type { ImageLayerOption } from '@naivemap/image-layer-core';
+export default ImageLayer;
+export type { MaskProperty } from '@naivemap/image-layer-core';

package/package.json

@@ -1,14 +1,15 @@
 {
   "name": "@naivemap/maplibre-gl-image-layer",
-  "version": "0.1.0",
+  "version": "0.2.0-alpha.1",
   "description": "Load a static image of any projection via Arrugator and Proj4js.",
-  "main": "./dist/index.umd.cjs",
-  "module": "./dist/index.js",
+  "main": "./dist/index.umd.js",
+  "module": "./dist/index.es.js",
   "type": "module",
   "exports": {
     ".": {
-      "import": "./dist/index.js",
-      "require": "./dist/index.umd.cjs"
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.es.js",
+      "require": "./dist/index.umd.js"
     }
   },
   "files": [
@@ -27,18 +28,16 @@
   "publishConfig": {
     "access": "public"
   },
+  "sideEffects": false,
   "peerDependencies": {
     "maplibre-gl": "^4.0.0 || ^5.0.0",
     "proj4": "^2.8.0"
   },
   "dependencies": {
-    "@types/geojson": "^7946.0.16",
-    "earcut": "^3.0.1",
-    "tinyqueue": "^3.0.0",
-    "twgl.js": "^5.5.4"
+    "@naivemap/image-layer-core": "0.2.0-alpha.0",
+    "@naivemap/map-gl-layer-adaptor": "0.2.0-alpha.0"
   },
   "devDependencies": {
-    "@types/earcut": "^2.1.1",
     "@types/proj4": "^2.5.2"
   },
   "scripts": {

package/dist/ImageLayer.d.ts

@@ -1,130 +0,0 @@
-import { default as maplibregl } from 'maplibre-gl';
-import { MaskProperty } from './mask';
-/**
- * The options for the ImageLayer.
- */
-export type ImageLayerOption = {
-    /**
-     * URL that points to an image.
-     */
-    url: string;
-    /**
-     * The projection of the image, typically an EPSG code like 'EPSG:4326'.
-     */
-    projection: string;
-    /**
-     * Corners of image specified in longitude, latitude pairs.
-     */
-    coordinates: maplibregl.Coordinates;
-    /**
-     * The resampling/interpolation method to use for overscaling.
-     * - 'linear': Linear interpolation (default).
-     * - 'nearest': Nearest neighbor interpolation.
-     * If not specified, the default is 'linear'.
-     */
-    resampling?: 'linear' | 'nearest';
-    /**
-     * Opacity of the image layer, ranging from 0 (fully transparent) to 1 (fully opaque).
-     * Defaults to 1.
-     */
-    opacity?: number;
-    /**
-     * Cross-origin attribute for the image, which can be used to specify how the image should be fetched.
-     * Defaults to 'anonymous'.
-     */
-    crossOrigin?: string;
-    /**
-     * The step size for the Arrugator algorithm, which controls the granularity of the image rendering.
-     */
-    arrugatorStep?: number;
-    /**
-     * Masking properties for the image layer.
-     * If not provided, no mask will be applied.
-     */
-    mask?: MaskProperty;
-};
-/**
- * A custom MapLibre GL JS layer for rendering georeferenced images with arbitrary projections.
- *
- * @remarks
- * This layer uses `proj4js` to transform image coordinates from any source projection
- * into the map's coordinate system. It triangulates the image corners to correctly
- * warp and display it on the map canvas. This is ideal for overlaying historical maps,
- * floor plans, or other non-standard raster data.
- *
- * @example
- * ```ts
- * import ImageLayer from '@naivemap/maplibre-gl-image-layer';
- * import proj4 from 'proj4';
- *
- * // 1. Define the source projection if it's not standard
- * proj4.defs('EPSG:2154', '+proj=lcc +lat_0=46.5 +lon_0=3 +lat_1=49 +lat_2=44 +x_0=700000 +y_0=6600000 +ellps=GRS80 +units=m +no_defs');
- *
- * // 2. Create the layer instance
- * const layer = new ImageLayer('image-layer', {
- *   url: 'https://example.com/my-image.png',
- *   coordinates: [
- *     [100000, 6700000], // Top-left corner in source projection
- *     [110000, 6700000], // Top-right
- *     [110000, 6600000], // Bottom-right
- *     [100000, 6600000]  // Bottom-left
- *   ],
- *   projection: 'EPSG:2154'
- * });
- *
- * // 3. Add the layer to the map
- * map.addLayer(layer);
- * ```
- */
-export default class ImageLayer implements maplibregl.CustomLayerInterface {
-    id: string;
-    /**
-     * @ignore
-     */
-    type: 'custom';
-    /**
-     * @ignore
-     */
-    renderingMode?: '2d' | '3d' | undefined;
-    private option;
-    private map?;
-    private gl?;
-    private loaded;
-    private arrugado;
-    private programInfo?;
-    private bufferInfo?;
-    private texture?;
-    private maskProperty;
-    private maskProgramInfo?;
-    private maskBufferInfo?;
-    /**
-     * @param id - A unique layer id
-     * @param option - ImageLayer options
-     */
-    constructor(id: string, option: ImageLayerOption);
-    /**
-     * @ignore
-     */
-    onAdd(map: maplibregl.Map, gl: WebGLRenderingContext): void;
-    /**
-     * @ignore
-     */
-    onRemove(_: maplibregl.Map, gl: WebGLRenderingContext): void;
-    /**
-     * @ignore
-     */
-    render(gl: WebGLRenderingContext, args: any): void;
-    /**
-     * Updates the URL, the projection, the coordinates, the opacity or the resampling of the image.
-     * @param {Object} option Options object.
-     */
-    updateImage(option: Partial<Omit<ImageLayerOption, 'mask'>>): this;
-    /**
-     * Updates the mask property of the image layer.
-     * @param mask
-     * @returns
-     */
-    updateMask(mask: Partial<MaskProperty>): this;
-    private loadTexture;
-    private getMaskBufferInfo;
-}

package/dist/arrugator/Arrugator.d.ts

@@ -1,18 +0,0 @@
-export default class Arrugator {
-    constructor(projector: any, verts: any, uv: any, trigs: any);
-    _segment(v1: any, v2: any, t: any, maxEpsilon?: number): any;
-    output(): {
-        unprojected: unknown[];
-        projected: unknown[];
-        uv: unknown[];
-        trigs: unknown[];
-    };
-    private _stepsWithSameEpsilon;
-    lowerEpsilon(targetEpsilon: any): void;
-    get epsilon(): any;
-    set epsilon(ep: any);
-    step(): void;
-    force(): void;
-    private _splitSegment;
-    private _splitTriangle;
-}

package/dist/arrugator/index.d.ts

@@ -1,6 +0,0 @@
-export type ArrugadoFlat = {
-    pos: number[];
-    uv: number[];
-    trigs: number[];
-};
-export declare function initArrugator(fromProj: string, coordinates: maplibregl.Coordinates, step?: number): ArrugadoFlat;