No color in the GeoTIFF

[ccalvosa]

Hello everyone,

I tried to develop a Radar Visor from AEMET images but I can't show the color of the radar. This is the code:
`

<style> #map { bottom: 0; left: 0; position: absolute; right: 0; top: 0; } </style>

<script src="https://unpkg.com/[email protected]/dist/leaflet.js"></script> <script src="https://unpkg.com/georaster"></script> <script src="https://unpkg.com/georaster-layer-for-leaflet/georaster-layer-for-leaflet.browserify.min.js"></script> <script> // initalize leaflet map var map = L.map('map').setView([41.7, 0], 5);

  // add OpenStreetMap basemap
  L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
      attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
  }).addTo(map);

  var url_to_geotiff_file = "http://radarzgz.meteozgz.eu/last2.tif";

  fetch(url_to_geotiff_file)
    .then(response => response.arrayBuffer())
    .then(arrayBuffer => {
      parseGeoraster(arrayBuffer).then(georaster => {
        console.log("georaster:", georaster);

        /*
            GeoRasterLayer is an extension of GridLayer,
            which means can use GridLayer options like opacity.
            Just make sure to include the georaster option!
            http://leafletjs.com/reference-1.2.0.html#gridlayer
        */
        var layer = new GeoRasterLayer({
          attribution: "Planet",
          georaster: georaster,
          resolution: 300,
          opacity: 0.6
        });
        layer.addTo(map);

        map.fitBounds(layer.getBounds());

    });
  });

</script>

`

And you can enter to visor: http://radarzgz.meteozgz.eu/geotif.html The original is this: https://ama.aemet.es/o/estaticos/productos/scm/202004122300_r8za.gif

I don't know how to do to show the original colors...

Thank you very much.

Carlos C.

[DanielJDufour]

Hi, @meteozgz . Thanks for posting this issue. I'll look into it.

[DanielJDufour]

Hi, @meteozgz . GeoRasterLayer doesn't currently support color tables, but you can use the pixelValuesToColorFn as a workaround. You can grab the color table is JSON file using gdalinfo. Here's the command: gdalinfo last2.tif -json:

