Skip to content

Instantly share code, notes, and snippets.

@jgcasta
Last active June 1, 2016 10:49
Show Gist options
  • Save jgcasta/7622fc3b5b04497c498c to your computer and use it in GitHub Desktop.
Save jgcasta/7622fc3b5b04497c498c to your computer and use it in GitHub Desktop.
VIIRS WMTS access using ol3

VIIRS WMTS viewer example

<!--
WMTS VIIRS using ol3
José Gómez Castaño
jgomez03@pdi.ucm.es
-->
<!DOCTYPE html>
<html>
<head>
<meta charset='UTF-8'>
<style>
body { font-family: arial; }
.map {
height: 550px; width: 100%;
}
h3 {
border-bottom: 1px solid #000000;
}
</style>
</head>
<body>
<h3>Showing VIIRS layer using Open Layer 3</h3>
<div id="map" class="map"></div>
<script src='http://openlayers.org/en/v3.16.0/build/ol.js'></script>
<script>
var map = new ol.Map({
layers: viirs,
view: new ol.View({
maxResolution: 0.5625,
projection: ol.proj.get("EPSG:4326"),
extent: [-180, -90, 180, 90],
center: [0, 0],
zoom: 2
}),
target: "map"
//renderer: ["canvas", "dom"],
});
var sourceViirs = new ol.source.WMTS({
urls: [
"https://map1a.vis.earthdata.nasa.gov/wmts-geo/wmts.cgi",
"https://map1b.vis.earthdata.nasa.gov/wmts-geo/wmts.cgi",
"https://map1c.vis.earthdata.nasa.gov/wmts-geo/wmts.cgi",
],
layer: "VIIRS_CityLights_2012",
format: "image/jpeg",
matrixSet: "EPSG4326_500m",
tileGrid: new ol.tilegrid.WMTS({
origin: [-180, 90],
resolutions: [
0.5625,
0.28125,
0.140625,
0.0703125,
0.03515625,
0.017578125,
0.0087890625,
0.00439453125,
0.002197265625
],
matrixIds: [0, 1, 2, 3, 4, 5, 6, 7, 8],
tileSize: 512
}),
attributions: [
new ol.Attribution({html:
"<a href='http://ol3js.org'>OpenLayers</a>" +
"<a href='https://earthdata.nasa.gov/gibs'>" +
"NASA EOSDIS GIBS</a>" +
"<a href='https://github.com/nasa-gibs/web-examples/blob/release/openlayers3/js/geographic-epsg4326.js'>" +
"View Source" +
"</a>"
})
]
});
var viirs = new ol.layer.Tile({source: sourceViirs});
map.addLayer(viirs);
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment