georaster-layer-for-leaflet-example
georaster-layer-for-leaflet-example copied to clipboard
GeoTIFF
No color in the GeoTIFF
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: `
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.
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 :
`
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 `
Hi Daniel,
I tried but still doesn't work... Have I put the all path of the last2.json?
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});
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: `
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.
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.
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
