leaflet.imageoverlay.arrugator

Display warped reprojected image overlays on Leaflet maps

Usage no npm install needed!

<script type="module">
  import leafletImageoverlayArrugator from 'https://cdn.skypack.dev/leaflet.imageoverlay.arrugator';
</script>

README

Leaflet.ImageOverlay.Arrugator

Displays reprojected raster images.

Leverages Glii for not going insane with the WebGL bits, and Arrugator for calculating the triangle mesh for raster reprojection.

Demo

https://ivansanchez.gitlab.io/Leaflet.ImageOverlay.Arrugator/demo.html

The demo linked above uses a downsampled version of the N5000 raster dataset from Kartverket. That raster image is originally in EPSG:25833 (AKA ETRS89+UTM33N), and is seamlessly reprojected into EPSG:3857.

Usage

This adds a L.imageOverlay.arrugator factory to the Leaflet namespace.

Usage is as follows:

L.imageOverlay.arrugator(
    // First argument to the factory/constructor is the URL of the image. Only png/jpg.
    'demodata/Basisdata_0000_Norge_25833_N5000Raster_TIFF/33_N5000raster_1.png',
    {
        // The "controlPoints" option must be an array of arrays of numbers, containing
        // the coordinates in the source CRS of the four corners of the image, as follows:
        controlPoints: [
            [-183622.300, 7996344.000],	// top-left
            [-183622.300, 6396344.000],	// bottom-left
            [1416377.700, 7996344.000],	// upper-right
            [1416377.700, 6396344.000],	// lower-right
        ],

        // The "projector" option must be a forward-projection function.
        // Leveraging proj4 as follows is recommended.
        // It's up to the developer to ensure that the destination projection matches the Leaflet display CRS.
        projector: proj4('EPSG:25833','EPSG:3857').forward,

        // The "epsilon" option controls how much the triangular mesh will be subdivided.
        // Set it to the *square* of the maximum expected error, in units of the destination CRS.
        // The default of one million means that the maximum reprojection error distance shall be 1000 "meters".
        epsilon: 1000000,

        // If you don't know what a "fragment shader" is, do not change this default.
        // If you *do* know what a "fragment shader" is, then be aware that there's a
        // predefined `uRaster` 2D sampler and a `vUV` `vec2` varying.
        fragmentShader: "void main() { gl_FragColor = texture2D(uRaster, vUV); }"

        // Can take a "padding" option, as per L.Renderer
        padding: 0.1,

        // Can take usual L.Layer options as well.
        attribution: "<a href='https://kartkatalog.geonorge.no/metadata/n5000-raster/7e1b827e-3ccd-48a8-91ce-cc8125d6e4c1'>N5000 by Kartverket</a>"
    }
).addTo(map);

Legalese

Released under the General Public License, v3. See the LICENSE file for details.