Skip to content

Latest commit

 

History

History
101 lines (75 loc) · 4.36 KB

README.md

File metadata and controls

101 lines (75 loc) · 4.36 KB
Raw

This fork is used to publish a custom package for Weacast while waiting for pull requests to be integrated to the upstream.

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

It includes:

  • L.CanvasLayer.ScalarField - a "typical" raster layer (from scalars such as DTM, temperature...) that can be rendered with different color scales.
  • 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.

Demo

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

Example

Example

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

Instructions

Basic Usage

  1. Get the JavaScript file. You can grab a copy from leaflet.canvaslayer.field.js or get it with npm install leaflet-canvaslayer-field --save

  2. Include the JavaScript dependencies in your page:

    <!-- CDN references -->
    <script src="//npmcdn.com/[email protected]/dist/leaflet.js"></script>

    <script src="//cdnjs.cloudflare.com/ajax/libs/chroma-js/1.3.0/chroma.min.js"></script>
    <script src="//d3js.org/d3.v4.min.js"></script>
    <script src="//npmcdn.com/[email protected]/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 includes a copy of:

At runtime it requires: