DanielJDufour
commented
4 years ago Hi, @meteozgz . Thanks for posting this issue. I'll look into it.
Open ccalvosa opened 4 years ago
DanielJDufour
commented
4 years ago Hi, @meteozgz . Thanks for posting this issue. I'll look into it.
DanielJDufour
commented
4 years ago 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
commented
4 years ago 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 :
`<!DOCTYPE html>
`
Probably I don't know how to put the code...
Thank you very much and sorry.
Carlos C.
DanielJDufour
commented
4 years ago 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
commented
4 years ago Hi Daniel,
I tried but still doesn't work... Have I put the all path of the last2.json?
DanielJDufour
commented
4 years ago 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
commented
4 years ago 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: `<!DOCTYPE html>
`ccalvosa
commented
4 years ago 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
commented
4 years ago 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
commented
4 years ago 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
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: `<!DOCTYPE html>
`
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.