feat(street-level): one colour per imagery source

As more sources arrive, each one reads the same everywhere it appears: its
PROVIDERS chip, coverage lines, overview points, image cones and a single
legend swatch. The palette lives in one place, PROVIDER_COLORS in
src/layers/streetLevel/policy.js: Mapillary green (#05cb63), Panoramax
purple, Google Street View blue.

Mapillary drops its age dimming and magenta panoramas: lines and overview
points are Mapillary green, cones are green too and 360° images keep their
ring shape; the 360°/FLAT filter still separates them, and the selected
sequence stays GEV cyan.

The provider contract loses `legend`: `colors.coverage` is the source's one
colour, and the core composes the legend as one swatch per active source
(its name, its colour) followed by Selected. The chip group takes an
optional per-chip colour as a `--chip-color` CSS variable, written only
when it changes; Street Level chips show it as a swatch dot and, while on,
as the chip's border, text and a faint fill.

The feature gate checks the legend has one swatch per source plus Selected
and that the Mapillary chip carries #05cb63.

Co-Authored-By: Claude Opus 5.5 <[email protected]>

src/layers/streetLevel/providers/mapillary/coverage.js

@@ -15,7 +15,6 @@ import {
   COVERAGE_MOVE_DEBOUNCE_MS,
   COVERAGE_OVERVIEW_MAX_TILES,
   COVERAGE_OVERVIEW_POINT_PX,
-  COVERAGE_RECENT_DAYS,
   PICK_PREFIX,
 } from './policy.js';
 
@@ -34,15 +33,11 @@ const PER_TILE_SEQUENCE_CAP = Math.floor(
   COVERAGE_MAX_SEQUENCES / COVERAGE_MAX_TILES,
 );
 
-/** Colour for a sequence: brand green, dimmer with age, magenta for panoramas. */
-function sequenceColor(sequence, { selected = false, now = Date.now() } = {}) {
-  if (selected) return Cesium.Color.fromCssColorString(COLORS.selected);
-  if (sequence.isPano)
-    return Cesium.Color.fromCssColorString(COLORS.pano).withAlpha(0.9);
-  const ageDays = (now - (sequence.capturedAt || 0)) / 86_400_000;
-  return ageDays <= COVERAGE_RECENT_DAYS
-    ? Cesium.Color.fromCssColorString(COLORS.coverage).withAlpha(0.92)
-    : Cesium.Color.fromCssColorString(COLORS.coverageOld).withAlpha(0.7);
+/** Colour for a sequence: Mapillary green, GEV cyan while selected. */
+function sequenceColor({ selected = false } = {}) {
+  return selected
+    ? Cesium.Color.fromCssColorString(COLORS.selected)
+    : Cesium.Color.fromCssColorString(COLORS.coverage).withAlpha(0.92);
 }
 
 /**
@@ -82,14 +77,13 @@ export function createCoverage({ state, source }) {
     );
   }
 
-  function sequenceInstance(sequence, geometry, now) {
+  function sequenceInstance(sequence, geometry) {
     return new Cesium.GeometryInstance({
       geometry,
       id: `${PICK_PREFIX.sequence}${sequence.id}`,
       attributes: {
         color: Cesium.ColorGeometryInstanceAttribute.fromColor(
-          sequenceColor(sequence, {
-            now,
+          sequenceColor({
             selected: sequence.id === state.sequence.selectedId,
           }),
         ),
@@ -103,7 +97,6 @@ export function createCoverage({ state, source }) {
    * bare-earth heights for every sequence whose heights are cached.
    */
   function buildSequencePrimitives(sequences) {
-    const now = Date.now();
     const ground = terrainMode() ? state.context.groundCaster : null;
     const draped = [];
     const cast = [];
@@ -129,7 +122,6 @@ export function createCoverage({ state, source }) {
               vertexFormat: Cesium.PolylineColorAppearance.VERTEX_FORMAT,
               arcType: Cesium.ArcType.NONE,
             }),
-            now,
           ),
         );
       else
@@ -140,7 +132,6 @@ export function createCoverage({ state, source }) {
               positions,
               width: COVERAGE_LINE_WIDTH_PX,
             }),
-            now,
           ),
         );
     }
