Nuclear Pumpkin Mayhem

    leaflet-coverage

    0.9.1 • Public • Published

    leaflet-coverage

    NPM version

    A Leaflet plugin for visualizing coverage data (numerical or categorical data varying in space and time) with the help of the JavaScript Coverage Data API. Currently, it supports most domain types defined within CoverageJSON: Grid, Point, PointSeries, Trajectory, VerticalProfile, PolygonSeries, MultiPolygon. Additionally, it supports Point and VerticalProfile collections for a more convenient handling of such coverage collections.

    Note that to load a coverage you have to use another library, depending on which formats you want to support. The only currently known coverage loader that can be used is the covjson-reader for the CoverageJSON format.

    NOTE: This plugin is in active development, does not support all CoverageJSON domain types, may contain bugs, and will change.

    API docs

    Example

    var map = L.map('map')
    L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
      attribution: 'Map data &copy; <a href="http://www.osm.org">OpenStreetMap</a>'
    }).addTo(map)
    
    var cov = ... // load Coverage object with another library
    
    var layer = C.dataLayer(cov, {parameter: 'salinity'}).on('afterAdd', function(e) {
      if (layer.palette) {
        C.legend(layer).addTo(map)
      }
      
      if (layer.timeSlices) {
      	new C.TimeAxis(layer).addTo(map)
      }
      
      map.fitBounds(layer.getBounds())
    }).addTo(map)

    Have a look at this codepen for a full example that uses a CoverageJSON temperature grid as a data source.

    Notes

    This is how you would typically include leaflet-coverage in a website:

    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/leaflet@1.7.1/dist/leaflet.css">
    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/leaflet-coverage@0.7/leaflet-coverage.css">
    <script src="https://cdn.jsdelivr.net/npm/leaflet@1.7.1/dist/leaflet.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/covutils@0.6/covutils.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/leaflet-coverage@0.7/leaflet-coverage.min.js"></script>

    If you don't need support for MultiPolygon and PolygonSeries layers, then you can also use the lite variant of covutils:

    <script src="https://cdn.jsdelivr.net/npm/covutils@0.6/covutils-lite.min.js"></script>

    To use the plotting functionality (for time series or vertical profile plots) you have to include the D3 and C3 libraries in your HTML:

    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/c3@0.7.20/c3.min.css">
    <script src="https://cdn.jsdelivr.net/npm/d3@7.2.1/dist/d3.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/c3@0.7.20/c3.min.js"></script>

    Acknowledgments

    This library is developed within the MELODIES project.

    Keywords

    none

    Install

    npm i leaflet-coverage

    DownloadsWeekly Downloads

    82

    Version

    0.9.1

    License

    BSD-3-Clause

    Unpacked Size

    1.59 MB

    Total Files

    77

    Last publish

    Collaborators

    • letmaik
    • guygriffiths