Skip to content


Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?

Latest commit


Git stats


Failed to load latest commit information.
Latest commit message
Commit time


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


var map ='map')
L.tileLayer('http://{s}{z}/{x}/{y}.png', {
  attribution: 'Map data &copy; <a href="">OpenStreetMap</a>'

var cov = ... // load Coverage object with another library

var layer = C.dataLayer(cov, {parameter: 'salinity'}).on('afterAdd', function(e) {
  if (layer.palette) {
  if (layer.timeSlices) {
  	new C.TimeAxis(layer).addTo(map)

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


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

<link rel="stylesheet" type="text/css" href="">
<link rel="stylesheet" type="text/css" href="">
<script src=""></script>
<script src=""></script>
<script src=""></script>

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

<script src=""></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="">
<script src=""></script>
<script src=""></script>


This library is developed within the MELODIES project.