Skip to content
Load and style Raster files in Leaflet (geotiff & asciigrid)
JavaScript
Branch: master
Clone or download

Latest commit

Fetching latest commit…
Cannot retrieve the latest commit at this time.

Files

Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
dist v1.4.2 Jun 21, 2019
docs v1.4.2 Jun 21, 2019
spec Allowing the use of xllcenter and yllcenter in ASCII Grid headers + c… Feb 11, 2018
src Size of grid point as a parameter (#39) Jul 11, 2019
.eslintrc.json
.gitattributes .gitattributes for binary files Apr 5, 2017
.gitignore v1.4.2 Jun 21, 2019
.travis.yml Travis still failing Feb 12, 2018
CHANGELOG.md v1.4.2 Jun 21, 2019
LICENSE Update LICENSE May 4, 2017
README.md turf reference Nov 11, 2017
copy-to-examples.js Automatic copy of `dist` to `docs/dist`, for examples Jun 13, 2017
karma-ci.conf.js
karma-local.conf.js
karma.conf.js Add CI tests with Travis Nov 6, 2017
package-lock.json v1.4.2 Jun 21, 2019
package.json v1.4.2 Jun 21, 2019
webpack.config.js testing in progress... (added sourcemap with webpack) Sep 17, 2017

README.md

Leaflet.CanvasLayer.Field

A plugin for LeafletJS that adds layers to visualize fields (aka Rasters) from ASCIIGrid or GeoTIFF files (EPSG:4326).

Leaflet.CanvasLayer.Field EXAMPLES

Travis CI npm version

It includes:

  • L.CanvasLayer.ScalarField - a "typical" raster layer (from scalars such as DTM, temperature...) that can be rendered with different color scales and arrows.
  • L.CanvasLayer.VectorFieldAnim - an animated layer representing a vector field (wind, currents...), based on the excellent earth by Cameron Becarrio

This plugin extends L.CanvasLayer Leaflet Plugin by Stanislav Sumbera and uses geotiff.js by Fabian Schindler. For the 'arrow' renderer, it includes a modified portion of leaflet-geotiff by Stuart Matthews.

Demo

The figures below show the results for three basic layers, showing Currents in the Bay of Santander (Spain)

Example

Example

Example

If you want to have a quick testing environment, have a look at these snippets at codepen.io:

Instructions

Basic Usage

  1. Get the JavaScript file. You can grab a copy from ongoing work at leaflet.canvaslayer.field.js. If you prefer to work locally with npm, then go with npm install leaflet-canvaslayer-field --save. Every version is automatically published to unpkg CDN (last version at: https://unpkg.com/leaflet-canvaslayer-field/dist/leaflet.canvaslayer.field.js)

  2. Include the JavaScript dependencies in your page:

    <!-- CDN references -->
    <script src="//npmcdn.com/leaflet@1.2.0/dist/leaflet.js"></script>

    <script src="//cdnjs.cloudflare.com/ajax/libs/chroma-js/1.3.4/chroma.min.js"></script>
    <script src="//d3js.org/d3.v4.min.js"></script>
    <script src="//npmcdn.com/geotiff@0.3.6/dist/geotiff.js"></script> <!-- optional -->

    <!-- Plugin -->
    <script src="https://ihcantabria.github.io/Leaflet.CanvasLayer.Field/dist/leaflet.canvaslayer.field.js"></script>
  1. Prepare a Raster File with your favourite GIS tool, using EPSG:4326 (ASCII Grid or GeoTIFF format)

  2. Create a ScalarField layer and add it to the map, using your raster files as source (e.g. this .asc)

d3.text("https://ihcantabria.github.io/Leaflet.CanvasLayer.Field/data/Bay_Speed.asc", function (asc) {
    var s = L.ScalarField.fromASCIIGrid(asc);
    var layer = L.canvasLayer.scalarField(s).addTo(map);

    map.fitBounds(layer.getBounds());
});
  1. Or try the VectorFieldAnim layer, adding also a popup (previously you have to prepare 2 raster files, with 'u' and 'v' components in 'm/s'):
d3.text('https://ihcantabria.github.io/Leaflet.CanvasLayer.Field/data/Bay_U.asc', function(u) {
    d3.text('https://ihcantabria.github.io/Leaflet.CanvasLayer.Field/data/Bay_V.asc', function(v) {
        let vf = L.VectorField.fromASCIIGrids(u, v);
        let layer = L.canvasLayer.vectorFieldAnim(vf).addTo(map);
        map.fitBounds(layer.getBounds());

        layer.on('click', function(e) {
            if (e.value !== null) {
                let vector = e.value;
                let v = vector.magnitude().toFixed(2);
                let d = vector.directionTo().toFixed(0);
                let html = (`<span>${v} m/s to ${d}&deg</span>`);
                let popup = L.popup()
                    .setLatLng(e.latlng)
                    .setContent(html)
                    .openOn(map);
            }
        });
    });
});

Developers

  • This plugin works with Leaflet >=v1.0.0
  • node & npm are needed to build and test the plugin, and it uses webpack 2 as module bundler. To use it just:
npm install
npm run start
  • Navigate to docs/index.html for some examples.

License

Licensed under the GNU General Public License v3.0

This software currently depends a copy of:

At runtime it uses:

You can’t perform that action at this time.