ERDDAP WMS Leaflet Overlay

Displays data from an ERDDAP WMS feed in a Leaflet map.

by Jenn Patterson Sevadjian

HTML

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

CSS

#map {
  width: 100%;
  height:800px;
}

JavaScript

var map = L.map('map', {
	  center: [0, -80],
	  zoom: 1,
	  crs: L.CRS.EPSG4326,
	  worldCopyJump: true,
	  zoomSnap: 0.25,
	  zoomDelta: 0.5,
	  wheelPxPerZoomLevel: 50
	});

// Basemap (stopped working Aug 2022, but working again!)
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);
*/

// THREDDS data layer
// This is a high-res dataset, graphic may take a minute to load
/*	var murThreddsWmsLayer = L.tileLayer.wms('http://oceanwatch.pfeg.noaa.gov/thredds/wms/satellite/MUR41/ssta/1day?', {
	  layers: 'analysed_sst',
	  format: 'image/png',
	  transparent: true,
	  COLORSCALERANGE: '268.15,308.15'
	}).addTo(map);*/
  
/*  	var erddapWmsLayer = L.tileLayer.wms('https://coastwatch.pfeg.noaa.gov/erddap/wms/erdVHNchla1day/request?', {
      bgcolor: '0x808080',
      crs: L.CRS.EPSG4326,
      format: 'image/png',
      layers: 'erdVHNchla1day:chla',
      styles: '',
      transparent: true,
      version: '1.3.0',
      time:'2020-06-15T12:00:00Z'}).addTo(map);
*/