{
  "description":"last2.tif",
  "driverShortName":"GTiff",
  "driverLongName":"GeoTIFF",
  "files":[
    "last2.tif"
  ],
  "size":[
    557,
    449
  ],
  "coordinateSystem":{
    "wkt":"GEOGCS[\"WGS 84\",\n    DATUM[\"WGS_1984\",\n        SPHEROID[\"WGS 84\",6378137,298.257223563,\n            AUTHORITY[\"EPSG\",\"7030\"]],\n        AUTHORITY[\"EPSG\",\"6326\"]],\n    PRIMEM[\"Greenwich\",0],\n    UNIT[\"degree\",0.0174532925199433],\n    AUTHORITY[\"EPSG\",\"4326\"]]"
  },
  "geoTransform":[
    -3.5691746442422922,
    0.0107390098892456,
    0.0,
    43.8903172413704326,
    0.0,
    -0.0107390098892456
  ],
  "metadata":{
    "":{
      "AREA_OR_POINT":"Area",
      "DataType":"Thematic"
    },
    "IMAGE_STRUCTURE":{
      "INTERLEAVE":"BAND"
    }
  },
  "cornerCoordinates":{
    "upperLeft":[
      -3.5691746,
      43.8903172
    ],
    "lowerLeft":[
      -3.5691746,
      39.0685018
    ],
    "lowerRight":[
      2.4124539,
      39.0685018
    ],
    "upperRight":[
      2.4124539,
      43.8903172
    ],
    "center":[
      -0.5783604,
      41.4794095
    ]
  },
  "wgs84Extent":{
    "type":"Polygon",
    "coordinates":[
      [
        [
          -3.5691746,
          43.8903172
        ],
        [
          -3.5691746,
          39.0685018
        ],
        [
          2.4124539,
          39.0685018
        ],
        [
          2.4124539,
          43.8903172
        ],
        [
          -3.5691746,
          43.8903172
        ]
      ]
    ]
  },
  "bands":[
    {
      "band":1,
      "block":[
        557,
        14
      ],
      "type":"Byte",
      "colorInterpretation":"Palette",
      "metadata":{
        "":{
          "RepresentationType":"THEMATIC"
        }
      },
      "colorTable":{
        "palette":"RGB",
        "count":256,
        "entries":[
          [
            0,
            0,
            0,
            255
          ],
          [
            20,
            20,
            20,
            255
          ],
          [
            10,
            21,
            14,
            255
          ],
          [
            20,
            40,
            27,
            255
          ],
          [
            20,
            48,
            11,
            255
          ],
          [
            42,
            58,
            8,
            255
          ],
          [
            51,
            63,
            13,
            255
          ],
          [
            20,
            60,
            35,
            255
          ],
          [
            23,
            47,
            32,
            255
          ],
          [
            77,
            28,
            2,
            255
          ],
          [
            85,
            41,
            11,
            255
          ],
          [
            90,
            48,
            15,
            255
          ],
          [
            93,
            52,
            18,
            255
          ],
          [
            82,
            39,
            18,
            255
          ],
          [
            98,
            59,
            23,
            255
          ],
          [
            92,
            55,
            37,
            255
          ],
          [
            54,
            64,
            14,
            255
          ],
          [
            60,
            67,
            17,
            255
          ],
          [
            56,
            103,
            3,
            255
          ],
          [
            20,
            80,
            42,
            255
          ],
          [
            20,
            100,
            50,
            255
          ],
          [
            71,
            73,
            23,
            255
          ],
          [
            81,
            78,
            28,
            255
          ],
          [
            103,
            67,
            28,
            255
          ],
          [
            69,
            110,
            10,
            255
          ],
          [
            76,
            113,
            13,
            255
          ],
          [
            91,
            120,
            20,
            255
          ],
          [
            80,
            115,
            15,
            255
          ],
          [
            102,
            126,
            26,
            255
          ],
          [
            90,
            83,
            33,
            255
          ],
          [
            95,
            64,
            48,
            255
          ],
          [
            108,
            75,
            33,
            255
          ],
          [
            106,
            85,
            37,
            255
          ],
          [
            117,
            88,
            42,
            255
          ],
          [
            105,
            75,
            53,
            255
          ],
          [
            124,
            98,
            49,
            255
          ],
          [
            118,
            97,
            47,
            255
          ],
          [
            96,
            96,
            96,
            255
          ],
          [
            120,
            115,
            112,
            255
          ],
          [
            108,
            87,
            75,
            255
          ],
          [
            39,
            77,
            120,
            255
          ],
          [
            153,
            56,
            5,
            255
          ],
          [
            186,
            45,
            26,
            255
          ],
          [
            252,
            3,
            2,
            255
          ],
          [
            158,
            66,
            20,
            255
          ],
          [
            163,
            68,
            13,
            255
          ],
          [
            165,
            75,
            21,
            255
          ],
          [
            173,
            84,
            23,
            255
          ],
          [
            178,
            92,
            28,
            255
          ],
          [
            180,
            96,
            30,
            255
          ],
          [
            164,
            78,
            35,
            255
          ],
          [
            167,
            84,
            42,
            255
          ],
          [
            171,
            91,
            51,
            255
          ],
          [
            187,
            104,
            37,
            255
          ],
          [
            174,
            97,
            59,
            255
          ],
          [
            176,
            100,
            63,
            255
          ],
          [
            195,
            117,
            45,
            255
          ],
          [
            200,
            125,
            50,
            255
          ],
          [
            254,
            126,
            1,
            255
          ],
          [
            179,
            106,
            70,
            255
          ],
          [
            185,
            118,
            85,
            255
          ],
          [
            182,
            113,
            78,
            255
          ],
          [
            138,
            110,
            80,
            255
          ],
          [
            200,
            5,
            90,
            255
          ],
          [
            108,
            129,
            29,
            255
          ],
          [
            121,
            135,
            35,
            255
          ],
          [
            67,
            131,
            35,
            255
          ],
          [
            0,
            226,
            0,
            255
          ],
          [
            134,
            142,
            42,
            255
          ],
          [
            140,
            145,
            45,
            255
          ],
          [
            150,
            150,
            50,
            255
          ],
          [
            163,
            157,
            57,
            255
          ],
          [
            205,
            132,
            55,
            255
          ],
          [
            210,
            139,
            60,
            255
          ],
          [
            255,
            187,
            0,
            255
          ],
          [
            255,
            255,
            0,
            255
          ],
          [
            248,
            210,
            23,
            255
          ],
          [
            181,
            166,
            66,
            255
          ],
          [
            190,
            128,
            97,
            255
          ],
          [
            164,
            143,
            119,
            255
          ],
          [
            155,
            132,
            104,
            255
          ],
          [
            218,
            152,
            68,
            255
          ],
          [
            195,
            173,
            73,
            255
          ],
          [
            223,
            160,
            73,
            255
          ],
          [
            205,
            177,
            77,
            255
          ],
          [
            215,
            183,
            83,
            255
          ],
          [
            227,
            166,
            77,
            255
          ],
          [
            233,
            174,
            83,
            255
          ],
          [
            235,
            182,
            88,
            255
          ],
          [
            242,
            188,
            92,
            255
          ],
          [
            194,
            136,
            106,
            255
          ],
          [
            197,
            142,
            114,
            255
          ],
          [
            201,
            148,
            123,
            255
          ],
          [
            214,
            129,
            118,
            255
          ],
          [
            224,
            163,
            127,
            255
          ],
          [
            237,
            194,
            94,
            255
          ],
          [
            245,
            192,
            95,
            255
          ],
          [
            249,
            219,
            73,
            255
          ],
          [
            247,
            197,
            98,
            255
          ],
          [
            251,
            227,
            97,
            255
          ],
          [
            73,
            113,
            179,
            255
          ],
          [
            0,
            0,
            252,
            255
          ],
          [
            30,
            74,
            160,
            255
          ],
          [
            0,
            148,
            252,
            255
          ],
          [
            79,
            134,
            216,
            255
          ],
          [
            91,
            142,
            219,
            255
          ],
          [
            113,
            156,
            221,
            255
          ],
          [
            0,
            252,
            252,
            255
          ],
          [
            96,
            131,
            189,
            255
          ],
          [
            177,
            160,
            141,
            255
          ],
          [
            205,
            155,
            130,
            255
          ],
          [
            212,
            171,
            150,
            255
          ],
          [
            209,
            165,
            144,
            255
          ],
          [
            217,
            184,
            167,
            255
          ],
          [
            228,
            173,
            166,
            255
          ],
          [
            220,
            192,
            178,
            255
          ],
          [
            226,
            198,
            184,
            255
          ],
          [
            248,
            232,
            153,
            255
          ],
          [
            149,
            178,
            223,
            255
          ],
          [
            178,
            200,
            234,
            255
          ],
          [
            192,
            192,
            192,
            255
          ],
          [
            215,
            205,
            195,
            255
          ],
          [
            234,
            214,
            204,
            255
          ],
          [
            241,
            227,
            219,
            255
          ],
          [
            203,
            218,
            241,
            255
          ],
          [
            219,
            229,
            243,
            255
          ],
          [
            255,
            255,
            255,
            255
          ],
          [
            240,
            236,
            236,
            255
          ],
          [
            0,
            0,
            0,
            255
          ],
          [
            0,
            0,
            0,
            255
          ],
          [
            0,
            0,
            0,
            255
          ],
          [
            0,
            0,
            0,
            255
          ],
          [
            0,
            0,
            0,
            255
          ],
          [
            0,
            0,
            0,
            255
          ],
          [
            0,
            0,
            0,
            255
          ],
          [
            0,
            0,
            0,
            255
          ],
          [
            0,
            0,
            0,
            255
          ],
          [
            0,
            0,
            0,
            255
          ],
          [
            0,
            0,
            0,
            255
          ],
          [
            0,
            0,
            0,
            255
          ],
          [
            0,
            0,
            0,
            255
          ],
          [
            0,
            0,
            0,
            255
          ],
          [
            0,
            0,
            0,
            255
          ],
          [
            0,
            0,
            0,
            255
          ],
          [
            0,
            0,
            0,
            255
          ],
          [
            0,
            0,
            0,
            255
          ],
          [
            0,
            0,
            0,
            255
          ],
          [
            0,
            0,
            0,
            255
          ],
          [
            0,
            0,
            0,
            255
          ],
          [
            0,
            0,
            0,
            255
          ],
          [
            0,
            0,
            0,
            255
          ],
          [
            0,
            0,
            0,
            255
          ],
          [
            0,
            0,
            0,
            255
          ],
          [
            0,
            0,
            0,
            255
          ],
          [
            0,
            0,
            0,
            255
          ],
          [
            0,
            0,
            0,
            255
          ],
          [
            0,
            0,
            0,
            255
          ],
          [
            0,
            0,
            0,
            255
          ],
          [
            0,
            0,
            0,
            255
          ],
          [
            0,
            0,
            0,
            255
          ],
          [
            0,
            0,
            0,
            255
          ],
          [
            0,
            0,
            0,
            255
          ],
          [
            0,
            0,
            0,
            255
          ],
          [
            0,
            0,
            0,
            255
          ],
          [
            0,
            0,
            0,
            255
          ],
          [
            0,
            0,
            0,
            255
          ],
          [
            0,
            0,
            0,
            255
          ],
          [
            0,
            0,
            0,
            255
          ],
          [
            0,
            0,
            0,
            255
          ],
          [
            0,
            0,
            0,
            255
          ],
          [
            0,
            0,
            0,
            255
          ],
          [
            0,
            0,
            0,
            255
          ],
          [
            0,
            0,
            0,
            255
          ],
          [
            0,
            0,
            0,
            255
          ],
          [
            0,
            0,
            0,
            255
          ],
          [
            0,
            0,
            0,
            255
          ],
          [
            0,
            0,
            0,
            255
          ],
          [
            0,
            0,
            0,
            255
          ],
          [
            0,
            0,
            0,
            255
          ],
          [
            0,
            0,
            0,
            255
          ],
          [
            0,
            0,
            0,
            255
          ],
          [
            0,
            0,
            0,
            255
          ],
          [
            0,
            0,
            0,
            255
          ],
          [
            0,
            0,
            0,
            255
          ],
          [
            0,
            0,
            0,
            255
          ],
          [
            0,
            0,
            0,
            255
          ],
          [
            0,
            0,
            0,
            255
          ],
          [
            0,
            0,
            0,
            255
          ],
          [
            0,
            0,
            0,
            255
          ],
          [
            0,
            0,
            0,
            255
          ],
          [
            0,
            0,
            0,
            255
          ],
          [
            0,
            0,
            0,
            255
          ],
          [
            0,
            0,
            0,
            255
          ],
          [
            0,
            0,
            0,
            255
          ],
          [
            0,
            0,
            0,
            255
          ],
          [
            0,
            0,
            0,
            255
          ],
          [
            0,
            0,
            0,
            255
          ],
          [
            0,
            0,
            0,
            255
          ],
          [
            0,
            0,
            0,
            255
          ],
          [
            0,
            0,
            0,
            255
          ],
          [
            0,
            0,
            0,
            255
          ],
          [
            0,
            0,
            0,
            255
          ],
          [
            0,
            0,
            0,
            255
          ],
          [
            0,
            0,
            0,
            255
          ],
          [
            0,
            0,
            0,
            255
          ],
          [
            0,
            0,
            0,
            255
          ],
          [
            0,
            0,
            0,
            255
          ],
          [
            0,
            0,
            0,
            255
          ],
          [
            0,
            0,
            0,
            255
          ],
          [
            0,
            0,
            0,
            255
          ],
          [
            0,
            0,
            0,
            255
          ],
          [
            0,
            0,
            0,
            255
          ],
          [
            0,
            0,
            0,
            255
          ],
          [
            0,
            0,
            0,
            255
          ],
          [
            0,
            0,
            0,
            255
          ],
          [
            0,
            0,
            0,
            255
          ],
          [
            0,
            0,
            0,
            255
          ],
          [
            0,
            0,
            0,
            255
          ],
          [
            0,
            0,
            0,
            255
          ],
          [
            0,
            0,
            0,
            255
          ],
          [
            0,
            0,
            0,
            255
          ],
          [
            0,
            0,
            0,
            255
          ],
          [
            0,
            0,
            0,
            255
          ],
          [
            0,
            0,
            0,
            255
          ],
          [
            0,
            0,
            0,
            255
          ],
          [
            0,
            0,
            0,
            255
          ],
          [
            0,
            0,
            0,
            255
          ],
          [
            0,
            0,
            0,
            255
          ],
          [
            0,
            0,
            0,
            255
          ],
          [
            0,
            0,
            0,
            255
          ],
          [
            0,
            0,
            0,
            255
          ],
          [
            0,
            0,
            0,
            255
          ],
          [
            0,
            0,
            0,
            255
          ],
          [
            0,
            0,
            0,
            255
          ],
          [
            0,
            0,
            0,
            255
          ],
          [
            0,
            0,
            0,
            255
          ],
          [
            0,
            0,
            0,
            255
          ],
          [
            0,
            0,
            0,
            255
          ],
          [
            0,
            0,
            0,
            255
          ],
          [
            0,
            0,
            0,
            255
          ],
          [
            0,
            0,
            0,
            255
          ],
          [
            0,
            0,
            0,
            255
          ],
          [
            0,
            0,
            0,
            255
          ],
          [
            0,
            0,
            0,
            255
          ],
          [
            0,
            0,
            0,
            255
          ],
          [
            0,
            0,
            0,
            255
          ],
          [
            0,
            0,
            0,
            255
          ],
          [
            0,
            0,
            0,
            255
          ],
          [
            0,
            0,
            0,
            255
          ],
          [
            0,
            0,
            0,
            255
          ],
          [
            0,
            0,
            0,
            255
          ],
          [
            0,
            0,
            0,
            255
          ],
          [
            0,
            0,
            0,
            255
          ],
          [
            0,
            0,
            0,
            255
          ],
          [
            0,
            0,
            0,
            255
          ],
          [
            0,
            0,
            0,
            255
          ]
        ]
      }
    }
  ]
}

