ERDDAP Leaflet Image Overlay

Demonstrates overlaying data from ERDDAP as an image overlay in a Leaflet map. Uses OSM Topo for the basemap and overlays chlorophyll data from the Aqua satellite.

by Jenn Patterson Sevadjian

HTML

<script src="https://unpkg.com/[email protected]/dist/leaflet.js"></script>
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css">
<p>
Satellite Data from ERDDAP as an Image Overlay in Leaflet
</p><div id='map'></div>

CSS

#map {
  width: 600px;
  height: 400px;
}

JavaScript

var map = L.map('map', {
  center: [33,-117.5],
  zoom: 5,
  crs: L.CRS.EPSG4326,
  zoomSnap: 0.25,
  zoomDelta: 0.5,
  wheelPxPerZoomLevel: 50
});

// Basemap (stopped working 2022)
/*var wmsLayer = L.tileLayer.wms('http://ows.mundialis.de/services/service?', {
    layers: 'TOPO-OSM-WMS'
}).addTo(map);*/

var wmsLayer = L.tileLayer.wms('https://ahocevar.com/geoserver/wms?', {
    layers: 'ne:NE1_HR_LC_SR_W_DR'
}).addTo(map);
// Describe ERDDAP Overlay 
// link to the graphic produced by ERDDAP
// define the bounds of the image
var imageUrl = 'https://coastwatch.pfeg.noaa.gov/erddap/griddap/erdVHNchla1day.transparentPng?chla%5B(2020-04-14T12:00:00Z)%5D%5B(0.0)%5D%5B(35.01375):(31.80375)%5D%5B(-121.99875):(-116.80125)%5D&.draw=surface&.vars=longitude%7Clatitude%7Cchla&.colorBar=%7C%7CLog%7C%7C%7C&.bgColor=0xffccccff',
  imageBounds = [
    [31.80375, -121.99875],
    [35.01375, -116.80125]
  ];

// Add ERDDAP overlay to the map
var erddapImage = L.imageOverlay(imageUrl, imageBounds);
erddapImage.addTo(map);

// Add image layer to legend to toggle on/off
var layersForLegend = {
  'ERDDAP Image': erddapImage
}
L.control.layers({}, layersForLegend).addTo(map);