Collectives™ on Stack Overflow

Find centralized, trusted content and collaborate around the technologies you use most.

Teams

Q&A for work

Connect and share knowledge within a single location that is structured and easy to search.

I have a map that loads a COG file. When OL renders it I have colored pixels outside the extent of the layer? The COG has NaN as null value.

Here a working example: https://codesandbox.io/s/ol-sgekdh?file=/main.js

What am I doing wrong?

Thank you

import GeoTIFF from "ol/source/GeoTIFF.js";
import Map from "ol/Map.js";
import TileLayer from "ol/layer/WebGLTile.js";
import colormap from "colormap";
import OSM from "ol/source/OSM";
import { register } from "ol/proj/proj4";
import proj4 from "proj4";
import { proj4Defs } from "./proj";
import { View } from "ol";
proj4.defs(proj4Defs);
register(proj4);
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 url = "https://andy-aws.s3.eu-north-1.amazonaws.com/RNBR.tif";
const source = new GeoTIFF({
  normalize: false,
  sources: [
      url: url,
      nodata: NaN
const layer1 = ["band", 1];
const osm = new TileLayer({
  source: new OSM()
const layer = new TileLayer({
  source: source,
  style: {
    color: [
      "case",
      // if band 2 == 0, than set it transparent
      ["==", ["band", 2], 0],
      ["color", 0, 0, 0, 0],
      // otherwise, shades of green
        "interpolate",
        ["linear"],
        layer1,
        ...getColorStops("greens", -2, 2, 9, true)
const view1 = source.getView();
const view2 = new View({
  projection: "EPSG:4326",
  center: [31.8375, -13.12945],
  zoom: 12
const map = new Map({
  target: "map",
  layers: [osm, layer],
  view: view2
// Register onclick event listener on the map or layer
map.on("click", function (event) {
  var coordinate = event.coordinate;
  console.log("Clicked coordinate:", coordinate);
  const data = layer.getData(event.pixel);
  console.log(data);
                @Mike thank you it works. Isn't that the correct way to state it? And the strange thing is that it works in one part of the map, and in another it doesn't. Could it be OL bug?
– aborruso
                Jun 7 at 12:13
                I think there are two values in that file which can mean nodata.  Setting nodata to either NaN or 0 works if you change the case to ['any', ['==', ['band', 2], 0], ['==', ['band', 1], 0]],
– Mike
                Jun 7 at 13:08
        
Thanks for contributing an answer to Stack Overflow!
Please be sure to answer the question. Provide details and share your research!
But avoid …
Asking for help, clarification, or responding to other answers.
Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.