Skip to content

Commit 95e2ec6

Browse files
jgaffurijgaffuri
committed
relief demo
1 parent 936d841 commit 95e2ec6

1 file changed

Lines changed: 44 additions & 34 deletions

File tree

‎examples/demos/EUR_relief.html‎

Lines changed: 44 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,10 @@
2323
line-height: 1.6;
2424
box-shadow: 3px 3px 3px grey, -3px -3px 3px #ddd;
2525
">
26+
<input type="radio" id="radio_hyps" name="rdreliefstyle" value="hyps" checked>
27+
<label for="radio_hyps">Relief - Hypsometric tints</label> <select id="hypscol"></select><br>
28+
<input type="radio" id="radio_joyplot" name="rdreliefstyle" value="joyplot">
29+
<label for="radio_joyplot">Relief - Joyplot</label><br>
2630
<label for="cbLabels"><input type="checkbox" id="cbLabels" checked>City names</label>
2731
<br>
2832
<label for="cbPopulation"><input type="checkbox" id="cbPopulation" checked>Population dots</label>
@@ -32,30 +36,30 @@
3236
<label for="cbRoads"><input type="checkbox" id="cbRoads">Roads</label>
3337
<br>
3438
<label for="cbCLC"><input type="checkbox" id="cbCLC" checked>Land cover waters</label>
35-
<br>
36-
<label for="cbRelief"><input type="checkbox" id="cbRelief" checked>Relief hypsometric tints</label> <select
37-
id="hypscol"></select>
3839
<hr>
3940
<label>Sea level rise: <span id="lbSeaLevel">-</span></label>
4041
<br>
4142
<input type="range" id="sSeaLevel" min="0" max="100" step="1" value="0" style="width:300px;">
4243
<br>
4344
<label for="cbHypssea"><input type="checkbox" id="cbHypssea">Adjust hypsometric colors to sea level</label>
4445
<hr>
45-
<label for="cbTanaka"><input type="checkbox" id="cbTanaka">Relief tanaka style (slow)</label>
46-
<br>
47-
<label for="cbHillshading"><input type="checkbox" id="cbHillshading">Relief hillshading (slow)</label>
48-
<br>
49-
<label>Relief hypsometric tints number</label>
50-
<input type="range" min="2" max="25" value="8" step="1" id="sReliefNb" style="width: 200px" />
51-
<br>
52-
<label>Relief exageration</label>
53-
<input type="range" min="-15" max="15" value="0" step="1" id="sReliefExageration" style="width: 200px" />
54-
<br>
55-
<label>Relief smoothing (slow)</label>
56-
<input type="range" min="0" max="10" value="0" step="0.25" id="sReliefSmoothing" style="width: 200px" />
57-
<hr>
58-
<label for="cbHD"><input type="checkbox" id="cbHD">HD (very slow)</label>
46+
<div id="hyps_div">
47+
<label for="cbTanaka"><input type="checkbox" id="cbTanaka">Relief tanaka style (slow)</label>
48+
<br>
49+
<label for="cbHillshading"><input type="checkbox" id="cbHillshading">Relief hillshading (slow)</label>
50+
<br>
51+
<label>Relief hypsometric tints number</label>
52+
<input type="range" min="2" max="25" value="8" step="1" id="sReliefNb" style="width: 200px" />
53+
<br>
54+
<label>Relief exageration</label>
55+
<input type="range" min="-15" max="15" value="0" step="1" id="sReliefExageration" style="width: 200px" />
56+
<br>
57+
<label>Relief smoothing (slow)</label>
58+
<input type="range" min="0" max="10" value="0" step="0.25" id="sReliefSmoothing" style="width: 200px" />
59+
<hr>
60+
<label for="cbHD"><input type="checkbox" id="cbHD">HD (very slow)</label>
61+
</div>
62+
<div id="joyplot_div" style="display: none;">No option yet</div>
5963
</div>
6064

6165
<script src="../../dist/gridviz.js"></script>
@@ -196,7 +200,6 @@
196200

197201
const cbTanaka = document.getElementById("cbTanaka");
198202
const cbHillshading = document.getElementById("cbHillshading");
199-
const cbRelief = document.getElementById("cbRelief");
200203
const sReliefSmoothing = document.getElementById('sReliefSmoothing');
201204
const sReliefNb = document.getElementById('sReliefNb');
202205
const sReliefExageration = document.getElementById('sReliefExageration');
@@ -214,12 +217,15 @@
214217
let scaleShadingCoeff = -2
215218
let shadingDiamond = false
216219
let quantile = false
217-
let joyplot = false
218220

