explore: show width/opacity sliders in lines mode too

This commit is contained in:
Davide Scaini
2026-05-14 15:57:20 +02:00
parent 5593764fdb
commit dc719a55d5
+11 -11
View File
@@ -153,7 +153,7 @@
function _updateHeatPaint(width: number, opacityPct: number) { function _updateHeatPaint(width: number, opacityPct: number) {
if (!map) return; if (!map) return;
const p = _heatPaint(width, opacityPct); const p = _heatPaint(width, opacityPct);
for (const id of ['explore-heat-global', ...HEAT_TYPES.map(t => `explore-heat-${t}`)]) { for (const id of ['explore-lines', 'explore-heat-global', ...HEAT_TYPES.map(t => `explore-heat-${t}`)]) {
if (!map.getLayer(id)) continue; if (!map.getLayer(id)) continue;
map.setPaintProperty(id, 'line-width', p['line-width']); map.setPaintProperty(id, 'line-width', p['line-width']);
map.setPaintProperty(id, 'line-opacity', p['line-opacity']); map.setPaintProperty(id, 'line-opacity', p['line-opacity']);
@@ -324,17 +324,17 @@
<button class="pill small" class:active={heatmapMode === 'global'} onclick={() => heatmapMode = 'global'}>Global</button> <button class="pill small" class:active={heatmapMode === 'global'} onclick={() => heatmapMode = 'global'}>Global</button>
<button class="pill small" class:active={heatmapMode === 'bytype'} onclick={() => heatmapMode = 'bytype'}>By type</button> <button class="pill small" class:active={heatmapMode === 'bytype'} onclick={() => heatmapMode = 'bytype'}>By type</button>
</div> </div>
<div class="slider-row">
<span class="slider-label">Width</span>
<input type="range" min="2" max="12" step="1" class="slider" bind:value={heatWidth} />
<span class="slider-val">{heatWidth}</span>
</div>
<div class="slider-row">
<span class="slider-label">Opacity</span>
<input type="range" min="3" max="30" step="1" class="slider" bind:value={heatOpacityPct} />
<span class="slider-val">{heatOpacityPct}%</span>
</div>
{/if} {/if}
<div class="slider-row">
<span class="slider-label">Width</span>
<input type="range" min="2" max="12" step="1" class="slider" bind:value={heatWidth} />
<span class="slider-val">{heatWidth}</span>
</div>
<div class="slider-row">
<span class="slider-label">Opacity</span>
<input type="range" min="3" max="30" step="1" class="slider" bind:value={heatOpacityPct} />
<span class="slider-val">{heatOpacityPct}%</span>
</div>
</section> </section>
<!-- Stats --> <!-- Stats -->