Leaflet plugin for displaying data from a Web Coverage Service
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Failed to load latest commit information.



A LeafletJS plugin for displaying geoTIFF raster data from a Web Coverage Service. This plugin extends Leaflet.NonTiledLayer.

DEMO The displayed data may take a few seconds to download.


Sea ice coverage in the Southern Ocean.

This plugin uses geotiff.js and plotty.


  1. Include the JavaScript file and dependencies:
    <script src="https://npmcdn.com/leaflet@1.0.3/dist/leaflet.js"></script>
    <script src="https://unpkg.com/leaflet.nontiledlayer/dist/NonTiledLayer.js"></script>
    <script src="vendor/geotiff.js"></script>
    <script src="vendor/plotty.js"></script>
    <script src="leaflet-geotiff.js"></script>
  1. Add a WCS layer L.nonTiledLayer.wcs(url,options)
  • url - WCS url, e.g. https://domain.org/cgi-bin/server_path?
  • options:
    • wcsOptions: an object containing options for the WCS query, e.g. {version: '1.0.0',}
    • displayMin,displayMax - Minimum and maximum values to plot.
    • clampLow, clampHigh - (optional, default = true) If true values outside displayMin to displayMax will be rendered as if they were valid values.
    • band - (optional, default = 0) geoTIFF band to read.
    • image - (optional, default = 0) geoTIFF image to read.
    • colorScale - (optional, default = "rainbow"). Plotty color scale used to render the image.
    • useCanvas - (optional). If available use a canvas element to render the images
  1. Because WCS servers can be slow to respond, the layer fires a wcsloading event when data is requested and wcsloaded when the data arrives.

  2. Data values can be extracted using the getValueAtPoint(e.containerPoint) method.

  3. New color scales can be created using plotty's addColorScale method.