diff --git a/src/layers/streetLevel/index.js b/src/layers/streetLevel/index.js
index be3e28e79..f86b5fd00 100644
--- a/src/layers/streetLevel/index.js
+++ b/src/layers/streetLevel/index.js
@@ -5,12 +5,11 @@ import { createCredit } from './credits.js';
import { createSelection } from './selection.js';
import { createViewerHost } from './viewerHost.js';
import { normalizeFilter, sameFilter } from './filter.js';
-import { COLORS, STREET_LEVEL_LAYER_ID } from './policy.js';
+import { STREET_LEVEL_LAYER_ID } from './policy.js';
import { createCoverage } from './providers/mapillary/coverage.js';
import { createSequences } from './providers/mapillary/sequences.js';
import { createMapillaryViewer } from './providers/mapillary/viewer.js';
import {
- COLORS as MAPILLARY_COLORS,
MAPILLARY_CREDIT_HTML,
MAPILLARY_KEY_ID,
MAPILLARY_SOURCE_METHODS,
@@ -169,16 +168,6 @@ export function createStreetLevelLayer({
keyRejected,
filter: { ...state.filter },
coverage,
- legend: state.providerOn
- ? [
- {
- key: 'mapillary',
- label: 'Mapillary',
- color: MAPILLARY_COLORS.coverage,
- },
- { key: 'selected', label: 'Selected', color: COLORS.selected },
- ]
- : [],
sequence: {
selectedId: state.sequence.selectedId,
images: state.sequence.images.length,
diff --git a/src/layers/streetLevel/index.test.mjs b/src/layers/streetLevel/index.test.mjs
index 93556b93d..3af933b05 100644
--- a/src/layers/streetLevel/index.test.mjs
+++ b/src/layers/streetLevel/index.test.mjs
@@ -139,7 +139,6 @@ test('the CC BY-SA credit shows while Mapillary is on and goes with it', async (
assert.match(shown()[0], /CC BY-SA 4\.0/);
layer.setParams({ mapillary: false });
assert.deepEqual(shown(), [], 'hidden with the switch');
- assert.deepEqual(layer.getUIState().legend, [], 'no legend either');
layer.setParams({ mapillary: true });
assert.deepEqual(shown(), [MAPILLARY_CREDIT_HTML]);
layer.disable();
diff --git a/src/ui/streetLevelControls.js b/src/ui/streetLevelControls.js
index 80411f6a5..643a993de 100644
--- a/src/ui/streetLevelControls.js
+++ b/src/ui/streetLevelControls.js
@@ -375,25 +375,7 @@ export class StreetLevelControls {
setAttr(el.sinceRange, 'aria-valuetext', view.since.label);
}
}
- // Rebuild when the swatches change, not only their count.
- const legendKey = view.legend
- .map((entry) => `${entry.key}:${entry.color}:${entry.label}`)
- .join('|');
- if (el.legend && this._legendKey !== legendKey) {
- this._legendKey = legendKey;
- el.legend.replaceChildren(
- ...view.legend.map((entry) => {
- const item = document.createElement('li');
- const swatch = document.createElement('i');
- swatch.className = 'sl-legend-swatch';
- swatch.style.background = entry.color;
- const label = document.createElement('span');
- label.textContent = entry.label;
- item.append(swatch, label);
- return item;
- }),
- );
- }
+ setProp(el.legend, 'hidden', !view.legend);
}
_renderViewer(view) {
diff --git a/src/ui/streetLevelControls.test.mjs b/src/ui/streetLevelControls.test.mjs
index ee6804013..a39b68301 100644
--- a/src/ui/streetLevelControls.test.mjs
+++ b/src/ui/streetLevelControls.test.mjs
@@ -372,7 +372,6 @@ function uiState({
enabled = true,
on = true,
open = false,
- legend,
pano = 'all',
renderMode = 'letterbox',
keyRequired = false,
@@ -384,10 +383,6 @@ function uiState({
keyRejected: false,
filter: { pano, sinceDays: 0 },
coverage: { count: 3, loading: false, hint: '', error: null },
- legend: legend || [
- { key: 'mapillary', label: 'Mapillary', color: '#05cb63' },
- { key: 'selected', label: 'Selected', color: '#00d4ff' },
- ],
sequence: { selectedId: null, images: 0, loading: false },
street: {
open,
@@ -467,6 +462,7 @@ test('a layer that is on with Mapillary switched off reads OFF, and the pill bri
dom.root.querySelector('#sl-coverage-meta').textContent,
/Mapillary is off in this view/,
);
+ assert.equal(dom.root.querySelector('#sl-legend').hidden, true, 'no legend');
status.click();
await settle();
assert.deepEqual(calls.setParams, [
diff --git a/src/ui/streetLevelPresentation.js b/src/ui/streetLevelPresentation.js
index 63cb52183..57fcad81f 100644
--- a/src/ui/streetLevelPresentation.js
+++ b/src/ui/streetLevelPresentation.js
@@ -121,7 +121,7 @@ export function presentStreetLevelPanel(state, { now = Date.now() } = {}) {
: state.street.error || state.coverage.error || null,
filter: { pano: filter.pano, sinceDays: Number(filter.sinceDays) || 0 },
since: presentSince(filter.sinceDays, now),
- legend: state.legend || [],
+ legend: state.providerOn !== false,
viewer: presentViewer(state),
meta: presentMeta(state),
};
diff --git a/src/ui/streetLevelPresentation.test.mjs b/src/ui/streetLevelPresentation.test.mjs
index f74a1b01e..cbcf4c34f 100644
--- a/src/ui/streetLevelPresentation.test.mjs
+++ b/src/ui/streetLevelPresentation.test.mjs
@@ -12,10 +12,6 @@ function snapshot(overrides = {}) {
keyRejected: false,
filter: { pano: 'all', sinceDays: 0 },
coverage: { loading: false, count: 0, hint: '', error: null },
- legend: [
- { key: 'mapillary', label: 'Mapillary', color: '#05cb63' },
- { key: 'selected', label: 'Selected', color: '#00d4ff' },
- ],
sequence: { selectedId: null, images: 0, loading: false },
street: {
open: false,
diff --git a/src/ui/styles/street-level.css b/src/ui/styles/street-level.css
index 5f39c8aaa..0381a5c39 100644
--- a/src/ui/styles/street-level.css
+++ b/src/ui/styles/street-level.css
@@ -88,23 +88,16 @@
}
.sl-body,
-.sl-main,
-.sl-settings,
.sl-controls {
display: flex;
flex-direction: column;
gap: 8px;
}
-.sl-body,
-.sl-settings {
+.sl-body {
min-height: 0;
}
-.sl-main {
- min-width: 0;
-}
-
.sl-controls {
min-width: 0;
margin: 0;
@@ -222,11 +215,21 @@
color: var(--text-secondary);
}
+.sl-legend[hidden] {
+ display: none;
+}
+
.sl-legend-swatch {
width: 14px;
height: 3px;
border-radius: 2px;
display: inline-block;
+ background: var(--sl-green);
+}
+
+/* COLORS.selected in src/layers/streetLevel/policy.js */
+.sl-legend-swatch.is-selected {
+ background: #00d4ff;
}
/* ── Embedded viewer ─────────────────────────────────────────────────────── */
diff --git a/src/ui/templates/layer-panels.html b/src/ui/templates/layer-panels.html
index bf360bbb8..efc70870a 100644
--- a/src/ui/templates/layer-panels.html
+++ b/src/ui/templates/layer-panels.html
@@ -82,54 +82,53 @@