Here's some sample code:

fetch("last2.json").then(response => response.json()).then(data => {
    const entries = data.bands[0].colorTable.entries;
    new GeoRasterLayer({
        georaster,
        resolution: 300    ,
        opacity: 0.6,
        pixelValuesToColorFn: function (values) {
            const [r,g,b,a] = entries[values[0]];
            return `rgb(${r},${g},${b},${a});`
        }
    });
});

Let me know if this helps! Happy to answer any more questions.

Hopefully, we'll get color table support added into GeoRasterLayer in the future.

[ccalvosa]

Hello Daniel,

I try with your code but doesn't work... This is the code and you can see in http://radarzgz.meteozgz.eu/geotif3.html :

`

<style> #map { bottom: 0; left: 0; position: absolute; right: 0; top: 0; } </style>

<script src="https://unpkg.com/[email protected]/dist/leaflet.js"></script> <script src="https://unpkg.com/georaster"></script> <script src="https://unpkg.com/georaster-layer-for-leaflet/georaster-layer-for-leaflet.browserify.min.js"></script> <script> // initalize leaflet map var map = L.map('map').setView([41.7, 0], 5);

  // add OpenStreetMap basemap
  L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
      attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
  }).addTo(map);

  var url_to_geotiff_file = "http://radarzgz.meteozgz.eu/last2.tif";

  fetch('last2.json')
    .then(response => response.json())
    .then(data => {
      const entries = data.bands[0].colorTable.entries;

        /*
            GeoRasterLayer is an extension of GridLayer,
            which means can use GridLayer options like opacity.
            Just make sure to include the georaster option!
            http://leafletjs.com/reference-1.2.0.html#gridlayer
        */
        new GeoRasterLayer({
          georaster: georaster,
          resolution: 300,
          opacity: 0.6,
          pixelValuesToColorFn: function (values) {
        const [r,g,b,a] = entries[values[0]];
        return 'rgb(${r},${g},${b},${a});'
        });
        layer.addTo(map);

        map.fitBounds(layer.getBounds());

    });
  });

</script>

`

