Info Cards, Legends & Shareable States

This document details the visual components and sharing utilities that enrich client applications and support spatial asset exports.

---

🗂️ Interactive Info Cards & Charts (<InfoCard />)

The <InfoCard /> component mounts a sliding HTML panel on the side of the map container, displaying properties and utilization metrics on asset click:

import { SpatialMap, InfoCard } from '@bloomsparkagency/core';

export function MapWithInspector() {
  return (
    <SpatialMap buildings={buildings}>
      {/* Listens to selectionSlice changes and displays rich charts on click */}
      <InfoCard
        showCharts={true}
        allowEditing={false}
        onClose={() => console.log('Panel closed')}
      />
    </SpatialMap>
  );
}

• Dynamic Recharts Integration: On-panel charts are rendered dynamically using Recharts to visualize environmental histories (e.g. 24-hour temperature trends) or occupancy statistics (using people-counter telemetry).
• Asset-Specific Templating: Renders different panel layouts based on the selected feature's IMDF category (e.g. office desks display reservation buttons, while hospital crash carts show battery status gauges).

---

🗺️ Legends & Scale Controls (F23)

1. <Legend />

Renders a floating styling legend, reading configurations directly from registered data layers (PointDataLayer, PolygonDataLayer, etc.):

import { Legend } from '@bloomsparkagency/ui';

// Automatically renders gradient color maps for temperature and categoric listings
<Legend position="bottom-right" />

2. <ScaleControl />

Renders an auto-updating spatial scale bar:

import { ScaleControl } from '@bloomsparkagency/ui';

// Displays distances in metric or imperial based on camera pitch and zoom
<ScaleControl unit="metric" position="bottom-left" />

---

💾 Screenshot Exports & URL State Sharing (F24)

1. Multi-DPI PNG Screenshots

Developers can export high-fidelity snapshots of the WebGL canvas at custom print resolutions:

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

export function ExportButton() {
  const { map } = useSpatialMap();

  const handleScreenshot = async (dpiMultiplier: 1 | 2 | 4) => {
    if (!map) return;

    // Temporarily trigger high-DPI scaling on the WebGL context
    const originalWidth = map.getCanvas().width;
    const originalHeight = map.getCanvas().height;

    // Export raw canvas blob
    map.getCanvas().toBlob((blob) => {
      if (!blob) return;
      const url = URL.createObjectURL(blob);
      const link = document.createElement('a');
      link.download = `spatial-twin-export-${dpiMultiplier}x.png`;
      link.href = url;
      link.click();
    }, 'image/png');
  };

  return <button onClick={() => handleScreenshot(2)}>Export 2x DPI PNG</button>;
}

2. GeoJSON Data Export

Any active developer data layer can be exported on the fly as a standard GeoJSON file:

• Allows developers to download drawn rooms, walls, or IoT points as standard geometries.
• Enables easy geo-exporting from inside the editor (exportIMDF).

3. URL State Encoding

To support direct sharing, application views can encode their parameters directly into the browser URL's hash fragment:

https://yourdomain.com/map#vs=longitude,latitude,zoom,pitch,bearing&floor=floor-uuid&selection=unit-uuid

When a user opens a shared link:

1. ViewState Hydration: The Zustand store decodes the URL hash on mount.
2. Floor Selection: Instantly sets the active building and floor level.
3. Visual Focusing: Anchors selection highlights onto the referenced asset, ensuring developers can share exact coordinate targets.