THREDDS ncWMS Leaflet Overlay 4326

Displays data from a THREDDS ncWMS feed in Leaflet.

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>
<h2>
Satellite SST via THREDDS WMS in 4326 Leaflet Map
</h2>
<p>
Uses a basemap in EPSG:4326 to display standard THREDDS tile layers properly
</p><div id='map'></div>

CSS

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

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



var wmsLayer = L.tileLayer.wms('https://ahocevar.com/geoserver/wms?', {
    layers: 'ne:NE1_HR_LC_SR_W_DR'
}).addTo(map);

// Service stopped working 2022
//var wmsLayer = L.tileLayer.wms('https://ows.mundialis.de/services/service?', //{
 //   layers: 'TOPO-OSM-WMS'
//}).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);*/
  
  // Blended SST loads faster!
  //From: https://oceanwatch.pfeg.noaa.gov/thredds/remoteCatalogService?catalog=https://thredds1.pfeg.noaa.gov/thredds/catalog/Satellite/aggregsatBA/ssta/catalog.xml
  	var murThreddsWmsLayer = L.tileLayer.wms('https://oceanwatch.pfeg.noaa.gov/thredds/wms/satellite/BA/ssta/mday?', {
	  layers: ' BAssta',
	  format: 'image/png',
	  transparent: true,
	  COLORSCALERANGE: '0,35'
	}).addTo(map);