Class: default

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

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);

Implements

• CustomLayerInterface

Constructors

Constructor

new default(id, option): ImageLayer

Parameters

Parameter	Type	Description
id	string	A unique layer id
option	ImageLayerOption	ImageLayer options

Returns

ImageLayer

Properties

id

id: string

A unique layer id.

Implementation of

maplibregl.CustomLayerInterface.id

Methods

updateImage()

updateImage(option): ImageLayer

Updates the URL, the projection, the coordinates, the opacity or the resampling of the image.

Parameters

Parameter	Type	Description
option	Partial<Omit<ImageLayerOption, "mask">>	Options object.

Returns

ImageLayer

---

updateMask()

updateMask(mask): ImageLayer

Updates the mask property of the image layer.

Parameters

Parameter	Type	Description
mask	Partial<MaskProperty>

Returns

ImageLayer