THREDDS ncWMS Leaflet Mercator

Displays data from a THREDDS ncWMS feed in Leaflet in Mercator

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>
Example of THREDDS NCWMS </p>
<ul>

<li>Chlorophyll from NOAA CoastWatch central with Legend Demo</li>


</ul>
<div style="background:#666; overflow:auto; padding:15px;">


<div id='map' style="float:left"></div>
<div style="float:left">

<img style="padding-left:10px;" src='https://www.star.nesdis.noaa.gov/thredds/wms/CoastWatch/VIIRS/npp/chlora/DailySector/VY00?REQUEST=GetLegendGraphic&LAYER=chlor_a&LOGSCALE=true&TRANSPARENT=true&LEGEND_OPTIONS=fontColor:0x000000&COLORSCALERANGE=0.01,13&PALETTE=cmocean_algae'/>
</div>
</div>

CSS

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

JavaScript

var map = L.map('map', {
	  center: [33, -119],
	  zoom: 6,
	  worldCopyJump: true,
	  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);

// THREDDS data layer

  var colorThreddsWmsLayer = L.tileLayer.wms('https://www.star.nesdis.noaa.gov/thredds/wms/CoastWatch/VIIRS/npp/chlora/DailySector/VY00?', {
  LAYERS:'chlor_a',
  LOGSCALE:'true',
  service:'WMS',
  version:'1.3.0',
  REQUEST:'GetMap',
  MAXRESOLUTION:'auto',
  TRANSPARENT:'true',
  FORMAT:'image/png',
  NUMCOLORBANDS:215,
  CRS:'CRS:84',
  STYLES:'boxfill/cmocean_algae',
  COLORSCALERANGE:'0.01,13',
  CRS:'EPSG:3857',
  })
  colorThreddsWmsLayer.addTo(map);
  
  /*
  var cciThreddsWmsLayer = L.tileLayer.wms('https://rsg.pml.ac.uk/thredds/wms/CCI_ALL-v4.2-DAILY?', {
	  layers: 'chlor_a',
	  format: 'image/png',
	  transparent: true,
	}).addTo(map);*/