219221
function update() {
220222
const seaLevel = +sSeaLevel.value;
221223
lbSeaLevel.textContent = seaLevel + ' m';
222224

225+
const rsty = document.querySelector('input[name="rdreliefstyle"]:checked').value;
226+
document.getElementById("hyps_div").style.display = rsty == "hyps" ? 'inline-block' : 'none'
227+
document.getElementById("joyplot_div").style.display = rsty == "joyplot" ? 'inline-block' : 'none'
228+
223229
let styleWater = new gridviz.SquareColorCategoryWebGLStyle({
224230
code: (c) => "a",
225231
color: { 'a': seaColor },
@@ -307,14 +313,14 @@
307313
viewScale: cells => d3.extent(cells, c => c.v),
308314
height: (c, r, z, [min, max]) => 15 * r * scaleRelief((c.v - min) / (max - min)),
309315
lineColor: (y, ys, r, z) => "#b58500",
310-
lineWidth: (y, ys, r, z) => z/1.5,
316+
lineWidth: (y, ys, r, z) => z / 1.5,
311317
fillColor: (y, ys, r, z) => "#b5850022"
312318
})
313319

314320
// definition
315321
const mppc = (cbHD.checked ? 0.7 : 1.4) * resolutionCoeff
316-
const mppcRelief = joyplot ? 3 * resolutionCoeff : mppc
317-
let reliefStyle = joyplot ? joyplotStyle : hypsoStyle
322+
const mppcRelief = rsty == "joyplot" ? 3 * resolutionCoeff : mppc
323+
let reliefStyle = rsty == "joyplot" ? joyplotStyle : hypsoStyle
318324

319325
// smoothing
320326
const sr = +sReliefSmoothing.value
@@ -355,12 +361,20 @@
355361

356362
// set layers
357363
const layers = []
358-
// relief
359-
if (cbRelief.checked) layers.push(new gridviz.GridLayer(datasetRelief, [reliefStyle], { minPixelsPerCell: mppcRelief, cellInfoHTML: cellInfoHTMLRelief }))
360-
// relief tanaka
361-
if (cbTanaka.checked) layers.push(new gridviz.GridLayer(datasetRelief, [tanakaStyle], { minPixelsPerCell: mppc, cellInfoHTML: 'none' }))
362-
//relief shading
363-
if (cbHillshading.checked) layers.push(new gridviz.GridLayer(datasetRelief, [shadingStyle], { minPixelsPerCell: mppc, cellInfoHTML: 'none' }))
364+
365+
//relief layer
366+
const reliefStyles = []
367+
if (rsty == "joyplot") reliefStyles.push(
368+
new gridviz.SquareColorCategoryWebGLStyle({
369+
code: (c) => "a",
370+
color: { 'a': "white" },
371+
filter: (c) => c.v >=0,
372+
}))
373+
reliefStyles.push(reliefStyle)
374+
if (cbTanaka.checked && rsty == "hyps") reliefStyles.push(tanakaStyle)
375+
if (cbHillshading.checked && rsty == "hyps") reliefStyles.push(shadingStyle)
376+
layers.push(new gridviz.GridLayer(datasetRelief, reliefStyles, { minPixelsPerCell: mppcRelief, cellInfoHTML: cellInfoHTMLRelief }))
377+
364378
// CLC waters
365379
if (cbCLC.checked) layers.push(new gridviz.GridLayer(datasetCLC, [styleCLCWater], { minPixelsPerCell: mppc, cellInfoHTML: 'none' }))
366380
// population
@@ -379,10 +393,11 @@
379393
}
380394

381395
//add event listeners
396+
document.getElementById("radio_hyps").addEventListener('input', update);
397+
document.getElementById("radio_joyplot").addEventListener('input', update);
382398
sSeaLevel.addEventListener('input', update);
383399
cbTanaka.addEventListener("change", update);
384400
cbHillshading.addEventListener("change", update);
385-
cbRelief.addEventListener("change", update);
386401
sReliefSmoothing.addEventListener("input", update);
387402
sReliefNb.addEventListener("input", update);
388403
sReliefExageration.addEventListener("input", update);
@@ -406,11 +421,6 @@
406421
}
407422
//else if (e.key == "t") { tanaka = !tanaka; update() }
408423
else if (e.key == "q") { quantile = !quantile; update() }
409-
else if (e.key == "j") {
410-
joyplot = !joyplot;
411-
map.setBackgroundColor("white")
412-
update()
413-
}
414424
else if (e.key == "d") { shadingDiamond = !shadingDiamond; update() }
415425
else if (e.key == "w") { scaleShadingCoeff -= 0.25; console.log(scaleShadingCoeff); update() }
416426
else if (e.key == "x") { scaleShadingCoeff += 0.25; console.log(scaleShadingCoeff); update() }

0 commit comments

Comments
 (0)