import colormap from 'colormap';
https://openlayers.org/workshop/en/cog/colormap.html
How to use this utility in javascript?
I am using CDN of openlayers
https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.9.0/css/ol.css
Thanks in advance
If the developer has not provided a browser build for an NPM package you may be able to use a utility such as bundle.run (see https://github.com/Rich-Harris/packd) In this case that does work but I would suggest you download the build to your own server
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>OpenLayers</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.9.0/css/ol.css" type="text/css">
<style>
html, body, #map-container {
margin: 0;
height: 100%;
width: 100%;
font-family: sans-serif;
}
</style>
<script src="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.9.0/build/ol.js"></script>
<script src="https://bundle.run/colormap@2.3.2"></script>
</head>
<body>
<div id="map-container"></div>
<script type="text/javascript">
const source = new ol.source.GeoTIFF({
sources: [
{
// red reflectance
url: 'https://sentinel-cogs.s3.us-west-2.amazonaws.com/sentinel-s2-l2a-cogs/21/H/UB/2021/9/S2B_21HUB_20210915_0_L2A/B04.tif',
max: 10000,
},
{
// near-infrared reflectance
url: 'https://sentinel-cogs.s3.us-west-2.amazonaws.com/sentinel-s2-l2a-cogs/21/H/UB/2021/9/S2B_21HUB_20210915_0_L2A/B08.tif',
max: 10000,
},
],
});
// near-infrared is the second band from above
const nir = ['band', 2];
// near-infrared is the first band from above
const red = ['band', 1];
const difference = ['-', nir, red];
const sum = ['+', nir, red];
const ndvi = ['/', difference, sum];
function getColorStops(name, min, max, steps, reverse) {
const delta = (max - min) / (steps - 1);
const stops = new Array(steps * 2);
const colors = colormap({colormap: name, nshades: steps, format: 'rgba'});
if (reverse) {
colors.reverse();
}
for (let i = 0; i < steps; i++) {
stops[i * 2] = min + i * delta;
stops[i * 2 + 1] = colors[i];
}
return stops;
}
const layer = new ol.layer.WebGLTile({
source: source,
style: {
color: [
'interpolate',
['linear'],
ndvi,
// color ramp for NDVI values
...getColorStops('earth', -0.5, 1, 10, true),
],
},
});
const map = new ol.Map({
target: 'map-container',
layers: [layer],
view: source.getView(),
});
</script>
</body>
</html>NDVI image is visible but openlayer map is not visible
