refactor(street-level): rename the Mapillary layer to street-level

Pure move: the layer id, panel id, CSS prefix, classes, exports and config
paths become provider-neutral (street-level, #street-level-panel, sl-);
the Mapillary-specific modules move under providers/mapillary/. Behaviour
is unchanged. The two sprite collections now register under distinct ids
instead of overwriting each other under 'mapillary'.

Co-Authored-By: Claude Fable 5.1 <[email protected]>

src/layers/streetLevel/index.js

@@ -1,7 +1,7 @@
 import { createState } from './state.js';
-import { createCoverage, visibleBbox } from './coverage.js';
-import { createSequences } from './sequences.js';
-import { createViewerBridge } from './viewerBridge.js';
+import { createCoverage, visibleBbox } from './providers/mapillary/coverage.js';
+import { createSequences } from './providers/mapillary/sequences.js';
+import { createViewerBridge } from './providers/mapillary/viewer.js';
 import { createSelection } from './selection.js';
 import * as Cesium from 'cesium';
 import {
@@ -9,12 +9,12 @@ import {
   COVERAGE_RECENT_DAYS,
   MAPILLARY_CREDIT_HTML,
   MAPILLARY_KEY_ID,
-  MAPILLARY_LAYER_ID,
+  STREET_LEVEL_LAYER_ID,
   NEAREST_LIMIT,
   NEAREST_RADIUS_M,
-} from './policy.js';
+} from './providers/mapillary/policy.js';
 
-export { MAPILLARY_LAYER_ID } from './policy.js';
+export { STREET_LEVEL_LAYER_ID } from './providers/mapillary/policy.js';
 
 const SOURCE_METHODS = [
   'getStatus',
@@ -30,7 +30,7 @@ const SOURCE_METHODS = [
  * are injected; nothing here reads the DOM except the viewer host the UI
  * hands over.
  */
-export function createMapillaryLayer({ source, services = {} }) {
+export function createStreetLevelLayer({ source, services = {} }) {
   if (!SOURCE_METHODS.every((method) => typeof source?.[method] === 'function'))
     throw new TypeError('A Mapillary source is required');
   const state = createState({ services });
@@ -72,7 +72,7 @@ export function createMapillaryLayer({ source, services = {} }) {
         try {
           listener(snapshot);
         } catch (error) {
-          console.warn('[Data:Mapillary] listener error:', error);
+          console.warn('[Data:StreetLevel] listener error:', error);
         }
       }
     });
@@ -174,7 +174,7 @@ export function createMapillaryLayer({ source, services = {} }) {
   }
 
   const layer = {
-    id: MAPILLARY_LAYER_ID,
+    id: STREET_LEVEL_LAYER_ID,
     name: 'Street Level',
     icon: '📷',
     source: 'Mapillary',
@@ -184,13 +184,13 @@ export function createMapillaryLayer({ source, services = {} }) {
 
     init(viewer) {
       if (state.initialized)
-        throw new Error('Mapillary layer is already initialized');
+        throw new Error('Street Level layer is already initialized');
       state.viewer = viewer;
       state.initialized = true;
       parts.sequences.ensureCollections(viewer);
       parts.sequences.setVisible(false);
       refreshStatus();
-      console.log('[Data:Mapillary] Initialized');
+      console.log('[Data:StreetLevel] Initialized');
     },
 
     enable(viewer) {

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

@@ -4,7 +4,7 @@ import {
   coverageZoomForHeight,
   overviewZoomForHeight,
   tilesForBbox,
-} from './tileMath.js';
+} from '../../tileMath.js';
 import {
   COLORS,
   COVERAGE_LINE_WIDTH_PX,

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

@@ -1,6 +1,6 @@
 import { PbfReader } from 'pbf';
 import { VectorTile } from '@mapbox/vector-tile';
-import { tileLocalToLonLat } from './tileMath.js';
+import { tileLocalToLonLat } from '../../tileMath.js';
 
 /**
  * Decode a Mapillary coverage tile (`mly1_public`) in the browser.

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

@@ -1,5 +1,5 @@
 /** Identity and tuning for the Mapillary street-level layer. */
-export const MAPILLARY_LAYER_ID = 'mapillary';
+export const STREET_LEVEL_LAYER_ID = 'street-level';
 export const MAPILLARY_KEY_ID = 'mapillary';
 export const MAPILLARY_GRAPH_HOST = 'https://graph.mapillary.com';
 

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

@@ -1,5 +1,5 @@
 import * as Cesium from 'cesium';
-import { imageConeGlyph } from './glyphs.js';
+import { imageConeGlyph } from '../../glyphs.js';
 import { passesImageryFilter } from './coverage.js';
 import {
   COLORS,
@@ -64,7 +64,7 @@ export function createSequences({ state, source, parts }) {
       });
       viewer.scene.primitives.add(state.sequence.collection);
       sprites?.registerSpriteCollection?.(
-        'mapillary',
+        'street-level:mapillary-cones',
         state.sequence.collection,
       );
     }
@@ -74,7 +74,7 @@ export function createSequences({ state, source, parts }) {
       });
       viewer.scene.primitives.add(state.street.markerCollection);
       sprites?.registerSpriteCollection?.(
-        'mapillary',
+        'street-level:marker',
         state.street.markerCollection,
       );
     }
@@ -199,7 +199,7 @@ export function createSequences({ state, source, parts }) {
         id: PICK_PREFIX.position,
         position: cartesian,
         image: (id) =>
-          import('./glyphs.js').then((m) =>
+          import('../../glyphs.js').then((m) =>
             m.positionMarkerGlyph({ color: COLORS.position }),
           ),
         imageId: 'mly-position',
@@ -232,14 +232,17 @@ export function createSequences({ state, source, parts }) {
     for (const key of ['collection']) {
       const collection = state.sequence[key];
       if (collection) {
-        sprites?.unregisterSpriteCollection?.('mapillary', collection);
+        sprites?.unregisterSpriteCollection?.(
+          'street-level:mapillary-cones',
+          collection,
+        );
         viewer?.scene?.primitives?.remove(collection);
         state.sequence[key] = null;
       }
     }
     if (state.street.markerCollection) {
       sprites?.unregisterSpriteCollection?.(
-        'mapillary',
+        'street-level:marker',
         state.street.markerCollection,
       );
       viewer?.scene?.primitives?.remove(state.street.markerCollection);

src/layers/streetLevel/selection.js

@@ -1,5 +1,8 @@
 import * as Cesium from 'cesium';
-import { MAPILLARY_LAYER_ID, PICK_PREFIX } from './policy.js';
+import {
+  STREET_LEVEL_LAYER_ID,
+  PICK_PREFIX,
+} from './providers/mapillary/policy.js';
 
 /** Click handling for coverage lines and image cones. */
 export function createSelection({ state, parts }) {
@@ -90,7 +93,7 @@ export function createSelection({ state, parts }) {
       Cesium.ScreenSpaceEventType.MOUSE_MOVE,
     );
     document.addEventListener('keydown', onKeyDown);
-    picking?.registerPickOwner?.(MAPILLARY_LAYER_ID, ownsPick);
+    picking?.registerPickOwner?.(STREET_LEVEL_LAYER_ID, ownsPick);
   }
 
   function uninstall() {
@@ -102,7 +105,7 @@ export function createSelection({ state, parts }) {
       state.clickHandler.destroy();
     state.clickHandler = null;
     document.removeEventListener('keydown', onKeyDown);
-    picking?.unregisterPickOwner?.(MAPILLARY_LAYER_ID);
+    picking?.unregisterPickOwner?.(STREET_LEVEL_LAYER_ID);
   }
 
   return { install, uninstall, ownsPick };