Data Layers & Scale Helpers

BloomSpark provides 8 pre-built declarative data layer components corresponding to high-value indoor representations. They interleave seamlessly via deck.gl inside MapLibre, supporting dynamic property animations at 60 FPS.

---

📊 The 8 Data Layer Components

1. <PointDataLayer>

Renders physical coordinates as 3D markers (spheres or cubes). Great for sensor locations and fixed assets.

<PointDataLayer
  id="temperature-sensors"
  shape="sphere" // 'sphere' | 'cube'
  data={[
    { 
      id: "sensor-1", 
      position: { levelIndex: 0, x: 15.4, z: -8.2, elevation: 1.2 }, 
      value: 22.4 
    }
  ]}
  color={(d) => colorScale(d.value)}
  radius={0.8} // in meters
/>

2. <IconDataLayer>

Displays 2D billboards or image icons facing the camera at specific floor locations.

<IconDataLayer
  id="fire-extinguishers"
  data={[{ id: "ext-1", position: { levelIndex: 1, x: 22.0, z: -14.1 } }]}
  icon="/assets/icons/fire-ext.png"
  size={24} // in pixels
  color={[220, 38, 38]} // RGB mask override
/>

3. <PolylineDataLayer>

Renders 2D or 3D lines (e.g. tracking routes, ductworks, electrical layouts) with customizable joint patterns.

<PolylineDataLayer
  id="cables"
  data={[{ id: "cable-1", points: [[0, 0], [10, 0], [10, 15]], levelIndex: 0 }]}
  color="#10b981"
  width={3} // in pixels
/>

4. <PolygonDataLayer>

Fills arbitrary custom 2D boundaries or floor sectors with alpha transparency settings.

<PolygonDataLayer
  id="facility-sectors"
  data={[{ id: "sector-a", coordinates: [[0,0], [10,0], [10,10], [0,10]], levelIndex: 0 }]}
  color="#f59e0b"
  alpha={0.4}
/>

5. <FurnitureDataLayer>

Inserts standard physical assets (chairs, desk shapes, equipment meshes) modeled as extruded polygon vectors inside offices or warehouses.

<FurnitureDataLayer
  id="office-seating"
  data={[{ id: "desk-1", position: { levelIndex: 0, x: 4.5, z: 12.0 }, rotation: 90 }]}
  catalogId="office-chair-standard"
/>

6. <LabelDataLayer>

Renders dynamic text overlays anchored to spatial coordinates, fading or scaling cleanly based on camera zoom thresholds.

<LabelDataLayer
  id="room-labels"
  data={[{ id: "l-1", position: { levelIndex: 0, x: 12.0, z: -5.0 }, text: "Boardroom A" }]}
  fontSize={14}
  fontColor="#1e293b"
/>

7. <HeatmapDataLayer>

Creates high-performance aggregated heat intensity overlays from massive historical time-series datasets.

<HeatmapDataLayer
  id="dwell-intensity"
  data={[[ -122.084, 37.422, 12.5 ], [ -122.085, 37.421, 8.2 ]]} // [longitude, latitude, weight]
  radius={25} // blur radius in pixels
  colorRange={['#eff6ff', '#3b82f6', '#1d4ed8', '#172554']}
/>

8. <ZoneDataLayer>

Renders high-visibility overlays for IMDF Section or Unit entities, automatically extracting target boundaries from floor plan GeoJSON structures.

<ZoneDataLayer
  id="security-zones"
  data={[{ unitId: "unit-uuid-104", status: "locked" }]}
  color={(d) => (d.status === 'locked' ? '#dc2626' : '#10b981')}
  alpha={0.3}
/>

---

🎨 Color Scale Helpers

The SDK includes structural helper utilities to map spatial values to theme colors.

Color.numericScale

Maps values continuously or across intervals using standard curated maps:

import { Color } from '@bloomsparkagency/core';

// Maps values from 0-100 across the 'YlOrRd' gradient
const scale = Color.numericScale({
  name: 'YlOrRd',
  domain: [0, 100]
});

const rgbHex = scale(65.5); // returns #f97316 (orange)

Available Numeric Palette Selections:

• Sequential Diverging: YlGn, YlGnBu, GnBu, BuGn, PuBuGn, PuBu, BuPu, RdPu, PuRd, OrRd, YlOrRd, YlOrBr
• Monochrome: Greys, Reds, Greens, Blues, Oranges, Purples
• Qualitative Diverging: RdYlBu, RdYlGn, Spectral, RdBu

Color.ragScale

Maps categories to Red-Amber-Green dashboard variables:

const scale = Color.ragScale({
  categories: {
    red: 'vacant',
    amber: 'expiring',
    green: 'occupied',
    nodata: 'unknown'
  }
});

const color = scale('expiring'); // returns #c77a15 (amber)

Default RAG theme mappings (from Smplrspace standard specs):

• red: #ff3f34 (Urgent / Alert / Vacant)
• amber: #c77a15 (Warning / Impending)
• green: #3aa655 (Safe / Occupied / OK)
• nodata: #6a6c6c (Missing / Unknown)

Color.categoryScale

Creates distinct static colors for discrete properties:

const scale = Color.categoryScale({
  categories: {
    coffee: '#fbbf24',
    water: '#3b82f6',
    printer: '#9ca3af'
  }
});

const color = scale('coffee'); // returns #fbbf24