Skip to content

Commit aaf3274

Browse files
vincentsaragovincentsarago
committed
fix
1 parent 0025f8a commit aaf3274

File tree

1 file changed

+41
-18
lines changed

1 file changed

+41
-18
lines changed

‎rio_viz/templates/index.html‎

Lines changed: 41 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -285,13 +285,13 @@
285285
<svg class='icon icon--l inline-block'><use xlink:href='#icon-layers'/></svg> Layers
286286
</div>
287287
<div class='select-container wmax-full'>
288-
<select id='layer-selector' class='select select--s select--stroke wmax-full color-black'></select>
288+
<select id='layer-selector-dem' class='select select--s select--stroke wmax-full color-black'></select>
289289
<div class='select-arrow color-black'></div>
290290
</div>
291291
</section>
292292

293293
<!-- Min/Max -->
294-
<div id="minmax-data" class='px6 py6 none'>
294+
<div id="rescale-section" class='px6 py6 none'>
295295
<div class='txt-h5 mb6 color-black'><svg class='icon icon--l inline-block'><use xlink:href='#icon-smooth-ramp'/></svg> Rescale</div>
296296
<input id="data-min" class='input input--s w120-ml w60 inline-block align-center color-black' value='0' />
297297
<input id="data-max" class='input input--s w120-ml w60 inline-block align-center color-black' value='0' />
@@ -306,7 +306,7 @@
306306
</div>
307307

308308
<!-- Histogram -->
309-
<div class='px6 py6 w-full'>
309+
<div id='histogram-section' class='px6 py6 w-full'>
310310
<div class='txt-h5 color-black'><svg class='icon icon--l inline-block'><use xlink:href='#icon-graph'/></svg> Histogram</div>
311311
<div id='fetch-stats-div' class='w-full align-center'>
312312
<button id="btn-stats" class='btn bts--xs btn--stroke bg-darken25-on-hover inline-block txt-s color-black mx12 my12'>Get Dataset Statistics</button>
@@ -472,6 +472,8 @@
472472
algorithm: "hillshade",
473473
buffer: 3
474474
}
475+
params.bidx = document.getElementById('layer-selector-dem').selectedOptions[0].getAttribute("bidx")
476+
475477
let url_params = Object.keys(params).map(i => `${i}=${params[i]}`).join('&')
476478

477479
// Hillshade
@@ -514,9 +516,10 @@
514516
params = {
515517
algorithm: "terrainrgb",
516518
format: "png",
517-
bidx: 1,
518519
//algorithm_params: JSON.stringify({nodata_height:-10000.0})
519520
}
521+
params.bidx = document.getElementById('layer-selector-dem').selectedOptions[0].getAttribute("bidx")
522+
520523
url_params = Object.keys(params).map(i => `${i}=${params[i]}`).join('&')
521524

522525
map.addSource('raster-dem', {
@@ -758,12 +761,18 @@
758761
const rasterType = document.getElementById('toolbar').querySelector(".active").id
759762
switch (rasterType) {
760763
case 'dem':
764+
document.getElementById('cformula-section').classList.add('none')
765+
document.getElementById('rescale-section').classList.add('none')
761766
setDemViz()
762767
break
763768
case '1b':
769+
document.getElementById('cformula-section').classList.remove('none')
770+
document.getElementById('rescale-section').classList.remove('none')
764771
set1bViz()
765772
break
766773
case '3b':
774+
document.getElementById('cformula-section').classList.remove('none')
775+
document.getElementById('rescale-section').classList.remove('none')
767776
set3bViz()
768777
break
769778
default:
@@ -981,10 +990,10 @@
981990
})
982991
.then(data => {
983992
scope.dataset_statistics = data
984-
if (document.getElementById('toolbar').querySelector(".active").id === '1b') {
985-
addHisto1Band()
986-
} else {
993+
if (document.getElementById('toolbar').querySelector(".active").id === '3b') {
987994
addHisto3Bands()
995+
} else {
996+
addHisto1Band()
988997
}
989998
document.getElementById('histogram').classList.remove('loading')
990999
})
@@ -1040,6 +1049,11 @@
10401049
updateViz()
10411050
})
10421051