Probably I don't know how to put the code...

Thank you very much and sorry.

Carlos C.

[DanielJDufour]

No problem. It seems like this line 'rgb(${r},${g},${b},${a});' is using regular apostrophes, but you must use back ticks. Change it from using ' to using `

[ccalvosa]

Hi Daniel,

I tried but still doesn't work... Have I put the all path of the last2.json?

[DanielJDufour]

My mistake. The A value in rgba should be between 0 and 1, so we must divide by 255. Like rgb(${r},${g},${b},${a/255});

[ccalvosa]

Still doesn't work... I think I do some more wrong because now I cannot see anything in the web (no map). This is the code:
`

<style> #map { bottom: 0; left: 0; position: absolute; right: 0; top: 0; } </style>

<script src="https://unpkg.com/[email protected]/dist/leaflet.js"></script> <script src="https://unpkg.com/georaster"></script> <script src="https://unpkg.com/georaster-layer-for-leaflet/georaster-layer-for-leaflet.browserify.min.js"></script> <script> // initalize leaflet map var map = L.map('map').setView([41.7, 0], 5);

  // add OpenStreetMap basemap
  L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
      attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
  }).addTo(map);

  var url_to_geotiff_file = "http://radarzgz.meteozgz.eu/last2.tif";

  fetch('last2.json')
    .then(response => response.json())
    .then(data => {
      const entries = data.bands[0].colorTable.entries;

        /*
            GeoRasterLayer is an extension of GridLayer,
            which means can use GridLayer options like opacity.
            Just make sure to include the georaster option!
            http://leafletjs.com/reference-1.2.0.html#gridlayer
        */
        new GeoRasterLayer({
          georaster: georaster,
          resolution: 300,
          opacity: 0.6,
          pixelValuesToColorFn: function (values) {
        const [r,g,b,a] = entries[values[0]];
        return `rgb(${r},${g},${b},${a/255});`
        });
        layer.addTo(map);

        map.fitBounds(layer.getBounds());

    });
  });

</script>

`

[ccalvosa]

Hi Daniel,

I think I don't put right the JSON, so the script cannot know how to do well. Could be this the problem? I don't know how to fix it because it is my first time with JavaScript code.

Sorry for my, maybe, stupid questions and thank you very much for all your help.

Carlos C.

[DanielJDufour]

Hello, @meteozgz . Yesterday, I released support for color tables. This appears to be working now. Let me know if it works for you. This is a screenshot of the file input example with the last2.tif. Thank you.

[rohith231]

how can i apply Geotiff raster image on different map its in australia region need to apply in canada region like this similar raster image i had tried Qgis and other software to convert to .tiff format https://github.com/stuartmatthews/leaflet-geotiff