@@ -234,13 +225,12 @@ export function createCoverage({ state, source }) {
     const green = Cesium.Color.fromCssColorString(COLORS.coverage).withAlpha(
       0.85,
     );
-    const pink = Cesium.Color.fromCssColorString(COLORS.pano).withAlpha(0.9);
     let count = 0;
     for (const point of points) {
       if (!passesImageryFilter(point, filter())) continue;
       collection.add({
         position: Cesium.Cartesian3.fromDegrees(point.lon, point.lat),
-        color: point.isPano ? pink : green,
+        color: green,
         pixelSize: COVERAGE_OVERVIEW_POINT_PX,
         disableDepthTestDistance: Number.POSITIVE_INFINITY,
       });
@@ -519,7 +509,7 @@ export function createCoverage({ state, source }) {
             primitive.getGeometryInstanceAttributes(instanceId);
           if (attributes)
             attributes.color = Cesium.ColorGeometryInstanceAttribute.toValue(
-              sequenceColor(sequence, { selected }),
+              sequenceColor({ selected }),
               attributes.color,
             );
         } catch {

src/layers/streetLevel/providers/mapillary/index.js

@@ -7,7 +7,6 @@ import {
   MAPILLARY_CREDIT_HTML,
   MAPILLARY_KEY_ID,
   MAPILLARY_LABEL,
-  MAPILLARY_LEGEND,
   MAPILLARY_NAME,
   MAPILLARY_PROVIDER_ID,
   NEAREST_LIMIT,
@@ -92,7 +91,6 @@ export function createMapillaryProvider({ source }) {
       creator: true,
       follow: true,
     }),
-    legend: MAPILLARY_LEGEND,
     externalUrl: mapillaryImageUrl,
 
     create(context) {

src/layers/streetLevel/providers/mapillary/policy.js

@@ -1,4 +1,4 @@
-import { COLORS as SHARED_COLORS } from '../../policy.js';
+import { COLORS as SHARED_COLORS, PROVIDER_COLORS } from '../../policy.js';
 
 /** Identity and tuning for the Mapillary street-level provider. */
 export const MAPILLARY_PROVIDER_ID = 'mapillary';
@@ -14,13 +14,13 @@ export const PICK_PREFIX = Object.freeze({
   image: 'mly:img:',
 });
 
-/** Brand green for coverage; panoramas get a distinct hue; selection is GEV cyan. */
+/**
+ * Mapillary draws in one colour, its brand green, for lines, overview points
+ * and cones alike (360° cones keep their ring shape); selection is GEV cyan.
+ */
 export const COLORS = Object.freeze({
-  coverage: '#05cb63',
-  coverageOld: '#2e7d5b',
-  pano: '#ff4fd8',
+  coverage: PROVIDER_COLORS.mapillary,
   selected: SHARED_COLORS.selected,
-  image: '#e8eaed',
 });
 
 /** Camera-driven coverage refresh. */
@@ -31,8 +31,6 @@ export const COVERAGE_OVERVIEW_MAX_TILES = 16;
 export const COVERAGE_OVERVIEW_POINT_PX = 2.5;
 export const COVERAGE_MAX_SEQUENCES = 6000;
 export const COVERAGE_LINE_WIDTH_PX = 2.5;
-/** Sequences newer than this many days draw at full brightness. */
-export const COVERAGE_RECENT_DAYS = 730;
 
 /** Per-sequence image cones after a sequence is selected. */
 export const SEQUENCE_IMAGES_LIMIT = 2000;
@@ -50,17 +48,6 @@ export const NEAREST_LIMIT = 8;
 export const MAPILLARY_CREDIT_HTML =
   'Street Level: imagery © <a href="https://www.mapillary.com" target="_blank" rel="noopener">Mapillary</a> contributors, CC BY-SA 4.0';
 
-/** Coverage colour key, in the order the panel lists it. */
-export const MAPILLARY_LEGEND = Object.freeze([
-  Object.freeze({
-    key: 'recent',
-    label: `Recent (≤${Math.round(COVERAGE_RECENT_DAYS / 365)} yr)`,
-    color: COLORS.coverage,
-  }),
-  Object.freeze({ key: 'older', label: 'Older', color: COLORS.coverageOld }),
-  Object.freeze({ key: 'pano', label: '360°', color: COLORS.pano }),
-]);
-
 /** Deep link to an image on mapillary.com, as the web app shares them. */
 export function mapillaryImageUrl(imageId) {
   const id = String(imageId || '').trim();

src/layers/streetLevel/providers/mapillary/provider.test.mjs

@@ -2,6 +2,7 @@ import assert from 'node:assert/strict';
 import test from 'node:test';
 import { createMapillaryProvider, mapillaryImageUrl } from './index.js';
 import { validateProviders } from '../../registry.js';
+import { PROVIDER_COLORS } from '../../policy.js';
 
 function fakeSource({ nearest = [] } = {}) {
   return {
@@ -41,10 +42,10 @@ test('the definition satisfies the Street Level provider contract', () => {
   assert.equal(def.pickPrefix, 'mly:');
   assert.equal(def.capabilities.coverage, 'tiles');
   assert.match(def.credit.html, /CC BY-SA 4\.0/);
-  assert.deepEqual(
-    def.legend.map((entry) => entry.key),
-    ['recent', 'older', 'pano'],
-  );
+  // One colour per source: Mapillary is green everywhere it draws.
+  assert.deepEqual(Object.keys(def.colors).sort(), ['coverage', 'selected']);
+  assert.equal(def.colors.coverage, PROVIDER_COLORS.mapillary);
+  assert.equal(PROVIDER_COLORS.mapillary, '#05cb63');
   assert.throws(() => createMapillaryProvider({ source: {} }), /source/);
 });
 

src/layers/streetLevel/providers/mapillary/sequences.js

@@ -103,8 +103,13 @@ export function createSequences({ state, source, parts }) {
     if (!collection) return;
     collection.removeAll();
     const heights = coneHeights(images);
-    const cone = imageConeGlyph({ size: 32, color: COLORS.image });
-    const ring = imageConeGlyph({ size: 32, color: COLORS.pano, pano: true });
+    // One colour per source; 360° images keep the ring shape.
+    const cone = imageConeGlyph({ size: 32, color: COLORS.coverage });
+    const ring = imageConeGlyph({
+      size: 32,
+      color: COLORS.coverage,
+      pano: true,
+    });
     images.forEach((image, index) => {
       if (!passesImageryFilter(image, state.filter)) return;
       const height = heights?.[index] ?? null;