1052+
document.getElementById('layer-selector-dem').addEventListener('change', () => {
1053+
const active_layer = document.getElementById('layer-selector-dem')[document.getElementById('layer-selector-dem').selectedIndex]
1054+
updateViz()
1055+
})
1056+
10431057
document.getElementById('r-selector').addEventListener('change', () => {switchViz()})
10441058
document.getElementById('g-selector').addEventListener('change', () => {switchViz()})
10451059
document.getElementById('b-selector').addEventListener('change', () => {switchViz()})
@@ -1162,49 +1176,58 @@
11621176
scope.data_type = data.properties.dtype
11631177
scope.colormap = data.properties.colormap
11641178

1165-
if (['uint8','int8'].indexOf(scope.data_type) === -1 && !scope.colormap) document.getElementById('minmax-data').classList.remove('none')
1179+
if (['uint8','int8'].indexOf(scope.data_type) === -1 && !scope.colormap) document.getElementById('rescale-section').classList.remove('none')
11661180

11671181
const mm = dtype_ranges[scope.data_type]
11681182
document.getElementById('data-min').value = mm[0]
11691183
document.getElementById('data-max').value = mm[1]
11701184

11711185
scope.band_descriptions = data.properties.band_descriptions
11721186
const band_descr = data.properties.band_descriptions
1173-
const nbands = band_descr.length
1187+
const valid_bidx = data.properties.colorinterp.map((e, i) => ( e !== 'alpha' ? i : undefined)).filter(x => x !== undefined);
11741188

11751189
//Populate Band (1b) selector
11761190
const layerList = document.getElementById('layer-selector')
1177-
for (var i = 0; i < nbands; i++) {
1191+
valid_bidx.forEach((i) => {
11781192
let l = document.createElement('option')
11791193
l.setAttribute('bidx', i + 1)
11801194
l.setAttribute('bname', band_descr[i][0])
11811195
l.text = band_descr[i][1] || band_descr[i][0]
11821196
layerList.appendChild(l)
1183-
}
1197+
})
1198+
1199+
const demLayerList = document.getElementById('layer-selector-dem')
1200+
valid_bidx.forEach((i) => {
1201+
let l = document.createElement('option')
1202+
l.setAttribute('bidx', i + 1)
1203+
l.setAttribute('bname', band_descr[i][0])
1204+
l.text = band_descr[i][1] || band_descr[i][0]
1205+
demLayerList.appendChild(l)
1206+
})
11841207

11851208
// Populate R/G/B (3b) selectors
11861209
const rList = document.getElementById('r-selector')
1187-
for (var i = 0; i < nbands; i++) {
1210+
valid_bidx.forEach((i) => {
11881211
let l = document.createElement('option')
11891212
l.setAttribute('bidx', i + 1)
11901213
l.setAttribute('bname', band_descr[i][0])
11911214
l.text = band_descr[i][1] || band_descr[i][0]
11921215
if (i === 0) l.selected="selected"
11931216
rList.appendChild(l)
1194-
}
1217+
})
11951218

11961219
const gList = document.getElementById('g-selector')
1197-
for (var i = 0; i < nbands; i++) {
1220+
valid_bidx.forEach((i) => {
11981221
let l = document.createElement('option')
11991222
l.setAttribute('bidx', i + 1)
12001223
l.setAttribute('bname', band_descr[i][0])
12011224
l.text = band_descr[i][1] || band_descr[i][0]
12021225
if (i === 1) l.selected="selected"
12031226
gList.appendChild(l)
1204-
}
1227+
})
12051228

12061229
const bList = document.getElementById('b-selector')
1207-
for (var i = 0; i < nbands; i++) {
1230+
valid_bidx.forEach((i) => {
12081231
let l = document.createElement('option')
12091232
l.setAttribute('bidx', i + 1)
12101233
l.setAttribute('bname', band_descr[i][0])
@@ -1215,7 +1238,7 @@
12151238
l.selected="selected"
12161239
}
12171240
bList.appendChild(l)
1218-
}
1241+
})
12191242

12201243
// remove loader
12211244
document.getElementById('loader').classList.toggle('off')
@@ -1241,7 +1264,7 @@
12411264
paint: {'line-color': '#3bb2d0', 'line-width': 1}
12421265
})
12431266

1244-
if (nbands === 1) {
1267+
if (valid_bidx.length === 1) {
12451268
document.getElementById('3b').classList.add('disabled')
12461269
document.getElementById('3b').classList.remove('active')
12471270
document.getElementById('3b-section').classList.toggle('active')

0 commit comments

Comments
 (0)